/*
 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. DESIGN TOKENS (ROOT) =====*/
/*==================================*/
/*=========================*/
/*===== Brand/Colors =====*/
/*---------------------
    Base colors
--------------------*/
:root {
    /* ==========================
       Brand spectrum (cyan/teal)
       ========================== */
    --brand: #1dd7ff;
    --brand-strong: #00a2c7;
    --brand-deep: #009eaf;
    --brand-accent: #61f1ff;
    --brand-soft: #90d3e1;
    --brand-rgb: 29, 215, 255; /* #1dd7ff */
    --brand-soft-rgb: 144, 211, 225; /* #90d3e1 */
    --brand-deep-rgb: 0, 158, 175; /* #009eaf */
    /* ==========================
       Neutral surfaces (dark UI)
       ========================== */
    --surface-0: #020617; /* page background, site footer */
    --surface-1: #050b1b; /* hero base */
    --surface-2: #07152b; /* cards */
    --surface-3: #ffffff; /* cards */
    --surface-glass: rgba(15, 23, 42, 0.78);
    --surface-glass-soft: rgba(15, 23, 42, 0.55);
    /* Light surface for alt sections */
    --surface-light: #ecf4f6;
    /*--surface-light-1: #e8f5f8;
    --surface-light-2: #eff0f3; alternatives */
    /* Channel versions for use in rgba() */
    --surface-0-rgb: 2, 6, 23;
    --surface-1-rgb: 5, 11, 27;
    --surface-2-rgb: 7, 21, 43;
    /* ==========================
       Text tokens
       ========================== */
    /* Text on dark surfaces (shared for surface-0/1/2) */
    --ink: #f9fafb;
    /* alternative: #e5e7f5; */
    --ink-soft: #cbd5f5; /* subtle / badge text */
    --ink-muted: #8b97b4; /* meta / muted on dark */
    /* Semantic text tokens (dark) */
    --color-text: var(--ink); /* default text on dark */
    --color-text-muted: var(--ink-muted);
    /* Text on light surfaces */
    --ink-inverse: #020617;
    --ink-inverse-muted: rgba(2, 6, 23, 0.7);
    /* Semantic text tokens (light) */
    --color-text-inverse: var(--ink-inverse);
    --color-text-muted-on-light: var(--ink-inverse-muted);
    /* ==========================
       Background tokens
       ========================== */
    /* Background colors */
    --color-bg-page: var(--surface-0); /* base page / footer */
    --color-bg-hero: var(--surface-1); /* hero sections */
    --color-bg-card: var(--surface-2); /* cards, panels */
    --color-bg-page-light: var(--surface-light); /* light sections */
    --color-bg-card-white: var(--surface-3);
    /* Background + text pairings
       (one text color reused across all dark surfaces) */
    --color-page-text: var(--color-text); /* on surface-0 */
    --color-hero-text: var(--color-text); /* on surface-1 */
    --color-card-text: var(--color-text); /* on surface-2 */
    --color-page-light-text: var(--color-text-inverse); /* on surface-light */
    /* ==========================
       Borders
       ========================== */
    --border-subtle: #1e293b;
    --border-strong: #38bdf8;
    --border-glow: rgba(56, 189, 248, 0.7);
    --border-glass: rgba(148, 163, 184, 0.35);
    --color-border-subtle: var(--border-subtle);
    --color-border-strong: var(--border-strong);
    /* ==========================
       Links
       ========================== */
    --color-link: var(--brand);
    --color-link-hover: var(--brand-strong);
    --color-link-visited: var(--brand-accent);
    /* ==========================
       Supporting accents
       ========================== */
    --accent-magenta: #9e2079;
    --accent-magenta-soft: #f472b6;
    --accent-teal-soft: #5eead4;
    /* ==========================
       Header & nav chips
       ========================== */
    --color-header-bg: transparent;
    --color-header-text: var(--ink-strong);
    --color-header-chip-bg: radial-gradient(
            circle at 0% 0%,
            rgba(105, 255, 255, 0.16),
            transparent 55%
    ) rgba(255, 255, 255, 0.02);
    --color-header-chip-bg-hover: linear-gradient(
            135deg,
            rgba(17, 209, 255, 0.10),
            rgba(68, 244, 255, 0.10)
    );
    /* ==========================
       Buttons
       ========================== */
    --btn-primary-bg: var(--brand);
    --btn-primary-bg-hover: var(--brand-strong);
    --btn-primary-text: #020617;
    --btn-primary-border: transparent;
    --btn-primary-bg-disabled: rgba(29, 215, 255, 0.4);
    --btn-primary-text-disabled: rgba(15, 23, 42, 0.65);
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: rgba(15, 23, 42, 0.9);
    --btn-secondary-border: var(--border-strong);
    --btn-secondary-text: var(--ink);
    --btn-secondary-text-hover: var(--ink-strong);
    /* ==========================
       Pills & badges
       ========================== */
    --badge-pill-bg: rgba(15, 23, 42, 0.85);
    --badge-pill-border: rgba(148, 163, 184, 0.45);
    --badge-pill-text: var(--ink-soft);
    /* ==========================
       Hero / banner
       ========================== */
    --banner-main-gradient-start: rgba(var(--brand-soft-rgb), 0.12);
    --banner-main-gradient-end: rgba(var(--brand-rgb), 0.22);
    --banner-main-text: var(--ink-strong);
    /* ==========================
       Sections
       ========================== */
    --section-promo-bg: radial-gradient(
            circle at 0 0,
            rgba(94, 234, 212, 0.14),
            transparent 65%
    );
    --section-info-bg: radial-gradient(
            circle at 100% 0,
            rgba(148, 163, 184, 0.2),
            transparent 65%
    );
    /*=======================================*/
    /*===== Typography & layout tokens =====*/
    --font-head: "Saira Condensed", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
    --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Body font size  */
    --fs-base: 1rem;
    --fs-body: clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
    /*-----------------
        Font weights
    ------------------*/
    --fw-heading: 700; /* H1–H5 */
    --fw-body: 400; /* base copy */
    --fw-subtitle: 600;
    --fw-label: 500;
    --fw-strong: 600;
    --fw-extra-strong: 800;
    /*-----------------
       Line heights
   ------------------*/
    --lh-h1: 1.10;
    --lh-h2: 1.15;
    --lh-h3: 1.20;
    --lh-body: 1.75;
    /*-----------------
        Trackings
    ------------------*/
    --track-tight: -0.010em;
    --track-tighter: -0.015em;
    --track-body: 0.01em;
    /*-----------------
        Border Radius
    ------------------*/
    --rad-base: 0.6rem;
    --rad-modal: 1.125rem;
    --rad-card: 1.5rem;
    --rad-pill: 9999px;
}
/*=======================*/
/*===== Topography =====*/
/*=====================*/
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--track-body);
    font-weight: var(--fw-body);
    color: var(--color-text-inverse);
}
/* Headings */
h1, h2, h3, h4, h5,
.h1, .h2, .h3 .h4 .h5 {
    font-family: var(--font-head);
    font-weight: var(--fw-heading);
    letter-spacing: var(--track-tight);
    margin: 0 0 .5em;
    text-wrap: balance;
    color: var(--color-text-inverse);
}
h1.ink {
    color: var(--color-text);
    text-shadow: 0 0 10px var(--border-glow),
    0 1px 2px rgba(var(--surface-1-rgb), 0.45),
    0 6px 18px rgba(var(--surface-0-rgb), 0.35);
}
.h4.subtitle {
    font-weight: var(--fw-strong);
    color: var(--ink-inverse-muted)
}
/*---------------
    Headings
---------------*/
/* Small Scale */
h1, .h1, .entry-title {
    font-size: clamp(2.653rem, 6.271vw, 3.377rem);
    line-height: var(--lh-h1);
}
h2, .h2 {
    font-size: clamp(2.122rem, 4.9vw, 2.639rem);
    line-height: var(--lh-h2);
}
h3, .h3 {
    font-size: clamp(1.698rem, 3.8vw, 2.062rem);
    line-height: var(--lh-h3);
}
h4, .h4 {
    font-size: clamp(1.358rem, 2.9vw, 1.611rem);
    line-height: 1.25;
}
h5, .h5 {
    font-size: clamp(1.086rem, 2.0vw, 1.259rem);
    line-height: 1.30;
}
/* Make headings larger on mobile */
@media (max-width: 480px) {
    h1, .h1, .entry-title {
        font-size: clamp(2.9rem, 7.2vw, 3.6rem);
        line-height: var(--lh-h1);
    }
    h2, .h2 {
        font-size: clamp(2.3rem, 5.4vw, 2.9rem);
        line-height: var(--lh-h2);
    }
    h3, .h3 {
        font-size: clamp(1.9rem, 4.3vw, 2.3rem);
        line-height: var(--lh-h3);
    }
    h4, .h4 {
        font-size: clamp(1.5rem, 3.3vw, 1.8rem);
        line-height: 1.25;
    }
    h5, .h5 {
        font-size: clamp(1.2rem, 2.4vw, 1.4rem);
        line-height: 1.30;
    }
}
/* Large Scale (uppercase) */
h1.scale-large {
    font-size: clamp(4.1rem, 7vw, 5.12rem);
    line-height: var(--lh-h1);
}
h2.scale-large {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: var(--lh-h2);
    margin-bottom: 10px;
    font-weight: var(--fw-extra-strong);
    text-transform: capitalize
}
body:not(.home) h2.scale-large {
    margin-top: clamp(3rem, 8vw, 8rem);
}
@media (max-width: 768px) {
    body:not(.home) h2.scale-large {
        margin-top: 5rem;
    }
}
h3.scale-large {
    font-size: clamp(2.5rem, 4.5vw, 3.125rem);
    line-height: var(--lh-h3);
    margin-bottom: 15px;
}
/* Media: adjust tracking for headings */
@media (max-width: 768px) {
    h1, h2, h3 {
        letter-spacing: var(--track-tight);
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* tablet-specific heading tweaks if needed */
}
@media (min-width: 1025px) {
    h1, h2 {
        letter-spacing: var(--track-tighter);
    }
}
@media (max-width: 480px) {
    h1.scale-large {
        font-size: clamp(2.8rem, 8vw, 3.6rem);
        line-height: var(--lh-h1);
    }
    h2.scale-large {
        font-size: clamp(2.3rem, 7vw, 2.8rem);
        line-height: var(--lh-h2);
        margin-bottom: 9px;
    }
    h3.scale-large {
        font-size: clamp(1.9rem, 5.8vw, 2.3rem);
        line-height: var(--lh-h3);
        margin-bottom: 11px;
    }
    .h4.subtitle {
        font-size: clamp(1.2rem, 2.4vw, 1.4rem);
    }
}
/*-------------
    Other
-------------*/
.prose,
.h4.subtitle {
    max-width: 68ch;
}
/*========================*/
/*===== Main Menu: =====*/
#primary-menu .sf-menu {
    gap: 1.7rem;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}
