@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&display=swap");

/* =========================================================
   FLT JAMES QC — ABOUT V1
   ========================================================= */

.flt-as-about,
.flt-as-about button,
.flt-as-about input,
.flt-as-about select,
.flt-as-about textarea {
    font-family:"Noto Sans",Arial,Helvetica,sans-serif;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.flt-as-about-hero {
    --flt-as-hero-image:
        url("/assets/james-qc/v1/About-Us-Hero.png");
}

.flt-as-about-hero::before {
    background-position:center center;
}

.flt-as-about-hero::after {
    background:
        linear-gradient(
            90deg,
            rgba(3,11,17,.95) 0%,
            rgba(3,11,17,.83) 30%,
            rgba(3,11,17,.46) 59%,
            rgba(3,11,17,.14) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3,11,17,.94) 0%,
            transparent 61%
        );
}

.flt-as-title {
    max-width:920px;
    font-weight:900;
}

.flt-as-heading {
    font-weight:850;
}

.flt-as-button {
    border-radius:6px;
}

/* ---------------------------------------------------------
   MISSION / IMAGE
   --------------------------------------------------------- */

.flt-as-image-frame img[src*="The-Mission.jpg"] {
    object-position:center center;
}

/* ---------------------------------------------------------
   ATHLETES
   --------------------------------------------------------- */

.flt-as-athlete {
    border-color:rgba(0,167,181,.48);
}

.flt-as-athlete img {
    object-position:center 22%;
}

.flt-as-athlete::after {
    background:
        linear-gradient(
            0deg,
            rgba(3,10,16,.94) 0%,
            rgba(3,10,16,.58) 18%,
            transparent 57%
        );
}

.flt-as-athlete__copy strong {
    font-weight:900;
}

.flt-as-athlete__copy small {
    letter-spacing:.08em;
}

/* ---------------------------------------------------------
   BERMUDA / DESTINATION
   --------------------------------------------------------- */

.flt-as-destination {
    background-position:center center !important;
}

.flt-as-destination::before {
    background:
        linear-gradient(
            90deg,
            rgba(3,11,17,.94),
            rgba(3,11,17,.31)
        ),
        linear-gradient(
            0deg,
            rgba(3,11,17,.92),
            transparent 62%
        );
}

/* ---------------------------------------------------------
   FOUNDING PARTNERS
   One logo. One role. No second injected logo treatment.
   --------------------------------------------------------- */

.flt-as-partner-grid {
    gap:14px;
}

.flt-as-partner {
    min-height:172px;
    border:1px solid rgba(0,167,181,.58);
    border-radius:10px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0,167,181,.17),
            transparent 64%
        ),
        linear-gradient(
            180deg,
            #0b2330 0%,
            #07151e 100%
        );
}

.flt-as-partner__logo,
.flt-as-partner__logo--light,
.flt-as-partner__logo--dark {
    min-height:104px;
    padding:20px 22px 10px;
    background:transparent !important;
}

.flt-as-partner__logo img {
    width:auto;
    max-width:82%;
    max-height:60px;
    object-fit:contain;
    filter:
        grayscale(1)
        brightness(0)
        invert(1);
}

/*
 * Logo artwork already contains the company identity.
 * Keep only the official role below it, matching homepage.
 */

.flt-as-partner__copy {
    padding:8px 18px 22px;
    text-align:center;
}

.flt-as-partner__copy strong {
    display:none;
}

.flt-as-partner__copy small {
    display:block;
    color:#d7b56d;
    font-size:11px;
    font-weight:850;
    letter-spacing:.09em;
}

/*
 * Belt-and-suspenders protection:
 * if an old script ever injects one of these wrappers despite
 * the data marker, never display the injected duplicate on the
 * source-controlled About V1 page.
 */

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
> .flt-official-partner-logo-wrap {
    display:none !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:980px) {

    .flt-as-about-hero::before {
        background-position:62% center;
    }

    .flt-as-partner-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px) {

    .flt-as-about-hero {
        min-height:690px;
    }

    .flt-as-about-hero::before {
        background-position:64% center;
    }

    .flt-as-about-hero::after {
        background:
            linear-gradient(
                0deg,
                rgba(3,11,17,.99) 0%,
                rgba(3,11,17,.74) 55%,
                rgba(3,11,17,.25) 100%
            );
    }

    .flt-as-title {
        font-size:clamp(39px,11.6vw,53px);
    }

    .flt-as-athletes,
    .flt-as-partner-grid {
        grid-template-columns:1fr;
    }

    .flt-as-athlete {
        min-height:440px;
    }

    .flt-as-partner {
        min-height:155px;
    }

    .flt-as-partner__logo {
        min-height:92px;
    }

    .flt-as-destination {
        min-height:560px;
        background-position:58% center !important;
    }
}

