/* ==========================================================================
   HOME PAGE — Flexible Content Design
   Scope: every rule is namespaced under the page wrapper `.home-page`
   (see <main id="main-content" class="home-page"> in home-page.php)
   Sections: 01 Hero · 02 Trust Stats · 03 Services Accordion · 04 Features
   Grid · 05 Certifications · 06 Case Studies · 07 Industries Accordion ·
   08 Commitment Checklist · 09 Testimonials · 10 CTA Banner · 11 Blog ·
   12 Contact
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500&family=Playfair+Display:ital@1&display=swap');

/* --------------------------------------------------------------------------
   00. Design Tokens & Base
   -------------------------------------------------------------------------- */
.home-page {
    --color-primary: #FB6617;
    --color-primary-dark: #D9550F;
    --color-dark: #14151A;
    --color-dark-soft: #1E2027;
    --color-heading: #14211C;
    --color-body: #6C6E78;
    --color-body-invert: #EBEBEB;
    --color-border: #E9E5E0;
    --color-border-dark: rgba(255, 255, 255, .14);
    --color-cream: #FBEFE3;
    --color-cream-soft: #FCF7F2;
    --color-white: #FFFFFF;
    --font-heading: 'Poppins', sans-serif;
    --container-width: 1200px;
    --section-pad-y: 100px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --radius-pill: 50px;
    --shadow-soft: 0 20px 50px rgba(20, 21, 26, .08);

    display: block;

    color: var(--color-body);
    font-size: 16px;
    line-height: 1.6;
    background: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1440px;
}

.home-page *,
.home-page *::before,
.home-page *::after {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.home-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

.home-page a {
    text-decoration: none;
    color: inherit;
}

/* No browser default focus outline on any button, sitewide — applies once
   here instead of repeating `outline: none` on every button selector
   individually (accordion triggers, etc.). */
.home-page button {
    outline: none;
}

.home-page ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-page section {
    position: relative;
}

/* --------------------------------------------------------------------------
   00a. Scroll Reveal — shared fade-up-on-scroll used across every section
   -------------------------------------------------------------------------- */
/* Applied to: every section's intro block (via theme_home_render_intro()) plus
   the static, non-carousel repeater items (trust stats, services accordion,
   feature cards, industries accordion, commitment checklist). Carousel-driven
   items (certifications/case-studies/testimonials/blog sliders) intentionally
   skip this — Owl/Slick manage their own clones and visibility, and animating
   opacity/transform on individual slides would fight that. A shared
   IntersectionObserver (see the inline script) toggles `.is-visible` once per
   element the first time it scrolls into view. `transition-delay` set inline
   per item (see home-page.php) staggers grids/lists into a cascade. */
.home-page .js-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.home-page .js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   00b. Shared Section Intro (eyebrow / heading / description)
   -------------------------------------------------------------------------- */
/* Pill badge with a soft peach fill and a gradient ring around it. `border-image`
   can't be used here since it ignores `border-radius` (it would render the
   gradient as a hard rectangle instead of following the pill shape) — the
   padding-box/border-box double-background trick below achieves the same
   gradient-border look while keeping the shape properly rounded. */
.home-page .home-section-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(111.61deg, rgba(253, 237, 229, 0) -24.92%, #FDEDE5 148.96%) padding-box,
        linear-gradient(221.26deg,
            rgba(255, 138, 61, 0) 14.85%,
            #FF8A3D 306.12%) border-box;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 18px;
}

.home-page .home-section-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--color-primary);
    transform: none;
}

/* Fixed at 44px (not fluid/clamp) so it holds that size through desktop
   AND laptop widths — see the tablet/mobile step-downs in the "14.
   RESPONSIVE" section at the bottom of this file. */
.home-page .home-section-heading {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--color-heading);
    padding-bottom: 24px;
    letter-spacing: -.01em;
}

.home-page .home-section-description p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.75;
    color: #1A1A1A;
}

.home-page .home-section-description p:last-child {
    margin-bottom: 0;
}

.home-page .home-button-icon {
    display: inline-flex;
    margin-left: 8px;
    transition: transform .25s ease;
}

.home-page .home-button-icon svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   01. HERO SECTION
   -------------------------------------------------------------------------- */
.home-page .hero-section {
    background-color: var(--color-dark);
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(168.56deg, rgba(0, 0, 0, 0.5) 32.71%, rgba(0, 0, 0, 0) 82.23%),
        var(--hero-background-image, none);
    background-size: cover;
    background-position: center;
    padding: 130px 0 48px;
    color: var(--color-white);
    overflow: hidden;
    border-radius: 0 0 40px 40px;
}

.home-page .hero-section-wrapper {
    position: relative;
    z-index: 2;
}

.home-page .hero-section-content-row {
    order: 1;
    justify-content: center;
}

.home-page .hero-section-content {
    text-align: center;
}

/* `` below is deliberate: on the live theme these elements were being
   forced full-width / block-level by a more specific (or ) global
   rule — likely a heading text-split/reveal style applied to all h1 > span —
   which collapsed the pill badge into a full-width bar and put every heading
   span on its own line. These overrides guarantee the intended inline pill /
   inline-text layout regardless of what else is loaded on the page. */
/* Gradient background + gradient border on a pill shape — same
   padding-box/border-box double-background technique as
   .home-section-eyebrow above, and for the same reason: `border-image`
   ignores `border-radius`, so it would square off this pill's rounded
   corners instead of following them. */
.home-page .hero-section-badge {
    position: relative;
    display: inline-flex;
    width: auto;
    max-width: max-content;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: linear-gradient(331.97deg, #FFFFFF -366.05%, rgba(255, 255, 255, 0) 110.86%) padding-box, linear-gradient(128.21deg, rgba(255, 255, 255, 0) 20.61%, #ffffff1a 133.7%) border-box;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 40px;
}

.home-page .hero-section-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: #FFFFFF;
}

.home-page .hero-section-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.18;
    margin: 0 0 22px;
    letter-spacing: -.01em;
}

.home-page .hero-section-heading>* {
    display: inline;
    flex: none;
    width: auto;
    white-space: normal;
}

.home-page .hero-section-heading-before,
.home-page .hero-section-heading-after {
    color: var(--color-white);
}

