/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* =========================
   1) COLOR PRIMITIVES (raw)
   ========================= */
:root {
    /* Brand Violet */
    --violet-600: #5B2EA6;
    --violet-700: #4A2490;
    --violet-050: #EFE8FA;
    /* Brand Green */
    --green-500: #2BB673;
    --green-700: #11875C;
    --green-800: #0F7A4B;
    --green-900: #0D3D20;
    --green-050: #E6F7EF;
    /* Neutrals */
    --bg-050: #F7F8FC;
    --white: #FFFFFF;
    --text-900: #1B1D2A;
    --text-600: #5A5F73;
    --border-200: #D8DCE8;
    /* States */
    --warning-500: #F5B400;
    --error-500: #E5484D;
}
/* =========================
   2) SEMANTIC COLOR TOKENS
   ========================= */
:root {
    /* Surfaces */
    --color-bg: var(--bg-050);
    --color-surface: var(--white);
    --color-border: var(--border-200);
    /* Text */
    --color-text: var(--text-900);
    --color-text-muted: var(--text-600);
    --color-text-on-dark: var(--white);
    /* Brand / Links */
    --color-brand: var(--violet-600);
    --color-brand-hover: var(--violet-700);
    --color-brand-tint: var(--violet-050);
    --color-link: var(--color-brand);
    --color-link-hover: var(--color-brand-hover);
    /* Accent / CTA */
    --color-accent: var(--green-500);
    --color-cta: var(--green-700);
    --color-cta-hover: var(--green-800);
    --color-accent-tint: var(--green-050);
    /* States */
    --color-success: var(--green-700);
    --color-info: var(--violet-600);
    --color-warning: var(--warning-500);
    --color-error: var(--error-500);
    /* Focus & gradients */
    --color-focus-ring: rgba(91, 46, 166, 0.35);
    --gradient-brand: linear-gradient(90deg, var(--violet-600) 0%, var(--green-700) 100%);
}
/* =========================
   3) COMPONENT COLOR TOKENS
   ========================= */
:root {
    /* Header / Navigation */
    --header-bg: var(--color-surface);
    --header-text: var(--color-brand);
    --header-link: var(--color-brand);
    --header-link-hover: var(--color-brand-hover);
    /* Cards */
    --card-bg: var(--color-surface);
    --card-border: var(--color-border);
    /* Footer */
    --footer-bg: var(--green-900);
    /* Buttons */
    --btn-primary-bg: var(--color-cta);
    --btn-primary-bg-hover: var(--color-cta-hover);
    --btn-primary-text: var(--white);
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--color-brand-tint);
    --btn-secondary-text: var(--color-brand);
    --btn-secondary-border: var(--color-brand);
    /* Badges */
    --badge-bg: var(--color-accent-tint);
    --badge-text: var(--green-800);
    --badge-icon: var(--color-accent);
    /* Sections */
    --section-bg: var(--color-bg);
    --section-bg-alt: var(--color-brand-tint);
    /* Forms */
    --input-bg: var(--color-surface);
    --input-text: var(--color-text);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-brand);
    /* Alerts */
    --alert-success-bg: var(--green-050);
    --alert-success-text: var(--green-800);
    --alert-info-bg: var(--violet-050);
    --alert-info-text: var(--violet-700);
    --alert-warning-bg: #FFF7D6;
    --alert-warning-text: #7A5A00;
    --alert-error-bg: #FCE8E8;
    --alert-error-text: #B42318;
    /* Commerce-specific tokens (small set) */
    --price-color: var(--color-brand); /* prices in violet */
    --sale-badge-bg: var(--color-brand); /* sale badge */
    --sale-badge-text: var(--white);
    --stock-in: var(--color-success);
    --stock-out: var(--color-error);
    --rating-star: var(--color-warning);
}
/* ================================================
   [SECT] Topography
   =============================================== */
:root {
    /* ----------------------
       Font Families
       ----------------------- */
    --font-body: "Inter", system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-head: "Space Grotesk", "Inter", system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    /* ---------------------------------
       Font Weights (scale + semantic)
       ------------------------------- */
    /* Scale */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
    /* Semantic (use in components) */
    --fw-body: var(--fw-regular); /* paragraphs, long-form */
    --fw-body-strong: var(--fw-medium); /* subtle emphasis */
    --fw-ui: var(--fw-semibold); /* nav, buttons, chips */
    --fw-ui-strong: var(--fw-bold); /* active/highlight */
    --fw-heading: var(--fw-bold); /* h1–h5 default */
    --fw-heading-strong: var(--fw-extrabold); /* hero/anchors (optional) */
    --fw-overline: var(--fw-extrabold); /* uppercase micro-titles */
    --fw-legal: var(--fw-medium); /* GDPR / consimțământ */
    /* ----------------------
       Body Type
       ----------------------- */
    /* Body */
    --fs-body: 1rem;
    --lh-body: 1.6;
    /* ----------------------
       Font Sizes
       ----------------------- */
    /* Fixed "px-like"  */
    --fs-13: 0.8125rem; /* 13px */
    --fs-14: 0.875rem; /* 14px */
    --fs-15: 0.9375rem; /* 15px */
    --fs-16: 1rem; /* 16px */
    --fs-18: 1.125rem; /* 18px */
    --fs-20: 1.25rem; /* 20px */
    /* Semantic aliases (use these in components) */
    --fs-caption: var(--fs-13); /* tiny helper text, meta */
    --fs-small: var(--fs-14); /* labels, secondary */
    --fs-medium: var(--fs-15); /* footer bottom links */
    --fs-body: var(--fs-16); /* your default body */
    --fs-lead: var(--fs-18); /* lead paragraph */
    --fs-ui: var(--fs-14); /* nav, buttons, chips */
    /* ----------------------
       Headings
       ----------------------- */
    /* Headings */
    --ls-head: -0.01em;
    --fw-head: var(--fw-heading);
    --fs-h1: clamp(2.75rem, 2.4rem + 0.7vw, 3rem);
    --lh-h1: 1.05;
    --fs-h2: clamp(2.125rem, 1.8rem + 0.65vw, 2.5rem);
    --lh-h2: 1.12;
    --fs-h3: clamp(1.625rem, 1.4rem + 0.5vw, 2rem);
    --lh-h3: 1.18;
    --fs-h4: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
    --lh-h4: 1.25;
    --fs-h5: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);
    --lh-h5: 1.3;
}
/* ------------------------------------
   Border Radius (scale + semantic)
   --------------------------------- */