/* FLT JAMES ABOUT PARTNER INJECTOR GUARD START */

/*
 * athlete-sponsor-visual-v1.js checks for
 * .flt-partner-logo-well before injecting another logo.
 *
 * The source-controlled About logo well now intentionally
 * carries that class so the legacy injector skips the card.
 */

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
> .flt-as-partner__logo.flt-partner-logo-well {
    width:auto;
    min-height:104px;
    margin:0;
    padding:20px 22px 10px;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent !important;
}

/*
 * If an old cached JavaScript copy manages to inject a legacy
 * logo before the browser receives the new markup, suppress
 * that injected wrapper only.
 */

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
> .flt-partner-logo-well:not(.flt-as-partner__logo) {
    display:none !important;
}

/*
 * Protection against the other historical logo injector.
 */

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
> .flt-official-partner-logo-wrap {
    display:none !important;
}

/* FLT JAMES ABOUT PARTNER INJECTOR GUARD END */

/* =========================================================
   FLT ABOUT CANONICAL PARTNER PRESENTATION V1

   Partner asset paths come from the database registry.
   These rules only determine the approved presentation
   surface. Never filter/recolour partner artwork.
   ========================================================= */

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
.flt-canonical-partner-well {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:150px !important;
    margin:0 !important;
    padding:28px !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:6px 6px 0 0 !important;
    box-shadow:none !important;
}

.flt-as-about[data-james-qc="v1"]
.flt-canonical-partner-well--light {
    background:#ffffff !important;
}

.flt-as-about[data-james-qc="v1"]
.flt-canonical-partner-well--dark {
    background:#07141c !important;
}

.flt-as-about[data-james-qc="v1"]
.flt-canonical-partner-logo {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:86% !important;
    max-height:76px !important;
    margin:auto !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    filter:none !important;
    mix-blend-mode:normal !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:none !important;
    background:transparent !important;
    box-shadow:none !important;
}

/*
 * Cambridge is a wider wordmark.
 */
.flt-as-about[data-james-qc="v1"]
[data-flt-partner-logo="cambridge"]
.flt-canonical-partner-logo {
    max-width:78% !important;
    max-height:82px !important;
}

/*
 * BermudAir official artwork is intentionally designed
 * for a dark surface.
 */
.flt-as-about[data-james-qc="v1"]
[data-flt-partner-logo="bermudair"]
.flt-canonical-partner-logo {
    max-width:82% !important;
}

/*
 * BTA and Paradise retain their original brand colours.
 */
.flt-as-about[data-james-qc="v1"]
[data-flt-partner-logo="bta"]
.flt-canonical-partner-logo,
.flt-as-about[data-james-qc="v1"]
[data-flt-partner-logo="paradise"]
.flt-canonical-partner-logo {
    filter:none !important;
}

/*
 * Hard failsafe:
 * any legacy logo well injected into a James About
 * partner card is hidden unless it is the canonical
 * DB-backed renderer.
 */
.flt-as-about[data-james-qc="v1"]
.flt-as-partner
.flt-partner-logo-well:not(
    [data-flt-canonical-partner-logo="1"]
) {
    display:none !important;
}

/*
 * Also suppress the older official-partner injection
 * wrapper if a legacy script manages to create one.
 */
.flt-as-about[data-james-qc="v1"]
.flt-as-partner
.flt-official-partner-logo-wrap {
    display:none !important;
}

/*
 * No free-standing images belong in the official
 * partner card. Partner imagery must live inside the
 * canonical logo well.
 */
.flt-as-about[data-james-qc="v1"]
.flt-as-partner > img {
    display:none !important;
}

@media (max-width:640px) {

    .flt-as-about[data-james-qc="v1"]
    .flt-as-partner
    .flt-canonical-partner-well {
        min-height:128px !important;
        padding:22px !important;
    }

    .flt-as-about[data-james-qc="v1"]
    .flt-canonical-partner-logo {
        max-height:65px !important;
    }
}

/* /FLT ABOUT CANONICAL PARTNER PRESENTATION V1 */


/* =========================================================
   FLT ABOUT CANONICAL BTA SURFACE HOTFIX V1
   Official BTA artwork is dark/navy and therefore receives
   its approved light presentation surface.
   Other canonical partner cards remain untouched.
   ========================================================= */

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
[data-flt-canonical-partner-logo="1"]
[data-flt-partner-logo="bta"] {
    position:relative !important;
    isolation:isolate !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:calc(100% - 36px) !important;
    min-height:122px !important;

    margin:18px auto 0 !important;
    padding:24px 30px !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:0 !important;
    border-radius:6px !important;
    box-shadow:none !important;
}