.home-page .hero-section-heading-highlight {
    font-style: italic;
    font-weight: 600;
    color: var(--color-primary);
}

.home-page .hero-section-description {
    max-width: 924px;
    margin: 0 auto 40px;
}

.home-page .hero-section-description p {
    color: var(--color-body-invert);
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
}

.home-page .hero-section-actions {
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    row-gap: 16px;
}

.home-page .hero-section-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all .25s ease;
    border: 1px solid transparent;
}

.home-page .hero-section-button--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.home-page .hero-section-button--primary:hover {
    background: var(--color-primary-dark);
}

.home-page .hero-section-button--secondary {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-border-dark);
}

.home-page .hero-section-button--secondary:hover {
    background: rgba(255, 255, 255, .08);
}

/* --- hero media / feature image + floating stat cards ---
   Ordered last so it anchors to the bottom of the hero section, below the
   copy/buttons and the trusted-by logo strip. */


/* Single continuous row: image, then every stat card, all matching height.
   `.hero-stat-cards` is set to `display: contents` below so its card children
   become direct flex items here alongside the image — one shared `gap`
   instead of a nested row-inside-a-row. */
.home-page .hero-section-media {
    position: relative;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
    /* Lets the stat cards' flip-in rotateX and pointer-tilt rotateX/Y render
       with true foreshortening instead of looking flat — see the cards'
       own transforms further down. Set here (not on `.hero-stat-cards`)
       because that grouping element is `display: contents` and generates
       no box for `perspective` to apply to; declared on this real flex
       container instead, which sits as the cards' effective parent once
       `display: contents` flattens them into this row. */
    perspective: 1200px;
}

.home-page .hero-feature-visual {
    position: relative;
    width: 100%;
    max-width: 325px;
    min-height: 338px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.home-page .hero-feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-page .hero-feature-badge {
    position: absolute;
    top: 114px;
    left: 20%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0px 14px 24.2px 0px #00000080;

    padding: 8px 16px 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-heading);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    /* Gentle infinite float — `ease-in-out` on both halves of the loop (not
       just one) is what keeps it smooth: it decelerates into each end and
       accelerates back out, so the direction change at the top/bottom of
       the bob never reads as a sudden stop-and-reverse. */
    animation: heroFeatureBadgeFloat 3.4s ease-in-out infinite;
}

@keyframes heroFeatureBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.home-page .hero-feature-badge::before {
    content: '';
    width: 12px;
    height: 12px;
    flex: none;
    background: var(--color-primary);
    transform: rotate(45deg);
}


.home-page .hero-stat-cards {
    display: contents;
}

.home-page .hero-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 0%;
    width: auto;
    box-sizing: border-box;
    gap: 4px;
    padding: 16px;
    background: #FFFFFF1A;
    color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    min-width: 200px;
    overflow: hidden;
}

/* Ported from the approved "3D Parallax Tilt" reference (flip-in → sweep →
   pointer tilt/glare → count-up), adapted to this card's existing markup
   rather than the reference's own (which wraps every card in an extra tile
   element to run an idle "breathe" float alongside the tilt). That wrapper
   is intentionally left out here: several existing type-modifier rules
   below (`--number_stat`, `--rating_badge`, `--top_rated`, `--region_stat`)
   set `display: flex`/`align-items`/`justify-content`/`height` directly on
   `.hero-stat-card` itself to lay out each card's own content — adding a
   wrapper would mean retargeting all of those without being able to see
   the result, for the sake of a subtle idle-motion embellishment. Flip-in,
   sweep, tilt, glare, and count-up (the actual "3D Parallax Tilt" effect)
   are all kept.
   `.hero-stat-card` starts `opacity: 0` as a plain (non-animation) rule —
   not via the keyframes' 0% state — precisely so it stays invisible during
   its own `animation-delay`; if the animation carried it instead, the card
   would flash fully visible for that delay before jumping to the 0% state
   the instant the animation actually starts. Per-card stagger comes from
   `--d`, a CSS custom property set inline per card in front-page.php
   (`style="--d: …s"`), rather than the previous per-index `--1`/`--2`…
   classes — matching the reference's own approach and scaling to any
   number of cards without new CSS per index. */
.home-page .hero-stat-card {
    opacity: 0;
    animation: heroStatCardFlipIn .9s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--d, 0s);
    backface-visibility: hidden;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1);
}

/* Added by JS on the flip-in's `animationend` (with a window `load`
   fallback for prefers-reduced-motion, where the animation never runs and
   so never fires that event — see the inline script). Dropping the
   animation entirely at that point — not just letting it finish — matters:
   a completed-but-still-declared CSS animation continues to win the
   `transform` property over the inline style the pointer-tilt handler sets
   on every pointermove, which would make tilt silently do nothing. */
.home-page .hero-stat-card.ready {
    opacity: 1;
    animation: none;
}

@keyframes heroStatCardFlipIn {
    0% {
        opacity: 0;
        transform: rotateX(-38deg) translateY(40px) scale(.85);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg) translateY(0) scale(1);
    }
}

/* Pointer-tilt (JS sets this inline on pointermove, once `.ready`) gets a
   deeper shadow to sell the card lifting toward the cursor. */
.home-page .hero-stat-card.is-tilting {
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}

/* Sweep: a light diagonal glint that passes once over each card right
   after its own flip finishes (delay = that card's own `--d` + a short
   pause). `.hero-stat-card > *` (below) already lifts real content to
   z-index: 1; z-index: 6 here — matching the reference's own layering —
   keeps the glint passing *over* the text/icon, and `.hero-stat-card`'s
   `overflow: hidden` clips it to the card's rounded corners as it travels. */
.home-page .hero-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: heroStatCardSweep 1.1s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--d, 0s) + .55s);
}

@keyframes heroStatCardSweep {
    to {
        transform: translateX(120%);
    }
}

/* Glare: follows the cursor during pointer-tilt via `--mx`/`--my`, two
   more custom properties the same JS sets inline on pointermove — a
   pseudo-element inherits custom properties from its originating element,
   so no extra markup is needed for this either. Only shown while tilting
   (`.is-tilting`); the 50%/0% fallback keeps it inert (top-center, that
   `.hero-stat-card > *`'s opacity: 0 hides it) before the first pointer
   position lands. */
