/* ===== Triple Heading ===== */
/* =============================================================================
   Foxco Triple Heading -- presets and base styles
   Version 4.0.0 (FFF 1.94.0)

   Loaded on the frontend and inside the Elementor preview iframe.

   How the pieces fit:
   - Every preset sets --fdh-accent on the wrapper. The Style > Box > Accent
     Color control overrides that one variable, so one pick recolors the
     preset's highlight words, marks, glows and accent borders together.
   - --fdh-link is the resting link color (#e28142 unless a preset sets one).
   - Layout controls talk through --fdh-justify / --fdh-dir / --fdh-jc so
     Inline layout, Alignment and Content Position no longer fight over
     the same flex properties.
============================================================================= */

/* ---- Base ---------------------------------------------------------------- */
.foxco-dual-heading {
    box-sizing: border-box;
    --fdh-link: #e28142;
}
/* Headings 2 and 3 start flush; presets (and the Gap control) add space.
   Two classes so an Elementor kit's "h2 { margin }" can't sneak in. */
.foxco-dual-heading .foxco-dual-heading__heading-2,
.foxco-dual-heading .foxco-dual-heading__heading-3 {
    margin-top: 0;
}
.foxco-dual-heading__heading-3 {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* Links typed or dynamic-tagged into a heading (tel:, mailto:, pages) */
.foxco-dual-heading a[href] {
    color: var(--fdh-link);
    text-decoration: none;
    transition: color .2s ease, text-decoration-color .2s ease;
}
.foxco-dual-heading a[href]:hover {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* ---- Inline layout separator --------------------------------------------- */
.foxco-inline-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    opacity: 0.7;
    flex-shrink: 0;
    color: var(--fdh-accent, #e85d04);
}

/* ---- Horizontal position (prefix_class foxco-h-pos%s-) -------------------
   Elementor names the classes foxco-h-pos-left, foxco-h-pos-tablet-left and
   foxco-h-pos-mobile-left. (Before 4.0 the tablet/mobile rules looked for
   -md-/-sm- names Elementor never prints, so they never applied.) */
.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;    }
@media (max-width: 1024px) {
    .foxco-h-pos-tablet-left   .foxco-dual-heading { margin-left: 0;    margin-right: auto; }
    .foxco-h-pos-tablet-center .foxco-dual-heading { margin-left: auto; margin-right: auto; }
    .foxco-h-pos-tablet-right  .foxco-dual-heading { margin-left: auto; margin-right: 0;    }
}
@media (max-width: 767px) {
    .foxco-h-pos-mobile-left   .foxco-dual-heading { margin-left: 0;    margin-right: auto; }
    .foxco-h-pos-mobile-center .foxco-dual-heading { margin-left: auto; margin-right: auto; }
    .foxco-h-pos-mobile-right  .foxco-dual-heading { margin-left: auto; margin-right: 0;    }
}

/* =============================================================================
   QUOTE STYLES (Heading 1) -- real <span> elements, no pseudo-elements.
   Default color is the preset accent; Quote Color in the widget wins.
============================================================================= */
.foxco-quote {
    display: inline;
    font-style: normal;
    font-weight: 400;
    line-height: 0;
    vertical-align: -0.3em;
}

/* Typographic */
.foxco-dual-heading.quote-typographic .foxco-quote {
    color: var(--fdh-accent, #e85d04);
    font-size: 1.4em;
    font-family: Georgia, serif;
}

/* Oversized (hanging marks; overflow kept inside the widget) */
.foxco-dual-heading.quote-oversized { overflow: hidden; }
.foxco-dual-heading.quote-oversized .foxco-dual-heading__heading-1 {
    position: relative;
    padding-left: 0.45em;
    padding-right: 0.45em;
}
.foxco-dual-heading.quote-oversized .foxco-quote--oversized {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 4.5em;
    line-height: 1;
    color: var(--fdh-accent, #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; }

/* Brackets */
.foxco-dual-heading.quote-brackets .foxco-dual-heading__heading-1 {
    display: inline-flex;
    align-items: stretch;
}
.foxco-dual-heading.quote-brackets .foxco-quote--bracket {
    display: inline-block;
    width: 10px;
    align-self: stretch;
    border-style: solid;
    border-color: var(--fdh-accent, #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; }

/* Chevrons */
.foxco-dual-heading.quote-chevron .foxco-quote {
    color: var(--fdh-accent, #e85d04);
    font-size: 0.75em;
    font-weight: 300;
    letter-spacing: -1px;
    vertical-align: 0.1em;
}

/* Neon (glow follows the color, so Quote Color recolors the glow too) */
.foxco-dual-heading.quote-neon .foxco-quote {
    color: var(--fdh-neon-quote, #00f5ff);
    font-size: 1.6em;
    font-family: Georgia, serif;
    vertical-align: -0.35em;
    text-shadow: 0 0 8px currentColor, 0 0 20px currentColor;
}

/* Animated color cycle */
@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;
    vertical-align: -0.35em;
    animation: foxco-quote-cycle 3s ease-in-out infinite;
}

/* Lightbulb icon */
.foxco-quote--bulb {
    display: inline-flex;
    align-items: center;
    color: var(--fdh-accent, #e85d04);
    vertical-align: -0.15em;
    margin-right: 0.15em;
}
.foxco-quote--bulb svg {
    width: 0.85em;
    height: 0.85em;
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor);
}

/* Legacy neon quote colors (widgets saved before 4.0 with a Neon Preset).
   The widget only prints these classes when Quote Color is empty. */
.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; }
.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; }
.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; }
.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; }
.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; }

/* Legacy Neon Pulse glow presets (saved before 4.0; printed only when
   Accent Color is empty). */
.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; }

/* =============================================================================
   ORIGINAL PRESETS
   Same looks as before 4.0, plus: a styled Heading 3 for every preset (it
   used to inherit the theme's dark body color and vanish on dark boxes),
   and colors routed through --fdh-accent.
============================================================================= */

/* === FOXCO CLASSIC (default) === */
.foxco-dual-heading.preset-foxco-classic {
    --fdh-accent: #e85d04;
    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: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    font-size: clamp(.9rem, 1.8vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.66);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    margin: 10px 0 0;
}

/* === FIXWP -- blue felt, serif, ink navy (see FIXWP-BRAND-GUIDE.md) === */
.foxco-dual-heading.preset-fixwp {
    --fdh-accent: #a9c4e4;
    --fdh-link: #172a45;
    background-color: #3b70a7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='turbulence' baseFrequency='.45' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8  0 0 0 0 .88  0 0 0 0 1  0 0 0 3 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23b%29' opacity='.3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04  0 0 0 0 .1  0 0 0 0 .22  0 0 0 -1.5 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23a%29' opacity='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05  0 0 0 0 .12  0 0 0 0 .25  0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29' opacity='.7'/%3E%3C/svg%3E");
    padding: clamp(40px, 6vw, 88px) clamp(18px, 4vw, 48px);
    border: none;
    box-shadow: none;
    text-align: center;
}
.foxco-dual-heading.preset-fixwp .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-family: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
    font-weight: 400; /* FixWP never bolds its big heading */
    font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 14px;
}
.foxco-dual-heading.preset-fixwp .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-fixwp .foxco-dual-heading__heading-1 strong {
    color: #ffffff;
    font-weight: 400;
    font-style: normal;
}
.foxco-dual-heading.preset-fixwp .foxco-dual-heading__heading-2 {
    display: block;
    color: var(--fdh-accent); /* pale blue; sublines are never slate on felt */
    font-family: "Libre Baskerville", Baskerville, Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, .9rem + 1.4vw, 2rem);
    letter-spacing: normal;
    text-transform: none; /* lowercase copy is the FixWP signature */
    margin: 0;
}
.foxco-dual-heading.preset-fixwp .foxco-dual-heading__heading-3 {
    color: #d6e4f4;
    font-family: "Libre Baskerville", Baskerville, Georgia, serif;
    font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
    margin: 14px 0 0;
}

/* === NEON PULSE (accent = glow color) === */
@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 var(--fdh-accent, #00f5ff), 0 0 21px var(--fdh-accent, #00f5ff), 0 0 42px color-mix(in srgb, var(--fdh-accent, #00f5ff) 50%, transparent); }
    50%     { text-shadow: 0 0 4px var(--fdh-accent, #00f5ff), 0 0 12px var(--fdh-accent, #00f5ff), 0 0 28px color-mix(in srgb, var(--fdh-accent, #00f5ff) 30%, transparent); }
}
.foxco-dual-heading.preset-neon-pulse {
    --fdh-accent: #00f5ff;
    background: #05050f;
    border: 1px solid color-mix(in srgb, var(--fdh-accent) 25%, transparent);
    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 var(--fdh-accent), 0 0 21px var(--fdh-accent), 0 0 42px color-mix(in srgb, var(--fdh-accent) 50%, transparent);
    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);
}
.foxco-dual-heading.preset-neon-pulse .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.62);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    letter-spacing: 0.04em;
    margin: 10px 0 0;
}