.flt-as-about[data-james-qc="v1"]
.flt-as-partner
[data-flt-canonical-partner-logo="1"]
[data-flt-partner-logo="bta"]::before,
.flt-as-about[data-james-qc="v1"]
.flt-as-partner
[data-flt-canonical-partner-logo="1"]
[data-flt-partner-logo="bta"]::after {
    display:none !important;
    content:none !important;
    background:none !important;
}

.flt-as-about[data-james-qc="v1"]
[data-flt-partner-logo="bta"]
.flt-canonical-partner-logo {
    position:relative !important;
    z-index:2 !important;

    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:82% !important;
    max-height:72px !important;

    margin:auto !important;
    padding:0 !important;

    filter:none !important;
    opacity:1 !important;
    visibility:visible !important;
    mix-blend-mode:normal !important;
    transform:none !important;
}

@media (max-width:640px) {

    .flt-as-about[data-james-qc="v1"]
    .flt-as-partner
    [data-flt-canonical-partner-logo="1"]
    [data-flt-partner-logo="bta"] {
        width:calc(100% - 28px) !important;
        min-height:108px !important;
        margin-top:14px !important;
        padding:20px 24px !important;
    }

    .flt-as-about[data-james-qc="v1"]
    [data-flt-partner-logo="bta"]
    .flt-canonical-partner-logo {
        max-height:62px !important;
    }
}

/* /FLT ABOUT CANONICAL BTA SURFACE HOTFIX V1 */

/* ============================================================
   FLT ABOUT MOBILE ALIGNMENT V1 START
   Scoped only to /about/ presentation.
   ============================================================ */

@media (max-width: 900px) {

    .flt-as-about {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .flt-as-about .flt-as-shell {
        width: calc(100% - 36px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * HERO
     * Stop desktop geometry from shrinking/compressing on mobile.
     */
    .flt-as-about .flt-as-about-hero {
        width: 100% !important;
        min-height: 640px !important;
        height: auto !important;

        display: flex !important;
        align-items: center !important;

        overflow: hidden !important;

        background-size: cover !important;
        background-position: 68% center !important;
    }

    .flt-as-about .flt-as-about-hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;

        background:
            linear-gradient(
                90deg,
                rgba(16,24,32,.94) 0%,
                rgba(16,24,32,.82) 43%,
                rgba(16,24,32,.36) 72%,
                rgba(16,24,32,.10) 100%
            ) !important;
    }

    .flt-as-about .flt-as-hero__content {
        position: relative !important;
        z-index: 2 !important;

        width: calc(100% - 36px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 68px 0 58px !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        transform: none !important;

        text-align: left !important;
    }

    .flt-as-about .flt-as-hero__content > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .flt-as-about .flt-as-title {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size:
            clamp(
                40px,
                9.5vw,
                58px
            ) !important;

        line-height: .98 !important;
        letter-spacing: -.035em !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .flt-as-about .flt-as-title span {
        display: inline !important;
    }

    .flt-as-about .flt-as-lead {
        width: 100% !important;
        max-width: 38rem !important;

        margin-top: 22px !important;

        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .flt-as-about .flt-as-hero__actions {
        width: 100% !important;
        max-width: 390px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;

        margin-top: 28px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .flt-as-about .flt-as-hero__actions .flt-as-button {
        width: 100% !important;
        min-height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 13px 18px !important;

        text-align: center !important;
        white-space: normal !important;
    }

    /*
     * CONTENT GRIDS
     * Desktop side-by-side sections become true mobile stacks.
     */
    .flt-as-about .flt-as-grid-2 {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 30px !important;
    }

    .flt-as-about .flt-as-grid-3 {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 18px !important;
    }

    .flt-as-about .flt-as-copy,
    .flt-as-about .flt-as-image-frame,
    .flt-as-about .flt-as-card {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .flt-as-about .flt-as-image-frame {
        overflow: hidden !important;
    }

    .flt-as-about .flt-as-image-frame img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;

        object-fit: cover !important;
    }

    .flt-as-about .flt-as-heading {
        width: 100% !important;
        max-width: 100% !important;

        font-size:
            clamp(
                32px,
                8vw,
                46px
            ) !important;

        line-height: 1.02 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

@media (max-width: 520px) {

    .flt-as-about .flt-as-shell {
        width: calc(100% - 30px) !important;
    }

    .flt-as-about .flt-as-about-hero {
        min-height: 610px !important;
        background-position: 71% center !important;
    }

    .flt-as-about .flt-as-hero__content {
        width: calc(100% - 30px) !important;
        padding: 54px 0 48px !important;
    }

    .flt-as-about .flt-as-title {
        font-size:
            clamp(
                37px,
                10.5vw,
                49px
            ) !important;

        line-height: .97 !important;
    }

    .flt-as-about .flt-as-lead {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .flt-as-about .flt-as-hero__actions {
        max-width: 100% !important;
    }
}

/* FLT ABOUT MOBILE ALIGNMENT V1 END */