:root {
    /* Scale */
    --radius-xxs: 5px;
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 18px;
    --radius-3xl: 22px;
    --radius-4xl: 26px;
    /* Special shapes (use directly in components) */
    --radius-pill: 999px;
    --radius-round: 9999px;
    /* Semantic (no duplicates) */
    --radius-control: var(--radius-md); /* 12px */
    --radius-soft: var(--radius-xl); /* 16px */
    --radius-card: var(--radius-2xl); /* 18px */
    --radius-aside: var(--radius-3xl); /* 22px */
    --radius-hero: var(--radius-4xl); /* 26px */
    --radius-day: var(--radius-sm); /* 10px */
    --radius-mark: var(--radius-xxs); /* 5px */
    --radius-focus: var(--radius-xs); /* 8px */
}
/* ---------------------------------------------------------
   PROSE WRAPPER (readability)
   --------------------------------------------------------- */
.prose :where(p, ul, ol) {
    max-width: 70ch; /* readable line length */
}
.prose :where(ul, ol) {
    padding-left: 1.25rem; /* consistent list indent */
}
.prose :where(li) {
    margin-block: .25rem; /* list rhythm / vertical spacing */
}
/* ---------------------------------------------------------
   CONTENT TYPOGRAPHY (scoped)
   Applies only to main reading content (not nav/utility lists)
   --------------------------------------------------------- */
:where(main, .site-main, .entry-content, .inside-article) p {
    font-size: var(--fs-16);
    line-height: 1.6;
}
:where(main, .site-main, .entry-content, .inside-article) li {
    font-size: var(--fs-15);
    line-height: 1.55;
}
/* Content lists: baseline spacing + indentation */
:where(main, .site-main, .entry-content, .inside-article) ul,
:where(main, .site-main, .entry-content, .inside-article) ol {
    margin: 0;
    padding-left: 1.1em;
}
:where(main, .site-main, .entry-content, .inside-article) li + li {
    margin-top: 6px;
}
/* ---------------------------------------------------------
   CONTENT UTILITIES
   Optional helper classes you can add in markup
   --------------------------------------------------------- */
.is-list-primary li {
    font-size: var(--fs-16);
    line-height: 1.6;
}
/* ---------------------------------------------------------
   RESPONSIVE: content typography tweaks (<480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {
    :where(main, .site-main, .entry-content, .inside-article) p {
        font-size: var(--fs-15);
        line-height: 1.65;
    }
    :where(main, .site-main, .entry-content, .inside-article) li {
        font-size: var(--fs-15);
        line-height: 1.6;
    }
    /* Use on list-heavy blocks where you need tighter type */
    .is-dense li {
        font-size: var(--fs-14);
        line-height: 1.65;
    }
}
/* ------------------------------------
   Apply typography
   -----------------------------------*/
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body);
}
h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    font-weight: var(--fw-head);
    letter-spacing: var(--ls-head);
}
h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}
h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}
h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}
h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}
h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
}
/* ---------------------------------------------------------
   Heading utility classes (exceptions)
   Use when you need heading styling on non-heading tags
   --------------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-head);
    font-weight: var(--fw-head);
    letter-spacing: var(--ls-head);
}
.h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}
.h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}
.h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}
.h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}
.h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
}
h2.h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
}
/* -------------------
   < 1024px
   ------------------- */
@media (max-width: 1024px) {
    :root {
        --fs-body: clamp(0.9375rem, 0.90rem + 0.20vw, 1rem);
        --lh-body: 1.65;
        --fs-h1: clamp(2.2rem, 1.75rem + 1.5vw, 2.75rem);
        --lh-h1: 1.08;
        --fs-h2: clamp(1.8rem, 1.45rem + 1.1vw, 2.25rem);
        --lh-h2: 1.15;
        --fs-h3: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
        --lh-h3: 1.2;
        --fs-h4: clamp(1.22rem, 1.12rem + 0.35vw, 1.45rem);
        --lh-h4: 1.28;
        --fs-h5: clamp(1.10rem, 1.02rem + 0.30vw, 1.30rem);
        --lh-h5: 1.32;
    }
}
/* -------------------
   < 480px
   ------------------- */
@media (max-width: 480px) {
    :root {
        --fs-body: clamp(0.90625rem, 0.88rem + 0.15vw, 0.953125rem);
        --lh-body: 1.7;
        --fs-h1: clamp(1.85rem, 1.5rem + 1.8vw, 2.2rem);
        --lh-h1: 1.12;
        --fs-h2: clamp(1.6rem, 1.35rem + 1.2vw, 1.9rem);
        --lh-h2: 1.18;
        --fs-h3: clamp(1.3rem, 1.15rem + 0.9vw, 1.55rem);
        --lh-h3: 1.25;
        --fs-h4: clamp(1.22rem, 1.08rem + 0.8vw, 1.38rem); /* ~19.5px min */
        --lh-h4: 1.28;
        --fs-h5: clamp(1.12rem, 1.02rem + 0.6vw, 1.26rem); /* ~17.9px min */
        --lh-h5: 1.32;
    }
}
/* =========================================
   [SECT] Main Layout
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* Defaults */
:root {
    /* Container width (✅ 1360) */
    --qs-max: 1360px;
    /* Arrow #1: page gutter (viewport edge -> container edge)
       Slightly higher desktop cap so 1360 doesn't feel tight */
    --qs-gutter: clamp(16px, 3vw, 40px);
    /* Vertical spacing between sections */
    --qs-section-y: clamp(36px, 6vw, 72px);
    /* Arrow #2: inner padding presets (container edge -> text)
       Keep these as-is (they already scale well) */
    --qs-inset-tight: clamp(12px, 2vw, 20px);
    --qs-inset: clamp(18px, 2.5vw, 28px);
    --qs-inset-loose: clamp(24px, 3.5vw, 44px);
}
/* Demo override (put it OUTSIDE, after the first :root) */
:root {
    /* --qs-gutter: 10px; */
    /* --qs-inset-tight: 20px; */
}
/* Section controls vertical rhythm + optional colors + OUTER gutter */
.qs-section {
    padding-block: var(--qs-section-y);
    padding-inline: var(--qs-gutter); /* <-- Arrow #1 lives here */
    /* debug: show the full section box */
    /* border: 1px solid black; /* debug: inset area */

}
/* Container controls only max-width + centering */
.qs-container {
    width: 100%;
    max-width: var(--qs-max);
    margin-inline: auto;
    /* debug: show container edge (keyline) */
    border: 2px solid brown;
}
/* Inner inset presets = Arrow #2 */
.qs-inset {
    padding: var(--qs-inset);
    border: 2px solid red; /* debug: inset area */
}
.qs-inset-tight {
    padding: var(--qs-inset-tight);
    border: 2px solid blue; /* debug: inset-tight area */
}
.qs-inset-loose {
    padding: var(--qs-inset-loose);
    border: 2px solid orange; /* debug: inset-loose area */
}
/* Full-bleed band (background breaks out, content stays aligned) */
.qs-section.qs-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
@media (max-width: 768px) {
    :root {
        --qs-gutter: 10px;
        /* --qs-inset-tight: 20px; */
    }
}
/* =========================
   [SECT] BASE ELEMENTS
   ========================= */