.home-page .hero-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .22), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.home-page .hero-stat-card.is-tilting::after {
    opacity: 1;
}

.home-page .hero-stat-card>* {
    position: relative;
    z-index: 1;
}

.home-page .hero-stat-card-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    left: auto;
    margin: 0;
    object-fit: contain;
    opacity: .95;
    z-index: 0;
    pointer-events: none;
}

.home-page .hero-stat-card-value {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
}

.home-page .hero-stat-card-label {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 500;
    line-height: 1.4;
}

.home-page .hero-stat-card--region_stat .hero-stat-card-label {
    font-size: 16px;
    color: #464646;
    font-weight: 400;
}

.home-page .hero-stat-card-sublabel {
    font-size: 12px;
    color: var(--color-body-invert);
}

.home-page .home-rating-stars {
    color: var(--color-primary);
    letter-spacing: 2px;
    font-size: 14px;
}

.home-page .hero-stat-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.home-page .hero-stat-card-tag {
    font-size: 16px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #1A1A1A;
    color: var(--color-white);
}

/* Plain number card (99+) — the one card that stays a solid, opaque surface rather
   than the frosted-glass treatment used for the rest. */
.home-page .hero-stat-card--number_stat {
    background: var(--color-white);
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--color-heading);
    max-height: 258px;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-self: center;
    margin-top: auto;
}

.home-page .hero-stat-card--rating_badge {
    height: 211px;
    margin-top: auto;
    justify-content: flex-start;
}

.home-page .hero-stat-card--number_stat .hero-stat-card-value {
    color: #1A1A1A;
    font-size: 50px;
}

.home-page .hero-stat-card--number_stat .hero-stat-card-label {
    font-size: 20px;
    color: #6F7781;
    font-weight: 400;
}

.home-page .hero-stat-card--number_stat .hero-stat-card-sublabel {
    color: #6F7781;
}

.home-page .hero-stat-card--number_stat .hero-stat-card-icon {
    opacity: .9;
}

/* The region stat's headline number reads in the brand accent color against the glass card. */
.home-page .hero-stat-card--region_stat .hero-stat-card-value {
    color: var(--color-primary);
    font-size: 50px;
}


.home-page .hero-stat-cards .hero-stat-card.hero-stat-card--top_rated {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    padding: 18px 20px;
    line-height: 1.4;
    height: 258px;
    margin-top: auto;
}

.home-page .hero-stat-card.hero-stat-card--region_stat {
    background: #ffff;
    justify-content: flex-start;
}

.home-page .hero-stat-cards .hero-stat-card.hero-stat-card--top_rated .hero-stat-card-value,
.home-page .hero-stat-cards .hero-stat-card.hero-stat-card--top_rated .hero-stat-card-label,
.home-page .hero-stat-cards .hero-stat-card.hero-stat-card--top_rated .hero-stat-card-sublabel {
    display: block;
    width: 100%;
    float: none;
}

/* Card--1 ("99+") is a plain white row item like every other card now — no
   overlap positioning needed, it sits in the row between the image and the
   glass cards, matching the reference. */

.home-page .hero-trusted-logos-row {
    order: 2;
    width: 100%;
}

/* Owl Carousel drives the auto-scroll/loop behavior via JS (see the
   .js-hero-trusted-logos init in home-page.php); this just styles the
   viewport chrome and the item/image content Owl renders inside it. */
.home-page .hero-trusted-logos {
    padding: 44px 0 22px;
}

.home-page .hero-trusted-logos.owl-carousel {
    display: block;
}

.home-page .hero-trusted-logos .owl-stage {
    display: flex;
    align-items: center;
}

.home-page .hero-trusted-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.home-page .hero-trusted-logo-image {
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .7;
    transition: opacity .25s ease;
    margin: 0 auto;
}

.home-page .hero-trusted-logo-image:hover {
    opacity: 1;
}

/* Owl Carousel is invisible-by-default (opacity:0) until it finishes
   initializing and adds `.owl-loaded` — guarantee the logos are visible
   even if the carousel script fails to load or init for any reason. */
.home-page .hero-trusted-logos.owl-carousel:not(.owl-loaded) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 46px;
}

.home-page .hero-trusted-logos.owl-carousel:not(.owl-loaded) .hero-trusted-logo {
    flex: none;
}

/* --------------------------------------------------------------------------
   02. TRUST / STATS SECTION
   -------------------------------------------------------------------------- */
.home-page .trust-stats-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-white);
}

.home-page .trust-stats-intro-row {
    align-items: flex-end;
    margin-bottom: 56px;
}

.home-page .trust-stats-intro .home-section-heading {
    margin-bottom: 0;
    padding-bottom: 0;
}

.home-page .trust-stats-description p {
    margin-left: auto;
    font-size: 16px;
    line-height: 1.8;
    color: #1A1A1A;
    font-weight: 400;
    max-width: 460px;
}

.home-page .trust-stats-list {
    padding-top: 44px;
}

.home-page .trust-stat-item {
    border-left: 1px solid #000000;
    text-align: center;
}

.home-page .trust-stat-item:first-child {
    border-left: none;
}

.home-page .trust-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.4vw, 50px);
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1;
    margin-bottom: 10px;
}

.home-page .trust-stat-suffix {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 38px;
}

.home-page .trust-stat-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3A473F;
}

/* --------------------------------------------------------------------------
   03. SERVICES ACCORDION SECTION
   -------------------------------------------------------------------------- */
.home-page .services-accordion-section {
    padding: var(--section-pad-y) 0;
    padding-top: 0;
    background: linear-gradient(173.21deg, rgba(253, 227, 214, 0) 36.21%, rgba(253, 227, 214, 0.4) 107.44%);

}

.home-page .services-accordion-header-row {
    margin-bottom: 90px;
}

.home-page .services-accordion-list {
    border-top: 1px solid #14211C24;
}

.home-page .services-accordion-item {
    border-bottom: 1px solid #14211C24;
}

.home-page .services-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    background: #ffff;
    font-family: inherit;
    transition: background .25s ease;
}

.home-page .services-accordion-trigger:hover {
    background: var(--color-cream-soft);
}

.home-page .services-accordion-number {
    font-size: 20px;
    font-weight: 600;
    color: #FB6617;
    min-width: 26px;
    font-style: italic;
}

