/* ===== Dual / Triple Heading ===== */
/* =============================================================================
   Foxco Dual Heading Widget — Preset Styles
   Version: 2.1.0
   Loaded as a proper stylesheet on both the Elementor preview iframe
   and the frontend, so presets always render correctly.
============================================================================= */

/* Universal base rule, applies regardless of which preset is active.
   box-sizing:border-box makes the Width control (below, and in the
   widget's own controls file) and the Wrapper Override padding control
   safe to use together -- without this, padding is ADDED on top of a
   set width in the browser's default sizing model, so a custom width
   plus custom padding can push the total rendered size past the
   container/viewport even when the width value alone looked safe. This
   combination (custom width + padding) is confirmed to have caused a
   real horizontal-overflow bug on the live site. */
.foxco-dual-heading {
    box-sizing: border-box;
}

/* === FOXCO CLASSIC === */
.foxco-dual-heading.preset-foxco-classic {
    background: #0d0d0d;
    border: 2px solid #e879f9;
    border-radius: 8px;
    padding: 28px 44px;
    position: relative;
    overflow: hidden;
}
.foxco-dual-heading.preset-foxco-classic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -30%, rgba(232,121,249,.18) 0%, transparent 65%);
    pointer-events: none;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    line-height: 1.1;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-1 strong {
    color: #e85d04;
    font-style: normal;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-2 {
    color: #e85d04;
    font-size: clamp(.9rem, 1.8vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0;
}

/* === NEON PULSE === */
@keyframes foxco-neon-flicker {
    0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }
    20%,24%,55% { opacity: .85; }
}
@keyframes foxco-neon-pulse {
    0%,100% { text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5); }
    50%      { text-shadow: 0 0 4px #00f5ff, 0 0 12px #00f5ff, 0 0 28px rgba(0,245,255,.3); }
}
.foxco-dual-heading.preset-neon-pulse {
    background: #05050f;
    border: 1px solid rgba(0,245,255,.25);
    border-radius: 6px;
    padding: 32px 44px;
    position: relative;
    overflow: hidden;
}
.foxco-dual-heading.preset-neon-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,245,255,.015) 0px,
        rgba(0,245,255,.015) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}
.foxco-dual-heading.preset-neon-pulse .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 8px;
    text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5);
    animation: foxco-neon-pulse 2.4s ease-in-out infinite, foxco-neon-flicker 5s linear infinite;
}
.foxco-dual-heading.preset-neon-pulse .foxco-dual-heading__heading-2 {
    color: #c084fc;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 6px #a855f7, 0 0 18px rgba(168,85,247,.5);
}