/* === GRADIENT FIRE (accent = edge bar) === */
@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 {
    --fdh-accent: #ff4500;
    background: #0a0a0a;
    border-left: 4px solid var(--fdh-accent);
    padding: 28px 40px;
    border-radius: 0 8px 8px 0;
}
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-1,
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-1.fdh-anim-ready .fdh-letter {
    background: linear-gradient(270deg, #ff6b00, #ff0044, #ff6b00, #ff8800);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: foxco-fire-shift 3.5s ease infinite;
}
.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;
    -webkit-text-fill-color: transparent;
}
/* Letter animations put each letter on its own layer, and a parent's
   background-clip:text can't paint through that (the heading went
   invisible). Each letter carries the gradient itself instead. */
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-1.fdh-anim-ready {
    background: none;
}
.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;
}
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.55);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    margin: 8px 0 0;
}

/* === TECH TERMINAL (accent = phosphor green) === */
@keyframes foxco-blink {
    0%,49% { opacity: 1; }
    50%,100% { opacity: 0; }
}
.foxco-dual-heading.preset-tech-terminal {
    --fdh-accent: #00ff41;
    --fdh-link: var(--fdh-accent);
    background: #080808;
    border: 1px solid color-mix(in srgb, var(--fdh-accent) 30%, transparent);
    border-radius: 4px;
    padding: 36px 40px 28px;
    position: relative;
    font-family: "Courier New", Courier, monospace;
    box-shadow: 0 0 24px color-mix(in srgb, var(--fdh-accent) 8%, transparent), inset 0 0 60px color-mix(in srgb, var(--fdh-accent) 3%, transparent);
}
.foxco-dual-heading.preset-tech-terminal::before {
    content: "\25CF \25CF \25CF";
    position: absolute;
    top: 12px;
    left: 16px;
    color: color-mix(in srgb, var(--fdh-accent) 40%, transparent);
    font-size: .55rem;
    letter-spacing: 4px;
    font-family: sans-serif;
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-1 {
    color: var(--fdh-accent);
    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 color-mix(in srgb, var(--fdh-accent) 70%, transparent), 0 0 20px color-mix(in srgb, var(--fdh-accent) 35%, transparent);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2 {
    color: color-mix(in srgb, var(--fdh-accent) 80%, #000);
    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: color-mix(in srgb, var(--fdh-accent) 60%, transparent);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2::after {
    content: "_";
    animation: foxco-blink .8s step-end infinite;
    color: var(--fdh-accent);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-3 {
    color: color-mix(in srgb, var(--fdh-accent) 72%, #000);
    font-family: inherit;
    font-size: clamp(.78rem, 1.3vw, .92rem);
    margin: 8px 0 0;
}

/* === GLASSMORPHISM -- for photo or dark sections === */
.foxco-dual-heading.preset-glassmorphism {
    --fdh-accent: #ffffff;
    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;
}
.foxco-dual-heading.preset-glassmorphism .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.6);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    font-weight: 300;
    margin: 8px 0 0;
}

/* === CINEMATIC GOLD -- transparent, for dark sections === */
.foxco-dual-heading.preset-cinematic-gold {
    --fdh-accent: #d4af37;
    background: transparent;
    padding: 24px 0 28px;
    border-bottom: 1px solid color-mix(in srgb, var(--fdh-accent) 35%, transparent);
    position: relative;
}
.foxco-dual-heading.preset-cinematic-gold::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--fdh-accent), 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: var(--fdh-accent);
    font-size: clamp(.7rem, 1.2vw, .9rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    margin: 0;
}
.foxco-dual-heading.preset-cinematic-gold .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.6);
    font-size: clamp(.85rem, 1.3vw, 1rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    margin: 12px 0 0;
}

/* === CYBER SLASH === */
@keyframes foxco-cyber-scan {
    0%   { top: -2px; }
    100% { top: 100%; }
}
.foxco-dual-heading.preset-cyber-slash {
    --fdh-accent: #ff6600;
    background: #0d0d1a;
    border-left: 4px solid var(--fdh-accent);
    border-radius: 0 12px 12px 0;
    padding: 30px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 80px color-mix(in srgb, var(--fdh-accent) 6%, transparent), -2px 0 24px color-mix(in srgb, var(--fdh-accent) 20%, transparent);
}
.foxco-dual-heading.preset-cyber-slash::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--fdh-accent) 6%, transparent) 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, color-mix(in srgb, var(--fdh-accent) 60%, transparent), 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: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    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;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.6);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    margin: 8px 0 0;
}

/* === DR GUBERMAN (original) -- blue and gold === */
@keyframes foxco-dg-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.foxco-dual-heading.preset-dr-guberman {
    --fdh-accent: #f9bf26;
    background: linear-gradient(135deg, #296eb5 0%, #1a5490 60%, #296eb5 100%);
    border: 2px solid var(--fdh-accent);
    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);
}
.foxco-dual-heading.preset-dr-guberman::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--fdh-accent), #fffbe8, var(--fdh-accent), transparent);
    background-size: 200% 100%;
    animation: foxco-dg-shimmer 3s linear infinite;
}
.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;
}
.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: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.86);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    margin: 8px 0 0;
}

/* === DID YOU KNOW? (accent = glow and border) === */
@keyframes foxco-dyk-pulse {
    0%,100% { box-shadow: 0 0 0 2px var(--fdh-accent, #df6737), 0 0 20px color-mix(in srgb, var(--fdh-accent, #df6737) 30%, transparent), 0 0 40px color-mix(in srgb, var(--fdh-accent, #df6737) 10%, transparent); }
    50%     { box-shadow: 0 0 0 2px var(--fdh-accent, #df6737), 0 0 30px color-mix(in srgb, var(--fdh-accent, #df6737) 50%, transparent), 0 0 60px color-mix(in srgb, var(--fdh-accent, #df6737) 20%, transparent); }
}
@keyframes foxco-dyk-text-pulse {
    0%,100% { text-shadow: 0 0 7px var(--fdh-accent, #df6737), 0 0 21px color-mix(in srgb, var(--fdh-accent, #df6737) 60%, transparent), 0 0 42px color-mix(in srgb, var(--fdh-accent, #df6737) 30%, transparent); }
    50%     { text-shadow: 0 0 4px var(--fdh-accent, #df6737), 0 0 14px color-mix(in srgb, var(--fdh-accent, #df6737) 40%, transparent), 0 0 28px color-mix(in srgb, var(--fdh-accent, #df6737) 20%, transparent); }
}
@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 {
    --fdh-accent: #df6737;
    background: #080810;
    border: 2px solid var(--fdh-accent);
    border-radius: 10px;
    padding: 28px 40px;
    position: relative;
    overflow: hidden;
    animation: foxco-dyk-pulse 2.5s ease-in-out infinite;
}
.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;
}
.foxco-dual-heading.preset-did-you-know::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--fdh-accent) 8%, transparent) 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 var(--fdh-accent), 0 0 21px color-mix(in srgb, var(--fdh-accent) 60%, transparent), 0 0 42px color-mix(in srgb, var(--fdh-accent) 30%, transparent);
    animation: foxco-dyk-text-pulse 2.5s ease-in-out infinite, foxco-dyk-flicker 6s linear infinite;
}
.foxco-dual-heading.preset-did-you-know .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    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;
}

/* === SIGNAL -- no box border, one restrained glow, tracked label === */
.foxco-dual-heading.preset-signal {
    --fdh-accent: #df6737;
    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 color-mix(in srgb, var(--fdh-accent) 35%, transparent), 0 0 46px color-mix(in srgb, var(--fdh-accent) 15%, transparent);
}
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
    text-shadow: none;
}
/* Block (was inline-flex) so the Gap control's margin and Alignment
   both work on it; the dash rides inline in front of the text. */
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-2 {
    display: block;
    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;
    vertical-align: middle;
    width: 24px;
    height: 2px;
    margin: -2px 12px 0 0;
    background: var(--fdh-accent);
}
.foxco-dual-heading.preset-signal .foxco-dual-heading__heading-3 {
    color: #a3a2b5;
    font-size: clamp(.92rem, 1.3vw, 1.05rem);
    line-height: 1.6;
    margin: 12px 0 0;
}

/* === MCLOREN -- ink, brick wall, one red === */
.foxco-dual-heading.preset-mcloren {
    --fdh-accent: #FC1312;
    --fdh-link: var(--fdh-accent);
    position: relative;
    overflow: hidden;
    background: #0b0b0b;
    padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 56px);
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.foxco-dual-heading.preset-mcloren::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .05;
    pointer-events: none;
    background:
        linear-gradient(0deg, #fff 1px, transparent 1px) 0 0 / 120px 44px,
        linear-gradient(90deg, #fff 1px, transparent 1px) 0 0 / 120px 88px,
        linear-gradient(90deg, #fff 1px, transparent 1px) 60px 44px / 120px 88px;
}
.foxco-dual-heading.preset-mcloren::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -60%;
    z-index: 0;
    width: min(640px, 60%);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--fdh-accent) 22%, transparent) 0%, transparent 62%);
}
.foxco-dual-heading.preset-mcloren > * {
    position: relative;
    z-index: 1;
}
.foxco-dual-heading.preset-mcloren .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-family: "Poiret One", "Inter", sans-serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 1.2rem + 5vw, 7rem);
    letter-spacing: 0;
    line-height: .95;
    text-transform: lowercase;
    margin: 0 0 .22em;
}
.foxco-dual-heading.preset-mcloren .foxco-dual-heading__heading-1 em {
    color: var(--fdh-accent);
    font-style: italic;
    font-weight: 400;
}
.foxco-dual-heading.preset-mcloren .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-weight: 400;
}
.foxco-dual-heading.preset-mcloren .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, .85rem + 1.2vw, 2.2rem);
    letter-spacing: .01em;
    line-height: 1.2;
    text-transform: none;
    margin: 0;
}
.foxco-dual-heading.preset-mcloren .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.82);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, .9rem + .45vw, 1.4rem);
    line-height: 1.7;
    margin: 1em 0 0;
}
.foxco-dual-heading.preset-mcloren .foxco-inline-sep {
    font-family: "Poiret One", sans-serif;
}