.home-page .services-accordion-title {
    flex: 1;
    font-family: var(--font-heading);
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 500;
    color: var(--color-heading);
    transition: color .25s ease;
}

.home-page .services-accordion-trigger.is-active .services-accordion-title {
    color: var(--color-primary);
}

.home-page .services-accordion-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.home-page .services-accordion-control {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
}

.home-page .services-accordion-control span {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-heading);
    transition: all .25s ease;
}

.home-page .services-accordion-control span:first-child {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}

.home-page .services-accordion-control span:last-child {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.home-page .services-accordion-trigger.is-active .services-accordion-control {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.home-page .services-accordion-trigger.is-active .services-accordion-control span {
    background: var(--color-white);
}

.home-page .services-accordion-trigger.is-active .services-accordion-control span:last-child {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.home-page .services-accordion-panel {
    display: none;
    overflow: hidden;
}

.home-page .services-accordion-panel.is-open {
    display: block;
}

.home-page .services-accordion-panel .row {
    padding: 0 30px 30px;
    align-items: center;
    background: #fff;
}

.home-page .services-accordion-description p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #544E45;
}

.home-page .services-accordion-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 14px;
}

.home-page .services-accordion-footer-row {
    margin-top: 60px;
    align-items: center;
}

.home-page .services-accordion-footer-text p {
    margin: 0;
    font-size: 16px;
    color: #1A1A1A;
    line-height: 1.75;
}

.home-page .services-accordion-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: all .25s ease;
    margin-left: auto;
    max-width: fit-content;
}

.home-page .services-accordion-cta:hover {
    background: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   04. FEATURES GRID SECTION ("Built for Ambitious Brands")
   -------------------------------------------------------------------------- */
.home-page .features-grid-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-primary);
    color: var(--color-white);
}

/* Heading and description sit side by side (not stacked, unlike every other
   section's intro block) — this row bypasses theme_home_render_intro() in
   home-page.php and lays out the two pieces as separate columns instead. */
.home-page .features-grid-heading-row {
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 60px;
}

.home-page .features-grid-description-col {
    margin-top: 0;
}

/* Pill-shaped badge (translucent white capsule + round dot) instead of the plain
   diamond+text eyebrow used on light sections — this is the only section where
   the eyebrow sits directly on the orange brand color. */
.home-page .features-grid-section .home-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16);
    color: var(--color-white);
}

.home-page .features-grid-section .home-section-eyebrow::before {
    border-radius: 50%;
    background: var(--color-white);
    transform: none;
}

.home-page .features-grid-section .home-section-heading {
    color: var(--color-white);
    padding-bottom: 0;
}

.home-page .features-grid-section .home-section-description p {
    color: var(--color-white);
    font-weight: 400;
}


.home-page .features-grid-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}


.home-page .features-grid-list.row {
    margin: 0;
}

.home-page .features-grid-list>[class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    border: none;
}

.home-page .features-grid-item {
    width: 100%;
    padding: 0;
    margin: 0;
}

.home-page .features-grid-card {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-white);
    padding: 34px 28px;
    margin: 0;
    color: var(--color-heading);
}

.home-page .features-grid-number {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.home-page .features-grid-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 12px;
}

.home-page .features-grid-description p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #282828;
}

/* CTA cell sits in the grid's last slot as a warm dark-to-glow gradient,
   content stacked (heading then button) instead of a horizontal split. */
.home-page .features-grid-cta-card {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: linear-gradient(180deg, #3A1906 0%, #A04611 156.71%);

    padding: 30px 33px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.home-page .features-grid-cta-heading {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 30px;
    max-width: 260px;
    line-height: 1.4;
}

.home-page .features-grid-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: all .25s ease;
}

.home-page .features-grid-cta-button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   05. CERTIFICATIONS SECTION
   -------------------------------------------------------------------------- */
.home-page .certifications-section {
    padding: var(--section-pad-y) 0;
    background: linear-gradient(166.5deg, rgba(253, 227, 214, 0) 28.79%, rgba(253, 227, 214, 0.4) 101.5%);

}

.home-page .certifications-slider-row {
    margin-top: 60px;
}

.home-page .certifications-slider {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.home-page .certification-slide {
    width: auto;
}

.home-page .certification-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 34px;
    background: var(--color-white);
    border-radius: 16px;
    min-width: 170px;
    filter: grayscale(1);
    cursor: pointer;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        linear-gradient(143.83deg,
            #FFE4D7 27.44%,
            rgba(254, 246, 242, 0) 80.14%) border-box;

    transition: all .25s ease;
}


.home-page .certifications-slider.slick-initialized {
    display: block;
}

.home-page .certifications-slider .slick-list {
    margin: 0 -10px;
}

.home-page .certifications-slider .slick-track {
    display: flex;
    align-items: center;
}

.home-page .certifications-slider .slick-slide {
    margin: 0 10px;
}

.home-page .certification-card:hover {
    filter: none;
    opacity: 1;
}

.home-page .certification-logo {
    max-height: 40px;
    width: auto;
}

.home-page .certification-name {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   06. CASE STUDIES SECTION
   -------------------------------------------------------------------------- */
.home-page .case-studies-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-white);
}

.home-page .case-studies-header-row {
    align-items: center;
    margin-bottom: 44px;
}

.home-page .case-studies-header-action {
    display: flex;
    justify-content: flex-end;
}

.home-page .case-studies-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: all .25s ease;
}

.home-page .case-studies-view-all:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.home-page .case-studies-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home-page .case-studies-slider.slick-initialized {
    display: block;
}

.home-page .case-studies-slider .slick-list {
    margin: 0 -12px;
}

.home-page .case-studies-slider .slick-track {
    display: flex;
    align-items: stretch;
}

.home-page .case-studies-slider .slick-slide {
    height: auto;
    margin: 0 12px;
}

.home-page .case-studies-slider .slick-slide>div {
    height: 100%;
}

.home-page .case-study-slide {
    width: 100%;
    height: 100%;
}

.home-page .case-study-card {
    height: 100%;
}

.home-page .case-study-image {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-cream-soft);
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
}


.home-page .case-study-image-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.home-page .case-study-card:hover .case-study-image-element {
    transform: scale(1.08);
}