#primary-menu .sf-menu > li {
    margin: 0;
    padding: 0;
}
/* Reset default link look */
#primary-menu .sf-menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: var(--fs-body);
    border-radius: var(--rad-modal);
    text-transform: none;
    color: var(--color-header-text);
    padding: 0 1.35rem;
    font-family: var(--font-body);
    transition: background 180ms ease-out,
    color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 160ms ease-out;
    border: 1px solid #ecf4f67d;
}
.main-nav .sf-menu > li > a {
    background: var(--color-header-chip-bg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.main-nav .sf-menu > li > a:hover,
.main-nav .sf-menu > li > a:focus-visible {
    background: var(--color-header-chip-bg-hover);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(48, 234, 255, 0.45);
    transform: translateY(-1px);
    color: var(--ink-strong);
}
/* Active state */
.main-nav .sf-menu > li.current-menu-item > a,
.main-nav .sf-menu > li.current_page_item > a,
.main-nav .sf-menu > li.current_page_parent > a {
    background: radial-gradient(
            circle at 30% 20%,
            rgb(var(--brand-soft-rgb)),
            rgb(var(--brand-deep-rgb))
    );
    color: black !important;
    color: var(--job-btn-text);
    transition: background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.35);
}
.main-nav.nav-glass .sf-menu > li > a:focus-visible {
    outline: 2px solid rgba(97, 241, 255, 0.9);
    outline-offset: 2px;
}
/*------------------------
    Canvas Mobile Menu
-----------------------*/
.main-navigation .menu-toggle {
    font-size: 25px;
    color: white;
}
.main-navigation.slideout-navigation .main-nav > ul > li > a {
    line-height: 50px;
}
.slideout-navigation .slideout-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: var(--fw-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.25rem 0;
    color: var(--ink-inverse);
    transition: color 130ms ease-out,
    transform 130ms ease-out;
}
/* Arrow in front of each item */
.slideout-navigation .slideout-menu > li > a::before {
    content: "›";
    font-size: 1.5rem;
    line-height: 1;
    display: inline-block;
    transform: translateY(1px);
    padding-right: 5px;
    color: var(--brand-deep);
    opacity: 0.85;
    padding-bottom: 5px;
    transition: transform 130ms ease-out,
    color 130ms ease-out,
    opacity 130ms ease-out;
}
/*===========================*/
/*===== SECT: TOP Hero =====*/
/*=========================*/
.hero-header {
    position: relative;
    background: linear-gradient(
            180deg,
            rgba(var(--surface-0-rgb), 0.98) 0%,
            rgba(var(--surface-0-rgb), 0.70) 18%,
            rgba(var(--surface-1-rgb), 0.40) 50%,
            rgba(var(--surface-2-rgb), 0.00) 100%
    ),
    url('/wp-content/uploads/graphics/bg-png/front-page-header.png');
    background-color: var(--color-bg-hero);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--banner-main-text);
    overflow: visible;
}
.hero-header::before {
    content: "";
    position: absolute;
    width: 60vw;
    height: 450px;
    left: 0;
    top: -80px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-header-top-left.svg');
    background-position: calc(0% - 50px) 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
    animation: hero-header-wave-top 5s ease-in-out infinite;
}
.hero-header::after {
    content: "";
    position: absolute;
    width: 60vw;
    height: 350px;
    right: 0;
    bottom: -80px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-header-bottom-right.svg') no-repeat;
    background-position: calc(100% + 50px) 0; /* visually push it 50px right */
    background-size: 100% auto;
    pointer-events: none;
    animation: hero-header-wave-bottom 5s ease-in-out infinite;
    z-index: 2;
}
body:not(.home) .header-wrap .site-header::before {
    content: "";
    position: absolute;
    width: 35vw;
    height: 350px;
    left: 0;
    top: -60px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-header-top-left.svg');
    background-position: calc(0% - 50px) 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
    animation: hero-header-wave-top 5s ease-in-out infinite;
}
body:not(.home) .header-wrap .site-header::after {
    content: "";
    position: absolute;
    width: 35vw;
    height: 350px;
    right: 0;
    bottom: -130px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-header-bottom-right.svg') no-repeat;
    background-position: calc(100% + 50px) 0; /* visually push it 50px right */
    background-size: 100% auto;
    pointer-events: none;
    animation: hero-header-wave-bottom 5s ease-in-out infinite;
    z-index: 2;
}
/*===========================*/
/*===== SECT: Benefits =====*/
/*=========================*/
.subsections {
    position: relative;
    overflow: visible;
    background: var(--color-bg-page-light);
}
.subsections::before {
    content: "";
    position: absolute;
    width: 55vw;
    height: 500px;
    left: 0;
    top: -200px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-top-left.svg') no-repeat;
    background-position: calc(0% - 250px) 0;
    background-size: 100% auto;
    pointer-events: none;
    animation: hero-header-wave-bottom 5s ease-in-out infinite;
    z-index: 3;
}
body:not(.home) .subsections::before {
    content: none;
    animation: none;
    background: none;
}
.subsections::after {
    content: "";
    position: absolute;
    width: 43vw;
    height: 350px;
    right: 0;
    bottom: -200px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-header-bottom-right.svg') no-repeat;
    background-position: calc(100% + 50px) 0;
    background-size: 100% auto;
    pointer-events: none;
    animation: hero-header-wave-bottom 5s ease-in-out infinite;
    z-index: 2;
}
.s-footer {
    position: relative;
    overflow: visible;
}
.s-footer::before {
    content: "";
    position: absolute;
    width: 55vw;
    height: 500px;
    left: 0;
    top: -200px;
    background: url('/wp-content/uploads/graphics/bg-svg/wave-top-left.svg') no-repeat;
    background-position: calc(0% - 250px) 0;
    background-size: 100% auto;
    pointer-events: none;
    animation: hero-header-wave-bottom 5s ease-in-out infinite;
    z-index: 3;
}
@media (max-width: 1024px) {
    .hero-header::before {
        width: 100%;
        height: 220px;
        left: 0;
        top: -40px;
        background-size: 100% auto;
    }
    .hero-header::after {
        width: 60%;
        height: 220px;
        right: 0;
        bottom: -100px;
        background-size: 100% auto;
    }
    body:not(.home) .header-wrap .site-header::before {
        width: 50vw;
        left: 0;
        top: 0;
    }
    body:not(.home) .header-wrap .site-header::after {
        width: 50vw;
        height: 350px;
        right: 0;
        bottom: -180px;
    }
    .subsections::before {
        width: 80%;
        height: 260px;
        left: 0;
        top: -120px;
        background-size: 100% auto;
        background-position: calc(0% - 150px) 0;
    }
    .s-footer::before {
        width: 80%;
        height: 260px;
        left: 0;
        top: -70px;
        background-size: 100% auto;
        background-position: calc(0% - 150px) 0;
    }
    .subsections::after {
        width: 55vw;
        height: 220px;
        right: 0;
        bottom: -150px;
        background-size: 100% auto;
    }
}
@media (max-width: 480px) {
    .hero-header::after {
        width: 75%;
        height: 220px;
        right: 0;
        bottom: -120px;
        background-size: 100% auto;
        opacity: 0.4;
    }
    body:not(.home) .header-wrap .site-header::before {
        width: 80vw;
    }
    body:not(.home) .header-wrap .site-header::after {
        width: 80vw;
        bottom: -200px;
    }
    .subsections::before {
        width: 90vw;
        height: 260px;
        top: -150px;
        background-size: 100% auto;
        left: 0;
        background-position: calc(0% - 150px) 0;
        opacity: 0.4;
    }
    .subsections::after {
        width: 60vw;
        height: 220px;
        right: 0;
        bottom: -180px;
        background-size: 100% auto;
    }
    .s-footer::before {
        width: 100%;
        height: 260px;
        left: 0;
        top: -70px;
        background-size: 100% auto;
        background-position: calc(0% - 150px) 0;
    }
}
@keyframes hero-header-wave-top {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.5;
    }
    50% {
        transform: translate(-14px, 8px);
        opacity: 0.5;
    }
}
@keyframes hero-header-wave-bottom {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(8px);
        opacity: 0.5;
    }
}
/*===========================*/
/*===== SECT: Benefits =====*/
/*=========================*/
.ptx-feature-cards__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
    z-index: 3
}
.ptx-card {
    position: relative;
    perspective: 1200px;
}
.ptx-card__icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
    border-radius: var(--rad-pill);
    background: radial-gradient(
            circle at 30% 20%,
            rgb(var(--brand-soft-rgb)),
            rgb(var(--brand-deep-rgb))
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45),
    0 0 0 4px rgba(var(--brand-soft-rgb), 0.25);
    z-index: 2;
}
.ptx-card__icon-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.ptx-card__icon-glyph img {
    display: block;
    width: 45%;
    height: 45%;
    object-fit: contain;
}
.ptx-card__inner {
    position: relative;
    width: 100%;
    height: 350px;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ptx-card:hover .ptx-card__inner,
.ptx-card.is-flipped .ptx-card__inner {
    transform: rotateY(180deg);
    transition: transform 1.5s ease;
    transform-style: preserve-3d;
}
.ptx-card__face {
    position: absolute;
    inset: 0;
    padding: 3.5rem 2.25rem 2.25rem;
    border-radius: var(--rad-card);
    background-color: var(--color-bg-card);
    background-image: linear-gradient(
            to bottom,
            rgba(7, 21, 43, 0.50) 0%,
            rgba(4, 10, 24, 0.70) 50%,
            rgba(4, 10, 24, 0.90) 100%
    ),
    var(--ptx-card-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: var(--ink-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    backface-visibility: hidden;
}
.ptx-card__face--back {
    transform: rotateY(180deg);
    background: var(--color-bg-card)
}
.ptx-card__title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: var(--fw-heading);
    letter-spacing: var(--track-tight);
}
.ptx-card__body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--ink-strong);
}
.ptx-card:hover .ptx-card__face {
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65);
}
.ptx-card__title,
.ptx-card__body {
    color: var(--color-text);
}
@media (max-width: 1025px) {
    .ptx-feature-cards__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ptx-feature-cards__inner {
        row-gap: 5rem
    }
}
@media (max-width: 768px) {
    .ptx-feature-cards__inner {
        grid-template-columns: 1fr;
    }
}
/*==================================*/
/*===== SECT: Clinet Outcomes =====*/
/*================================*/
.scalecare-col {
    --ptx-card-radius: var(--rad-card);
    --ptx-card-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
    --ptx-card-border: var(--border-glass);
    --ptx-card-bg: radial-gradient(
            circle at 0 0,
            rgba(var(--brand-soft-rgb), 0.22),
            transparent 60%
    ) var(--color-bg-card-white);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.75rem, 2.5vw, 2.25rem);
    border-radius: var(--ptx-card-radius);
    background: var(--ptx-card-bg);
    border: 1px solid var(--ptx-card-border);
    color: var(--color-page-light-text);
    overflow: hidden;
}
.scalecare-col::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
            90deg,
            rgba(var(--brand-rgb), 0.05),
            rgba(var(--brand-rgb), 0.75),
            rgba(var(--brand-rgb), 0.05)
    );
}
.s-scalecare .top-label {
    font-family: var(--font-body);
    font-weight: var(--fw-label);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.9rem;
    border-radius: var(--rad-pill);
    border: 1px solid rgba(var(--brand-rgb), 0.35);
    background: linear-gradient(
            135deg,
            rgba(var(--brand-soft-rgb), 0.18),
            rgba(255, 255, 255, 0.9)
    );
    white-space: nowrap;
    text-align: center;
    color: var(--ink-inverse)
}
/* Icons */
.ptx-feature-list__icon {
    --ptx-icon-size: 1.6rem;
    width: var(--ptx-icon-size);
    height: var(--ptx-icon-size);
    border-radius: var(--rad-pill);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ptx-feature-list__icon svg {
    width: 2rem;
    height: 2rem;
}
.s-scalecare .feature-list p {
    margin-bottom: 15px;
    font-weight: 500;
    padding-left: 10px;
    font-size: var(--fs-base)
}
/*----------------------*/
/*    Submit Button    */
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.95rem 1.8rem;
    margin-top: auto;
    border-radius: var(--rad-pill);
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    background: radial-gradient(
            circle at 10% 0%,
            rgba(var(--brand-soft-rgb), 0.55),
            transparent 55%
    ),
    radial-gradient(
            circle at 30% 20%,
            rgba(var(--surface-1-rgb), 1),
            rgba(var(--surface-0-rgb), 1)
    );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20),
    0 0 0 4px rgba(var(--brand-soft-rgb), 0.25);
    transition: background 160ms ease-out,
    color 160ms ease-out,
    box-shadow 160ms ease-out,
    transform 130ms ease-out;
}
/* CTA states */
.submit-btn:hover {
    background: linear-gradient(
            135deg,
            var(--btn-primary-bg-hover),
            var(--brand-deep)
    );
    transform: translateY(-1px);
}
.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 10px 35px rgba(var(--brand-deep-rgb), 0.4);
}
.submit-btn:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9),
    0 0 0 4px var(--border-glow);
}
@media (max-width: 480px) {
    .s-scalecare .top-label {
        white-space: normal;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        line-height: 1.6;
        padding: 0.3rem 0.75rem;
    }
}
/*===============================*/
/*===== SECT: Testimonials =====*/
/*==============================*/
.mbt-testimonial.slick-slide {
    border-radius: var(--rad-card);
    background: var(--color-bg-card-white);
    padding: 2rem 2.5rem;
}
.mbt-testimonial.slick-slide .mbt-text {
    position: relative;
    padding-top: 1.7rem;
}
.mbt-testimonial.slick-slide .mbt-quote {
    position: absolute;
    top: 0;
    font-family: var(--font-head);
    font-weight: var(--fw-heading);
    font-size: 2.7rem;
    line-height: 1;
    color: var(--ink-inverse-muted);
    pointer-events: none;
}
@media (max-width: 768px) {
    .mbt-testimonial.slick-slide {
        padding: 1.25rem 1.5rem;
    }
    .mbt-testimonial.slick-slide .mbt-quote {
        font-size: 2.3rem;
        top: 0.8rem;
        left: 1.6rem;
    }
}
/*======================*/
/*===== SECT: FAQ =====*/
/*====================*/
.gb-accordion {
    --faq-bg-active: rgba(12, 197, 219, 0.08);
    --faq-border: rgba(3, 22, 41, 0.08);
    --faq-border-active: var(--brand)
}
.faq-accordion .gb-accordion__item {
    border-radius: var(--rad-modal);
    background: var(--color-bg-card-white);
    border: 1px solid var(--faq-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.faq-accordion .gb-accordion__item + .gb-accordion__item {
    margin-top: 0.9rem;
}
/* Question row */
.faq-accordion .gb-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.15rem 1.5rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}
.faq-accordion .gb-accordion__toggle h3 {
    margin: 0;
}
.faq-accordion .gb-accordion__toggle-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 1rem;
    color: var(--brand-strong);
    transition: background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}