a {
    color: var(--color-link);
}
a:hover {
    color: var(--color-link-hover);
}
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
}
.btn-primary:hover {
    background: var(--btn-primary-bg-hover);
}
.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    border-radius: var(--radius-control);
}
.btn-secondary:hover {
    background: var(--btn-secondary-bg-hover);
}
.input {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
}
.input:focus-visible {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/* =====================================
   [SECT] HEADER
===================================== */
@media (min-width: 1024px) {
    .main-header {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(91, 46, 166, .10);
        position: sticky;
        top: 0;
        z-index: 9999;
    }
}
.main-header .gb-menu-container--mobile {
    background: var(--color-surface)
}
.main-header img.main-logo {
    width: 110px;
    height: auto;
    display: block;
    transform: none;
    top: 5px;
    position: absolute;
}
.main-header .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: var(--qs-max);
    margin-inline: auto;
    padding: 14px var(--qs-gutter);
}
.main-header .menu-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.main-header ul#menu-main.main-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0
}
.main-menu a.gb-menu-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    font-size: var(---fs-body) !important;
    color: var(--color-text);
    padding: 10px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(91, 46, 166, .14);
    background: rgba(255, 255, 255, .70);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease
}
.main-menu a.gb-menu-link:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 46, 166, .26);
    background: rgba(239, 232, 250, .55);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
}
.main-menu .current-menu-item > .gb-menu-link,
.main-menu .current_page_item > .gb-menu-link {
    border-color: rgba(91, 46, 166, .30);
    background: rgba(239, 232, 250, .70);
    color: var(--color-text)
}
/* ----------------------
   Logo Tagline
---------------------- */
.site-header__tagline {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.2;
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    max-inline-size: 35ch;
    text-wrap: balance;
    white-space: nowrap;
    padding-inline-start: 6rem;
}
/* ===========================
   [SECT] Buttons
   =========================== */
:root {
    /* Brand stays signature (header CTA) */
    --btn-brand-bg: var(--gradient-brand);
    --btn-brand-bg-hover: linear-gradient(90deg, var(--violet-700) 0%, var(--green-800) 100%); /* kept (unused in swap, but handy) */
    /* Primary (site-wide) */
    --btn-primary-bg: var(--green-700);
    --btn-primary-bg-hover: var(--green-800); /* kept (unused in swap, but handy) */
    --btn-primary-text: var(--white);
    /* Optional green-only gradient (in-page only) */
    --gradient-cta-green: linear-gradient(90deg, var(--green-500) 0%, var(--green-800) 100%);
    --gradient-cta-green-hover: linear-gradient(90deg, var(--green-700) 0%, var(--green-800) 100%);
    /* Focus */
    --focus-ring-green: rgba(43, 182, 115, 0.35);
    /* Icon asset (one place to change) */
    --btn-ball-icon: url("/wp-content/uploads/graphics/icons/football.svg");
}
/* ------------------------------------
   1) SHARED BASE (primary + brand)
   ------------------------------------ */
a.btn-primary,
a.btn-brand {
    --btn-py: 0.75rem;
    --btn-px: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: var(--btn-py) var(--btn-px);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transform: translateY(0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
a.btn-primary:hover,
a.btn-brand:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover, var(--btn-border));
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    filter: brightness(1.02);
}
a.btn-primary:active,
a.btn-brand:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    filter: brightness(0.99);
}
a.btn-primary:focus-visible,
a.btn-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--focus-ring-green),
    0 14px 30px rgba(0, 0, 0, 0.14);
}
/* --------------------------------------------------------------
   2) PRIMARY (solid green normal, BRAND gradient on hover)
   -------------------------------------------------------------- */