.home-page .case-study-result-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    color: #14211C;
    font-size: 12px;
    font-weight: 600;
}

.home-page .case-study-result-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #3D9C74;
}

.home-page .case-study-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 100px;

    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        linear-gradient(221.26deg,
            rgba(255, 138, 61, 0) 14.85%,
            #FF8A3D 306.12%) border-box;

    color: var(--color-primary);
    margin-bottom: 20px;
}

.home-page .case-study-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0 0 16px;
}

.home-page .case-study-description p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #3A473F;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.home-page .case-study-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary);
}

.home-page .case-study-link:hover {
    color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   07. INDUSTRIES ACCORDION SECTION
   -------------------------------------------------------------------------- */
.home-page .industries-accordion-section {
    padding: var(--section-pad-y) 0;
    padding-top: 0;
    background: var(--color-white);
}

.home-page .industries-accordion-section-wrapper {
    border-top: 1px solid var(--color-border);
    padding: var(--section-pad-y) 0;
    padding-bottom: 0;
}

.home-page .industries-accordion-header-row {
    margin-bottom: 44px;
    align-items: flex-end;
}

.home-page .industries-accordion-side-copy p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.75;
    color: #1A1A1A;
}

.home-page .industries-accordion-layout {
    display: flex;
    gap: 48px;
    align-items: stretch;
    background: #FFF9F6;
    border-radius: var(--radius-lg);
    padding: 30px;
}

.home-page .industries-accordion-list {
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home-page .industries-accordion-item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.home-page .industries-accordion-item:has(.is-active) {
    box-shadow: var(--shadow-soft);
}

.home-page .industries-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.home-page .industries-accordion-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}

.home-page .industries-accordion-control {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F7F4F0;
    transition: background .25s ease;
}

.home-page .industries-accordion-control span {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-heading);
    border-radius: 2px;
    transition: all .25s ease;
}

.home-page .industries-accordion-control span:first-child {
    width: 12px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}

.home-page .industries-accordion-control span:last-child {
    width: 1.5px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.home-page .industries-accordion-trigger.is-active .industries-accordion-control {
    background: var(--color-primary);
}

.home-page .industries-accordion-trigger.is-active .industries-accordion-control span {
    background: var(--color-white);
}

.home-page .industries-accordion-trigger.is-active .industries-accordion-control span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.home-page .industries-accordion-trigger.is-active .industries-accordion-control span:last-child {
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 1;
}

.home-page .industries-accordion-panel {
    display: none;
}

section.inner-page:has(.home-page) {
    padding-top: 0;
}

.home-page .industries-accordion-panel.is-open {
    display: block;
}

.home-page .industries-accordion-panel .row {
    padding: 0 20px 20px;
}

.home-page .industries-accordion-description p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #544E45;
}

.home-page .industries-accordion-image {
    display: none;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.home-page .industries-accordion-image-element {
    width: 100%;
    object-fit: cover;
}

.home-page .industries-accordion-visual {
    flex: 1;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    overflow: hidden;
    min-height: 600px;
    max-height: 600px;
}

/* Crossfades between industries via opacity (see the .is-fading toggle in
   the init script) instead of a jQuery fadeOut/fadeIn — a CSS transition
   doesn't have to touch `display` mid-fade, so there's no layout jump. */
.home-page .industries-accordion-visual-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity .25s ease;
}

.home-page .industries-accordion-visual-image.is-fading {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   08. COMMITMENT CHECKLIST SECTION
   -------------------------------------------------------------------------- */
.home-page .commitment-checklist-section {
    padding: var(--section-pad-y) 0;
    padding-top: 40px;
    background: linear-gradient(166.5deg, rgba(253, 227, 214, 0) 28.79%, rgba(253, 227, 214, 0.4) 101.5%);

}

.home-page .commitment-checklist-section h2 {
    max-width: 360px;
}

.home-page .commitment-checklist-header-row {
    align-items: flex-start;
}

/* Single-column list of divided rows (not a 2-column grid) — each item's
   own border-top draws the line between rows, and :last-child adds one
   more to close the list off at the bottom. */
.home-page .commitment-checklist-list {
    display: flex;
    flex-direction: column;
}

.home-page .commitment-checklist-item {
    display: flex;
    gap: 38px;
    align-items: flex-start;
    padding: 26px 0;
    border-top: 1px solid #14211C24;
}

.home-page .commitment-checklist-item:last-child {
    border-bottom: 1px solid #14211C24;
}

/* Outlined, not filled — a thin brand-color ring around a brand-color
   check mark, rather than a solid brand-color disc. */
.home-page .commitment-checklist-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.home-page .commitment-checklist-icon-image {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.home-page .commitment-checklist-icon-check {
    width: 14px;
    height: 14px;
    flex: none;
}

.home-page .commitment-checklist-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 4px;
}

.home-page .commitment-checklist-description p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #3A473F;
}

/* --------------------------------------------------------------------------
   09. TESTIMONIALS SECTION
   -------------------------------------------------------------------------- */
.home-page .testimonials-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-white);
}

.home-page .testimonials-header-row {
    margin-bottom: 20px;
    justify-content: space-between;
}


.home-page .testimonials-columns {
    display: flex;
    gap: 24px;
}