/* =============================================================================
   BRAND PRESETS (4.0.0) -- same tokens as the Logo Carousel and Footer
   presets so a page built from one family matches. Fonts are printed once
   per page by the widget, only for the preset in use.
============================================================================= */

/* === CLEAN -- no box, inherits the section's text color (light or dark) === */
.foxco-dual-heading.preset-clean {
    --fdh-accent: #df6737;
    --fdh-link: var(--fdh-accent);
    background: none;
    border: none;
    padding: 0;
}
.foxco-dual-heading.preset-clean .foxco-dual-heading__heading-1 {
    color: inherit;
    font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 .3em;
}
.foxco-dual-heading.preset-clean .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-clean .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-clean .foxco-dual-heading__heading-2 {
    color: inherit;
    opacity: .78;
    font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
}
.foxco-dual-heading.preset-clean .foxco-dual-heading__heading-3 {
    color: var(--fdh-accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 1.1em 0 0;
}

/* === FOXCO V2 -- deep navy, dot grid, orange glow, Raleway === */
.foxco-dual-heading.preset-foxco-v2 {
    --fdh-accent: #ff6b1a;
    --fdh-link: var(--fdh-accent);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 260px at 0% 0%, color-mix(in srgb, var(--fdh-accent) 18%, transparent), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
        #0b0f1a;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: clamp(28px, 4vw, 56px);
    font-family: Raleway, system-ui, sans-serif;
}
.foxco-dual-heading.preset-foxco-v2 .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-family: Raleway, system-ui, sans-serif;
    font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.06;
    margin: 0 0 .35em;
}
.foxco-dual-heading.preset-foxco-v2 .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-foxco-v2 .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-foxco-v2 .foxco-dual-heading__heading-2 {
    color: #b9bdd0;
    font-family: Raleway, system-ui, sans-serif;
    font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}
.foxco-dual-heading.preset-foxco-v2 .foxco-dual-heading__heading-3 {
    color: var(--fdh-accent);
    font-family: Raleway, system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin: 1.4em 0 0;
}

/* === DR GUBERMAN V2 -- clean clinic card, blue with a gold edge === */
.foxco-dual-heading.preset-dr-guberman-v2 {
    --fdh-accent: #2670c0;
    --fdh-link: var(--fdh-accent);
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce6f1;
    border-radius: 12px;
    padding: clamp(26px, 3.6vw, 48px);
    box-shadow: 0 2px 6px rgba(29,53,87,.05), 0 18px 40px -28px rgba(38,112,192,.45);
}
.foxco-dual-heading.preset-dr-guberman-v2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fdh-accent), #4b8fd6 60%, #f0b429);
}
.foxco-dual-heading.preset-dr-guberman-v2 .foxco-dual-heading__heading-1 {
    color: #1d3557;
    font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0 0 .35em;
}
.foxco-dual-heading.preset-dr-guberman-v2 .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-dr-guberman-v2 .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-dr-guberman-v2 .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    font-size: clamp(1rem, .92rem + .45vw, 1.25rem);
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
}
.foxco-dual-heading.preset-dr-guberman-v2 .foxco-dual-heading__heading-3 {
    color: #55657a;
    font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
    line-height: 1.65;
    margin: .9em 0 0;
}

/* === BATTXR -- black starfield, Orbitron, electric cyan === */
.foxco-dual-heading.preset-battxr {
    --fdh-accent: #6ADFE4;
    --fdh-link: var(--fdh-accent);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 46% 70%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 78% 22%, rgba(106,223,228,.9) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(ellipse 60% 120% at 50% 130%, color-mix(in srgb, var(--fdh-accent) 14%, transparent), transparent 65%),
        #000000;
    border: 1px solid color-mix(in srgb, var(--fdh-accent) 18%, transparent);
    border-radius: 6px;
    padding: clamp(28px, 4vw, 56px);
}
.foxco-dual-heading.preset-battxr .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-family: Orbitron, system-ui, sans-serif;
    font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.12;
    text-transform: uppercase;
    margin: 0 0 .45em;
}
.foxco-dual-heading.preset-battxr .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-battxr .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
    text-shadow: 0 0 18px color-mix(in srgb, var(--fdh-accent) 45%, transparent);
}
.foxco-dual-heading.preset-battxr .foxco-dual-heading__heading-2 {
    color: var(--fdh-accent);
    font-family: Orbitron, system-ui, sans-serif;
    font-size: clamp(.72rem, .66rem + .3vw, .86rem);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin: 0;
}
.foxco-dual-heading.preset-battxr .foxco-dual-heading__heading-3 {
    color: #c3c4c7;
    font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
    line-height: 1.65;
    margin: 1em 0 0;
}

/* === MARINEBATTERY -- deep navy, wave edge, sea blue === */
.foxco-dual-heading.preset-marinebattery {
    --fdh-accent: #4fb8ff;
    --fdh-link: var(--fdh-accent);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M0 10c20-8 40-8 60 0s40 8 60 0 40-8 60 0 40 8 60 0V0H0z' fill='%231565c0' fill-opacity='.55'/%3E%3C/svg%3E") 0 0 / 240px 18px repeat-x,
        linear-gradient(180deg, #0e3a66 0%, #0b2545 100%);
    border-radius: 12px;
    padding: clamp(36px, 4.5vw, 64px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 52px);
}
.foxco-dual-heading.preset-marinebattery .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 .35em;
}
.foxco-dual-heading.preset-marinebattery .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-marinebattery .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-marinebattery .foxco-dual-heading__heading-2 {
    color: #c9dbee;
    font-size: clamp(1rem, .92rem + .45vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
.foxco-dual-heading.preset-marinebattery .foxco-dual-heading__heading-3 {
    color: var(--fdh-accent);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 1.2em 0 0;
}

/* === BOOKEDINCAMP V2 -- white card, ink outline, highlighter yellow === */
.foxco-dual-heading.preset-bookedincamp-v2 {
    --fdh-accent: #ffd21f;
    --fdh-link: #2f3b45;
    background: #ffffff;
    border: 2px solid #2f3b45;
    border-radius: 16px;
    box-shadow: 0 5px 0 #2f3b45;
    padding: clamp(24px, 3.6vw, 48px);
    font-family: Nunito, system-ui, sans-serif;
}
.foxco-dual-heading.preset-bookedincamp-v2 a[href] { text-decoration: underline; text-decoration-color: var(--fdh-accent); text-decoration-thickness: .18em; }
.foxco-dual-heading.preset-bookedincamp-v2 .foxco-dual-heading__heading-1 {
    color: #2f3b45;
    font-family: Nunito, system-ui, sans-serif;
    font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.3rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 .35em;
}
.foxco-dual-heading.preset-bookedincamp-v2 .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-bookedincamp-v2 .foxco-dual-heading__heading-1 strong {
    color: inherit;
    font-style: normal;
    background: linear-gradient(transparent 58%, var(--fdh-accent) 58%, var(--fdh-accent) 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 .08em;
}
.foxco-dual-heading.preset-bookedincamp-v2 .foxco-dual-heading__heading-2 {
    color: #4a5763;
    font-family: Nunito, system-ui, sans-serif;
    font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}
.foxco-dual-heading.preset-bookedincamp-v2 .foxco-dual-heading__heading-3 {
    display: inline-block;
    color: #2f3b45;
    background: var(--fdh-accent);
    border-radius: 1em;
    font-family: Nunito, system-ui, sans-serif;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    padding: .45em 1em;
    margin: 1.1em 0 0;
}

/* === PASSE -- black, Orbitron headline, red label === */
.foxco-dual-heading.preset-passe {
    --fdh-accent: #E0262F;
    --fdh-link: #ffffff;
    background: #000000;
    border-left: 4px solid var(--fdh-accent);
    border-radius: 0;
    padding: clamp(28px, 4vw, 56px);
    font-family: Oxanium, system-ui, sans-serif;
}
.foxco-dual-heading.preset-passe .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-family: Orbitron, system-ui, sans-serif;
    font-size: clamp(1.6rem, 1rem + 2.8vw, 3.2rem);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.12;
    text-transform: uppercase;
    margin: 0 0 .5em;
}
.foxco-dual-heading.preset-passe .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-passe .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-passe .foxco-dual-heading__heading-2 {
    display: inline-block;
    color: #ffffff;
    background: var(--fdh-accent);
    font-family: Oxanium, system-ui, sans-serif;
    font-size: clamp(.78rem, .72rem + .3vw, .92rem);
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    padding: .4em .8em;
    margin: 0;
}
.foxco-dual-heading.preset-passe .foxco-dual-heading__heading-3 {
    color: rgba(255,255,255,.7);
    font-family: Oxanium, system-ui, sans-serif;
    font-size: clamp(.95rem, .9rem + .25vw, 1.1rem);
    font-weight: 500;
    line-height: 1.6;
    margin: 1em 0 0;
}

/* === SALEEN -- graphite, wide tracking, racing red === */
.foxco-dual-heading.preset-saleen {
    --fdh-accent: #e41c23;
    --fdh-link: var(--fdh-accent);
    position: relative;
    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
    border-radius: 2px;
    padding: clamp(30px, 4vw, 56px);
}
.foxco-dual-heading.preset-saleen::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 72px;
    height: 3px;
    background: var(--fdh-accent);
}
.foxco-dual-heading.preset-saleen .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0 0 .5em;
}
.foxco-dual-heading.preset-saleen .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-saleen .foxco-dual-heading__heading-1 strong {
    color: var(--fdh-accent);
    font-style: normal;
}
.foxco-dual-heading.preset-saleen .foxco-dual-heading__heading-2 {
    color: #a3a3a3;
    font-size: clamp(.78rem, .72rem + .3vw, .9rem);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0;
}
.foxco-dual-heading.preset-saleen .foxco-dual-heading__heading-3 {
    color: #8a8a8a;
    font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
    line-height: 1.65;
    margin: 1em 0 0;
}