/* Answer body */
.faq-accordion .gb-accordion__content {
    padding: 0 1.5rem 1.25rem;
    font-size: var(--fs-base)
}
.faq-accordion .gb-accordion__toggle[aria-expanded="true"] {
    background: linear-gradient(
            135deg,
            var(--faq-bg-active),
            rgba(1, 25, 48, 0.04)
    );
}
.faq-accordion .gb-accordion__item.gb-accordion__item-open {
    border-color: var(--faq-border-active);
}
/* Active (open) + hover + keyboard focus */
.faq-accordion .gb-accordion__item.gb-accordion__item-open,
.faq-accordion .gb-accordion__item:hover,
.faq-accordion .gb-accordion__item:focus-within {
    border-color: var(--faq-border-active);
}
.faq-accordion .gb-accordion__toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: calc(var(--rad-modal) - 4px);
}
@media (max-width: 768px) {
    .faq-accordion .gb-accordion__toggle {
        padding-inline: 1.1rem;
    }
    .faq-accordion .gb-accordion__content {
        padding-inline: 1.1rem;
    }
}
/*==================*/
/*===== FORMS =====*/
/*================*/
.fluentform_wrapper_1 {
    --contact-form-max-width: 60rem;
    --contact-field-gap: 1.5rem;
    --contact-field-radius: var(--rad-modal);
    --contact-field-shadow: 0 22px 55px rgba(var(--surface-0-rgb), 0.16);
    max-width: var(--contact-form-max-width);
    width: 100%;
    margin-inline: auto;
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--rad-card);
    background: var(--color-bg-card-white);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
}
/* Labels */
.fluentform_wrapper_1 .ff-el-input--label label,
.fluentform_wrapper_4 .ff-el-input--label label {
    font-family: var(--font-body);
    display: block;
    margin-bottom: 0.35rem;
}
/* Inputs & textarea */
.fluentform_wrapper_1 .ff-el-form-control,
.fluentform_wrapper_4 .ff-el-form-control {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    border-radius: var(--rad-modal);
    padding: 0.9rem 1rem;
    transition: border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease,
    transform 120ms ease;
    background: #fbfcfe;
    border: 1px solid #e2e8f0;
}
/* Placeholder styling */
.fluentform_wrapper_1 .ff-el-form-control::placeholder,
.fluentform_wrapper_4 .ff-el-form-control::placeholder {
    color: var(--color-text-muted-on-light);
    opacity: 1;
}
/* Focus state for fields */
.fluentform_wrapper_1 .ff-el-form-control:focus,
.fluentform_wrapper_4 .ff-el-form-control:focus,
.fluentform_wrapper_4 .ff-el-form-control:focus-visible,
.fluentform_wrapper_1 .ff-el-form-control:focus-visible {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 1px var(--border-strong),
    0 0 0 2px rgba(var(--brand-rgb), 0.15),
    0 5px 45px rgba(var(--surface-0-rgb), 0.10);
}
/*----------------------*/
/*    Submit Button    */
.fluentform_wrapper_1 .form-submit .ff-btn.ff-btn-submit,
.fluentform_wrapper_4 .form-submit .ff-btn.ff-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.8rem;
    margin-top: auto;
    border-radius: var(--rad-pill);
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    background: radial-gradient(
            circle at 10% 0%,
            rgba(var(--brand-soft-rgb), 0.55),
            transparent 55%
    ),
    radial-gradient(
            circle at 30% 20%,
            rgba(var(--surface-1-rgb), 1),
            rgba(var(--surface-0-rgb), 1)
    );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20),
    0 0 0 4px rgba(var(--brand-soft-rgb), 0.25);
    transition: background 160ms ease-out,
    color 160ms ease-out,
    box-shadow 160ms ease-out,
    transform 130ms ease-out;
}
/* CTA states */
.fluentform_wrapper_1 .form-submit .ff-btn.ff-btn-submit:hover {
    background: linear-gradient(
            135deg,
            var(--btn-primary-bg-hover),
            var(--brand-deep)
    );
    transform: translateY(-1px);
}
.fluentform_wrapper_1 .form-submit .ff-btn.ff-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 10px 35px rgba(var(--brand-deep-rgb), 0.4);
}
.fluentform_wrapper_1 .form-submit .ff-btn.ff-btn-submit:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9),
    0 0 0 4px var(--border-glow);
}
/*---------------------*/
/*    Error States    */
.fluentform_wrapper_1 .ff-el-is-error .ff-el-form-control,
.fluentform_wrapper_4 .ff-el-is-error .ff-el-form-control {
    border-color: var(--accent-magenta-soft);
}
.fluentform_wrapper_1 .ff-el-is-error .ff-el-input--label label,
.fluentform_wrapper_4 .ff-el-is-error .ff-el-input--label label,
.fluentform_wrapper_1 .ff-error,
.fluentform_wrapper_4 .ff-error {
    color: var(--accent-magenta);
}
.fluentform_wrapper_1 .error.text-danger,
.fluentform_wrapper_4 .error.text-danger {
    color: var(--accent-magenta-soft);
}
@media (max-width: 480px) {
    .fluentform_wrapper_1 {
        padding: 1.75rem 1.25rem;
    }
}