.home-page .testimonials-column {
    flex: 1 1 0%;
    height: 620px;
    padding: 0 3px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.home-page .testimonials-column-inner {
    height: 100%;
}

.home-page .testimonials-column-inner .testimonial-card {
    margin-bottom: 20px;
}

.home-page .testimonial-card {
    position: relative;
    border: 1px solid #F6D4C2;
    background: var(--color-white);
    box-shadow: 1px 12px 22.9px 0px #FB66170F;
    border-radius: var(--radius-md);
    padding: 30px 28px;
    width: 100%;
    box-sizing: border-box;
    flex: none;
    cursor: pointer;
    position: relative;
}

.home-page .testimonial-card::after {
    content: '';
    position: absolute;
    top: -18px;
    right: 14px;

    width: 33px;
    height: 43px;

    background-color: var(--color-primary);

    -webkit-mask: url('https://elsnertechnstg.wpengine.com/wp-content/uploads/2026/08/Vector.png') center / contain no-repeat;
    mask: url('https://elsnertechnstg.wpengine.com/wp-content/uploads/2026/08/Vector.png') center / contain no-repeat;

    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.home-page .testimonial-quote {
    position: relative;
    z-index: 1;
    margin: 14px 0 30px;
    font-size: 14px;
    line-height: 24px;
    color: #363636;
}

.home-page .testimonial-quote p {
    margin: 0;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    color: #363636;
}

.home-page .testimonial-author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-page .testimonial-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.home-page .testimonial-author-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
}

.home-page .testimonial-author-role {
    display: block;
    font-size: 14px;
    color: #363636;
}

.home-page .testimonials-mobile-grid {
    display: none;
}

/* --------------------------------------------------------------------------
   10. CTA BANNER SECTION
   -------------------------------------------------------------------------- */


.home-page .cta-banner-section-wrapper {
    background: var(--cta-banner-background, var(--color-primary));
    border-radius: var(--radius-lg);
    padding: 46px 60px;
    color: var(--color-white);
    overflow: hidden;
    position: relative;
}

.home-page .cta-banner-content-row {
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Pill badge (translucent white capsule + round dot) matching the eyebrow
   style used on other dark/brand-colored sections (e.g. the features grid). */
.home-page .cta-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 20px;
}

.home-page .cta-banner-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-white);
    flex: none;
}

.home-page .cta-banner-heading {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 14px;
}

.home-page .cta-banner-description p {
    margin: 0 0 40px;
    color: var(--color-body-invert);
    font-size: 16px;
    line-height: 26px;
}

.home-page .cta-banner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 500;
    font-size: 14px;
    transition: all .25s ease;
}

.home-page .cta-banner-button:hover {
    border-radius: var(--radius-pill);
    border: 1px solid #fff;
    background: var(--color-primary);
    color: var(--color-white);
}

.home-page .cta-banner-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-page .cta-banner-decoration-image {
    max-width: 100%;
    ;

}

/* --------------------------------------------------------------------------
   11. BLOG / INSIGHTS SECTION
   -------------------------------------------------------------------------- */
.home-page .blog-insights-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-white);
}

.home-page .blog-insights-header-row {
    align-items: center;
    margin-bottom: 44px;
}

.home-page .blog-insights-header-action {
    display: flex;
    justify-content: flex-end;
}

.home-page .blog-insights-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: all .25s ease;
}

.home-page .blog-insights-cta:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.home-page .blog-insights-slider {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


.home-page .blog-insights-slider.slick-initialized {
    display: block;
}

.home-page .blog-insights-slider .slick-list {
    margin: 0 -12px;
}

.home-page .blog-insights-slider .slick-track {
    display: flex;
    align-items: stretch;
}

.home-page .blog-insights-slider .slick-slide {
    height: auto;
    margin: 0 12px;
}

.home-page .blog-insights-slider .slick-slide>div {
    height: 100%;
}

.home-page .blog-insight-slide {
    width: 100%;
    height: 100%;
}

.home-page .blog-insight-card {
    height: 100%;
}

.home-page .blog-insight-image {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-cream-soft);
    margin-bottom: 20px;
}

.home-page .blog-insight-image-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page .blog-insight-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--color-body);
}

.home-page .blog-insight-author {
    font-weight: 500;
    color: var(--color-body);
}

.home-page .blog-insight-date {
    color: var(--color-body);
}

.home-page .blog-insight-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px;
    color: var(--color-heading);
}

.home-page .blog-insight-excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-body);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.home-page .blog-insight-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary);
}

.home-page .blog-insights-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--color-body);
}

/* --------------------------------------------------------------------------
   12. CONTACT SECTION
   -------------------------------------------------------------------------- */
.home-page .contact-section {
    padding: var(--section-pad-y) 0;
    background: var(--color-white);
}

.home-page .contact-header-row {
    margin-bottom: 44px;
}


.home-page .contact-intro .home-section-description {
    max-width: 520px;
}

.home-page .contact-content-row {
    align-items: stretch;
}

.home-page .contact-image {
    position: relative;
    height: 606px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.home-page .contact-image-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page .contact-image--placeholder {
    height: 508px;
    background: var(--color-cream-soft);
}

.home-page .contact-form-card {
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
}

/* `!important` here (and on the submit button below) is a deliberate,
   narrowly-scoped guard: `class:form-btn` on the CF7 [submit] tag matches
   an existing sitewide `.form-btn` utility class, and its rules were
   winning over the equivalent-or-higher-specificity selectors here —
   almost certainly because they're declared later in the global
   stylesheet's source order. Rather than chase that file, force the
   handful of properties this design actually depends on (size, weight,
   casing, padding). */
.home-page .contact-form-title {
    font-family: var(--font-heading);
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--color-heading);
    margin: 0 0 4px;
}

.home-page .contact-form-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #1A1A1A;
    margin: 0 0 24px;
}

/* Contact Form 7 renders its own field markup from the shortcode, but the
   Form tab's template (CF7 admin → this form) wraps each field in a
   theme-authored `.form-row` div with its own `<label>`, rather than
   relying on CF7's auto-generated `<p>`/`.wpcf7-form-control-wrap`
   markup — see contact-form-cf7-template.txt for the template to paste in.
   That keeps this styling straightforward: `.form-row` IS the grid cell. */
.home-page .contact-form-card .wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 24px;
}

.home-page .contact-form-card .form-row {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
}

.home-page .contact-form-card .form-row p {
    margin: 0;
    width: 100%;
    position: relative;;
}

.home-page .contact-form-card .form-row--full {
    flex-basis: 100%;
}

.home-page .contact-form-card .form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #868686;
}

.home-page .contact-form-card .wpcf7-form input[type="text"],
.home-page .contact-form-card .wpcf7-form input[type="email"],
.home-page .contact-form-card .wpcf7-form input[type="tel"],
.home-page .contact-form-card .wpcf7-form input[type="number"],
.home-page .contact-form-card .wpcf7-form input[type="url"],
.home-page .contact-form-card .wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    height: 46px;
    border: 1px solid #E5E5E5;
    border-radius: var(--radius-sm);
    background: #F9F6F6;
    color: var(--color-heading);
    font-size: 14px;
    margin-bottom: 0;
    font-family: inherit;
    transition: border-color .25s ease, background .25s ease;
}