a.btn-primary {
    /* normal = primary solid green */
    --btn-bg: var(--btn-primary-bg);
    --btn-fg: var(--btn-primary-text);
    --btn-border: rgba(15, 122, 75, 0.22);
    /* hover = brand normal gradient (the twist) */
    --btn-bg-hover: var(--btn-brand-bg);
    --btn-border-hover: rgba(17, 135, 92, 0.28);
    /* ball/icon layout */
    --icon-left: 1.125rem;
    --icon-size: 0.875rem;
    --icon-gap: 0.75rem;
    /* slightly slower for primary */
    --ball-rotate-speed: 12s;
    padding-left: calc(var(--icon-left) + var(--icon-size) + var(--icon-gap));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Optional: primary green-only gradient (only where YOU add the class)
   (keeps its own gradient hover; no swap here by default) */
a.btn-primary.is-gradient {
    --btn-bg: var(--gradient-cta-green);
    --btn-bg-hover: var(--gradient-cta-green-hover);
    --btn-border: rgba(15, 122, 75, 0.18);
    --btn-border-hover: rgba(15, 122, 75, 0.18);
}
/* -------------------------------------------------------------------
   3) BRAND (brand gradient normal, PRIMARY solid green on hover)
   ------------------------------------------------------------------- */
a.btn-brand {
    /* normal = brand gradient */
    --btn-bg: var(--btn-brand-bg);
    --btn-fg: var(--color-text-on-dark);
    --btn-border: rgba(17, 135, 92, 0.28);
    /* hover = primary normal solid green (the twist) */
    --btn-bg-hover: var(--btn-primary-bg);
    --btn-border-hover: rgba(15, 122, 75, 0.22);
    /* ball/icon layout */
    --icon-left: 1.125rem;
    --icon-size: 0.875rem;
    --icon-gap: 0.75rem;
    /* bigger = slower rotation */
    --ball-rotate-speed: 10s;
    padding-left: calc(var(--icon-left) + var(--icon-size) + var(--icon-gap));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* --------------------------------------------
   4) ICON + SPIN (applies to BOTH buttons)
   -------------------------------------------- */
a.btn-primary::before,
a.btn-brand::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--icon-left);
    width: var(--icon-size);
    height: var(--icon-size);
    transform: translateY(-50%) rotate(0deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    z-index: 1;
    background: var(--btn-ball-icon) no-repeat center / contain;
    animation: none;
    will-change: transform;
}
a.btn-primary:hover::before,
a.btn-brand:hover::before {
    animation: rotate-ball var(--ball-rotate-speed, 10s) linear infinite;
}
@keyframes rotate-ball {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}
@media (max-width: 1200px) {
    .site-header__tagline {
        max-inline-size: 30ch;
        white-space: inherit;
    }
}
@media (max-width: 1024px) {
    header.gb-site-header.main-header {
        padding-left: 30px;
        padding-right: 30px;
        background: rgba(255, 255, 255, .78);
        border-bottom: 1px solid rgba(91, 46, 166, .10);
        -webkit-backdrop-filter: blur(14px);
    }
    .main-header .menu-container {
        padding-top: 5rem;
    }
    .gb-menu-container--toggled .gb-menu-show-on-toggled {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .main-header .gb-menu-toggle {
        margin-left: auto;
    }
    .main-header img.main-logo {
        z-index: 999999
    }
    .main-header button.mob-menu-toggle {
        width: 60px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(91, 46, 166, .50);
        background: rgba(255, 255, 255, .70);
        box-shadow: var(--shadow-sm);
        color: rgba(27, 29, 42, .78);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease
    }
    .main-header .mob-menu-toggle.gb-menu-toggle--toggled {
        padding: 14.5px;
    }
    .main-header .gb-menu-toggle .gb-menu-close-icon svg {
        width: 15px;
        height: 15px;
    }
}
@media (max-width: 480px) {
    .main-header .main-nav {
        padding: 15px 0 15px 0;
    }
    .main-header img.main-logo {
        width: 90px;
        height: auto;
        display: block;
        transform: none;
        top: 5px;
        position: absolute;
    }
    .site-header__tagline {
        padding-inline-start: 5rem;
        white-space: inherit;
    }
    .gb-site-header .mob-menu-toggle {
        block-size: 40px;
        padding: 15px;
    }
}
@media (max-width: 380px) {
    .site-header__tagline {
        font-size: var(--fs-caption)
    }
}
/* =========================================================
   6) WOOCOMMERCE THEME BRIDGE
   Apply brand tokens to Woo components with low specificity.
   ========================================================= */
/* Buttons: add to cart, checkout, apply coupon, etc. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: 0.75rem 1rem;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover {
    background: var(--btn-primary-bg-hover);
    color: var(--btn-primary-text);
}
/* Focus ring on Woo buttons (keyboard) */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce #payment #place_order:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/* Disabled + loading states */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
    opacity: 0.85;
}
/* Secondary actions (optional: keep minimal) */
.woocommerce a.button.wc-backward,
.woocommerce button.button.wc-backward {
    background: transparent;
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    box-shadow: none;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button.wc-backward:hover {
    background: var(--btn-secondary-bg-hover);
}
/* Forms / inputs */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
    padding: 0.75rem 0.875rem;
}
.woocommerce input.input-text:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/* Notices (info/success/error) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--radius-control);
}
.woocommerce-message {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-top-color: var(--color-success);
}
.woocommerce-info {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-top-color: var(--color-info);
}
.woocommerce-error {
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    border-top-color: var(--color-error);
}
/* Prices + sale badge */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--price-color);
}
.woocommerce span.onsale {
    background: var(--sale-badge-bg);
    color: var(--sale-badge-text);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.5rem;
    min-height: auto;
    line-height: 1.2;
}
/* Stock status */
.woocommerce div.product .stock.in-stock {
    color: var(--stock-in);
}
.woocommerce div.product .stock.out-of-stock {
    color: var(--stock-out);
}
/* Tabs / active states */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-brand);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-brand-hover);
}
/* Links in Woo areas */
.woocommerce a {
    color: var(--color-link);
}
.woocommerce a:hover {
    color: var(--color-link-hover);
}
/* Cart + checkout tables */
.woocommerce table.shop_table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-control);
    overflow: hidden;
    border-color: var(--color-border);
    background: var(--color-surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: var(--color-border);
}
/* Quantity input (basic) */
.woocommerce .quantity .qty {
    border-radius: var(--radius-control);
    border: 1px solid var(--input-border);
    padding: 0.5rem;
}
/* Rating stars (where supported) */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
    color: var(--rating-star);
}
/* Checkout payment box */
.woocommerce-checkout #payment {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}
/* Optional: small polish for product cards if your theme is light */
.woocommerce ul.products li.product {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}
/* ========================================
   [SECT] Header - Hero
======================================== */
:root {
    /* Page images (kept as simple vars) */
    --hero-img: url("https://images.pexels.com/photos/26546638/pexels-photo-26546638.jpeg?cs=srgb&dl=pexels-bennycool-26546638.jpg&fm=jpg");
    --af-radius: var(--radius-card);
    --af-radius-lg: var(--radius-hero);
    --af-shadow-xl: 0 22px 60px rgba(27, 29, 42, 0.16);
    --af-shadow-lg: 0 14px 34px rgba(27, 29, 42, 0.14);
    --af-overlay: rgba(27, 29, 42, 0.86);
    --af-overlay2: rgba(27, 29, 42, 0.55);
}
.af-container {
    width: 100%;
    max-width: var(--qs-max);
    margin-inline: auto;
    padding-inline: var(--qs-gutter);
    padding-top: 50px;
}
.heroShell {
    border-radius: var(--af-radius-lg);
    overflow: hidden;
    box-shadow: var(--af-shadow-xl);
    border: 1px solid rgba(91, 46, 166, .10);
    background: var(--color-surface);
    position: relative;
}
.heroShell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.05);
}
.heroShell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--af-overlay) 0%, rgba(27, 29, 42, .65) 48%, rgba(27, 29, 42, .40) 100%),
    radial-gradient(620px 320px at 18% 10%, rgba(91, 46, 166, .32), transparent 65%),
    radial-gradient(620px 320px at 62% 70%, rgba(17, 135, 92, .24), transparent 65%);
}
.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 25px;
    padding: clamp(16px, 2vw, 26px);
    color: var(--color-text-on-dark);
    align-items: stretch;
}
/* ----------------------
   Left Column
   ---------------------- */