/*===========================*/
/*=   Sections Separator   =*/
/*=========================*/
.ptx-band-separator {
    position: relative;
    z-index: 1;
    background: linear-gradient(
            180deg,
            rgba(var(--surface-1-rgb), 1),
            rgba(var(--surface-0-rgb), 1)
    );
    padding: 10px 0;
    /* height: 0;
    border: 1px solid red;
    margin: 0 !important;
    padding: 0 !important; */
}
.ptx-band-separator__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 3.5rem;
}
.ptx-band-separator__inner::before,
.ptx-band-separator__inner::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(148, 163, 184, 0.45),
            rgba(var(--brand-soft-rgb), 0.85),
            rgba(148, 163, 184, 0.45),
            transparent
    );
    opacity: 0.65;
}
.ptx-band-separator__inner::before {
    left: 0;
    right: 50%;
    margin-right: 2rem;
}
.ptx-band-separator__inner::after {
    right: 0;
    left: 50%;
    margin-left: 2rem;
}
.ptx-band-separator__logo {
    position: relative;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    background: url("/wp-content/uploads/graphics/separator-logo.png") center / contain no-repeat;
}
/*===================*/
/*===== FOOTER =====*/
.site-footer {
    background: linear-gradient(
            180deg,
            rgba(var(--surface-1-rgb), 1),
            rgba(var(--surface-0-rgb), 1)
    );
}
/*========================*/
/*===== Back to TOP =====*/
.generate-back-to-top,
.generate-back-to-top:visited {
    background: radial-gradient(
            circle at 30% 20%,
            rgb(var(--brand-soft-rgb)),
            rgb(var(--brand-deep-rgb))
    );
    color: var(--ink-inverse);
    border-radius: var(--rad-base)
}
.generate-back-to-top:hover,
.generate-back-to-top:focus {
    color: var(--surface-3)
}
/*======================================================================================================================================*/
/*===============================================================  DEV  ===============================================================*/
body:not(.home) .header-wrap .site-header {
    position: relative;
    background: linear-gradient(
            180deg,
            rgba(var(--surface-0-rgb), 0.98) 0%,
            rgba(var(--surface-0-rgb), 0.70) 5%,
            rgba(var(--surface-1-rgb), 0.40) 40%,
            rgba(var(--surface-2-rgb), 0.00) 80%
    ),
    url('/wp-content/uploads/graphics/bg-png/front-page-header.png');
    background-color: var(--color-bg-hero);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--banner-main-text);
    overflow: visible;
}
body:not(.home) .header-wrap .site-header {
    z-index: 100;
    box-shadow: 0 10px 30px -10px rgba(34, 211, 238, 0.15);
    border-bottom: 1px solid rgba(34, 211, 238, 0.1);
}
/*======================================================================================================================================*/
/*===============================================================  DEV  ===============================================================*/
:root {
    /* Map these to your own tokens if you want */
    --job-card-bg: var(--surface-1, #0b1120);
    --job-card-border: rgba(148, 163, 184, 0.25);
    --job-card-radius: var(--rad-card, 1rem);
    --job-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
    --job-text-main: var(--color-text, #e5e7eb);
    --job-text-muted: var(--color-text-muted, #9ca3af);
    --job-btn-bg: var(--brand, #1dd7ff);
    --job-btn-bg-hover: var(--brand-strong, #00a2c7);
    --job-btn-text: #020617;
}
.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.job-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--rad-modal);
    background: var(--job-card-bg);
    transition: all 0.3s ease;
}
.job-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--brand-cyan);
}
.job-card__info {
    flex: 1 1 auto;
    min-width: 0;
}
.job-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--job-text-main);
}
.job-card__meta {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--job-text-muted);
}
.job-card__desc {
    margin: 0;
    line-height: 1.5;
    color: var(--ink-soft)
}
.job-card__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.job-card__apply-btn {
    padding: 0.95rem 1.8rem;
    border-radius: var(--rad-pill);
    border: none;
    cursor: pointer;
    font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    
    background: var(--job-btn-bg);
    color: var(--job-btn-text);
    background: radial-gradient(
            circle at 30% 20%,
            rgb(var(--brand-soft-rgb)),
            rgb(var(--brand-deep-rgb))
    );
    transition: background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.30);
}
.job-card__apply-btn:hover,
.job-card__apply-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.45);
    outline: none;
}
.job-card__apply-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(34, 211, 238, 0.35);
}
@media (max-width: 1024px) {
    .jobs-list {
        margin-top: 55px;
    }
}
@media (max-width: 768px) {
    .job-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .job-card__actions {
        align-self: stretch;
        justify-content: flex-start;
    }
    .job-card__apply-btn {
        width: 100%;
        text-align: center;
    }
}
/* -------- Modal / lightbox -------- */
.job-modal {
    position: fixed;
    inset: 0;
    display: none; /* hidden by default */
    z-index: 9999;
}
.job-modal.is-open {
    display: block;
}
.job-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
}
.job-modal__dialog {
    position: relative;
    max-width: 640px;
    margin: 4rem auto;
    padding: 2rem 2rem;
    border-radius: var(--job-card-radius);
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    background: white;
    border: 5px solid #00a2c7
}
.job-modal__title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #020617;
    color: var(--ink-inverse-muted);
}
#job-modal-job-title {
    color: #020617
}
.job-modal__close {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    border: none;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    color: #020617;
    cursor: pointer;
}
.job-modal__close:hover,
.job-modal__close:focus-visible {
    color: var(--job-text-main);
    outline: none;
}
.job-modal__form {
    margin-top: 0.75rem;
}
/* Mobile modal */
@media (max-width: 640px) {
    .job-modal__dialog {
        margin: 2.5rem 1rem;
        padding: 1.5rem 1.25rem 1.75rem;
    }
}