.home-page .contact-section-wrapper {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 24px;
    background: linear-gradient(
185deg, rgba(188, 188, 188, 0.18) 0%, rgba(188, 188, 188, 0.04) 55%, rgba(188, 188, 188, 0) 100%) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(169, 169, 169, 0) 100%) border-box;
    padding: 60px;
    transition: all 0.25s ease;
}
.home-page .contact-form-card .wpcf7-form textarea {

    height: 120px;
    min-height: 120px;
    resize: vertical;
}
.home-page .contact-form-card .wpcf7-spinner{
    position: absolute;
}
.home-page .contact-form-card .wpcf7-form input::placeholder,
.home-page .contact-form-card .wpcf7-form textarea::placeholder {
    color: #8B8B8B;
}

.home-page .contact-form-card .wpcf7-form input:focus,
.home-page .contact-form-card .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
}

.home-page .contact-form-card .form-row--full p  input[type="submit"]{
    display: block !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
    padding: 18px 30px;
    border-radius: var(--radius-pill);
    background: var(--color-primary)!important;
    transition: background .25s ease;
    font-size: 14px;
    position: relative;
}
.home-page .contact-form-card .form-row--full p  input[type="submit"]:hover {
    background: var(--color-primary-dark) !important;
    color: #fff !important;
}
.home-page .contact-form-card .form-row--full p::after {
    content: '→';
    color: var(--color-white);
    font-size: 21px;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 45%;
    right: 33%;
    transform: translateY(-50%);
}