/* === GRADIENT FIRE === */
@keyframes foxco-fire-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.foxco-dual-heading.preset-gradient-fire {
    background: #0a0a0a;
    border-left: 4px solid #ff4500;
    padding: 28px 40px;
    border-radius: 0 8px 8px 0;
}
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-1 {
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    line-height: 1.1;
    background: linear-gradient(270deg, #ff6b00, #ff0044, #ff6b00, #ff8800);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: foxco-fire-shift 3.5s ease infinite;
}
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-2 {
    color: rgba(255,255,255,.75);
    font-size: clamp(.9rem, 1.8vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    margin: 0;
}

/* === TECH TERMINAL === */
@keyframes foxco-blink {
    0%,49% { opacity: 1; }
    50%,100% { opacity: 0; }
}
.foxco-dual-heading.preset-tech-terminal {
    background: #080808;
    border: 1px solid rgba(0,255,65,.3);
    border-radius: 4px;
    padding: 36px 40px 28px;
    position: relative;
    font-family: "Courier New", Courier, monospace;
    box-shadow: 0 0 24px rgba(0,255,65,.08), inset 0 0 60px rgba(0,255,65,.03);
}
.foxco-dual-heading.preset-tech-terminal::before {
    content: "● ● ●";
    position: absolute;
    top: 12px;
    left: 16px;
    color: rgba(0,255,65,.4);
    font-size: .55rem;
    letter-spacing: 4px;
    font-family: sans-serif;
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-1 {
    color: #00ff41;
    font-size: clamp(1.2rem, 2.8vw, 2.2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    text-shadow: 0 0 8px rgba(0,255,65,.7), 0 0 20px rgba(0,255,65,.35);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2 {
    color: #00cc33;
    font-size: clamp(.8rem, 1.5vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 0;
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2::before {
    content: "> ";
    color: rgba(0,255,65,.6);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2::after {
    content: "_";
    animation: foxco-blink .8s step-end infinite;
    color: #00ff41;
}

/* === GLASSMORPHISM === */
.foxco-dual-heading.preset-glassmorphism {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    padding: 36px 48px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
.foxco-dual-heading.preset-glassmorphism::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: linear-gradient(105deg, rgba(255,255,255,.12), rgba(255,255,255,0));
    pointer-events: none;
}
.foxco-dual-heading.preset-glassmorphism .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    line-height: 1.2;
}
.foxco-dual-heading.preset-glassmorphism .foxco-dual-heading__heading-2 {
    color: rgba(255,255,255,.7);
    font-size: clamp(.9rem, 1.7vw, 1.15rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    margin: 0;
}

/* === CINEMATIC GOLD === */
.foxco-dual-heading.preset-cinematic-gold {
    background: transparent;
    padding: 24px 0 28px;
    border-bottom: 1px solid rgba(212,175,55,.35);
    position: relative;
}
.foxco-dual-heading.preset-cinematic-gold::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, transparent);
    margin-bottom: 20px;
}
.foxco-dual-heading.preset-cinematic-gold .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 2.8rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 14px;
    line-height: 1.15;
}
.foxco-dual-heading.preset-cinematic-gold .foxco-dual-heading__heading-2 {
    color: #d4af37;
    font-size: clamp(.7rem, 1.2vw, .9rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    margin: 0;
}

/* === CYBER SLASH === */
@keyframes foxco-cyber-scan {
    0%   { top: -2px; }
    100% { top: 100%; }
}
.foxco-dual-heading.preset-cyber-slash {
    background: #0d0d1a;
    border-left: 4px solid #ff6600;
    border-radius: 0 12px 12px 0;
    padding: 30px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 80px rgba(255,102,0,.06), -2px 0 24px rgba(255,102,0,.2);
}
.foxco-dual-heading.preset-cyber-slash::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,102,0,.06) 100%);
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
}
.foxco-dual-heading.preset-cyber-slash::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,102,0,.6), transparent 70%);
    animation: foxco-cyber-scan 3s linear infinite;
    pointer-events: none;
    opacity: .5;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 8px;
    line-height: 1.1;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-1 strong {
    color: #ff6600;
    font-style: normal;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-2 {
    color: #ff6600;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-2::before {
    content: "// ";
    opacity: .6;
}


/* =============================================================================
   QUOTE STYLES — real <span> elements, no pseudo-elements
   .foxco-quote--open / .foxco-quote--close injected directly into the HTML
============================================================================= */

/* Shared base for all quote spans */
.foxco-quote {
    display: inline;
    font-style: normal;
    font-weight: 400;
    line-height: 0;
    vertical-align: -0.3em;
}

/* ── 1. TYPOGRAPHIC ────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-typographic .foxco-quote {
    color: #e85d04;
    font-size: 1.4em;
    font-family: Georgia, serif;
    line-height: 0;
    vertical-align: -0.3em;
}

/* ── 2. OVERSIZED ──────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-oversized {
    /* Contains the oversized quote marks' deliberate negative offsets
       (see .foxco-quote--close.foxco-quote--oversized below) within this
       widget's own box. Several OTHER presets in this file already have
       overflow:hidden for their own unrelated glow/decoration effects,
       which happened to contain this too whenever paired together --
       but Quote Style: Oversized can be combined with ANY preset (or
       none at all), so it needs this guaranteed on its own rather than
       relying on that coincidence. Padding on heading-1 below already
       gives the hanging quote marks room, so this doesn't clip the
       intended visual effect -- it just stops that effect from ever
       reaching past this widget's own edges into the page's layout. */
    overflow: hidden;
}
.foxco-dual-heading.quote-oversized .foxco-dual-heading__heading-1 {
    position: relative;
}
.foxco-dual-heading.quote-oversized .foxco-quote--oversized {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 4.5em;
    line-height: 1;
    color: #e85d04;
    opacity: 0.45;
    pointer-events: none;
    vertical-align: 0;
}
.foxco-dual-heading.quote-oversized .foxco-quote--open.foxco-quote--oversized {
    top: -0.05em;
    left: -0.35em;
}
.foxco-dual-heading.quote-oversized .foxco-quote--close.foxco-quote--oversized {
    bottom: -0.45em;
    right: -0.3em;
}
/* Add padding so the oversized quotes don't overlap text */
.foxco-dual-heading.quote-oversized .foxco-dual-heading__heading-1 {
    padding-left: 0.45em;
    padding-right: 0.45em;
}

/* ── 3. BRACKETS ───────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-brackets .foxco-quote--bracket {
    display: inline-block;
    width: 10px;
    align-self: stretch;
    border-style: solid;
    border-color: #e85d04;
    opacity: 0.8;
    vertical-align: middle;
    line-height: normal;
}
.foxco-dual-heading.quote-brackets .foxco-quote--open.foxco-quote--bracket {
    border-width: 2px 0 2px 2px;
    margin-right: 8px;
}
.foxco-dual-heading.quote-brackets .foxco-quote--close.foxco-quote--bracket {
    border-width: 2px 2px 2px 0;
    margin-left: 8px;
}
/* Make heading inline-flex so bracket spans stretch to full height */
.foxco-dual-heading.quote-brackets .foxco-dual-heading__heading-1 {
    display: inline-flex;
    align-items: stretch;
}

/* ── 4. CHEVRONS ───────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-chevron .foxco-quote {
    color: #e85d04;
    font-size: 0.75em;
    font-weight: 300;
    letter-spacing: -1px;
    vertical-align: 0.1em;
    line-height: 0;
}

/* ── 5. NEON ───────────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-neon .foxco-quote {
    color: #00f5ff;
    font-size: 1.6em;
    font-family: Georgia, serif;
    line-height: 0;
    vertical-align: -0.35em;
    text-shadow: 0 0 8px #00f5ff, 0 0 20px #00f5ff;
}

/* ── 6. ANIMATED ───────────────────────────────────────────────────────────── */
@keyframes foxco-quote-cycle {
    0%   { color: #e85d04; }
    33%  { color: #e879f9; }
    66%  { color: #00f5ff; }
    100% { color: #e85d04; }
}
.foxco-dual-heading.quote-animated .foxco-quote {
    font-family: Georgia, serif;
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.35em;
    animation: foxco-quote-cycle 3s ease-in-out infinite;
}

/* =============================================================================
   NEON QUOTE PRESETS — applied via .neon-{preset} on the wrapper
============================================================================= */

/* Foxco Orange — #df6737 */
.foxco-dual-heading.neon-foxco .foxco-quote {
    color: #df6737 !important;
    text-shadow: 0 0 8px #df6737, 0 0 20px #df6737, 0 0 40px rgba(223,103,55,.5) !important;
}

/* Purple */
.foxco-dual-heading.neon-purple .foxco-quote {
    color: #c084fc !important;
    text-shadow: 0 0 8px #c084fc, 0 0 20px #a855f7, 0 0 40px rgba(168,85,247,.5) !important;
}

/* Matrix Green */
.foxco-dual-heading.neon-green .foxco-quote {
    color: #00ff41 !important;
    text-shadow: 0 0 8px #00ff41, 0 0 20px #00ff41, 0 0 40px rgba(0,255,65,.5) !important;
}

/* Hot Pink */
.foxco-dual-heading.neon-pink .foxco-quote {
    color: #ff0099 !important;
    text-shadow: 0 0 8px #ff0099, 0 0 20px #ff0099, 0 0 40px rgba(255,0,153,.5) !important;
}

/* Gold */
.foxco-dual-heading.neon-gold .foxco-quote {
    color: #ffd700 !important;
    text-shadow: 0 0 8px #ffd700, 0 0 20px #f59e0b, 0 0 40px rgba(255,215,0,.5) !important;
}

/* Cyan (default — also the base .quote-neon style, listed here for explicitness) */
.foxco-dual-heading.neon-cyan .foxco-quote {
    color: #00f5ff !important;
    text-shadow: 0 0 8px #00f5ff, 0 0 20px #00f5ff, 0 0 40px rgba(0,245,255,.5) !important;
}

/* =============================================================================
   NEON PULSE — HEADING TEXT GLOW PRESETS
   Applied via .neon-text-{preset} on the wrapper
============================================================================= */

.foxco-dual-heading.neon-text-foxco .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #df6737, 0 0 21px #df6737, 0 0 42px rgba(223,103,55,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-purple .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #c084fc, 0 0 21px #a855f7, 0 0 42px rgba(168,85,247,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-green .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #00ff41, 0 0 21px #00ff41, 0 0 42px rgba(0,255,65,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-pink .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #ff0099, 0 0 21px #ff0099, 0 0 42px rgba(255,0,153,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-gold .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #ffd700, 0 0 21px #f59e0b, 0 0 42px rgba(255,215,0,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-white .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 4px rgba(255,255,255,.6), 0 0 12px rgba(255,255,255,.3) !important;
    animation: none !important;
}
/* cyan keeps default animation */
.foxco-dual-heading.neon-text-cyan .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5) !important;
}

/* =============================================================================
   INLINE LAYOUT — separator span styling
============================================================================= */
.foxco-inline-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    opacity: 0.7;
    flex-shrink: 0;
    color: #e85d04;
}

/* =============================================================================
   DR GUBERMAN PRESET — blue/gold health & wellness
============================================================================= */
@keyframes foxco-dg-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.foxco-dual-heading.preset-dr-guberman {
    background: linear-gradient(135deg, #296eb5 0%, #1a5490 60%, #296eb5 100%);
    border: 2px solid #f9bf26;
    border-radius: 6px;
    padding: 22px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(240,192,64,.2);
}
/* Subtle top shimmer bar */
.foxco-dual-heading.preset-dr-guberman::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f9bf26, #fffbe8, #f9bf26, transparent);
    background-size: 200% 100%;
    animation: foxco-dg-shimmer 3s linear infinite;
}
/* Faint diagonal texture */
.foxco-dual-heading.preset-dr-guberman::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.015) 0px,
        rgba(255,255,255,.015) 1px,
        transparent 1px,
        transparent 12px
    );
    pointer-events: none;
}
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.4rem, 3.2vw, 2.8rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    line-height: 1.1;
}
/* Gold shimmer on the heading text */
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-1 strong {
    color: #f9bf26;
    font-style: normal;
}
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-2 {
    color: #f9bf26;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

/* =============================================================================
   WRAPPER HORIZONTAL POSITION (prefix_class: foxco-h-pos%s-)
============================================================================= */
.foxco-h-pos-left   .foxco-dual-heading { margin-left: 0;    margin-right: auto; }
.foxco-h-pos-center .foxco-dual-heading { margin-left: auto; margin-right: auto; }
.foxco-h-pos-right  .foxco-dual-heading { margin-left: auto; margin-right: 0;    }

/* Tablet */
@media (max-width: 1024px) {
    .foxco-h-pos-md-left   .foxco-dual-heading { margin-left: 0;    margin-right: auto; }
    .foxco-h-pos-md-center .foxco-dual-heading { margin-left: auto; margin-right: auto; }
    .foxco-h-pos-md-right  .foxco-dual-heading { margin-left: auto; margin-right: 0;    }
}
/* Mobile */
@media (max-width: 767px) {
    .foxco-h-pos-sm-left   .foxco-dual-heading { margin-left: 0;    margin-right: auto; }
    .foxco-h-pos-sm-center .foxco-dual-heading { margin-left: auto; margin-right: auto; }
    .foxco-h-pos-sm-right  .foxco-dual-heading { margin-left: auto; margin-right: 0;    }
}

/* =============================================================================
   INLINE LAYOUT — when heading_direction = column via selector,
   ensure heading children take full width so text-align still works
============================================================================= */
.foxco-dual-heading[style*="flex-direction: column"] .foxco-dual-heading__heading-1,
.foxco-dual-heading[style*="flex-direction: column"] .foxco-dual-heading__heading-2,
.foxco-dual-heading[style*="flex-direction:column"] .foxco-dual-heading__heading-1,
.foxco-dual-heading[style*="flex-direction:column"] .foxco-dual-heading__heading-2 {
    width: 100%;
}

/* =============================================================================
   HEADING 3 — base styles (slightly larger than body, smaller than H2)
============================================================================= */
.foxco-dual-heading__heading-3 {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* =============================================================================
   LIGHTBULB QUOTE STYLE
============================================================================= */
.foxco-quote--bulb {
    display: inline-flex;
    align-items: center;
    color: #df6737;
    text-shadow: 0 0 8px #df6737, 0 0 20px rgba(223,103,55,.5);
    vertical-align: -0.15em;
    line-height: 0;
    margin-right: 0.15em;
}
.foxco-quote--bulb svg {
    width: 0.85em;
    height: 0.85em;
    filter: drop-shadow(0 0 6px #df6737) drop-shadow(0 0 14px rgba(223,103,55,.5));
}

/* =============================================================================
   SIGNAL PRESET
   -- No glow box, no border. One restrained glow on the headline itself
      instead of scattering it across the box border + full heading text +
      a separately-colored subtitle (the "too many competing accents"
      problem the Foxco Classic-style boxes had). The subtitle becomes a
      small tracked-out label with a short accent bar rather than a loud
      colored line -- kept in its normal position below the headline
      (not reordered above it) specifically so it doesn't need its own
      flex container and can never conflict with the widget's existing
      Text Align control.
============================================================================= */
.foxco-dual-heading.preset-signal {
    background: #14141f;
    padding: 40px 0;
    border: none;
    box-shadow: none;
}
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-1 {
    color: #f5f4f2;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 0 14px;
    text-shadow: 0 0 18px rgba(223,103,55,.35), 0 0 46px rgba(223,103,55,.15);
}
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-1 strong {
    color: #df6737;
    font-style: normal;
    text-shadow: none;
}
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #8f8ea3;
    font-size: clamp(.72rem, 1.2vw, .82rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-2::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: #df6737;
    flex-shrink: 0;
}

/* =============================================================================
   DID YOU KNOW? PRESET
============================================================================= */
@keyframes foxco-dyk-pulse {
    0%,100% { box-shadow: 0 0 0 2px #df6737, 0 0 20px rgba(223,103,55,.3), 0 0 40px rgba(223,103,55,.1); }
    50%      { box-shadow: 0 0 0 2px #df6737, 0 0 30px rgba(223,103,55,.5), 0 0 60px rgba(223,103,55,.2); }
}
@keyframes foxco-dyk-text-pulse {
    0%,100% { text-shadow: 0 0 7px #df6737, 0 0 21px rgba(223,103,55,.6), 0 0 42px rgba(223,103,55,.3); }
    50%      { text-shadow: 0 0 4px #df6737, 0 0 14px rgba(223,103,55,.4), 0 0 28px rgba(223,103,55,.2); }
}
@keyframes foxco-dyk-flicker {
    0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }
    20%,24%,55% { opacity: .9; }
}
.foxco-dual-heading.preset-did-you-know {
    background: #080810;
    border: 2px solid #df6737;
    border-radius: 10px;
    padding: 28px 40px;
    position: relative;
    overflow: hidden;
    animation: foxco-dyk-pulse 2.5s ease-in-out infinite;
}
/* Scanline overlay */
.foxco-dual-heading.preset-did-you-know::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(223,103,55,.02) 0px,
        rgba(223,103,55,.02) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}
/* Radial warm glow behind text */
.foxco-dual-heading.preset-did-you-know::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(223,103,55,.08) 0%, transparent 65%);
    pointer-events: none;
}
.foxco-dual-heading.preset-did-you-know .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.6rem, 4vw, 3.4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
    line-height: 1.1;
    text-shadow: 0 0 7px #df6737, 0 0 21px rgba(223,103,55,.6), 0 0 42px rgba(223,103,55,.3);
    animation: foxco-dyk-text-pulse 2.5s ease-in-out infinite, foxco-dyk-flicker 6s linear infinite;
}
/* Lightbulb quote inherits the orange glow automatically */
.foxco-dual-heading.preset-did-you-know .foxco-quote--bulb {
    color: #df6737;
}
.foxco-dual-heading.preset-did-you-know .foxco-dual-heading__heading-2 {
    color: #df6737;
    font-size: clamp(.9rem, 1.8vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0 0 4px;
    line-height: 1.4;
}
.foxco-dual-heading.preset-did-you-know .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.6);
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1.5;
}

/* Did You Know — per-preset neon glow presets for the heading text */
.foxco-dual-heading.preset-did-you-know.neon-text-cyan .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5) !important;
    animation: foxco-neon-pulse 2.4s ease-in-out infinite !important;
}