/*===================*/
/*===== SECT: =====*/
/*================*/


























































/*===========================*/
/*===== PAGE: Products =====*/
/*=========================*/
:root {
  --brand-cyan: #1dd7ff;
  --brand-cyan-soft: #90d3e1;
  --brand-teal: #009eaf;
  --brand-gradient: linear-gradient(135deg, #1dd7ff 0%, #009eaf 100%);
  --surface-dark-base: #021016;
  --surface-light-1: #e8f5f8;
  --surface-white: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-on-dark: #ffffff;
  --radius-base: 12px;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 10px 15px -3px rgba(0, 158, 175, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}

.agent-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.agents-grid .column-title {
  font-size: 1.35rem;
  font-weight: 700;
  border-bottom: 2px solid var(--brand-cyan-soft);
  padding-bottom: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #020617;
}

/* =========================================
   FLIP CARD STRUCTURE (FIXED)
   ========================================= */

/* 1. The Container */
.agents-grid .agent-card {
  perspective: 1000px;
  cursor: pointer;
  /* FIXED HEIGHT is crucial for flip cards to look uniform */
  height: 160px; 
  width: 100%;
}

/* 2. The Flipper (Inner Container) */
.agents-grid .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* The Flip Trigger Class */
.agents-grid .agent-card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

/* 3. Common Styles for Front and Back */
.agents-grid .card-front, 
.agents-grid .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-card);
  padding: 20px;
  box-sizing: border-box; /* Ensures padding doesn't break layout */
}