.home-page .contact-form-card .wpcf7-response-output {
    flex-basis: 100%;
    margin: 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   13. Empty State
   -------------------------------------------------------------------------- */
.home-page .home-page-empty {
    padding: 120px 0;
    text-align: center;
    color: var(--color-body);
}

.services-accordion-description {
    margin-bottom: 10px;
}


@media (prefers-reduced-motion: reduce) {

    /* --- 00a. Scroll Reveal — shared fade-up-on-scroll used across every section --- */
    .home-page .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* --- 01. HERO SECTION --- */
    /* `!important` on `transform` here is deliberate: the pointer-tilt
       handler in front-page.php sets `transform` inline on every
       pointermove, and a plain (non-`!important`) rule here can't win
       against that inline style — `!important` is the one thing that can. */
    .home-page .hero-stat-card {
        animation: none;
        opacity: 1;
        transform: none !important;
    }

    .home-page .hero-stat-card::before,
    .home-page .hero-stat-card::after {
        content: none;
    }

    .home-page .hero-feature-badge {
        animation: none;
        transform: none;
    }

    /* --- 06. CASE STUDIES SECTION --- */
    .home-page .case-study-image-element {
        transition: none;
    }

    /* --- 07. INDUSTRIES ACCORDION SECTION --- */
    .home-page .industries-accordion-visual-image {
        transition: none;
    }

}

@media (max-width: 1440px) {
    .home-page .hero-feature-visual {
        max-width: 250px;

    }
.home-page .contact-form-card .form-row--full p::after {
    top: 45%;
    right: 28%;
    transform: translateY(-50%);
}
}
@media (max-width: 1199px) {
.home-page .contact-form-card .form-row--full p::after {
    top: 45%;
       right: 22%;

    transform: translateY(-50%);
}
}
@media (max-width: 1180px) {
    .home-page .hero-section-actions {
        margin-bottom: 20px;
    }

    .home-page .cta-banner-heading,
    .home-page .home-section-heading {
        font-size: 34px;
    }

    .home-page .commitment-checklist-item {
        gap: 20px;
    }

    .home-page .hero-stat-card--number_stat .hero-stat-card-label {
        font-size: 18px;
    }

    .home-page .hero-stat-card--number_stat .hero-stat-card-value,
    .home-page .hero-stat-card--region_stat .hero-stat-card-value {
        font-size: 40px;
    }

    .home-page .hero-stat-card.hero-stat-card--region_stat .hero-stat-card-icon {
        max-width: 50%;
    }

    .home-page .hero-feature-visual {
        max-width: 280px;
    }
}

@media (max-width: 991px) {
    .home-page .hero-feature-badge {
        left: 30%;
    }
.home-page .contact-form-card .form-row--full p::after {
    top: 45%;
         right: 34%;

    transform: translateY(-50%);
}
    .home-page .home-section-description p:last-child {
        margin-bottom: 20px;
    }

    .home-page .trust-stats-intro .home-section-heading {
        padding-bottom: 24px;
    }

    .home-page .services-accordion-footer-text {
        margin-bottom: 20px;
    }

    .home-page .features-grid-card {
        padding: 24px;
    }

    .home-page .case-studies-header-action {
        margin-top: 20px;
    }

    .home-page .services-accordion-header-row {
        margin-bottom: 60px;
    }

    .home-page .services-accordion-trigger {
        padding: 24px 30px;
    }

    .home-page .services-accordion-footer-row {
        margin-top: 30px;

    }

    .home-page .trust-stats-intro-row {
        margin-bottom: 30px;
    }

    .home-page .trust-stats-description p {
        margin-left: 0;
    }

    .home-page .cta-banner-decoration {
        display: none;
    }


    .home-page .features-grid-description-col {
        margin-top: 16px;
    }

    /* --- 06. CASE STUDIES SECTION --- */
    .home-page .case-studies-slider {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- 07. INDUSTRIES ACCORDION SECTION --- */
    .home-page .industries-accordion-layout {
        flex-direction: column;
        padding: 20px;
    }

    .home-page .industries-accordion-list {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .home-page .industries-accordion-visual {
        display: none;
    }

    .home-page .industries-accordion-image {
        display: block;
        margin-top: 16px;
    }

    .home-page .hero-stat-card .hero-stat-card-icon {
        max-width: 80%;
    }

    /* --- 11. BLOG / INSIGHTS SECTION --- */
    .home-page .blog-insights-slider {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- 12. CONTACT SECTION --- */
    .home-page .contact-section-wrapper {
        padding: 32px;
    }

    .home-page .contact-image {
        height: 360px;
        margin-bottom: 24px;
    }

    .home-page .contact-image--placeholder {
        height: 360px;
    }

    .home-page .contact-form-card {
        padding: 28px;
    }

    /* --- 13. Responsive — global section spacing --- */
    .home-page {
        --section-pad-y: 72px;
    }

    .home-page .hero-stat-card--rating_badge {
        height: 186px;
    }

    .home-page .trust-stat-label {
        font-size: 14px;
    }
}

@media (max-width: 767px) {

    /* --- 01. HERO SECTION --- */
    /* The row wraps: the image claims its own first line, then every stat
       card wraps below it, 2-up. */
    .home-page .hero-section-media {
        flex-wrap: wrap;
    }
.home-page .contact-form-card .form-row--full p::after {
    top: 45%;
       right: 27%;

    transform: translateY(-50%);
}
    .home-page .features-grid-heading-row {
        margin-bottom: 40px;
    }

    .home-page .hero-feature-visual {
        flex-basis: 100%;
        min-width: 0;
    }

    .home-page .hero-stat-card .hero-stat-card-icon,
    .home-page .hero-stat-card.hero-stat-card--region_stat .hero-stat-card-icon {
        max-width: 40%;
    }

    .home-page .hero-feature-badge {
        left: 40%;
    }

    .home-page .hero-stat-card {
        flex: 1 1 calc(50% - 12px);
        min-width: 0;
    }

    /* --- 02. TRUST / STATS SECTION --- */
    .home-page .trust-stat-item {
        border-left: none;
        margin-bottom: 24px;
    }

    /* --- 04. FEATURES GRID SECTION ("Built for Ambitious Brands") --- */
    .home-page .features-grid-list {
        grid-template-columns: 1fr;
    }

    /* --- 08. COMMITMENT CHECKLIST SECTION --- */
    .home-page .commitment-checklist-list {
        margin-top: 30px;
    }

    /* --- 09. TESTIMONIALS SECTION --- */
    .home-page .testimonials-header-row {
        flex-direction: column;
    }


    .home-page .testimonials-section .testimonials-columns {
        display: none;
    }

    .home-page .testimonials-section .testimonials-mobile-grid {
        display: block;
    }

    .home-page .testimonials-section .testimonials-mobile-grid .testimonial-card {
        margin: 0 8px;
    }

    .home-page .testimonials-section .testimonials-mobile-grid .slick-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding: 0;
        list-style: none;
    }

    .home-page .testimonials-section .testimonials-mobile-grid .slick-dots li {
        width: 8px;
        height: 8px;
    }

    .home-page .testimonials-section .testimonials-mobile-grid .slick-dots li button {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 50%;
        background: #f2d9c9;
        font-size: 0;
        line-height: 0;
    }

    .home-page .testimonials-section .testimonials-mobile-grid .slick-dots li button:before {
        content: none;
    }

    .home-page .testimonials-section .testimonials-mobile-grid .slick-dots li.slick-active button {
        background: #f26e27;
    }

    /* --- 10. CTA BANNER SECTION --- */
    .home-page .cta-banner-section-wrapper {
        padding: 40px 32px;
    }

    .home-page .cta-banner-decoration {
        display: none;
    }

    .home-page .hero-stat-card-tag {
        font-size: 14px;
    }

    .home-page .hero-stat-card--number_stat .hero-stat-card-value,
    .home-page .hero-stat-card--region_stat .hero-stat-card-value {
        font-size: 30px;
    }

    .home-page .hero-section {
        border-radius: 0 0 28px 28px;
    }

    /* --- 12. CONTACT SECTION --- */
    .home-page .contact-form-card .form-row {
        flex-basis: 100%;
    }

    .home-page .contact-image {
        height: 320px;
    }

    .home-page .contact-image--placeholder {
        height: 320px;
    }
}

@media (max-width: 576px) {

    /* --- 00b. Shared Section Intro (eyebrow / heading / description) --- */
    .home-page .cta-banner-heading,
    .home-page .home-section-heading {
        font-size: 28px;
        line-height: 36px;
    }

    .home-page .services-accordion-control {
        width: 30px;
        height: 30px;
    }

    .home-page .certifications-slider-row {
        margin-top: 40px;
    }

    .home-page .services-accordion-control span:last-child {
        height: 12px;
    }

    .home-page .services-accordion-control span:first-child {
        width: 12px;
    }

    .home-page .hero-stat-card--number_stat {
        padding: 30px;
    }

    .home-page .hero-stat-card--number_stat .hero-stat-card-label {
        font-size: 14px;
    }

    .home-page .hero-stat-card .hero-stat-card-icon,
    .home-page .hero-stat-card.hero-stat-card--region_stat .hero-stat-card-icon {
        max-width: 100%;
    }

    .home-page .hero-stat-card--region_stat .hero-stat-card-label {
        font-size: 14px;
    }

    .home-page .hero-feature-visual {
        max-width: 100%;
    }

    .home-page .hero-feature-badge {
        left: 10px;
        top: 10px;
        font-size: 14px;
    }

    .home-page .hero-feature-visual {
        min-height: 230px;
    }

    /* --- 01. HERO SECTION --- */
    .home-page .hero-section::after {
        height: 28px;
        border-radius: 28px 28px 0 0;
    }

    /* --- 06. CASE STUDIES SECTION --- */
    .home-page .case-studies-slider {
        grid-template-columns: 1fr;
    }

    /* --- 11. BLOG / INSIGHTS SECTION --- */
    .home-page .blog-insights-slider {
        grid-template-columns: 1fr;
    }

    .home-page .industries-accordion-title {
        font-size: 18px;
    }

    /* --- 13. Responsive — global section spacing --- */
    .home-page {
        --section-pad-y: 56px;
    }

    .home-page .hero-section-actions {
        flex-direction: column;
    }

    .home-page .hero-section-button {
        width: 100%;
    }

    /* --- 12. CONTACT SECTION --- */
    .home-page .contact-section-wrapper {
        padding: 24px;
    }

    .home-page .contact-image {
        height: 220px;
    }

    .home-page .contact-image--placeholder {
        height: 220px;
    }

    .home-page .contact-form-card {
        padding: 30px;
    }

    .home-page .contact-form-card .wpcf7-form {
        gap: 16px;
    }

    .home-page .contact-form-card .wpcf7-form input[type="submit"] {
        width: 100%;
        justify-content: center;
    }
.home-page .contact-form-card .form-row--full p::after {
    top: 45%;
       right: 16%;

    transform: translateY(-50%);
}
}