/* =============================================================================
   ENTRANCE ANIMATIONS (letter by letter)
   The JS splits a heading into .fdh-letter spans only when it carries
   data-fdh-anim, then adds .fdh-anim-play. Headings without the attribute
   are never touched. Everything sits behind prefers-reduced-motion.
============================================================================= */
@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,
    .fdh-anim-flip-up .fdh-word {
        /* also on the per-word wrapper: perspective only reaches an
           element's direct 3D children, and each letter's containing
           block is now its .fdh-word, not the heading */
        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;
    }
}

/* =============================================================================
   REDUCED MOTION -- stop the looping preset effects; letters land in place.
============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .foxco-dual-heading.preset-neon-pulse .foxco-dual-heading__heading-1,
    .foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-1,
    .foxco-dual-heading.preset-gradient-fire .fdh-letter,
    .foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2::after,
    .foxco-dual-heading.preset-cyber-slash::after,
    .foxco-dual-heading.quote-animated .foxco-quote,
    .foxco-dual-heading.preset-dr-guberman::before,
    .foxco-dual-heading.preset-did-you-know,
    .foxco-dual-heading.preset-did-you-know .foxco-dual-heading__heading-1 {
        animation: none !important;
    }
    [data-fdh-anim] .fdh-letter {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto;
    }
}


/* ===== 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;
}

/* Track as wide as its logos (2.11.0). As a plain block-level flex box it
   was always exactly the container's width no matter how wide its logos
   grew, so the script's ResizeObserver on it never fired when real images
   replaced lazy-load placeholders -- the loop kept the placeholder-sized
   set width forever and snapped back every cycle on the live front end
   (the editor preview loads images up front, so it looked fine there).
   Not applied to the grid layout, which needs the container's width. */
.foxco-logo-carousel-wrapper:not(.grid-layout) .foxco-logo-track {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}


/* 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-mcloren.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. */

/* 13. McLoren (2.13.0) -- studio black, faint brick wall, soft red
   airbrush glow. All one background stack (no ::after) so it never
   fights the touch edge-fade pseudo-elements. */
.foxco-logo-carousel-wrapper.bg-preset-mcloren {
    background:
        radial-gradient(ellipse 45% 120% at 88% 0%, rgba(252,19,18,0.22) 0%, rgba(252,19,18,0) 70%),
        radial-gradient(ellipse 30% 90% at 8% 100%, rgba(252,19,18,0.10) 0%, rgba(252,19,18,0) 70%),
        linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 120px 44px,
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 120px 88px,
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 60px 44px / 120px 88px,
        #0b0b0b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.14);
}
.foxco-logo-carousel-wrapper.bg-preset-mcloren.edge-fade {
    --edge-fade-bg: rgba(11, 11, 11, 1);
}
.foxco-logo-carousel-wrapper.bg-preset-mcloren .foxco-logo-name {
    background: #FC1312;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: lowercase;
}
.foxco-logo-carousel-wrapper.bg-preset-mcloren .foxco-logo-item,
.foxco-logo-carousel-wrapper.bg-preset-mcloren .foxco-logo-item::before {
    border-radius: 0;
}

/* ===============================================
   STYLE PRESETS (2.14.0)
   .lc-preset-{key} on the wrapper. Every preset sets the same small set
   of variables; the shared rules below draw the card, hover, label,
   heading and background from them. Classic (no class) keeps the
   original look untouched.
=============================================== */
:where(.foxco-logo-carousel-wrapper.lc-preset) {
    --lc-bg: transparent;
    --lc-ink: #111827;
    --lc-muted: #6b7280;
    --lc-accent: #111827;
    --lc-card: transparent;
    --lc-line: transparent;
    --lc-line-hover: transparent;
    --lc-radius: 12px;
    --lc-pad: 18px 24px;
    --lc-shadow: none;
    --lc-shadow-hover: none;
    --lc-lift: -4px;
    --lc-label-bg: #111827;
    --lc-label-ink: #ffffff;
    --lc-label-radius: 999px;
    --lc-font: inherit;
    --lc-display: inherit;
    --lc-display-weight: 700;
    --lc-edge: #ffffff;
}
.foxco-logo-carousel-wrapper.lc-preset {
    padding: clamp(28px, 3.4vw, 64px) 0;
    color: var(--lc-ink);
}
.foxco-logo-carousel-wrapper.lc-preset:not([class*="bg-preset-"]) { background: var(--lc-bg); }
.foxco-logo-carousel-wrapper.lc-preset.edge-fade { --edge-fade-bg: var(--lc-edge); }

/* heading */
.foxco-logo-carousel-wrapper .foxco-lc-head { padding: 0 clamp(16px, 4vw, 64px); margin-bottom: clamp(18px, 2.2vw, 36px); }
.foxco-logo-carousel-wrapper .foxco-lc-eyebrow {
    display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 8px;
    font-family: var(--lc-font, inherit); font-size: clamp(11px, 0.8vw, 13px); font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--lc-muted, #6b7280);
}
.foxco-logo-carousel-wrapper .foxco-lc-eyebrow::before,
.foxco-logo-carousel-wrapper .foxco-lc-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--lc-accent, currentColor); }
.foxco-logo-carousel-wrapper .foxco-lc-head[style*="left"] .foxco-lc-eyebrow { justify-content: flex-start; }
.foxco-logo-carousel-wrapper .foxco-lc-head[style*="right"] .foxco-lc-eyebrow { justify-content: flex-end; }
.foxco-logo-carousel-wrapper .foxco-lc-head[style*="left"] .foxco-lc-eyebrow::after,
.foxco-logo-carousel-wrapper .foxco-lc-head[style*="right"] .foxco-lc-eyebrow::before { display: none; }
.foxco-logo-carousel-wrapper .foxco-lc-title {
    margin: 0; font-family: var(--lc-display, inherit); font-weight: var(--lc-display-weight, 700);
    font-size: clamp(22px, 2.4vw, 42px); line-height: 1.15; color: var(--lc-ink, inherit);
}

/* Room inside the clipping box for the hover lift and shadows. */
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-carousel { padding: 10px 0 16px; }