/* FRONT FACE STYLING */
.agents-grid .card-front {
  background: var(--surface-white);
  border: 1px solid rgba(144, 211, 225, 0.2);
  display: flex;
  align-items: center; /* Vertically center content */
  gap: 16px;
  z-index: 2;
  text-align: left;
}

/* Hover effect on Front */
.agents-grid .agent-card:hover .card-front {
  border-color: var(--brand-cyan);
  box-shadow: var(--shadow-hover);
}

/* BACK FACE STYLING */
.agents-grid .card-back {
  background: var(--color-bg-card);
  color: var(--text-on-dark);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid var(--brand-teal);
  text-align: left;
}

.agents-grid .card-back h4 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  font-weight: 700;
  color: #fff;
}

.agents-grid .card-back p {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
  color: rgba(255,255,255, 0.95);
}

/* Icon Box */
.agents-grid .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface-light-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevents icon from squishing */
  color: var(--brand-teal);
}

.agents-grid .icon-box svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

/* Text Container */
.agents-grid .agent-info {
  flex: 1; /* Takes up remaining width */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agents-grid .agent-info h4 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.agents-grid .agent-info span {
  display: block;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}

/* The "Click Here" Hint */
.agents-grid .click-hint {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-teal);
  margin-top: 20px;
  font-weight: 700;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.agents-grid .click-hint .arrow {
  display: inline-block;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.agents-grid .agent-card:hover .click-hint .arrow {
  transform: rotate(180deg);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .agents-grid {
    grid-template-columns: 1fr;
    gap: 24px; /* Reduced gap for mobile */
    margin-top: 48px;
  }
  .agents-grid .agent-card {
     /* Allow height to be slightly auto-adjusting on mobile if needed, 
        or keep fixed. Fixed is safer for flip animations. */
     height: 160px; 
  }
}





.fluentform .ff_upload_btn.ff-btn {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.8rem;
    margin-top: auto;
    border-radius: var(--rad-pill);
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    background: radial-gradient(
            circle at 10% 0%,
            rgba(var(--brand-soft-rgb), 0.55),
            transparent 55%
    ),
    radial-gradient(
            circle at 30% 20%,
            rgba(var(--surface-1-rgb), 1),
            rgba(var(--surface-0-rgb), 1)
    );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20),
    0 0 0 4px rgba(var(--brand-soft-rgb), 0.25);
    transition: background 160ms ease-out,
    color 160ms ease-out,
    box-shadow 160ms ease-out,
    transform 130ms ease-out;
}