.heroShell .kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-small);
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .20);
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
}
.heroShell .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(43, 182, 115, .22);
}
.hero__grid h1 {
    margin-top: 20px;
}
.hero__grid .subtitle {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .90);
    max-width: 64ch;
}
.hero__grid .hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 25px;
}
.hero__grid .micro {
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, .85);
}
.af-container .af-pill {
    border-radius: var(--radius-pill)
}
.af-container .af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-weight: var(--fw-extrabold);
    letter-spacing: .2px;
    user-select: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.af-container .af-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--af-shadow-lg);
}
.af-container .hero__cta a.af-btn.af-btn-brand.left.af-btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: var(--af-shadow-lg);
    color: var(--color-surface)
}
.af-btn:active {
    transform: translateY(0);
}
.af-btn.af-btn-lg {
    padding: 12px 16px;
}
.af-btn.af-btn-sm {
    padding: 10px 12px;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}
.af-btn-secondary {
    background: rgba(255, 255, 255, .78);
    color: var(--color-text);
    border: 1px solid rgba(91, 46, 166, .18);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-sm);
}
.af-btn-secondary:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: rgba(91, 46, 166, .26);
}
.af-btn-gradient {
    background: var(--gradient-brand);
    color: var(--color-text-on-dark);
    border: 1px solid rgba(17, 135, 92, .28);
    position: relative;
    overflow: hidden;
}
/* ----------------------
   Right Column
   ---------------------- */
.heroAside {
    border-radius: var(--radius-aside);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.heroAside::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: radial-gradient(420px 220px at 20% 0%, rgba(91, 46, 166, .28), transparent 65%),
    radial-gradient(420px 220px at 90% 60%, rgba(17, 135, 92, .22), transparent 65%);
    pointer-events: none;
    opacity: .9;
}
.heroAside > * {
    position: relative;
    z-index: 1;
}
.heroAside .cardTitle {
    margin: 0;
    font-size: 13px;
    font-weight: var(--fw-overline);
    text-transform: uppercase;
    letter-spacing: .25px;
    color: rgba(255, 255, 255, .92);
}
.heroAside .bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.heroAside .bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 18px 12px;
    border-radius: var(--radius-soft);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
}
.heroAside .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    color: rgba(255, 255, 255, .95);
}
.heroAside .bullets span {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, .90);
    line-height: 1.35;
}
.sections {
    position: relative;
    z-index: 1;
    padding-top: 0;
    padding-bottom: 4.5rem;
}
/* ===========================================
   [SECT] Info Panels
   ========================================== */
.info__panels .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.info__panels .panel {
    grid-column: span 6;
    border: 1px solid rgba(91, 46, 166, .12);
    background: rgba(255, 255, 255, .92);
    border-radius: var(--af-radius);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-md);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}
.info__panels .panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--af-shadow-lg);
    border-color: rgba(91, 46, 166, .18);
}
.info__panels .panel--wide {
    grid-column: span 12;
}
.info__panels .panel h2 {
    margin: 0 0 10px;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    margin-bottom: 15px;
}
.info__panels .panel p {
    margin: 0;
    color: var(--color-text);
}
.info__panels .panel .list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--color-text);
}
/* Pills */
.info__panels .pillRow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.info__panels .pill {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(17, 135, 92, .18);
    background: rgba(17, 135, 92, .06);
    color: rgba(27, 29, 42, .88);
    white-space: nowrap;
    font-weight: var(--fw-bold);
    font-size: var(--lead)
}
.info__panels .pill.larger {
    padding: 10px 20px;
}
.info__panels .pill--violet {
    border-color: rgba(91, 46, 166, .18);
    background: rgba(91, 46, 166, .06);
}
@media (max-width: 768px) {
    .info__panels .grid {
        gap: 12px;
    }
    /* force all panels to span full row */
    .info__panels .panel,
    .info__panels .panel--wide {
        grid-column: 1 / -1;
    }
    .info__panels .panel {
        padding: 16px;
    }
    .info__panels .panel .list {
        padding-left: 16px;
    }
    .info__panels .pillRow {
        gap: 8px;
    }
    .info__panels .pill {
        padding: 7px 10px;
    }
}
@media (max-width: 480px) {
    .info__panels .grid {
        gap: 10px;
        margin-top: 12px;
    }
    .info__panels .panel {
        padding: 14px 14px 12px;
        border-radius: calc(var(--af-radius) - 4px);
    }
    .info__panels .panel h2 {
        margin-bottom: 8px;
        letter-spacing: -0.1px;
    }
    .info__panels .panel p {
        line-height: 1.65;
    }
    .info__panels .panel .list {
        margin-top: 8px;
        padding-left: 15px;
    }
}
/* ----------------------
   SVG ICONS
   ---------------------- */
/* Base: title + icon layout */
.section-title.has-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
}
/* Icon block */
.section-title.has-icon::before {
    content: "ssss";
    width: var(--icon-size, 1.5em);
    height: var(--icon-size, 1.5em);
    flex: 0 0 auto;
    /* This controls the icon color */
    background-color: var(--icon-color, currentColor);
    /* Use the SVG as a mask so background-color becomes the icon color */
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}
/* Map each heading to its icon file */
.icon-what {
    --icon-url: url("/wp-content/uploads/graphics/icons/icon-about-football-academy.svg");
}
.icon-who {
    --icon-url: url("/wp-content/uploads/graphics/icons/icon-target-audience.svg");
}
.icon-how {
    --icon-url: url("/wp-content/uploads/graphics/icons/icon-how-it-works.svg");
}
.icon-why {
    --icon-url: url("/wp-content/uploads/graphics/icons/icon-why-choose-us.svg");
}
.icon-parents {
    --icon-url: url("/wp-content/uploads/graphics/icons/icon-for-parents.svg");
}
.icon-project {
    --icon-url: url("/wp-content/uploads/graphics/icons/icon-national-project.svg");
}
.icon-form {
    --icon-url: url("/wp-content/uploads/graphics/icons/form-basic.svg");
}
/* -----------------------------
   Jump offsets (edit these)
   --------------------------- */