/* items */
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item {
    min-width: clamp(120px, 12vw, 210px);
    padding: var(--lc-pad);
    border-radius: var(--lc-radius);
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    box-shadow: var(--lc-shadow);
    transform: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item::before { display: none; }
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px;
    background: var(--lc-accent); transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item:hover {
    transform: translateY(var(--lc-lift));
    border-color: var(--lc-line-hover);
    box-shadow: var(--lc-shadow-hover);
}
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item:hover::after { transform: scaleX(1); }

/* logo color */
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item img { filter: var(--lc-img, none); transition: filter 0.35s ease, opacity 0.35s ease; }
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item:hover img { filter: var(--lc-img-hover, none); }
.foxco-logo-carousel-wrapper.lc-tone-original { --lc-img: none; --lc-img-hover: none; }
.foxco-logo-carousel-wrapper.lc-tone-gray { --lc-img: grayscale(1) opacity(0.62); --lc-img-hover: grayscale(0) opacity(1); }
.foxco-logo-carousel-wrapper.lc-tone-mono-light { --lc-img: brightness(0) invert(1) opacity(0.62); --lc-img-hover: brightness(0) invert(1) opacity(1); }
.foxco-logo-carousel-wrapper.lc-tone-mono-dark { --lc-img: brightness(0) opacity(0.55); --lc-img-hover: brightness(0) opacity(0.92); }
/* Phones drop image filters for scroll performance (see MOBILE PERFORMANCE),
   but a white-on-dark logo wall can't fall back to original colors -- a dark
   logo would vanish on a dark background. Flat tones stay, without transition. */
@media (hover: none) and (pointer: coarse) {
    .foxco-logo-carousel-wrapper.lc-tone-mono-light .foxco-logo-item img { filter: brightness(0) invert(1) opacity(0.8) !important; transition: none; }
    .foxco-logo-carousel-wrapper.lc-tone-mono-dark .foxco-logo-item img { filter: brightness(0) opacity(0.7) !important; transition: none; }
}

/* name label: inside the card, so the carousel's overflow never clips it */
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-name {
    bottom: 8px; padding: 3px 10px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
    background: var(--lc-label-bg); color: var(--lc-label-ink); border-radius: var(--lc-label-radius);
    font-family: var(--lc-font, inherit); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    box-shadow: none; transform: translate(-50%, 6px);
}
.foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item:hover .foxco-logo-name { bottom: 8px; transform: translate(-50%, 0); }

/* responsive item sizing for presets */
@media (max-width: 1024px) { .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item { height: calc(var(--logo-height, 120px) * 0.9); } }
@media (max-width: 768px)  { .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item { height: calc(var(--logo-height, 120px) * 0.8); padding: 12px 16px; min-width: 120px; } }
@media (max-width: 480px)  { .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item { height: calc(var(--logo-height, 120px) * 0.7); padding: 10px 14px; min-width: 100px; } }
@media (prefers-reduced-motion: reduce) {
    .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item,
    .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item::after,
    .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item img { transition: none; }
    .foxco-logo-carousel-wrapper.lc-preset .foxco-logo-item:hover { transform: none; }
}

/* ---- Modern Clean: white, quiet, gray logos that warm up ---- */
.foxco-logo-carousel-wrapper.lc-preset-modern { --lc-bg: #ffffff; --lc-ink: #0f172a; --lc-muted: #64748b; --lc-accent: #0f172a; --lc-lift: -3px; }

/* ---- Card Tiles: soft gray stage, white cards ---- */
.foxco-logo-carousel-wrapper.lc-preset-tiles {
    --lc-bg: #f5f6f8; --lc-ink: #101828; --lc-muted: #667085; --lc-accent: #2563eb;
    --lc-card: #ffffff; --lc-line: #e4e7ec; --lc-line-hover: #c7d2fe; --lc-radius: 16px;
    --lc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); --lc-shadow-hover: 0 18px 36px -18px rgba(16, 24, 40, 0.3);
    --lc-label-bg: #101828; --lc-edge: #f5f6f8;
}

/* ---- Modern Minimal: hairline columns, no motion ---- */
.foxco-logo-carousel-wrapper.lc-preset-minimal { --lc-bg: #ffffff; --lc-ink: #111111; --lc-muted: #6b6b6b; --lc-accent: #111111; --lc-radius: 0; --lc-lift: 0px; --lc-label-radius: 0; }
.foxco-logo-carousel-wrapper.lc-preset-minimal .foxco-logo-track { gap: 0; }
.foxco-logo-carousel-wrapper.lc-preset-minimal .foxco-logo-item { border-width: 0 1px 0 0; border-color: #e5e5e5; padding-left: calc(var(--logo-gap, 60px) / 2 + 12px); padding-right: calc(var(--logo-gap, 60px) / 2 + 12px); }
.foxco-logo-carousel-wrapper.lc-preset-minimal .foxco-logo-item:hover { border-color: #e5e5e5; }

/* ---- Midnight Glass: dark, frosted cards ---- */
.foxco-logo-carousel-wrapper.lc-preset-midnight {
    --lc-bg: radial-gradient(900px 300px at 50% -40%, rgba(129, 140, 248, 0.22), rgba(129, 140, 248, 0) 70%), #0b1020;
    --lc-ink: #f8fafc; --lc-muted: #94a3b8; --lc-accent: #a5b4fc;
    --lc-card: rgba(255, 255, 255, 0.04); --lc-line: rgba(255, 255, 255, 0.08); --lc-line-hover: rgba(165, 180, 252, 0.45); --lc-radius: 16px;
    --lc-shadow-hover: 0 20px 40px -20px rgba(129, 140, 248, 0.55); --lc-label-bg: #a5b4fc; --lc-label-ink: #0b1020; --lc-edge: #0b1020;
}

/* ---- Foxco: deep navy, dot grid, orange glow (Raleway) ---- */
.foxco-logo-carousel-wrapper.lc-preset-foxco-v2 {
    --lc-bg: radial-gradient(700px 260px at 0% 0%, rgba(255, 107, 26, 0.18), rgba(255, 107, 26, 0) 70%), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px, #0b0f1a;
    --lc-ink: #ffffff; --lc-muted: #b9bdd0; --lc-accent: #ff6b1a;
    --lc-card: rgba(255, 255, 255, 0.03); --lc-line: rgba(255, 255, 255, 0.08); --lc-line-hover: rgba(255, 107, 26, 0.55); --lc-radius: 14px;
    --lc-shadow-hover: 0 18px 40px -18px rgba(255, 107, 26, 0.6); --lc-label-bg: #ff6b1a; --lc-label-ink: #0b0f1a;
    --lc-font: Raleway, sans-serif; --lc-display: Raleway, sans-serif; --lc-display-weight: 800; --lc-edge: #0b0f1a;
}
.foxco-logo-carousel-wrapper.lc-preset-foxco-v2 .foxco-lc-eyebrow { color: #ff6b1a; }

/* ---- Dr Guberman: clinical light, blue + gold ---- */
.foxco-logo-carousel-wrapper.lc-preset-drguberman-v2 {
    --lc-bg: #f5f9fd; --lc-ink: #1d3557; --lc-muted: #55657a; --lc-accent: #2670c0;
    --lc-card: #ffffff; --lc-line: #dce6f1; --lc-line-hover: #2670c0; --lc-radius: 12px;
    --lc-shadow: 0 2px 6px rgba(29, 53, 87, 0.05); --lc-shadow-hover: 0 16px 32px -18px rgba(38, 112, 192, 0.45);
    --lc-label-bg: #2670c0; --lc-edge: #f5f9fd;
}
.foxco-logo-carousel-wrapper.lc-preset-drguberman-v2 .foxco-logo-item::after { left: 0; right: 0; top: 0; bottom: auto; height: 3px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #2670c0, #4b8fd6 60%, #f0b429); }

/* ---- BattXR: black space, teal hairlines (Orbitron) ---- */
.foxco-logo-carousel-wrapper.lc-preset-battxr {
    --lc-bg: radial-gradient(1px 1px at 12% 30%, rgba(255, 255, 255, 0.7) 50%, transparent 51%), radial-gradient(1px 1px at 46% 70%, rgba(255, 255, 255, 0.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 78% 22%, rgba(106, 223, 228, 0.9) 50%, transparent 51%), radial-gradient(ellipse 60% 120% at 50% 130%, rgba(106, 223, 228, 0.14), rgba(0, 0, 0, 0) 65%), #000000;
    --lc-ink: #ffffff; --lc-muted: #c3c4c7; --lc-accent: #6ADFE4;
    --lc-card: rgba(12, 16, 18, 0.86); --lc-line: rgba(106, 223, 228, 0.18); --lc-line-hover: rgba(106, 223, 228, 0.7); --lc-radius: 6px;
    --lc-shadow-hover: 0 0 28px rgba(106, 223, 228, 0.28); --lc-label-bg: #6ADFE4; --lc-label-ink: #001214; --lc-label-radius: 2px;
    --lc-font: Orbitron, sans-serif; --lc-display: Orbitron, sans-serif; --lc-edge: #000000;
}
.foxco-logo-carousel-wrapper.lc-preset-battxr .foxco-lc-eyebrow { color: #6ADFE4; letter-spacing: 0.3em; }
.foxco-logo-carousel-wrapper.lc-preset-battxr .foxco-logo-name { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- MarineBattery: ocean navy, wave crest ---- */
.foxco-logo-carousel-wrapper.lc-preset-marinebattery {
    --lc-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M0 10c20-8 40-8 60 0s40 8 60 0 40-8 60 0 40 8 60 0V0H0z' fill='%231565c0' fill-opacity='.55'/%3E%3C/svg%3E") 0 0 / 240px 18px repeat-x, linear-gradient(180deg, #0e3a66 0%, #0b2545 100%);
    --lc-ink: #ffffff; --lc-muted: #c9dbee; --lc-accent: #4fb8ff;
    --lc-card: rgba(255, 255, 255, 0.05); --lc-line: rgba(127, 208, 255, 0.16); --lc-line-hover: rgba(127, 208, 255, 0.6); --lc-radius: 12px;
    --lc-shadow-hover: 0 18px 36px -18px rgba(0, 0, 0, 0.6); --lc-label-bg: #1e88e5; --lc-edge: #0b2545;
}

/* ---- BookedInCamp: sticker cards, slate outlines, yellow (Nunito) ---- */
.foxco-logo-carousel-wrapper.lc-preset-bookedincamp-v2 {
    --lc-bg: #ffffff; --lc-ink: #2f3b45; --lc-muted: #4a5763; --lc-accent: #ffd21f;
    --lc-card: #ffffff; --lc-line: #2f3b45; --lc-line-hover: #2f3b45; --lc-radius: 16px;
    --lc-shadow: 0 4px 0 #2f3b45; --lc-shadow-hover: 0 7px 0 #2f3b45; --lc-lift: -3px;
    --lc-label-bg: #ffd21f; --lc-label-ink: #2f3b45;
    --lc-font: Nunito, system-ui, sans-serif; --lc-display: Nunito, system-ui, sans-serif; --lc-display-weight: 900;
}
.foxco-logo-carousel-wrapper.lc-preset-bookedincamp-v2 .foxco-logo-item { border-width: 2px; }
.foxco-logo-carousel-wrapper.lc-preset-bookedincamp-v2 .foxco-logo-item::after { display: none; }
.foxco-logo-carousel-wrapper.lc-preset-bookedincamp-v2 .foxco-lc-title { background: linear-gradient(transparent 60%, #ffd21f 60%); display: inline; }
.foxco-logo-carousel-wrapper.lc-preset-bookedincamp-v2 .foxco-logo-name { font-weight: 900; letter-spacing: 0.02em; }

/* ---- Passe: black, race red, square (Orbitron / Oxanium) ---- */
.foxco-logo-carousel-wrapper.lc-preset-passe {
    --lc-bg: #000000; --lc-ink: #ffffff; --lc-muted: rgba(255, 255, 255, 0.7); --lc-accent: #E0262F;
    --lc-card: transparent; --lc-line: rgba(255, 255, 255, 0.1); --lc-line-hover: rgba(255, 255, 255, 0.22); --lc-radius: 0;
    --lc-label-bg: #E0262F; --lc-label-radius: 0; --lc-font: Oxanium, sans-serif; --lc-display: Orbitron, sans-serif; --lc-edge: #000000;
}
.foxco-logo-carousel-wrapper.lc-preset-passe .foxco-logo-item::after { left: 0; right: 0; height: 3px; transform-origin: left center; }
.foxco-logo-carousel-wrapper.lc-preset-passe .foxco-logo-name { text-transform: uppercase; letter-spacing: 0.12em; }
.foxco-logo-carousel-wrapper.lc-preset-passe .foxco-lc-eyebrow::before { width: 4px; height: 18px; }
.foxco-logo-carousel-wrapper.lc-preset-passe .foxco-lc-eyebrow::after { display: none; }

/* ---- McLoren: brick wall, square, red offset shadow (Poiret One) ---- */
.foxco-logo-carousel-wrapper.lc-preset-mcloren {
    --lc-bg: radial-gradient(ellipse 45% 120% at 88% 0%, rgba(252, 19, 18, 0.2) 0%, rgba(252, 19, 18, 0) 70%), linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 120px 44px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 120px 88px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 60px 44px / 120px 88px, #0b0b0b;
    --lc-ink: #ffffff; --lc-muted: rgba(255, 255, 255, 0.62); --lc-accent: #FC1312;
    --lc-card: rgba(11, 11, 11, 0.6); --lc-line: rgba(255, 255, 255, 0.14); --lc-line-hover: #ffffff; --lc-radius: 0;
    --lc-shadow-hover: 8px 8px 0 #FC1312; --lc-lift: -2px;
    --lc-label-bg: #FC1312; --lc-label-ink: #ffffff; --lc-label-radius: 0;
    --lc-font: Inter, sans-serif; --lc-display: 'Poiret One', sans-serif; --lc-display-weight: 400; --lc-edge: #0b0b0b;
}
.foxco-logo-carousel-wrapper.lc-preset-mcloren .foxco-logo-item::after { display: none; }
.foxco-logo-carousel-wrapper.lc-preset-mcloren .foxco-lc-title { text-transform: lowercase; font-size: clamp(28px, 3.2vw, 56px); }
.foxco-logo-carousel-wrapper.lc-preset-mcloren .foxco-logo-name { text-transform: lowercase; letter-spacing: 0.14em; }

/* ---- Saleen: black, racing red, wide-tracked labels ---- */
.foxco-logo-carousel-wrapper.lc-preset-saleen {
    --lc-bg: linear-gradient(180deg, #111111 0%, #0a0a0a 100%); --lc-ink: #ffffff; --lc-muted: #a3a3a3; --lc-accent: #e41c23;
    --lc-card: #121212; --lc-line: rgba(255, 255, 255, 0.07); --lc-line-hover: rgba(228, 28, 35, 0.6); --lc-radius: 2px;
    --lc-shadow-hover: 0 16px 30px -16px rgba(228, 28, 35, 0.55); --lc-label-bg: #e41c23; --lc-label-radius: 2px; --lc-edge: #0a0a0a;
}
.foxco-logo-carousel-wrapper.lc-preset-saleen .foxco-lc-title,
.foxco-logo-carousel-wrapper.lc-preset-saleen .foxco-logo-name { text-transform: uppercase; letter-spacing: 0.18em; }
.foxco-logo-carousel-wrapper.lc-preset-saleen .foxco-lc-title { font-size: clamp(18px, 1.8vw, 30px); }

/* ---- FixWP: blue felt, paper cards (Libre Baskerville) ---- */
.foxco-logo-carousel-wrapper.lc-preset-fixwp {
    --lc-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), #3b70a7;
    --lc-ink: #ffffff; --lc-muted: #dbe7f5; --lc-accent: #172a45;
    --lc-card: #fbfcfe; --lc-line: rgba(23, 42, 69, 0.12); --lc-line-hover: #172a45; --lc-radius: 10px;
    --lc-shadow: 0 6px 18px -10px rgba(10, 25, 45, 0.5); --lc-shadow-hover: 0 18px 30px -16px rgba(10, 25, 45, 0.6);
    --lc-label-bg: #172a45; --lc-font: 'Libre Baskerville', Georgia, serif; --lc-display: 'Libre Baskerville', Georgia, serif; --lc-edge: #3b70a7;
}
.foxco-logo-carousel-wrapper.lc-preset-fixwp .foxco-lc-eyebrow { color: #dbe7f5; }
.foxco-logo-carousel-wrapper.lc-preset-fixwp .foxco-lc-eyebrow::before, .foxco-logo-carousel-wrapper.lc-preset-fixwp .foxco-lc-eyebrow::after { background: #dbe7f5; }
.foxco-logo-carousel-wrapper.lc-preset-fixwp .foxco-lc-title { font-style: italic; font-weight: 400; }


/* ===== Offer Cards ===== */
/* ==========================================================
   Foxco Offer Cards -- v1.2.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; }

/* ==========================================================
   STYLE 5 -- FixWP (blue felt, serif). See FIXWP-BRAND-GUIDE.md.
   Paper card only, deliberately -- the guide's own Do/Don't table says
   felt belongs on section-level backgrounds only, never inside a small
   card, so this is the "on light" treatment, not a felt variant. This
   is also the one existing style here that matches how the guide
   describes FixWP cards everywhere else: paper bg, hairline border,
   flat resting shadow, ink-navy 700 titles, slate body text, ink-navy
   button.
   ========================================================== */
.foxco-oc-fixwp {
    background: #fbfcfe; /* paper */
    border: 1px solid rgba(23, 42, 69, .12); /* hairline */
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(15, 30, 55, .18); /* flat "paper resting on felt" edge -- no soft glow */
}
.foxco-oc-fixwp .foxco-oc-price-label {
    color: #3a6fa5;
    font-family: "Libre Baskerville", Baskerville, Georgia, serif;
    font-style: italic;
}
.foxco-oc-fixwp .foxco-oc-title {
    color: #172a45;
    font-family: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
    font-weight: 700; /* card titles are 700 -- only the big hero heading stays at 400 */
}
.foxco-oc-fixwp .foxco-oc-description {
    color: #41536d; /* slate */
    font-family: "Libre Baskerville", Georgia, serif;
    line-height: 1.7; /* the serif needs the extra leading */
}
.foxco-oc-fixwp .foxco-oc-features li {
    color: #41536d;
    font-family: "Libre Baskerville", Georgia, serif;
}
.foxco-oc-fixwp .foxco-oc-check {
    background: #172a45; /* ink navy -- simple solid fill, no gradients/glow per the guide */
    color: #fff;
}
.foxco-oc-fixwp .foxco-oc-cta {
    background: #172a45; /* ink navy fill, white text -- "buttons on light surfaces" */
    color: #ffffff;
    font-family: "Libre Baskerville", Baskerville, Georgia, serif;
    font-weight: 700;
    box-shadow: none;
}
.foxco-oc-fixwp .foxco-oc-cta:hover {
    background: #2c6095; /* felt blue deep */
}
/* No decorative fox-ear watermark -- doesn't fit the calm, bookish
   FixWP look (same call the existing Minimal style already makes). */
.foxco-oc-fixwp .foxco-oc-bg-shape { display: none; }

/* ==========================================================
   STYLE 6 -- McLoren (black brick, spray red, Poiret One).
   Square corners, red hard offset shadow, numbered-row features.
   ========================================================== */
.foxco-oc-mcloren {
    background-color: #0b0b0b;
    background-image:
        linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 120px 44px, 120px 88px, 120px 88px;
    background-position: 0 0, 0 0, 60px 44px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0;
    color: #ffffff;
    font-family: Inter, sans-serif;
    box-shadow: 12px 12px 0 #FC1312;
    /* Room for the offset shadow inside the column, so it never pokes out. */
    width: calc(100% - 12px);
    margin: 0 12px 12px 0;
    overflow: visible;
}
.foxco-oc-mcloren:hover {
    transform: translate(-4px, -4px);
    box-shadow: 16px 16px 0 #FC1312;
}
.foxco-oc-mcloren .foxco-oc-price-label {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .62);
    font-size: clamp(11px, .8vw, 14px);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.foxco-oc-mcloren .foxco-oc-price-label::before {
    content: "";
    flex: 0 0 34px;
    height: 1px;
    background: #FC1312;
}
.foxco-oc-mcloren .foxco-oc-title {
    color: #ffffff;
    font-family: 'Poiret One', sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 3.2vw, 64px);
    line-height: .95;
    text-transform: lowercase;
    letter-spacing: 0;
}
.foxco-oc-mcloren .foxco-oc-description {
    color: rgba(255, 255, 255, .62);
    font-size: clamp(15px, 1.05vw, 19px);
    line-height: 1.7;
}
.foxco-oc-mcloren .foxco-oc-features {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.foxco-oc-mcloren .foxco-oc-features li {
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 400;
    transition: padding .3s cubic-bezier(.2, .8, .2, 1);
}
.foxco-oc-mcloren .foxco-oc-features li:hover {
    padding-left: 10px;
}
.foxco-oc-mcloren .foxco-oc-check {
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: 1px solid #FC1312;
    background: transparent;
    color: #FC1312;
}
.foxco-oc-mcloren .foxco-oc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 0;
    background: #FC1312;
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: lowercase;
    transition: background-color .2s ease, color .2s ease;
}
.foxco-oc-mcloren .foxco-oc-cta::after {
    content: "\2192";
    font-size: 1.15em;
    letter-spacing: 0;
}
.foxco-oc-mcloren .foxco-oc-cta:hover {
    opacity: 1;
    transform: none;
    background: #ffffff;
    color: #0b0b0b;
}
.foxco-oc-mcloren .foxco-oc-bg-shape { display: none; }
@media (prefers-reduced-motion: reduce) {
    .foxco-oc-mcloren,
    .foxco-oc-mcloren .foxco-oc-features li { transition: none; }
    .foxco-oc-mcloren:hover { transform: none; }
}

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


/* ===== Separator ===== */
/* ===================================================================
   Foxco Separator Widget -- v1.1.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); }
}

/* ==================================================================
   7. McLoren -- spray-paint line with drips (1.2.0)
   The wrapper reserves room for the drips so Space Below stays honest.
   ================================================================== */
.foxco-sep-spray {
    position: relative;
    width: 100%;
    height: calc(var(--sep-t, 3px) * 4 + 40px);
}
.foxco-sep-spray__line,
.foxco-sep-spray__mist {
    position: absolute;
    left: 0;
    right: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 93%, transparent 100%);
}
.foxco-sep-spray__line {
    top: 10px;
    height: var(--sep-t, 3px);
    border-radius: 99px;
    background: var(--sep-paint, #FC1312);
    box-shadow:
        0 0 3px 1px color-mix(in srgb, var(--sep-paint, #FC1312) 55%, transparent),
        0 0 14px 4px color-mix(in srgb, var(--sep-paint, #FC1312) 16%, transparent);
}
/* Overspray: scattered specks printed by the widget, thinning with
   distance from the stroke. */
.foxco-sep-spray__mist {
    top: 0;
    bottom: 0;
}
.foxco-sep-spray__mist i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: var(--sep-paint, #FC1312);
}
.foxco-sep-spray__drip {
    position: absolute;
    top: calc(10px + var(--sep-t, 3px) - 1px);
    width: max(3px, var(--sep-t, 3px));
    height: var(--d, 16px);
    margin-left: calc(max(3px, var(--sep-t, 3px)) / -2);
    border-radius: 0 0 99px 99px;
    background: var(--sep-paint, #FC1312);
    transform-origin: top center;
}
.foxco-sep-spray__drip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: inherit;
    transform: translateX(-50%);
}
.foxco-sep--mcloren.foxco-sep--animated .foxco-sep-spray__line {
    animation: foxco-spray-draw 7s cubic-bezier(.2, .8, .2, 1) infinite;
}
.foxco-sep--mcloren.foxco-sep--animated .foxco-sep-spray__mist {
    animation: foxco-spray-mist 7s cubic-bezier(.2, .8, .2, 1) infinite;
}
.foxco-sep--mcloren.foxco-sep--animated .foxco-sep-spray__drip {
    animation-name: foxco-spray-drip;
    animation-duration: 7s;
    animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    animation-iteration-count: infinite;
}
@keyframes foxco-spray-draw {
    0%   { clip-path: inset(-20px 100% -20px -20px); opacity: 1; }
    22%  { clip-path: inset(-20px -20px -20px -20px); opacity: 1; }
    88%  { clip-path: inset(-20px -20px -20px -20px); opacity: 1; }
    100% { clip-path: inset(-20px -20px -20px -20px); opacity: 0; }
}
@keyframes foxco-spray-mist {
    0%   { clip-path: inset(-20px 100% -20px -20px); opacity: 0; }
    26%  { clip-path: inset(-20px -20px -20px -20px); opacity: 1; }
    88%  { opacity: 1; }
    100% { clip-path: inset(-20px -20px -20px -20px); opacity: 0; }
}
@keyframes foxco-spray-drip {
    0%, 24% { transform: scaleY(0); opacity: 1; }
    58%     { transform: scaleY(1); opacity: 1; }
    88%     { transform: scaleY(1.08); opacity: 1; }
    100%    { transform: scaleY(1.08); opacity: 0; }
}

/* ==================================================================
   Reduced motion -- stop the infinite animations. The EKG/zigzag paths
   start fully dash-offset (hidden), so reset the offset to keep the
   line drawn when the animation is removed.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .foxco-sep--animated .foxco-sep-accent,
    .foxco-sep--animated .foxco-sep-neon,
    .foxco-sep--animated .foxco-sep-double__top,
    .foxco-sep--animated .foxco-sep-double__bot,
    .foxco-sep--animated .foxco-sep-laser,
    .foxco-sep--animated .foxco-sep-ekg path,
    .foxco-sep--animated .foxco-sep-zigzag path,
    .foxco-sep--animated .foxco-sep-spray__line,
    .foxco-sep--animated .foxco-sep-spray__mist,
    .foxco-sep--animated .foxco-sep-spray__drip {
        animation: none !important;
    }
    .foxco-sep-wrap.foxco-sep--animated .foxco-sep-ekg path,
    .foxco-sep-wrap.foxco-sep--animated .foxco-sep-zigzag path {
        stroke-dashoffset: 0;
    }
}


/* ===== Steps / Process ===== */
/* ================================================================
   FOXCO STEPS WIDGET  v1.3.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;
}
/* The heading is a flex item here too: give it its own full-width row
   (it used to sit beside the first step). */
.foxco-steps-wrap.layout-horizontal .foxco-steps-heading {
  flex: 0 0 100%;
}
.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%;
  /* Static, so the absolute badge anchors to the step (not to the text,
     where it sat on top of the title), and flush left beside the line --
     the Description Max Width control centers it with margin auto. */
  position: static;
  margin-left: 0 !important;
}
/* Presets set their own padding shorthand, which used to wipe out the
   timeline's left gutter and push the badges off the line. This
   re-asserts it for every preset (one class more specific). */
.foxco-steps-wrap.layout-timeline[class*="preset-"] {
  padding-left: 80px;
}
/* Badge centered on the line: its left = line x minus the wrap's left
   padding (desktop 50 - 80; see the breakpoints below). */
.foxco-steps-wrap.layout-timeline .foxco-step-badge {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: -30px;
  z-index: 2;
}
.foxco-steps-wrap.layout-timeline .foxco-step-badge:hover {
  transform: translateX(-50%) scale(1.1);
}

/* -- 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: FIXWP -- blue felt, serif, ink navy. See FIXWP-BRAND-GUIDE.md.
   Reference implementation: How It Works by Foxco
   (modules/how-it-works-by-foxco/assets/css/how-it-works.css) -- navy
   number badges, paper cards, white connectors on felt, per that guide's
   own hint for this widget.
   ================================================================ */
.foxco-steps-wrap.preset-fixwp {
  background-color: #3b70a7;
  /* Felt texture: three stacked SVG noise layers, tuned against the
     approved FixWP hero image. Generated in CSS, no image request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='turbulence' baseFrequency='.45' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8  0 0 0 0 .88  0 0 0 0 1  0 0 0 3 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23b%29' opacity='.3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04  0 0 0 0 .1  0 0 0 0 .22  0 0 0 -1.5 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23a%29' opacity='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05  0 0 0 0 .12  0 0 0 0 .25  0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29' opacity='.7'/%3E%3C/svg%3E");
  border-radius: 0;
  padding: clamp(40px, 6vw, 88px) clamp(18px, 4vw, 48px);
}

.foxco-steps-wrap.preset-fixwp .foxco-steps-heading {
  color: #ffffff;
  font-family: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.foxco-steps-wrap.preset-fixwp .foxco-steps-heading strong {
  color: #a9c4e4; /* pale-blue italic subline, matches the hero's second line */
  font-style: italic;
  font-weight: 400;
}

.foxco-steps-wrap.preset-fixwp .foxco-step {
  background: #fbfcfe; /* paper */
  border-radius: 10px;
  padding: 40px 36px;
  border: 1px solid rgba(23, 42, 69, .12); /* hairline */
  box-shadow: 0 2px 0 rgba(15, 30, 55, .18); /* flat "paper resting on felt" edge -- no soft glow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.foxco-steps-wrap.preset-fixwp .foxco-step:hover {
  box-shadow: 0 18px 40px rgba(10, 25, 50, .35);
  transform: translateY(-4px);
}

.foxco-steps-wrap.preset-fixwp .foxco-step-badge {
  background: #172a45; /* ink navy -- solid fill, not outline, per the guide's hint */
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1rem;
}
.foxco-steps-wrap.preset-fixwp .foxco-step-badge:hover {
  background: #2c6095; /* felt blue deep */
}

.foxco-steps-wrap.preset-fixwp .foxco-step-watermark {
  color: rgba(23, 42, 69, .06);
  right: 20px;
  left: auto;
  top: 10px;
  transform: none;
  font-size: 80px;
  opacity: 1;
}

.foxco-steps-wrap.preset-fixwp .foxco-step-title {
  color: #172a45;
  font-family: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
  font-weight: 700; /* card titles are 700 -- only the big hero heading stays at 400 */
}
.foxco-steps-wrap.preset-fixwp .foxco-step-desc {
  color: #41536d; /* slate */
  font-family: "Libre Baskerville", Georgia, serif;
  line-height: 1.7; /* the serif needs the extra leading */
}

/* White connectors on felt, per the guide's "Connector on felt" token */
.foxco-steps-wrap.preset-fixwp.layout-vertical.show-connector
.foxco-step:not(:last-child)::after {
  background: rgba(255, 255, 255, .55);
}
.foxco-steps-wrap.preset-fixwp.layout-horizontal.show-connector
.foxco-step:not(:last-child)::after {
  background: rgba(255, 255, 255, .55);
}

/* ================================================================
   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;
}

/* ================================================================
   PRESET: MCLOREN -- black brick, spray red, Poiret One lowercase,
   numbered 01 / 02 in red, square badges, red hard offset shadow.
   ================================================================ */
.foxco-steps-wrap.preset-mcloren {
  background-color: #0b0b0b;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 120px 44px, 120px 88px, 120px 88px;
  background-position: 0 0, 0 0, 60px 44px;
  color: #ffffff;
  font-family: Inter, sans-serif;
  padding: clamp(48px, 7vw, 140px) clamp(20px, 4vw, 72px);
}
.foxco-steps-wrap.preset-mcloren .foxco-steps-heading {
  font-family: 'Poiret One', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 104px);
  line-height: .95;
  letter-spacing: 0;
  text-transform: lowercase;
  color: #ffffff;
  margin-bottom: clamp(40px, 5vw, 90px);
}
.foxco-steps-wrap.preset-mcloren .foxco-steps-heading strong {
  font-weight: 400;
  font-style: italic;
  color: #FC1312;
}

.foxco-steps-wrap.preset-mcloren .foxco-step {
  padding-top: clamp(22px, 2vw, 34px);
  border-top: 1px solid rgba(255,255,255,.14);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.foxco-steps-wrap.preset-mcloren.layout-horizontal .foxco-step {
  max-width: 380px;
}
.foxco-steps-wrap.preset-mcloren .foxco-step:hover {
  transform: translateX(10px);
}
.foxco-steps-wrap.preset-mcloren.layout-horizontal .foxco-step:hover,
.foxco-steps-wrap.preset-mcloren.layout-vertical .foxco-step:hover {
  transform: translateY(-4px);
}

.foxco-steps-wrap.preset-mcloren .foxco-step-badge {
  background: #0b0b0b;
  border: 1px solid #FC1312;
  border-radius: 0;
  color: #FC1312;
  font-family: Inter, sans-serif;
  font-size: clamp(13px, .95vw, 17px);
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em; /* keeps tracked digits optically centered */
  box-shadow: 6px 6px 0 #FC1312;
  transition: transform .3s ease, background-color .25s ease, color .25s ease;
}
.foxco-steps-wrap.preset-mcloren .foxco-step-badge.style-circle,
.foxco-steps-wrap.preset-mcloren .foxco-step-badge.style-outline {
  border-radius: 50%;
  box-shadow: none;
}
.foxco-steps-wrap.preset-mcloren .foxco-step-badge.style-pill {
  border-radius: 0;
}
.foxco-steps-wrap.preset-mcloren .foxco-step-badge:hover {
  background: #FC1312;
  color: #ffffff;
}
.foxco-steps-wrap.preset-mcloren .foxco-step[style*="--step-accent"] .foxco-step-badge {
  border-color: var(--step-accent);
  color: var(--step-accent);
  box-shadow: 6px 6px 0 var(--step-accent);
}

/* Ghost numbers: outlined Poiret One, like the giant "mcloren" behind the
   about section. */
.foxco-steps-wrap.preset-mcloren .foxco-step-watermark {
  font-family: 'Poiret One', sans-serif;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.14);
  letter-spacing: 0;
}

.foxco-steps-wrap.preset-mcloren .foxco-step-title {
  font-family: 'Poiret One', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 44px);
  line-height: 1.05;
  text-transform: lowercase;
  color: #ffffff;
}
.foxco-steps-wrap.preset-mcloren .foxco-step-desc {
  font-family: Inter, sans-serif;
  font-size: clamp(15px, 1.1vw, 20px);
  line-height: 1.7;
  color: rgba(255,255,255,.62);
}
.foxco-steps-wrap.preset-mcloren .foxco-step-desc a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #FC1312;
}

.foxco-steps-wrap.preset-mcloren.layout-vertical.show-connector
.foxco-step:not(:last-child)::after,
.foxco-steps-wrap.preset-mcloren.layout-horizontal.show-connector
.foxco-step:not(:last-child)::after {
  background: #FC1312;
}
.foxco-steps-wrap.preset-mcloren.layout-timeline::before {
  width: 1px;
  background: linear-gradient(to bottom, #FC1312, rgba(252,19,18,.15));
}
.foxco-steps-wrap.preset-mcloren.layout-timeline .foxco-step {
  border-top: 0;
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .foxco-steps-wrap.preset-mcloren .foxco-step,
  .foxco-steps-wrap.preset-mcloren .foxco-step-badge { transition: none; }
  .foxco-steps-wrap.preset-mcloren .foxco-step:hover { transform: none; }
}

/* -- 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-steps-wrap.layout-timeline .foxco-step-badge {
    left: -10px;
  }
  .foxco-steps-wrap.layout-timeline[class*="preset-"] {
    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;
  }
  .foxco-steps-wrap.layout-timeline .foxco-step-badge {
    left: -20px;
  }
  .foxco-steps-wrap.layout-timeline[class*="preset-"] {
    padding-left: 50px;
  }
}