/* =============================================================
   Entrance Animations (letter-by-letter)
   -------------------------------------------------------------
   JS (assets/js/foxco-dual-heading-animate.js) splits a heading
   into .fdh-letter spans only when it carries a data-fdh-anim
   attribute, then toggles .fdh-anim-play to fire the transition
   below. Nothing here applies to headings without that attribute
   -- they render exactly as they always have.

   All of it is wrapped in a prefers-reduced-motion query: anyone
   with reduced motion enabled never has their heading touched by
   the JS at all, so this block simply never matches for them.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {

    [data-fdh-anim] .fdh-letter {
        display: inline-block;
        will-change: transform, opacity, filter;
    }

    /* Fade Up */
    .fdh-anim-fade-up .fdh-letter {
        opacity: 0;
        transform: translateY(0.6em);
        transition: opacity var(--fdh-duration, 900ms) ease,
                    transform var(--fdh-duration, 900ms) ease;
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-fade-up.fdh-anim-play .fdh-letter {
        opacity: 1;
        transform: translateY(0);
    }

    /* Fade + Scale */
    .fdh-anim-fade-scale .fdh-letter {
        opacity: 0;
        transform: scale(0.4);
        transition: opacity var(--fdh-duration, 900ms) ease,
                    transform var(--fdh-duration, 900ms) cubic-bezier(.2,1.4,.4,1);
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-fade-scale.fdh-anim-play .fdh-letter {
        opacity: 1;
        transform: scale(1);
    }

    /* Stagger Rise -- larger travel distance plus a slight tilt */
    .fdh-anim-stagger-rise .fdh-letter {
        opacity: 0;
        transform: translateY(1.4em) rotate(6deg);
        transition: opacity var(--fdh-duration, 900ms) ease,
                    transform var(--fdh-duration, 900ms) cubic-bezier(.16,1,.3,1);
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-stagger-rise.fdh-anim-play .fdh-letter {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    /* Chaos Scatter -- "letters fly all over the screen and land".
       Each letter's starting offset/rotation is random, set inline
       via JS as --fdh-rx / --fdh-ry / --fdh-rot custom properties. */
    .fdh-anim-chaos-scatter .fdh-letter {
        opacity: 0;
        transform: translate(var(--fdh-rx, 200px), var(--fdh-ry, -150px))
                   rotate(var(--fdh-rot, 180deg)) scale(0.5);
        transition: opacity calc(var(--fdh-duration, 900ms) * 0.6) ease-out,
                    transform var(--fdh-duration, 900ms) cubic-bezier(.16,1,.3,1);
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-chaos-scatter.fdh-anim-play .fdh-letter {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    /* Blur Into Focus */
    .fdh-anim-blur-focus .fdh-letter {
        opacity: 0;
        filter: blur(14px);
        transform: scale(1.3);
        transition: opacity var(--fdh-duration, 900ms) ease,
                    filter var(--fdh-duration, 900ms) ease,
                    transform var(--fdh-duration, 900ms) ease;
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-blur-focus.fdh-anim-play .fdh-letter {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }

    /* 3D Flip Up */
    .fdh-anim-flip-up {
        perspective: 600px;
    }
    .fdh-anim-flip-up .fdh-letter {
        opacity: 0;
        transform: rotateX(90deg) translateY(0.3em);
        transform-origin: 50% 100%;
        transition: opacity calc(var(--fdh-duration, 900ms) * 0.5) ease,
                    transform var(--fdh-duration, 900ms) ease;
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-flip-up.fdh-anim-play .fdh-letter {
        opacity: 1;
        transform: rotateX(0deg) translateY(0);
    }

    /* Elastic Bounce */
    .fdh-anim-elastic-bounce .fdh-letter {
        opacity: 0;
        transform: translateY(-1.2em) scale(0.3);
        transition: opacity calc(var(--fdh-duration, 900ms) * 0.4) ease,
                    transform var(--fdh-duration, 900ms) cubic-bezier(.34,1.56,.64,1);
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }
    .fdh-anim-elastic-bounce.fdh-anim-play .fdh-letter {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Scramble / Decode -- the character-swap itself is driven by JS
       (runScramble in foxco-dual-heading-animate.js); this just
       handles the initial opacity reveal per letter. */
    .fdh-anim-scramble-decode .fdh-letter {
        opacity: 0;
        font-variant-numeric: tabular-nums;
        transition: opacity 60ms linear;
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 35ms));
    }

    /* Typewriter -- hard opacity cut per letter, no motion, closest to
       a real typewriter carriage reveal */
    .fdh-anim-typewriter .fdh-letter {
        opacity: 0;
        transition: opacity 1ms linear;
        transition-delay: calc(var(--fdh-i, 0) * var(--fdh-stagger, 60ms));
    }
    .fdh-anim-typewriter.fdh-anim-play .fdh-letter {
        opacity: 1;
    }
}


/* ===== Logo Carousel ===== */
/**
 * Foxco Logo Carousel Styles
 * Version: 2.0.0
 */

/* ═══════════════════════════════════════════════
   CORE LAYOUT
═══════════════════════════════════════════════ */

.foxco-logo-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.foxco-logo-carousel {
    position: relative;
    overflow: hidden;
}

.foxco-logo-track {
    display: flex;
    gap: var(--logo-gap, 60px);
    align-items: center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* Logo item sizing (prevents layout shifts while images load) */
.foxco-logo-item{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foxco-logo-item img{
    display:block;
    height: var(--logo-height, 44px);
    width:auto;
    max-width: var(--logo-max-width, 180px);
    object-fit: contain;
}
/* ═══════════════════════════════════════════════
   SCROLL ENGINE
   ─────────────────────────────────────────────
   The continuous scroll itself (speed, direction,
   pausing) is driven entirely by
   assets/js/foxco-logo-carousel.js via
   requestAnimationFrame, not CSS @keyframes -- see
   that file's header comment for why. This section
   used to hold the @keyframes and animation-direction
   rule that drove it; both are gone now, there is
   nothing left for CSS to do here. --carousel-speed
   and the .direction-left / .direction-right classes
   are still set exactly as before (by Elementor's own
   generated CSS and the render() method respectively)
   -- the JS just reads them directly instead of a
   CSS engine reading them.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SCROLL STYLES
═══════════════════════════════════════════════ */

/* ── Smooth (default) — linear, no change needed ── */

/* ── Ease — gentle acceleration/deceleration per cycle ── */
.foxco-logo-carousel-wrapper.style-ease .foxco-logo-track {
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ── Wave — items bob vertically while the track scrolls ── */
.foxco-logo-carousel-wrapper.style-wave .foxco-logo-item {
    animation: foxco-wave 2.4s ease-in-out infinite;
    -webkit-animation: foxco-wave 2.4s ease-in-out infinite;
}
.foxco-logo-carousel-wrapper.style-wave .foxco-logo-item:nth-child(3n+2) {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
}
.foxco-logo-carousel-wrapper.style-wave .foxco-logo-item:nth-child(3n) {
    animation-delay: -1.6s;
    -webkit-animation-delay: -1.6s;
}

@keyframes foxco-wave {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
@-webkit-keyframes foxco-wave {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50%       { -webkit-transform: translateY(-12px); transform: translateY(-12px); }
}

/* Restore normal hover lift on wave (hover wins) */
.foxco-logo-carousel-wrapper.style-wave .foxco-logo-item:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    transform: translateY(-10px) scale(1.1);
}

/* ── Pulse — logos breathe (scale + opacity) ── */
.foxco-logo-carousel-wrapper.style-pulse .foxco-logo-item {
    animation: foxco-pulse 3s ease-in-out infinite;
    -webkit-animation: foxco-pulse 3s ease-in-out infinite;
}
.foxco-logo-carousel-wrapper.style-pulse .foxco-logo-item:nth-child(3n+2) {
    animation-delay: -1s;
    -webkit-animation-delay: -1s;
}
.foxco-logo-carousel-wrapper.style-pulse .foxco-logo-item:nth-child(3n) {
    animation-delay: -2s;
    -webkit-animation-delay: -2s;
}

@keyframes foxco-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(0.88); opacity: 0.45; }
}
@-webkit-keyframes foxco-pulse {
    0%, 100% { -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }
    50%       { -webkit-transform: scale(0.88); transform: scale(0.88); opacity: 0.45; }
}

.foxco-logo-carousel-wrapper.style-pulse .foxco-logo-item:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
}

/* ── Spotlight — center logos appear larger/brighter ── */

.foxco-logo-carousel-wrapper.style-spotlight .foxco-logo-item {
    animation: foxco-spotlight 3.2s ease-in-out infinite;
    -webkit-animation: foxco-spotlight 3.2s ease-in-out infinite;
    transform-origin: center center;
}
.foxco-logo-carousel-wrapper.style-spotlight .foxco-logo-item:nth-child(2n) {
    animation-delay: -1.6s;
    -webkit-animation-delay: -1.6s;
}

@keyframes foxco-spotlight {
    0%, 100% { transform: scale(0.85); filter: grayscale(calc(var(--use-grayscale, 1) * 100%)) brightness(0.7) opacity(0.6); }
    50%       { transform: scale(1.08); filter: grayscale(0%) brightness(1.15) opacity(1); }
}
@-webkit-keyframes foxco-spotlight {
    0%, 100% { -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-filter: brightness(0.7); filter: brightness(0.7); }
    50%       { -webkit-transform: scale(1.08); transform: scale(1.08); -webkit-filter: brightness(1.15); filter: brightness(1.15); }
}

.foxco-logo-carousel-wrapper.style-spotlight .foxco-logo-item:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* ── Ticker — linear, no pause, slightly reduced item padding ── */
/* (no-pause-hover is added separately; this just tightens spacing feel) */
.foxco-logo-carousel-wrapper.style-ticker .foxco-logo-item {
    padding: 12px 20px;
}

/* ═══════════════════════════════════════════════
   PAUSE ON HOVER
   ─────────────────────────────────────────────
   Handled in JS now (mouseenter/mouseleave, gated by
   the same hover:hover/pointer:fine check and the
   same no-pause-hover class this section used to
   read). Nothing left for CSS to do here.
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   EDGE FADE
   Masks the left + right edges so logos fade in/out
═══════════════════════════════════════════════ */

.foxco-logo-carousel-wrapper.edge-fade .foxco-logo-carousel {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

/*
   Touch-device fix:
   mask-image / -webkit-mask-image applied to an infinitely-transforming
   (translate3d) track can cause the GPU compositor to invalidate and
   restart the animation while the user scrolls, on Android as much as
   iOS. This was previously scoped to `@supports (-webkit-touch-callout:
   none)`, a WebKit-only feature query that's true on iOS Safari but
   false on Android Chrome -- meaning this exact fix never actually
   applied on Android, and Android hit the identical restart-while-
   scrolling bug the comment already correctly diagnosed for iOS.
   Switched to a touch-capability query, matching the same technique
   already used below for "MOBILE - keep animation running", so both
   platforms get the fix instead of just one.
*/
@media (hover: none) and (pointer: coarse) {
    .foxco-logo-carousel-wrapper.edge-fade .foxco-logo-carousel {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .foxco-logo-carousel-wrapper.edge-fade {
        --edge-fade-bg: rgba(255, 255, 255, 1);
    }

    /* Dark presets get darker fade edges */
    .foxco-logo-carousel-wrapper.bg-preset-charcoal.edge-fade,
    .foxco-logo-carousel-wrapper.bg-preset-carbon.edge-fade,
    .foxco-logo-carousel-wrapper.bg-preset-brand-glow.edge-fade,
    .foxco-logo-carousel-wrapper.bg-preset-frosted.edge-fade,
    .foxco-logo-carousel-wrapper.bg-preset-edge-lit.edge-fade,
    .foxco-logo-carousel-wrapper.bg-preset-diagonal-dark.edge-fade {
        --edge-fade-bg: rgba(20, 20, 20, 1);
    }

    .foxco-logo-carousel-wrapper.edge-fade::before,
    .foxco-logo-carousel-wrapper.edge-fade::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 70px;
        pointer-events: none;
        z-index: 3;
    }

    .foxco-logo-carousel-wrapper.edge-fade::before {
        left: 0;
        background: linear-gradient(to right, var(--edge-fade-bg), rgba(255, 255, 255, 0));
    }

    .foxco-logo-carousel-wrapper.edge-fade::after {
        right: 0;
        background: linear-gradient(to left, var(--edge-fade-bg), rgba(255, 255, 255, 0));
    }
}

/* ═══════════════════════════════════════════════
   MOBILE PERFORMANCE
   ─────────────────────────────────────────────
   The old animation-play-state:running !important
   overrides that used to live here were fighting the
   JS-driven restart bug at the CSS layer -- now that
   the scroll engine is JS-driven and mobile has no
   restart mechanism to misfire (see the JS file),
   there is nothing left to force. The filter/transition
   performance guard below is unrelated and still applies.
═══════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Mobile perf: filters on a moving element can trigger costly repaints */
    .foxco-logo-item img {
        filter: none !important;
    }
    .foxco-logo-item {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════
   LOGO ITEMS
═══════════════════════════════════════════════ */

.foxco-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-width: 200px;
    height: var(--logo-height, 120px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    border-radius: 12px;
}

.foxco-logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.foxco-logo-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.foxco-logo-item:hover {
    transform: translateY(-10px) scale(1.1);
}

.foxco-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(calc(var(--use-grayscale, 1) * 100%)) opacity(0.7);
    transition: filter 0.4s;
}

.foxco-logo-item:hover img {
    filter: grayscale(0%) opacity(1);
}

/* ═══════════════════════════════════════════════
   LOGO NAMES (TOOLTIP)
═══════════════════════════════════════════════ */

.foxco-logo-name {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent-color, #667eea), var(--accent-dark, #764ba2));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.4s;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.foxco-logo-item:hover .foxco-logo-name {
    opacity: 1;
    bottom: -35px;
}

/* ═══════════════════════════════════════════════
   HOVER EFFECT VARIANTS
═══════════════════════════════════════════════ */

.foxco-logo-item.effect-gradient:hover::before {
    background: linear-gradient(135deg, var(--accent-color, #667eea), var(--accent-dark, #764ba2));
    opacity: 1;
}
.foxco-logo-item.effect-gradient:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.foxco-logo-item.effect-solid::before {
    background: var(--accent-color, #667eea);
}
.foxco-logo-item.effect-solid:hover::before {
    opacity: 1;
}
.foxco-logo-item.effect-solid:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.foxco-logo-item.effect-shadow:hover::before {
    opacity: 0;
}
.foxco-logo-item.effect-shadow:hover {
    box-shadow: 0 15px 40px var(--accent-color, #667eea);
}

.foxco-logo-item.effect-none:hover::before {
    opacity: 0;
}
.foxco-logo-item.effect-none:hover {
    box-shadow: none;
    transform: translateY(-5px) scale(1.05);
}

/* ═══════════════════════════════════════════════
   GRID LAYOUT
═══════════════════════════════════════════════ */

.foxco-logo-carousel-wrapper.grid-layout .foxco-logo-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--logo-gap, 30px);
    animation: none;
    -webkit-animation: none;
    padding: 20px;
}

.foxco-logo-carousel-wrapper.grid-layout .foxco-logo-item {
    min-width: auto;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .foxco-logo-track {
        gap: calc(var(--logo-gap, 60px) * 0.8);
    }
    .foxco-logo-item {
        min-width: 180px;
        height: calc(var(--logo-height, 120px) * 0.9);
    }
}

@media (max-width: 768px) {
    .foxco-logo-track {
        gap: calc(var(--logo-gap, 60px) * 0.6);
    }
    .foxco-logo-item {
        min-width: 150px;
        height: calc(var(--logo-height, 120px) * 0.8);
        padding: 15px;
    }
    .foxco-logo-carousel-wrapper.grid-layout .foxco-logo-track {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: calc(var(--logo-gap, 30px) * 0.7);
    }
}

@media (max-width: 480px) {
    .foxco-logo-track {
        gap: calc(var(--logo-gap, 60px) * 0.5);
    }
    .foxco-logo-item {
        min-width: 120px;
        height: calc(var(--logo-height, 120px) * 0.7);
        padding: 12px;
    }
    .foxco-logo-name {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
    .foxco-logo-carousel-wrapper.grid-layout .foxco-logo-track {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: calc(var(--logo-gap, 30px) * 0.5);
    }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════ */

.foxco-logo-item:focus-visible {
    outline: 2px solid var(--accent-color, #667eea);
    outline-offset: 4px;
}
.foxco-logo-item a:focus-visible {
    outline: 2px solid var(--accent-color, #667eea);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    /* The scroll engine itself (assets/js/foxco-logo-carousel.js) checks
       this same media query directly and never starts, so .foxco-logo-track
       simply never receives a transform -- nothing to override here for it.
       This covers the remaining decorative animations (wave/pulse/spotlight
       item effects, hover transitions), which are unrelated to scrolling. */
    .foxco-logo-item,
    .foxco-logo-item img,
    .foxco-logo-name,
    .foxco-logo-item::before {
        transition: none;
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════ */

@media print {
    .foxco-logo-carousel-wrapper {
        overflow: visible;
    }
    .foxco-logo-track {
        animation: none;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .foxco-logo-item {
        break-inside: avoid;
    }
}

/* ═══════════════════════════════════════════════
   BACKGROUND PRESETS  (v1.2.0)
   Applied as a class on .foxco-logo-carousel-wrapper
═══════════════════════════════════════════════ */

/* 1. Clean White (default — no class needed, but alias for explicitness) */
.foxco-logo-carousel-wrapper.bg-preset-white {
    background: #ffffff;
}

/* 2. Warm Off-White */
.foxco-logo-carousel-wrapper.bg-preset-warm {
    background: #faf8f5;
}

/* 3. Diagonal Stripe Light */
.foxco-logo-carousel-wrapper.bg-preset-diagonal-light {
    background-color: #f8f8f8;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 18px,
        rgba(0,0,0,0.03) 18px,
        rgba(0,0,0,0.03) 20px
    );
}

/* 4. Diagonal Stripe Dark */
.foxco-logo-carousel-wrapper.bg-preset-diagonal-dark {
    background-color: #141414;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 18px,
        rgba(255,255,255,0.03) 18px,
        rgba(255,255,255,0.03) 20px
    );
}

/* 5. Charcoal */
.foxco-logo-carousel-wrapper.bg-preset-charcoal {
    background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%);
}

/* 6. Brand Glow — deep amber diagonal echoing orange headers */
.foxco-logo-carousel-wrapper.bg-preset-brand-glow {
    background: linear-gradient(135deg, #1a1008 0%, #291500 40%, #1a1008 100%);
}

/* 7. Frosted — dark with soft radial orange bloom */
.foxco-logo-carousel-wrapper.bg-preset-frosted {
    background: linear-gradient(135deg, #161616 0%, #1f1a14 50%, #161616 100%);
    position: relative;
}
.foxco-logo-carousel-wrapper.bg-preset-frosted::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 15% 50%, rgba(232,119,34,0.09) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 50%, rgba(232,119,34,0.06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.foxco-logo-carousel-wrapper.bg-preset-frosted .foxco-logo-carousel {
    position: relative;
    z-index: 1;
}

/* 8. Diagonal Split — two-tone light */
.foxco-logo-carousel-wrapper.bg-preset-split {
    background: linear-gradient(160deg, #f5f5f5 50%, #ebebeb 50%);
}

/* 9. Dot Grid */
.foxco-logo-carousel-wrapper.bg-preset-dots {
    background-color: #f9f9f9;
    background-image: radial-gradient(circle, #d0d0d0 1px, transparent 1px);
    background-size: 28px 28px;
}

/* 10. Carbon Grid */
.foxco-logo-carousel-wrapper.bg-preset-carbon {
    background-color: #181818;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* 11. Matte Stone */
.foxco-logo-carousel-wrapper.bg-preset-stone {
    background: linear-gradient(145deg, #e8e4df 0%, #f0ece7 40%, #ddd9d4 100%);
}

/* 12. Edge Lit — dark with inset orange top/bottom glow lines */
.foxco-logo-carousel-wrapper.bg-preset-edge-lit {
    background: #111111;
    box-shadow:
        inset 0 1px 0 rgba(232,119,34,0.30),
        inset 0 -1px 0 rgba(232,119,34,0.30),
        inset 0 2px 12px rgba(232,119,34,0.06),
        inset 0 -2px 12px rgba(232,119,34,0.06);
}


/* Scroll starts only once assets/js/foxco-logo-carousel.js adds
   .is-ready (after images are loaded) -- it reads this class directly
   rather than CSS driving an animation-play-state toggle. */


/* ===== Offer Cards ===== */
/* ==========================================================
   Foxco Offer Cards — v1.0.0
   Styles: light | dark | orange | minimal
   ========================================================== */

/* ── Base Card ─────────────────────────────────────────── */
.foxco-offer-card {
    position: relative;
    border-radius: 20px;
    padding: 36px 32px 32px;
    overflow: hidden;
    font-family: inherit;
    max-width: 520px;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.foxco-offer-card:hover {
    transform: translateY(-4px);
}

.foxco-oc-price-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}
.foxco-oc-title {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.foxco-oc-description {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.foxco-oc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.foxco-oc-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
}
.foxco-oc-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 11px;
}
.foxco-oc-cta {
    display: block;
    width: 100%;
    padding: 18px 24px;
    border: none;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
}
.foxco-oc-cta:hover {
    opacity: 0.88;
    transform: scale(1.01);
    text-decoration: none;
}

/* Decorative bg shape (light & dark) */
.foxco-oc-bg-shape {
    position: absolute;
    bottom: -40px;
    right: -30px;
    width: 220px;
    height: 260px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.foxco-offer-card > *:not(.foxco-oc-bg-shape) {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   STYLE 1 — Light (like the screenshot)
   ========================================================== */
.foxco-oc-light {
    background: linear-gradient(145deg, #ffffff 0%, #f0eaff 60%, #e8e0ff 100%);
    box-shadow: 0 20px 60px rgba(120, 80, 220, 0.15), 0 4px 16px rgba(0,0,0,0.06);
}
.foxco-oc-light .foxco-oc-price-label { color: #1a1a3e; }
.foxco-oc-light .foxco-oc-title       { color: #0f0f2e; }
.foxco-oc-light .foxco-oc-description { color: #2d2d5e; }
.foxco-oc-light .foxco-oc-features li { color: #1a1a3e; }
.foxco-oc-light .foxco-oc-check {
    background: #1a1a3e;
    color: #fff;
}
.foxco-oc-light .foxco-oc-cta {
    background: linear-gradient(90deg, #e8357a 0%, #3b9eff 100%);
    color: #fff;
}
.foxco-oc-light .foxco-oc-bg-shape {
    fill: url(#foxco-oc-light-grad);
}

/* ==========================================================
   STYLE 2 — Dark / Neon
   ========================================================== */
.foxco-oc-dark {
    background: linear-gradient(145deg, #0d0d1a 0%, #13132b 100%);
    box-shadow: 0 0 0 1px rgba(100, 80, 255, 0.25),
                0 20px 60px rgba(80, 60, 200, 0.3),
                0 0 80px rgba(0, 200, 255, 0.06) inset;
}
.foxco-oc-dark .foxco-oc-price-label { color: #a78bfa; }
.foxco-oc-dark .foxco-oc-title       { color: #ffffff; }
.foxco-oc-dark .foxco-oc-description { color: #c4b5fd; }
.foxco-oc-dark .foxco-oc-features li { color: #e2e8ff; }
.foxco-oc-dark .foxco-oc-check {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: #fff;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
}
.foxco-oc-dark .foxco-oc-cta {
    background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%);
    color: #fff;
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.4);
}
.foxco-oc-dark .foxco-oc-bg-shape {
    opacity: 0.08;
    fill: #a78bfa;
}

/* ==========================================================
   STYLE 3 — Foxco Orange Gradient
   ========================================================== */
.foxco-oc-orange {
    background: linear-gradient(135deg, #E26431 0%, #f0954a 45%, #e05a1c 100%);
    box-shadow: 0 20px 60px rgba(226, 100, 49, 0.4), 0 4px 16px rgba(226, 100, 49, 0.2);
}
.foxco-oc-orange .foxco-oc-price-label { color: rgba(255,255,255,0.85); }
.foxco-oc-orange .foxco-oc-title       { color: #ffffff; }
.foxco-oc-orange .foxco-oc-description { color: rgba(255,255,255,0.9); }
.foxco-oc-orange .foxco-oc-features li { color: #ffffff; }
.foxco-oc-orange .foxco-oc-check {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.5);
}
.foxco-oc-orange .foxco-oc-cta {
    background: #ffffff;
    color: #E26431;
}
.foxco-oc-orange .foxco-oc-bg-shape {
    opacity: 0.12;
    fill: #fff;
}

/* ==========================================================
   STYLE 4 — Minimal / Outlined
   ========================================================== */
.foxco-oc-minimal {
    background: transparent;
    border: 2px solid currentColor;
    border-color: #E26431;
    box-shadow: none;
}
.foxco-oc-minimal .foxco-oc-price-label { color: #E26431; }
.foxco-oc-minimal .foxco-oc-title       { color: #1a1a1a; }
.foxco-oc-minimal .foxco-oc-description { color: #555; }
.foxco-oc-minimal .foxco-oc-features li { color: #333; }
.foxco-oc-minimal .foxco-oc-check {
    background: transparent;
    border: 2px solid #E26431;
    color: #E26431;
}
.foxco-oc-minimal .foxco-oc-cta {
    background: transparent;
    color: #E26431;
    border: 2px solid #E26431;
    box-shadow: none;
}
.foxco-oc-minimal .foxco-oc-cta:hover {
    background: #E26431;
    color: #fff;
    opacity: 1;
}
.foxco-oc-minimal .foxco-oc-bg-shape { display: none; }

/* ==========================================================
   Elementor centering helper
   ========================================================== */
.foxco-offer-card-wrap {
    display: flex;
    justify-content: center;
}


/* ===== Separator ===== */
/* ═══════════════════════════════════════════════════════════════════
   Foxco Separator Widget — v1.0.0
   ═══════════════════════════════════════════════════════════════════ */

.foxco-sep-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* ── Shared base line ─────────────────────────────────────────────── */
.foxco-sep-line {
    width: 100%;
    display: block;
    border-radius: 99px;
}

/* ══════════════════════════════════════════════════════════════════
   1. Gradient Accent
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--gradient-accent .foxco-sep-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 99px;
}

.foxco-sep--gradient-accent.foxco-sep--animated .foxco-sep-accent {
    animation: foxco-sep-breathe 3s ease-in-out infinite;
}

@keyframes foxco-sep-breathe {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50%       { opacity: 0.7; filter: brightness(1.4); }
}

/* ══════════════════════════════════════════════════════════════════
   2. Heartbeat / EKG
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--heartbeat {
    overflow: hidden;
}

.foxco-sep-svg {
    width: 100%;
    display: block;
}

.foxco-sep-ekg {
    overflow: visible;
}

/* Animate a "scan line" effect — clip-path sweeps across */
.foxco-sep--heartbeat.foxco-sep--animated .foxco-sep-ekg path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: foxco-ekg-draw 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes foxco-ekg-draw {
    0%   { stroke-dashoffset: 1200; opacity: 1; }
    70%  { stroke-dashoffset: 0;    opacity: 1; }
    85%  { stroke-dashoffset: 0;    opacity: 1; }
    100% { stroke-dashoffset: -1200; opacity: 0.2; }
}

/* ══════════════════════════════════════════════════════════════════
   3. Neon Glow
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--neon-glow .foxco-sep-neon {
    border-radius: 99px;
}

.foxco-sep--neon-glow.foxco-sep--animated .foxco-sep-neon {
    animation: foxco-neon-pulse 2s ease-in-out infinite;
}

@keyframes foxco-neon-pulse {
    0%, 100% { opacity: 1;   filter: brightness(1); }
    50%       { opacity: 0.6; filter: brightness(2); }
}

/* ══════════════════════════════════════════════════════════════════
   4. Double Fade
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--double-fade .foxco-sep-double {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.foxco-sep--double-fade .foxco-sep-double__top,
.foxco-sep--double-fade .foxco-sep-double__bot {
    border-radius: 99px;
}

.foxco-sep--double-fade.foxco-sep--animated .foxco-sep-double__top {
    animation: foxco-df-top 3s ease-in-out infinite;
}
.foxco-sep--double-fade.foxco-sep--animated .foxco-sep-double__bot {
    animation: foxco-df-bot 3s ease-in-out infinite;
}

@keyframes foxco-df-top {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50%       { opacity: 0.5; transform: scaleX(0.85); }
}
@keyframes foxco-df-bot {
    0%, 100% { opacity: 0.5; transform: scaleX(0.85); }
    50%       { opacity: 1; transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════════════════
   5. Zigzag
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--zigzag .foxco-sep-zigzag {
    overflow: visible;
}

.foxco-sep--zigzag.foxco-sep--animated .foxco-sep-zigzag path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: foxco-zz-draw 3s linear infinite;
}

@keyframes foxco-zz-draw {
    0%   { stroke-dashoffset: 2000; }
    60%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -2000; }
}

/* ══════════════════════════════════════════════════════════════════
   6. Laser Dash
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--laser-dash .foxco-sep-laser {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 99px;
}

.foxco-sep--laser-dash.foxco-sep--animated .foxco-sep-laser {
    animation: foxco-laser-scan 2s ease-in-out infinite;
}

@keyframes foxco-laser-scan {
    0%   { left: 20%; opacity: 0.6; filter: brightness(1); }
    50%  { left: 80%; opacity: 1;   filter: brightness(1.8); }
    100% { left: 20%; opacity: 0.6; filter: brightness(1); }
}


/* ===== Steps / Process ===== */
/* ================================================================
   FOXCO STEPS WIDGET  v1.0.0
   4 Preset Styles:
   1. preset-dark_gradient  — deep navy/purple, watermark numbers
   2. preset-foxco_orange   — brand orange, vertical timeline
   3. preset-minimal_clean  — white cards, clean numbered circle
   4. preset-neon_glow      — dark bg, electric glow accents
   ================================================================ */

/* ── BASE RESET ─────────────────────────────────────────── */
.foxco-steps-wrap *,
.foxco-steps-wrap *::before,
.foxco-steps-wrap *::after {
  box-sizing: border-box;
}

.foxco-steps-wrap {
  position: relative;
  width: 100%;
  padding: 60px 30px;
}

/* ── SECTION HEADING ────────────────────────────────────── */
.foxco-steps-heading {
  text-align: center;
  margin-bottom: 50px;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.foxco-steps-heading strong {
  font-weight: 900;
}

/* ── VERTICAL LAYOUT (DEFAULT) ──────────────────────────── */
.foxco-steps-wrap.layout-vertical {
  display: block;
}
.foxco-steps-wrap.layout-vertical .foxco-step {
  position: relative;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foxco-steps-wrap.layout-vertical .foxco-step:last-child {
  margin-bottom: 0;
}

/* ── HORIZONTAL LAYOUT ──────────────────────────────────── */
.foxco-steps-wrap.layout-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
}
.foxco-steps-wrap.layout-horizontal .foxco-step {
  flex: 1 1 220px;
  max-width: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── TIMELINE LAYOUT ────────────────────────────────────── */
.foxco-steps-wrap.layout-timeline {
  padding-left: 80px;
  position: relative;
}
.foxco-steps-wrap.layout-timeline::before {
  content: '';
  position: absolute;
  left: 50px;
  top: 80px;
  bottom: 80px;
  width: 2px;
  background-color: rgba(255,255,255,0.2);
  z-index: 0;
}
.foxco-steps-wrap.layout-timeline .foxco-step {
  position: relative;
  margin-bottom: 50px;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 80px;
}
.foxco-steps-wrap.layout-timeline .foxco-step-content {
  text-align: left;
  max-width: 100%;
}
.foxco-steps-wrap.layout-timeline .foxco-step-badge {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  left: 14px;
  z-index: 2;
}

/* ── STEP WRAPPER ───────────────────────────────────────── */
.foxco-step {
  position: relative;
}

/* ── STEP CONTENT ───────────────────────────────────────── */
.foxco-step-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* ── BADGE BASE ─────────────────────────────────────────── */
.foxco-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.foxco-step-badge:hover {
  transform: scale(1.1);
}
.foxco-step-badge.style-circle {
  border-radius: 50%;
}
.foxco-step-badge.style-square {
  border-radius: 6px;
}
.foxco-step-badge.style-pill {
  border-radius: 100px;
  width: auto;
  padding: 6px 18px;
  height: auto;
}
.foxco-step-badge.style-outline {
  border-radius: 50%;
  background: transparent !important;
}
.foxco-step-badge.style-none {
  display: none;
}

/* ── WATERMARK ──────────────────────────────────────────── */
.foxco-step-watermark {
  position: absolute;
  font-size: 200px;
  font-weight: 900;
  line-height: 1;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  color: rgba(255,255,255,0.05);
  letter-spacing: -0.05em;
}

/* ── STEP TITLE ─────────────────────────────────────────── */
.foxco-step-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.2;
}

/* ── STEP DESC ──────────────────────────────────────────── */
.foxco-step-desc {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.7;
  margin: 0;
}

/* ── VERTICAL CONNECTOR ─────────────────────────────────── */
.foxco-steps-wrap.layout-vertical.show-connector
.foxco-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -60px;
  width: 2px;
  height: 60px;
  background: rgba(255,255,255,0.2);
  z-index: 1;
}

/* ── HORIZONTAL CONNECTOR ───────────────────────────────── */
.foxco-steps-wrap.layout-horizontal.show-connector
.foxco-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 30px;
  width: 30px;
  height: 2px;
  background: rgba(255,255,255,0.25);
}

/* ── STAGGER ANIMATION ──────────────────────────────────── */
.foxco-steps-wrap.animate-in .foxco-step {
  opacity: 0;
  transform: translateY(30px);
  animation: foxcoStepReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes foxcoStepReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* also fire when in viewport (intersection observer fallback) */
.foxco-steps-wrap.animate-in.foxco-visible .foxco-step {
  /* already triggered by animation */
}

/* ================================================================
   PRESET 1: DARK GRADIENT
   The screenshot style — deep navy → purple, watermark numbers
   ================================================================ */
.foxco-steps-wrap.preset-dark_gradient {
  background: linear-gradient(
    160deg,
    #0d1b3e 0%,
    #1a1060 40%,
    #2d0a3e 70%,
    #3d0a2a 100%
  );
  border-radius: 0;
}

.foxco-steps-wrap.preset-dark_gradient .foxco-steps-heading {
  color: #ffffff;
  font-weight: 300;
}
.foxco-steps-wrap.preset-dark_gradient .foxco-steps-heading strong {
  font-weight: 900;
  color: #ffffff;
}

/* Badge: inner dark fill + outer translucent ring = the double-ring trick */
.foxco-steps-wrap.preset-dark_gradient .foxco-step-badge {
  background: #1e1252;
  border-color: rgba(255,255,255,0.2);
  color: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.05),
    0 0 0 16px rgba(255,255,255,0.02);
}

.foxco-steps-wrap.preset-dark_gradient .foxco-step-badge:hover {
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.1),
    0 0 20px rgba(120,80,255,0.4);
}

.foxco-steps-wrap.preset-dark_gradient .foxco-step-watermark {
  color: rgba(255,255,255,0.04);
  font-style: italic;
}

.foxco-steps-wrap.preset-dark_gradient .foxco-step-title {
  color: #ffffff;
}

.foxco-steps-wrap.preset-dark_gradient .foxco-step-desc {
  color: rgba(255,255,255,0.75);
}

.foxco-steps-wrap.preset-dark_gradient.layout-vertical.show-connector
.foxco-step:not(:last-child)::after {
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
}

.foxco-steps-wrap.preset-dark_gradient.layout-timeline::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
}

/* ================================================================
   PRESET 2: FOXCO ORANGE
   Brand orange #E26431, clean timeline, white background
   ================================================================ */
.foxco-steps-wrap.preset-foxco_orange {
  background: #ffffff;
  border-radius: 12px;
}

.foxco-steps-wrap.preset-foxco_orange .foxco-steps-heading {
  color: #1a1a2e;
}
.foxco-steps-wrap.preset-foxco_orange .foxco-steps-heading strong {
  color: #E26431;
}

/* Gradient-filled badge */
.foxco-steps-wrap.preset-foxco_orange .foxco-step-badge {
  background: linear-gradient(135deg, #E26431 0%, #c94a1a 100%);
  border-color: transparent;
  border-radius: 50%;
  color: #ffffff;
  box-shadow:
    0 4px 15px rgba(226,100,49,0.4),
    0 0 0 6px rgba(226,100,49,0.12);
  font-weight: 900;
}
.foxco-steps-wrap.preset-foxco_orange .foxco-step-badge:hover {
  box-shadow:
    0 6px 25px rgba(226,100,49,0.6),
    0 0 0 10px rgba(226,100,49,0.15);
}

/* Per-step accent support */
.foxco-steps-wrap.preset-foxco_orange .foxco-step[style*="--step-accent"] .foxco-step-badge {
  background: var(--step-accent);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--step-accent) 60%, transparent);
}

.foxco-steps-wrap.preset-foxco_orange .foxco-step-watermark {
  color: rgba(226,100,49,0.06);
}

.foxco-steps-wrap.preset-foxco_orange .foxco-step-title {
  color: #1a1a2e;
}
.foxco-steps-wrap.preset-foxco_orange .foxco-step-desc {
  color: #555577;
}

.foxco-steps-wrap.preset-foxco_orange.layout-vertical.show-connector
.foxco-step:not(:last-child)::after {
  background: linear-gradient(to bottom, #E26431, rgba(226,100,49,0.1));
}

.foxco-steps-wrap.preset-foxco_orange.layout-timeline::before {
  background: linear-gradient(to bottom, #E26431, rgba(226,100,49,0.2));
}

/* Step number accent line under title */
.foxco-steps-wrap.preset-foxco_orange .foxco-step-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #E26431;
  border-radius: 2px;
  margin: 10px auto 0;
}
.foxco-steps-wrap.preset-foxco_orange .foxco-step-content[style*="text-align: left"] .foxco-step-title::after,
.foxco-steps-wrap.preset-foxco_orange .layout-timeline .foxco-step-title::after {
  margin-left: 0;
}

/* ================================================================
   PRESET 3: MINIMAL CLEAN
   White/light grey cards, subtle shadows, outlined circle badge
   ================================================================ */
.foxco-steps-wrap.preset-minimal_clean {
  background: #f5f6fa;
  border-radius: 16px;
}

.foxco-steps-wrap.preset-minimal_clean .foxco-steps-heading {
  color: #111122;
}
.foxco-steps-wrap.preset-minimal_clean .foxco-steps-heading strong {
  color: #111122;
  font-style: italic;
}

.foxco-steps-wrap.preset-minimal_clean .foxco-step {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 8px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.foxco-steps-wrap.preset-minimal_clean .foxco-step:hover {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 20px 50px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

.foxco-steps-wrap.preset-minimal_clean .foxco-step-badge {
  background: transparent;
  border: 2px solid #ddddee;
  border-radius: 50%;
  color: #888899;
  font-weight: 700;
  font-size: 1rem;
}

.foxco-steps-wrap.preset-minimal_clean .foxco-step-badge:hover {
  border-color: #111122;
  color: #111122;
}

.foxco-steps-wrap.preset-minimal_clean .foxco-step-watermark {
  color: rgba(0,0,0,0.03);
}

.foxco-steps-wrap.preset-minimal_clean .foxco-step-title {
  color: #111122;
}
.foxco-steps-wrap.preset-minimal_clean .foxco-step-desc {
  color: #666677;
}

/* Cards don't need connectors — hide by default */
.foxco-steps-wrap.preset-minimal_clean.layout-vertical.show-connector
.foxco-step:not(:last-child)::after {
  background: #ddddee;
}

/* Number in corner for card style */
.foxco-steps-wrap.preset-minimal_clean .foxco-step-watermark {
  right: 20px;
  left: auto;
  top: 10px;
  transform: none;
  font-size: 80px;
  opacity: 1;
  color: rgba(0,0,0,0.04);
}

/* ================================================================
   PRESET 4: NEON GLOW
   Near-black bg, electric accent colors, glowing badge, scanline texture
   ================================================================ */
.foxco-steps-wrap.preset-neon_glow {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(135deg, #050510 0%, #0a0520 50%, #050510 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 200, 0.1);
}

.foxco-steps-wrap.preset-neon_glow .foxco-steps-heading {
  color: #e0e8ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.8rem);
}
.foxco-steps-wrap.preset-neon_glow .foxco-steps-heading strong {
  color: #00ffcc;
  text-shadow: 0 0 20px rgba(0,255,204,0.7), 0 0 40px rgba(0,255,204,0.3);
}

/* Glowing badge — color cycles per step via nth-child */
.foxco-steps-wrap.preset-neon_glow .foxco-step-badge {
  background: transparent;
  border-radius: 50%;
  font-weight: 900;
  font-family: 'Courier New', monospace;
}

.foxco-steps-wrap.preset-neon_glow .foxco-step:nth-child(1) .foxco-step-badge,
.foxco-steps-wrap.preset-neon_glow .foxco-step:nth-child(4) .foxco-step-badge {
  color: #00ffcc;
  border-color: #00ffcc;
  box-shadow: 0 0 12px #00ffcc, 0 0 30px rgba(0,255,204,0.4), inset 0 0 12px rgba(0,255,204,0.1);
}
.foxco-steps-wrap.preset-neon_glow .foxco-step:nth-child(2) .foxco-step-badge,
.foxco-steps-wrap.preset-neon_glow .foxco-step:nth-child(5) .foxco-step-badge {
  color: #ff6ad5;
  border-color: #ff6ad5;
  box-shadow: 0 0 12px #ff6ad5, 0 0 30px rgba(255,106,213,0.4), inset 0 0 12px rgba(255,106,213,0.1);
}
.foxco-steps-wrap.preset-neon_glow .foxco-step:nth-child(3) .foxco-step-badge,
.foxco-steps-wrap.preset-neon_glow .foxco-step:nth-child(6) .foxco-step-badge {
  color: #ffd700;
  border-color: #ffd700;
  box-shadow: 0 0 12px #ffd700, 0 0 30px rgba(255,215,0,0.4), inset 0 0 12px rgba(255,215,0,0.1);
}

/* Neon badge pulse */
@keyframes foxcoNeonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
.foxco-steps-wrap.preset-neon_glow .foxco-step-badge {
  animation: foxcoNeonPulse 3s ease-in-out infinite;
}

.foxco-steps-wrap.preset-neon_glow .foxco-step-watermark {
  color: rgba(0,255,204,0.04);
  font-family: 'Courier New', monospace;
}

.foxco-steps-wrap.preset-neon_glow .foxco-step-title {
  color: #e0e8ff;
  letter-spacing: 0.03em;
  font-family: inherit;
}
.foxco-steps-wrap.preset-neon_glow .foxco-step-desc {
  color: rgba(180,200,255,0.7);
  font-size: 0.95rem;
}

/* Neon connectors */
.foxco-steps-wrap.preset-neon_glow.layout-vertical.show-connector
.foxco-step:not(:last-child)::after {
  background: linear-gradient(to bottom, rgba(0,255,204,0.4), rgba(0,255,204,0.05));
  box-shadow: 0 0 6px rgba(0,255,204,0.2);
}
.foxco-steps-wrap.preset-neon_glow.layout-timeline::before {
  background: rgba(0,255,204,0.2);
  box-shadow: 0 0 8px rgba(0,255,204,0.15);
}

/* Neon step hover */
.foxco-steps-wrap.preset-neon_glow .foxco-step:hover .foxco-step-title {
  color: #00ffcc;
  transition: color 0.3s ease;
}

/* ── MOBILE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .foxco-steps-wrap {
    padding: 40px 20px;
  }
  .foxco-steps-wrap.layout-horizontal {
    flex-direction: column;
    align-items: center;
  }
  .foxco-steps-wrap.layout-horizontal .foxco-step {
    width: 100%;
    max-width: 100%;
  }
  .foxco-steps-wrap.layout-horizontal.show-connector
  .foxco-step:not(:last-child)::after {
    display: none;
  }
  .foxco-steps-wrap.layout-timeline {
    padding-left: 60px;
  }
  .foxco-step-watermark {
    font-size: 120px;
  }
  .foxco-steps-wrap.preset-minimal_clean .foxco-step-watermark {
    font-size: 60px;
  }
}

@media (max-width: 480px) {
  .foxco-steps-wrap.layout-timeline {
    padding-left: 50px;
  }
  .foxco-steps-wrap.layout-timeline::before {
    left: 30px;
  }
}