:root {
    /* extra space ABOVE the target after jump (desktop) */
    --jump-extra-desktop-despre: 60px;
    --jump-extra-desktop-cum: 30px;
    --jump-extra-desktop-form: 30px;
    /* extra space ABOVE the target after jump (mobile) */
    --jump-extra-mobile-despre: 18px;
    --jump-extra-mobile-cum: 10px;
    /* highlight color (fallbacks if you don’t have RGB tokens) */
    --jump-flash-rgb: 17, 135, 92;
}
/* Optional: if you want different mobile values via media query */
@media (max-width: 768px) {
    :root {
        --jump-extra-mobile-despre: 22px;
        --jump-extra-mobile-cum: 10px;
    }
}
.section-title {
    position: relative;
    z-index: 0;
    border-radius: var(--radius-lg); /* keep here so outline + flash match */
}
/* IMPORTANT: do NOT animate ::before (your icon lives there) */
.section-title.is-flash {
    outline: 3px solid rgba(var(--jump-flash-rgb), 0.70);
    outline-offset: 8px;
}
/* animated ring flash (separate layer, doesn’t touch the icon) */
.section-title.is-flash::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    animation: jumpFlash 1.05s ease-out 1;
}
@keyframes jumpFlash {
    0% {
        opacity: 1;
        transform: scale(1.00);
    }
    100% {
        opacity: 0;
        transform: scale(1.03);
    }
}
@media (prefers-reduced-motion: reduce) {
    .section-title.is-flash::after {
        animation: none;
        opacity: .18;
        transform: none;
    }
}
/* ===========================================
   [SECT] Form
   ========================================== */
.formWrap {
    grid-column: span 12;
    border: 1px solid rgba(91, 46, 166, .14);
    background: rgba(255, 255, 255, .96);
    border-radius: var(--af-radius-lg);
    padding: clamp(16px, 2vw, 22px);
    box-shadow: var(--af-shadow-lg);
    position: relative;
    overflow: hidden;
    margin-top: 3rem;
}
.formWrap::before {
    content: "";
    position: absolute;
    inset: -1px;
    background-image: var(--form-img);
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.05);
    opacity: .10;
    transform: scale(1.02);
    pointer-events: none;
}
.formWrap::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: radial-gradient(520px 260px at 12% 10%, rgba(91, 46, 166, .12), transparent 62%),
    radial-gradient(520px 260px at 90% 60%, rgba(17, 135, 92, .10), transparent 62%);
    pointer-events: none;
}
.formWrap > * {
    position: relative;
    z-index: 1;
}
.formHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.formHeader h2 {
    margin: 0;
    letter-spacing: -.2px;
}
.formHeader .hint {
    margin: 0;
    font-size: var(--font-body);
    color: var(--color-text-muted);
}
.af-form {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}
.fieldset {
    grid-column: span 12;
    border: 1px solid rgba(91, 46, 166, .12);
    background: rgba(255, 255, 255, .86);
    border-radius: var(--radius-card);
    padding: 14px;
    box-shadow: 0 10px 22px rgba(27, 29, 42, .06);
}
.legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.legend h3 {
    margin: 0;
    font-size: 13px;
    font-weight: var(--fw-overline);
    letter-spacing: .25px;
    text-transform: uppercase;
    color: rgba(27, 29, 42, .92);
}
.legend .req {
    font-size: 12px;
    color: rgba(90, 95, 115, .9);
}
.field {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field--full {
    grid-column: span 12;
}
label {
    font-size: 12px;
    color: rgba(27, 29, 42, .86);
    font-weight: var(--fw-extrabold);
    letter-spacing: .15px;
}
/* Inputs aligned to your token system */
.af-form input,
.af-form select,
.af-form textarea {
    width: 100%;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid rgba(91, 46, 166, .16);
    border-radius: var(--radius-lg);
    padding: 12px 12px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.af-form input::placeholder,
.af-form textarea::placeholder {
    color: rgba(27, 29, 42, .45);
}
.af-form input:focus,
.af-form select:focus,
.af-form textarea:focus {
    border-color: rgba(17, 135, 92, .45);
    box-shadow: 0 0 0 4px rgba(17, 135, 92, .14);
    transform: translateY(-1px);
}
.af-form input[readonly] {
    opacity: .92;
    cursor: default;
    background: rgba(255, 255, 255, .80);
}
.af-form textarea {
    min-height: 110px;
    resize: vertical;
}
.radios, .checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(91, 46, 166, .14);
    background: rgba(255, 255, 255, .90);
    cursor: pointer;
    user-select: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.choice:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 46, 166, .22);
    background: rgba(239, 232, 250, .55);
    box-shadow: 0 10px 20px rgba(27, 29, 42, .08);
}
.choice input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-brand);
}
.choice span {
    font-size: 13px;
    color: rgba(27, 29, 42, .82);
    font-weight: var(--fw-bold);
}
.divider {
    height: 1px;
    background: rgba(91, 46, 166, .12);
    margin: 10px 0 6px;
}
.submitRow {
    grid-column: span 12;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}
.note {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.toast {
    display: none;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17, 135, 92, .22);
    background: rgba(17, 135, 92, .08);
    color: rgba(27, 29, 42, .92);
    font-size: 13px;
}
/* Footer */
.footer {
    padding: 20px 0 44px;
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
    position: relative;
    z-index: 1;
}
/* Responsive */
@media (max-width: 940px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }
    .panel {
        grid-column: span 12;
    }
    .field {
        grid-column: span 12;
    }
    .nav {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/*==============================================================================================================================================*/
/*===============================================================  DEV_1 – FORM  ===============================================================*/
/* ====================================
   [SECT] FORM
   ==================================== */
/* -------------------------------
   Fluent Forms (scoped wrapper)
   ----------------------------- */
.main-wrap-form {
    font-family: var(--font-body);
    color: var(--color-text);
    padding: 1.5rem;
}
.main-wrap-form :where(*, *::before, *::after) {
    box-sizing: border-box;
}
.main-wrap-form :where(.fluentform, .frm-fluent-form) {
    margin-inline: auto;
}
/* ----------------------
   Form container (card)
   ---------------------- */
.main-wrap-form :where(.fluentform > form, .fluentform form.frm-fluent-form) {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-soft);
    padding: 1.5rem;
    box-shadow: 0 12px 28px rgba(27, 29, 42, 0.06);
}
/* ----------------------
   Layout: columns + groups
   ---------------------- */
.main-wrap-form :where(.ff-t-container.ff-column-container) {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}
.main-wrap-form :where(.ff-t-container.ff-column-container > .ff-t-cell) {
    padding: 0;
    min-width: 0;
}
.main-wrap-form :where(.ff-el-group) {
    margin-bottom: 1rem;
}
.main-wrap-form :where(.ff-el-input--content) {
    width: 100%;
}
/* ----------------------
   Section breaks (titles + descriptions)
   ---------------------- */
.main-wrap-form :where(.ff-el-section-break) {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
}
.main-wrap-form :where(.ff-el-section-break:first-of-type) {
    margin-top: 0;
}
.main-wrap-form :where(.ff-el-section-title) {
    font-family: var(--font-head);
    font-weight: var(--fw-head);
    letter-spacing: var(--ls-head);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin: 0 0 0.5rem;
    color: var(--color-text);
}
.main-wrap-form :where(.ff-section_break_desk) {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    line-height: 1.55;
}
.main-wrap-form :where(.ff-el-section-break hr) {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0.75rem 0 0;
}
/* ----------------------
   Labels
   ---------------------- */
.main-wrap-form :where(.ff-el-input--label) {
    margin-bottom: 0.35rem;
}
.main-wrap-form :where(.ff-el-input--label > label) {
    display: inline-block;
    font-size: var(--fs-small);
    line-height: 1.3;
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
}
.main-wrap-form :where(.ff-el-input--label.ff-el-is-required > label)::after {
    content: " *";
    color: var(--color-error);
    font-weight: var(--fw-bold);
}
/* ----------------------------------
   Controls: inputs/selects/textareas
   ---------------------------------- */
.main-wrap-form :where(.ff-el-form-control) {
    width: 100%;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
    padding: 0.75rem 0.9rem;
    font-size: var(--fs-body);
    line-height: 1.4;
    min-height: 44px;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.main-wrap-form :where(textarea.ff-el-form-control) {
    min-height: 120px;
    resize: vertical;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.main-wrap-form :where(.ff-el-form-control::placeholder) {
    color: var(--color-text-muted);
    opacity: 0.8;
}
.main-wrap-form :where(.ff-el-form-control:focus) {
    outline: none;
}
.ff-el-group.ff-el-input--content {
    margin-bottom: 0;
}
/* ----------------------
   Consent / GDPR (Fluent Forms specific)
   ---------------------- */
#fluentform_1 label.ff_tc_label[for^="terms-n-condition"] .ff_t_c,
#fluentform_1 label.ff_tc_label[for^="terms-n-condition"] .ff_t_c p {
    font-size: var(--fs-small);
    line-height: 1.45;
    font-weight: var(--fw-legal);
    margin: 0;
}
#fluentform_1 label.ff_tc_label[for^="terms-n-condition"] .ff_t_c {
    padding-left: 5px;
}
/* ----------------------
   Focus handling + FluentForms overrides
   ---------------------- */
.main-wrap-form {
    --input-border-focus: rgba(91, 46, 166, .70);
    --color-focus-ring: rgba(91, 46, 166, .14);
}
.main-wrap-form #fluentform_1.frm-fluent-form.fluent_form_1 .ff-el-form-control {
    border: 1px solid var(--border-200, #D8DCE8);
    outline: 0;
    box-shadow: none;
}
.main-wrap-form #fluentform_1.frm-fluent-form.fluent_form_1 .ff-el-form-control:focus {
    outline: 0;
    border-color: transparent;
    box-shadow: 0 0 0 1px var(--input-border-focus),
    0 0 0 4px var(--color-focus-ring);
}
.main-wrap-form #fluentform_1.frm-fluent-form.fluent_form_1 .ff-el-input--content:focus-within {
    outline: 0;
    box-shadow: none;
}
.ff-default .ff-el-form-control:focus {
    background-color: #fff;
    border-color: unset;
    color: unset;
    outline: none !important;
}
.ff-default .ff-el-form-control {
    background-clip: padding-box;
    background-image: none;
    border-radius: var(--fluentform-border-radius);
    color: var(--fluentform-secondary);
    font-family: -apple-system, "system-ui", Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    line-height: 1;
    margin-bottom: 0;
    max-width: 100%;
    padding: 11px 15px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    outline: none !important;
}
/* ----------------------
   Disabled / readonly
   ---------------------- */
.main-wrap-form :where(.ff-el-form-control[readonly]),
.main-wrap-form :where(.ff-el-form-control[disabled]) {
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
/* ----------------------
   Select: custom arrow
   ---------------------- */
.main-wrap-form :where(select.ff-el-form-control) {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 1.15rem) 50%,
    calc(100% - 0.95rem) 50%,
    0 0;
    background-size: 7px 7px,
    7px 7px,
    100% 100%;
    background-repeat: no-repeat;
}
/* ----------------------
   List buttons (radio chips)
   ---------------------- */
.main-wrap-form :where(.ff_list_buttons .ff-el-input--content) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.main-wrap-form :where(.ff_list_buttons .ff-el-form-check) {
    margin: 0;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
    border-left: inherit;
    border-color: var(--input-border);
}
.main-wrap-form :where(.ff_list_buttons .ff-el-form-check-label) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-mark);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-ui);
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.main-wrap-form :where(.ff_list_buttons .ff-el-form-check-label:hover) {
    background: var(--color-brand-tint);
    border-color: var(--input-border-focus);
}
.main-wrap-form :where(.ff_list_buttons .ff-el-form-check-label:focus-within) {
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    border-color: var(--input-border-focus);
}
.main-wrap-form :where(.ff_list_buttons input[type="radio"]) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.main-wrap-form :where(.ff_list_buttons input[type="radio"]:checked) + span {
    color: var(--color-brand);
    font-weight: var(--fw-bold);
}
.main-wrap-form :where(.ff_list_buttons .ff-el-form-check-label:has(input[type="radio"]:checked)) {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
}
/* ----------------------
   Terms checkboxes
   ---------------------- */
.main-wrap-form :where(.ff-el-tc .ff-el-form-check-label) {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--color-text);
    font-size: var(--fs-body);
    line-height: 1.5;
}
.main-wrap-form :where(.ff-el-tc input[type="checkbox"]) {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    accent-color: var(--color-cta);
}
.main-wrap-form :where(.ff-el-tc .ff_t_c, .ff-el-tc .ff_t_c p) {
    margin: 0;
    color: var(--color-text);
}
.main-wrap-form :where(.ff-el-tc .ff-el-form-check-label:focus-within) {
    outline: none;
    border-radius: var(--radius-control);
    padding: 0.25rem 0.35rem;
}
/* ----------------------
   FluentForms list buttons: selected state override
   ---------------------- */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
    background-color: var(--color-cta);
    border-radius: var(--radius-mark);
    border-color: unset;
    box-shadow: -1px 0 0 0 #8cc5ff;
    color: #fff;
}
/* ----------------------
   Submit button
   ---------------------- */
.main-wrap-form :where(.ff_submit_btn_wrapper) {
    margin-top: 1.25rem;
}
.main-wrap-form :where(.ff-btn.ff-btn-submit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: 0.8rem 1.2rem;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: var(--font-body);
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.main-wrap-form :where(.ff-btn.ff-btn-submit:hover) {
    background: var(--btn-primary-bg-hover);
}
.main-wrap-form :where(.ff-btn.ff-btn-submit:active) {
    transform: translateY(1px);
}
.main-wrap-form :where(.ff-btn.ff-btn-submit:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}
.main-wrap-form :where(.ff-btn.ff-btn-submit[disabled]) {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
/* ===========================
   Fluent Forms submit = btn-primary (incl. spinning ball)
   =========================== */
/* Base + primary mapping */
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit {
    --btn-py: 0.75rem;
    --btn-px: 2.25rem;
    /* normal = primary solid green */
    --btn-bg: var(--btn-primary-bg);
    --btn-fg: var(--btn-primary-text);
    --btn-border: rgba(15, 122, 75, 0.22);
    /* hover = brand gradient (same twist as a.btn-primary) */
    --btn-bg-hover: var(--btn-brand-bg);
    --btn-border-hover: rgba(17, 135, 92, 0.28);
    /* ball/icon layout */
    --icon-left: 1.125rem;
    --icon-size: 0.875rem;
    --icon-gap: 0.75rem;
    --ball-rotate-speed: 12s;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: var(--btn-py) var(--btn-px);
    padding-left: calc(var(--icon-left) + var(--icon-size) + var(--icon-gap));
    border-radius: var(--radius-pill, 999px);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-body);
    border: 1px solid var(--btn-border);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transform: translateY(0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Hover / active / focus */
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    filter: brightness(1.02);
}
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    filter: brightness(0.99);
}
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--focus-ring-green),
    0 14px 30px rgba(0, 0, 0, 0.14);
}
/* Disabled (safe default) */
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
/* Ball icon + spin (same behavior as btn-primary) */
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--icon-left);
    width: var(--icon-size);
    height: var(--icon-size);
    transform: translateY(-50%) rotate(0deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    z-index: 1;
    background: var(--btn-ball-icon) no-repeat center / contain;
    animation: none;
    will-change: transform;
}
.ff_submit_btn_wrapper .ff-btn.ff-btn-submit:hover::before {
    animation: rotate-ball var(--ball-rotate-speed, 10s) linear infinite;
}
/* ----------------------
   Validation / errors
   ---------------------- */
.main-wrap-form :where(.ff-el-form-control[aria-invalid="true"]) {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18);
}
.main-wrap-form .fluentform .text-danger {
    color: var(--color-error)
}
.main-wrap-form :where(.ff-el-form-control[aria-invalid="true"]:focus-visible) {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.28);
}
.main-wrap-form :where(.ff-errors-in-stack) {
    margin-top: 1rem;
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-control);
    padding: 1rem;
}
.main-wrap-form :where(.ff-errors-in-stack a) {
    color: var(--color-link);
}
.main-wrap-form :where(.ff-errors-in-stack a:hover) {
    color: var(--color-link-hover);
}
/* ----------------------
   Responsive
   ---------------------- */
@media (max-width: 768px) {
    .main-wrap-form {
        padding: 0
    }
    .main-wrap-form :where(.fluentform > form, .fluentform form.frm-fluent-form) {
        padding: 1.1rem;
    }
    .main-wrap-form :where(.ff-t-container.ff-column-container) {
        flex-wrap: wrap;
        gap: 0.9rem;
    }
    .main-wrap-form :where(.ff-t-container.ff-column-container > .ff-t-cell) {
        flex-basis: 100% !important;
    }
}
/* =============================================
   [SECT] FOOTER
   ============================================= */
.gbp-footer[data-footer-scheme="pitch"] {
    background-color: var(--footer-bg);
    position: relative;
    color: var(--white);
    overflow: hidden;
    /* Align footer with site container system */
    --footer-max: var(--qs-max, 1360px);
    --footer-gutter: var(--qs-gutter, clamp(16px, 3vw, 40px));
    /* Vertical rhythm (top area + bottom bar) */
    --footer-pad-main: clamp(40px, 5vw, 88px);
    --footer-pad-sub: clamp(14px, 2.2vw, 22px);
}
.gbp-footer[data-footer-scheme="pitch"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/graphics/bg/bg-net.svg");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: -40% 60%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.gbp-footer[data-footer-scheme="pitch"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--gradient-brand);
    pointer-events: none;
    z-index: 2;
}
/* Constrain each inner row to your container width + gutter */
.gbp-footer[data-footer-scheme="pitch"] .gbp-section__inner {
    width: 100%;
    max-width: var(--footer-max);
    margin-inline: auto;
    padding-inline: var(--footer-gutter);
    position: relative;
    z-index: 3;
}
/* Main footer area (logo + nav + socials) */
.gbp-footer[data-footer-scheme="pitch"] .gbp-section__inner:first-child {
    padding-block: var(--footer-pad-main);
}
/* Sub-footer area (copyright + links) */
.gbp-footer[data-footer-scheme="pitch"] .gbp-section__inner + .gbp-section__inner {
    padding-block: var(--footer-pad-sub);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Logo */
.gbp-footer img.footer-logo {
    width: clamp(100px, 18vw, 150px);
    height: auto;
    max-width: 100%;
}
/* Text + links */
.gbp-footer[data-footer-scheme="pitch"] .gb-text,
.gbp-footer[data-footer-scheme="pitch"] .gbp-footer__link {
    color: rgba(255, 255, 255, 0.9);
}
.gbp-footer[data-footer-scheme="pitch"] .gbp-footer__link {
    transition: color .2s ease;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.gbp-footer[data-footer-scheme="pitch"] .gbp-footer__link:hover {
    color: rgba(255, 255, 255, 1);
}
.gbp-footer .footer-inner a.gbp-footer__link,
.gbp-footer .footer-inner .gb-text {
    font-size: var(--fs-medium)
}
/* Social icons */
.gbp-footer[data-footer-scheme="pitch"] .gb-shape svg {
    color: rgba(255, 255, 255, 0.82);
    transition: transform .2s ease, color .2s ease, opacity .2s ease;
}
.gbp-footer[data-footer-scheme="pitch"] .gb-shape:hover svg {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}
/* Optional: make the net background behave nicer on small screens */
@media (max-width: 768px) {
    .gbp-footer[data-footer-scheme="pitch"]::before {
        background-size: 180%;
        background-position: 20% 90%;
        opacity: 0.12;
    }
}