/* ==========================================================================
   Baltic Augment - brand overrides
   Consult. Build. Sustain.

   Palette is derived from the Baltic Apprenticeships brand (deep navy +
   orange-to-red gradient). All brand colour lives in the :root block below,
   so retuning the whole site is a matter of changing those values.
   ========================================================================== */

:root {
    /* --- Baltic brand -------------------------------------------------
       Sampled directly from the supplied logo files rather than guessed.
       The identity is a magenta-to-coral gradient on a near-black navy. */
    --ba-navy: #071231;         /* primary dark surface */
    --ba-navy-deep: #010C2C;    /* the logo's own ground - footer, deepest bands */
    --ba-navy-soft: #142346;    /* lifted panels and cards */

    --ba-magenta: #DD26A0;      /* gradient start, from the B mark */
    --ba-pink: #F33B6E;         /* gradient midpoint */
    --ba-coral: #FE6E4E;        /* gradient end */

    /* Kept under the original names so every existing rule retunes with
       them: --ba-red is the primary accent, --ba-orange the secondary. */
    --ba-red: #F33B6E;
    --ba-orange: #FE6E4E;

    /* The accents above are fill colours. On white the pink manages only
       3.71:1 and the coral 2.78:1, which fails AA for the small uppercase
       labels used across the light panels, so those take this instead:
       the same hue darkened to 5.81:1 on white, bg-gray and sand alike. */
    --ba-red-ink: #C21F52;

    --ba-sand: #FFF1EE;

    /* --- Template variable remap -------------------------------------- */
    --color-primary: #F33B6E;
    --color-secondary: #FE6E4E;
    --color-style-two: #FE6E4E;
    --color-style-three: #F33B6E;
    --color-heading: #071231;
    --color-paragraph: #55566B;

    --dark: #071231;
    --dark-secondary: #142346;
    --dark-optional: #010C2C;

    --white-secondary: #B9BFD6;
    --white-common: #DEE2F0;

    --bg-gray: #F5F4FA;
    --bg--gray-secondary: #FAF9FD;

    --box-shadow-secondary: 0 10px 30px 0 rgba(243, 59, 110, 0.35);
    --bg-gradient: linear-gradient(90deg, var(--ba-magenta) 0%, var(--ba-pink) 52%, var(--ba-coral) 100%);
}

/* Dark surfaces become Baltic navy rather than near-black */
body.bg-dark,
.bg-dark {
    background-color: var(--ba-navy) !important;
}

.bg-dark-optional,
.footer-style-one.bg-dark {
    background-color: var(--ba-navy-deep) !important;
}

.bg-theme {
    background-color: var(--ba-navy) !important;
}

/* --------------------------------------------------------------------------
   Decorative blur shapes - retinted from the stock purple/teal to Baltic
   -------------------------------------------------------------------------- */
.blurry-shape::after,
.blurry-shape-top-full::before,
.blurry-shape-half-right-bottom::after,
.blurry-shape-half-left-bottom::after,
.blurry-shape-right-bottom::after,
.blurry-shape-left-bottom::after,
.blurry-shape-bottom::after {
    background: linear-gradient(90deg, var(--ba-red) 0%, var(--ba-orange) 100%) !important;
}

.blurry-shape::before,
.blurry-shape-bottom::before {
    background: linear-gradient(90deg, var(--ba-orange) 0%, var(--ba-navy-soft) 100%) !important;
}

/* --------------------------------------------------------------------------
   Baltic hero - replaces the stock banner photograph with the brand shape
   -------------------------------------------------------------------------- */
.ba-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--ba-navy);
}

.ba-hero::before {
    position: absolute;
    right: -12%;
    top: -30%;
    content: "";
    height: 150%;
    width: 62%;
    background: linear-gradient(150deg, var(--ba-orange) 0%, var(--ba-red) 55%, var(--ba-navy) 100%);
    transform: skewX(-14deg);
    opacity: 0.92;
    z-index: -1;
}

.ba-hero::after {
    position: absolute;
    left: -20%;
    bottom: -55%;
    content: "";
    height: 110%;
    width: 70%;
    background: radial-gradient(circle at 50% 50%, rgba(254, 110, 78, 0.35) 0%, rgba(7, 18, 49, 0) 62%);
    z-index: -1;
}

.ba-hero-eyebrow {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--white);
}

.ba-hero h1 {
    font-size: 62px;
    line-height: 1.12;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 25px;
}

.ba-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--ba-orange) 0%, #FFC48A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ba-hero p.lead {
    font-size: 18px;
    line-height: 1.75;
    max-width: 620px;
    color: var(--white-common);
}

.ba-page-head {
    padding-top: 210px;
    padding-bottom: 90px;
}

.ba-page-head h1 {
    font-size: 48px;
    line-height: 1.18;
}

@media only screen and (max-width: 991px) {
    .ba-hero h1 { font-size: 40px; }
    .ba-page-head { padding-top: 150px; padding-bottom: 60px; }
    .ba-page-head h1 { font-size: 34px; }
}

@media only screen and (max-width: 767px) {
    .ba-hero h1 { font-size: 32px; }
    .ba-hero::before { width: 100%; right: -40%; opacity: 0.55; }
}

/* --------------------------------------------------------------------------
   Stage cards - Consult / Build / Sustain
   -------------------------------------------------------------------------- */
.ba-stage {
    position: relative;
    height: 100%;
    padding: 45px 38px 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.35s ease-in-out;
}

.ba-stage:hover {
    transform: translateY(-6px);
    border-color: rgba(254, 110, 78, 0.55);
    background: rgba(255, 255, 255, 0.07);
}

.ba-stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    width: 52px;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: var(--white);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 26px;
}

.ba-stage h3 {
    color: var(--white);
    font-size: 26px;
    margin-bottom: 8px;
}

.ba-stage-strap {
    display: block;
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ba-orange);
    margin-bottom: 18px;
}

.ba-stage p { color: var(--white-common); }

.ba-stage ul {
    list-style: none;
    margin: 22px 0 28px;
    padding: 0;
}

.ba-stage ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: var(--white-common);
    font-size: 15px;
}

.ba-stage ul li::before {
    position: absolute;
    left: 0;
    top: 1px;
    content: "\f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--ba-orange);
    font-size: 14px;
}

/* Light-background variant */
.ba-stage.ba-light {
    background: var(--white);
    border-color: #E7E5F2;
    box-shadow: 0 2px 24px rgba(7, 18, 49, 0.06);
}

.ba-stage.ba-light h3 { color: var(--ba-navy); }
.ba-stage.ba-light p,
.ba-stage.ba-light ul li { color: var(--color-paragraph); }

/* --------------------------------------------------------------------------
   The delivery chain: Process > Systems > Data > Automation > AI > Sustain
   -------------------------------------------------------------------------- */
.ba-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    justify-content: center;
}

.ba-chain-step {
    position: relative;
    flex: 1 1 150px;
    min-width: 150px;
    padding: 26px 18px;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ba-chain-step span {
    display: block;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ba-orange);
    font-weight: 600;
    margin-bottom: 8px;
}

.ba-chain-step strong {
    display: block;
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
}

.ba-chain-step.ba-chain-end {
    background: var(--bg-gradient);
    border-color: transparent;
}

.ba-chain-step.ba-chain-end span { color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   Two-column judgement lists (AI: yes / no, in scope / out of scope)
   -------------------------------------------------------------------------- */
.ba-judgement {
    height: 100%;
    padding: 40px 36px;
    border-radius: 12px;
}

.ba-judgement.ba-yes {
    background: var(--ba-sand);
    border: 1px solid #F8D9C4;
}

.ba-judgement.ba-no {
    background: var(--bg-gray);
    border: 1px solid #E4E2EE;
}

.ba-judgement h4 {
    font-size: 20px;
    margin-bottom: 22px;
    color: var(--ba-navy);
}

.ba-judgement h4 i { font-size: 17px; margin-right: 10px; }
.ba-judgement.ba-yes h4 i { color: #1B9E62; }
.ba-judgement.ba-no h4 i { color: var(--ba-red); }

.ba-judgement ul { list-style: none; margin: 0; padding: 0; }

.ba-judgement ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    color: var(--color-paragraph);
    font-size: 15px;
    line-height: 1.65;
}

.ba-judgement ul li::before {
    position: absolute;
    left: 0;
    top: 2px;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
}

.ba-judgement.ba-yes ul li::before { content: "\f00c"; color: #1B9E62; }
.ba-judgement.ba-no ul li::before { content: "\f00d"; color: var(--ba-red); }

/* --------------------------------------------------------------------------
   Offer table (Consult products, Build products, risks and controls)
   -------------------------------------------------------------------------- */
.ba-table-wrap { overflow-x: auto; }

table.ba-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 24px rgba(7, 18, 49, 0.07);
}

table.ba-table thead th {
    background: var(--ba-navy);
    color: var(--white);
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 18px 24px;
    border: none;
}

table.ba-table tbody td {
    padding: 20px 24px;
    border-top: 1px solid #ECEAF4;
    color: var(--color-paragraph);
    font-size: 15px;
    line-height: 1.65;
    vertical-align: top;
}

table.ba-table tbody td:first-child {
    color: var(--ba-navy);
    font-weight: 600;
    width: 24%;
}

table.ba-table tbody tr:hover td { background: #FBFAFE; }

/* --------------------------------------------------------------------------
   Service catalogue groups
   -------------------------------------------------------------------------- */
.ba-cat {
    height: 100%;
    padding: 38px 34px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #ECEAF4;
    transition: all 0.3s ease-in-out;
}

.ba-cat:hover {
    box-shadow: 0 14px 40px rgba(7, 18, 49, 0.1);
    transform: translateY(-5px);
    border-color: rgba(254, 110, 78, 0.4);
}

.ba-cat-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ba-cat h4 {
    font-size: 20px;
    color: var(--ba-navy);
    margin-bottom: 18px;
    line-height: 1.35;
}

.ba-cat ul { list-style: none; margin: 0; padding: 0; }

.ba-cat ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 15px;
    color: var(--color-paragraph);
    line-height: 1.55;
}

.ba-cat ul li::before {
    position: absolute;
    left: 0;
    top: 9px;
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--ba-orange);
}

/* Dark variant of the catalogue card */
.bg-dark .ba-cat,
.ba-cat.ba-cat-dark {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.bg-dark .ba-cat h4,
.ba-cat.ba-cat-dark h4 { color: var(--white); }

.bg-dark .ba-cat ul li,
.ba-cat.ba-cat-dark ul li { color: var(--white-common); }

/* --------------------------------------------------------------------------
   Callout / principle band
   -------------------------------------------------------------------------- */
.ba-callout {
    padding: 50px 55px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: var(--white);
}

.ba-callout h3 {
    color: var(--white);
    font-size: 30px;
    line-height: 1.35;
    margin-bottom: 16px;
}

.ba-callout p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0;
    font-size: 17px;
}

.ba-quote {
    border-left: 4px solid var(--ba-orange);
    padding: 6px 0 6px 28px;
    font-size: 19px;
    line-height: 1.7;
    color: var(--ba-navy);
    font-weight: 500;
}

.bg-dark .ba-quote,
.text-light .ba-quote { color: var(--white); }

/* Numbered fact strip */
.ba-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.ba-fact {
    flex: 1 1 200px;
    padding: 28px 30px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ba-fact strong {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: var(--ba-orange);
    line-height: 1.15;
    margin-bottom: 8px;
}

.ba-fact span { color: var(--white-common); font-size: 15px; line-height: 1.6; display: block; }

@media only screen and (max-width: 767px) {
    .ba-callout { padding: 35px 28px; }
    .ba-callout h3 { font-size: 24px; }
    .ba-judgement { padding: 30px 24px; }
    .ba-stage { padding: 34px 26px; }
}

/* Footer / nav polish for the brand */
.footer-style-one .footer-shape { opacity: 0.12; }

.ba-note {
    font-size: 14px;
    color: var(--white-secondary);
    font-style: italic;
}

.ba-section-intro {
    max-width: 760px;
    color: var(--color-paragraph);
    font-size: 17px;
    line-height: 1.75;
}

.bg-dark .ba-section-intro,
.text-light .ba-section-intro { color: var(--white-common); }

/* --------------------------------------------------------------------------
   Temporary wordmark - swap for a real Baltic Augment logo asset when ready.
   Drop the file in as assets/img/logo-light.png and replace .ba-wordmark
   spans with an <img> tag to revert to the template behaviour.
   -------------------------------------------------------------------------- */
.ba-wordmark {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--white);
    white-space: nowrap;
}

.ba-wordmark em {
    font-style: normal;
    font-weight: 700;
    background: linear-gradient(90deg, var(--ba-orange) 0%, var(--ba-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-brand .ba-wordmark { padding: 6px 0; }

.footer-bottom-one .logo .ba-wordmark,
.side .widget .logo .ba-wordmark { font-size: 24px; }

/* The wordmark inside .navbar-collapse belongs to the mobile slide-out
   panel only. validnavs adds .collapse-mobile when that panel is in play,
   so scope it there - otherwise it renders a second logo across the top
   of every desktop page. */
.navbar-collapse > .ba-wordmark { display: none; }

.navbar-collapse.collapse-mobile > .ba-wordmark {
    display: block;
    margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    .ba-wordmark { font-size: 22px; }
}

/* Banner chain strip sits inside the template's .brand-items wrapper */
.banner-style-one-area .brand-items { display: block; padding: 10px 0 40px; }
.banner-style-one-area .brand-items .container { width: 100%; }

/* Inner page banners are shorter than the home hero */
.banner-style-one-area .banner-one-content h4 {
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Community card CTA in the services grid */
.community-card .info .btn-simple { color: var(--white); }
.community-card .info .btn-simple:hover { color: var(--ba-orange); }

/* --------------------------------------------------------------------------
   Homepage conversion furniture
   Hero microcopy, trust bar, pain list, free-consult offer card and the
   closing call to action. Added so the home page can sell rather than
   simply explain.
   -------------------------------------------------------------------------- */

/* Second button sat beside a primary CTA */
.ba-btn-gap { margin-left: 15px; }

@media only screen and (max-width: 767px) {
    .ba-btn-gap { margin-left: 0; margin-top: 14px; }
}

/* Reassurance line under the hero buttons */
.ba-microcopy {
    margin-top: 22px;
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.75);
}

/* Trust bar across the foot of the hero */
.ba-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.ba-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 240px;
    min-width: 220px;
    padding: 18px 22px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.ba-trust-item i {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--ba-orange);
}

.ba-trust-item span {
    color: var(--white);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
}

/* The "sound familiar" recognition list */
.ba-pain-list {
    list-style: none;
    margin: 26px 0 26px;
    padding: 0;
}

.ba-pain-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: var(--color-paragraph);
    font-size: 16px;
    line-height: 1.6;
}

/* The page runs the template's dark layout, so the panel is translucent
   navy rather than grey - the list has to follow it. */
.bg-dark .ba-pain-list li,
.text-light .ba-pain-list li { color: var(--white-common); }

.ba-pain-list li::before {
    position: absolute;
    left: 0;
    top: 2px;
    content: "\f0a9";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--ba-red);
}

/* The blurred accent inside the about panel ships teal - retint it */
.about-style-one-info::after {
    background: var(--ba-orange) !important;
    opacity: 0.55;
}

/* Free-consult offer card in the about column */
.ba-offer-card {
    padding: 34px 32px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #ECEAF4;
    box-shadow: 0 2px 24px rgba(7, 18, 49, 0.07);
}

/* Dark-layout variant, to match .ba-stage and .ba-cat */
.bg-dark .ba-offer-card,
.text-light .ba-offer-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.bg-dark .ba-offer-card h4,
.text-light .ba-offer-card h4 { color: var(--white); }

.bg-dark .ba-offer-card ul li,
.text-light .ba-offer-card ul li { color: var(--white-common); }

.ba-offer-card h4 {
    font-size: 20px;
    color: var(--ba-navy);
    margin-bottom: 18px;
}

.ba-offer-card ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.ba-offer-card ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-paragraph);
}

.ba-offer-card ul li::before {
    position: absolute;
    left: 0;
    top: 1px;
    content: "\f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--ba-orange);
}

/* Reassurance pill inside a process step */
.process-style-one-item .ba-cat-tag {
    margin-bottom: 14px;
}

/* Delivery chain sat below the three stages. The frosted stage panel is
   only rounded at the top because it normally bleeds into the section
   edge; once something follows it, it needs closing off. */
.ba-process-chained .process-style-one-items { border-radius: 30px; }

.ba-chain-wrap { margin-top: 60px; }
.ba-chain-note { margin-top: 20px; margin-bottom: 0; }

/* Centred pull quote, no left rule */
.ba-quote.ba-quote-center {
    border-left: none;
    border-top: 4px solid var(--ba-orange);
    padding: 28px 20px 0;
    text-align: center;
}

/* A ba-stage used purely as a list panel */
.ba-list-flush { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Closing call to action */
.ba-cta-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.ba-cta-points li {
    position: relative;
    padding-left: 24px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    font-weight: 500;
}

.ba-cta-points li::before {
    position: absolute;
    left: 0;
    top: 1px;
    content: "\f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--white);
}

.ba-cta-alt {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.ba-cta-alt a {
    color: var(--white);
    text-decoration: underline;
}

.ba-cta-alt a:hover { color: var(--ba-navy); }

@media only screen and (max-width: 991px) {
    .ba-cta-area .ba-callout .text-end { text-align: left !important; }
    .ba-chain-wrap { margin-top: 45px; }
}

/* The panel's 120px padding exists to clear the giant .fixed-text watermark.
   Where that watermark is dropped, the block can breathe at a sane size. */
.about-style-one-info.ba-no-watermark { padding: 80px; }

@media only screen and (max-width: 1199px) {
    .about-style-one-info.ba-no-watermark { padding: 60px; }
}

@media only screen and (max-width: 767px) {
    .about-style-one-info.ba-no-watermark { padding: 40px 30px; }
    .ba-trust-item { min-width: 100%; }
    .ba-offer-card { padding: 30px 26px; }
}

/* --------------------------------------------------------------------------
   Automation / AI positioning
   The offer is both disciplines, and automation is the more common answer,
   so the two are shown side by side as equals rather than as a yes / no.
   -------------------------------------------------------------------------- */

/* Discipline label on a service card */
.ba-svc-tag {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ba-orange);
}

/* Centred lead paragraph under a section heading */
.ba-section-intro-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* The AI column of the automation / AI comparison. Deliberately a peer of
   .ba-yes rather than the old .ba-no, since we sell both. */
.ba-judgement { position: relative; }

.ba-judgement.ba-ai {
    background: var(--bg-gray);
    border: 1px solid #E4E2EE;
}

.ba-judgement.ba-ai h4 { color: var(--ba-navy); }
.ba-judgement.ba-ai h4 i { color: var(--ba-red); }
.ba-judgement.ba-ai ul li::before { content: "\f00c"; color: var(--ba-red); }

/* "Usually the answer" / "Worth it when it fits" ribbon */
.ba-judgement-flag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--white);
}

.ba-judgement.ba-yes .ba-judgement-flag { background: #1B9E62; }
.ba-judgement.ba-ai .ba-judgement-flag { background: var(--ba-navy-soft); }

.ba-judgement h4 { margin-bottom: 20px; }

/* Closing line inside each column */
.ba-judgement-note {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(7, 18, 49, 0.12);
    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    color: var(--color-paragraph);
}

/* The page runs the template's dark layout, so headings inside these light
   panels have to be pinned back to navy. */
.bg-dark .ba-judgement h4,
.bg-dark .ba-judgement.ba-ai h4 { color: var(--ba-navy); }
.bg-dark .ba-judgement-note { color: var(--color-paragraph); }


/* ==========================================================================
   PART TWO - components added for the Content Source Pack rebuild
   Foundation cards, proof cards, the machine-stop ladder, team cards,
   numbered lists and the Groundwork panel. Everything here follows the
   same navy / orange system as PART ONE above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Small uppercase label used to introduce a list or a card row
   -------------------------------------------------------------------------- */
.ba-lead-label {
    margin: 30px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ba-red);
}

.ba-lead-label-center {
    text-align: center;
    margin: 0 0 30px;
}

.bg-dark .ba-lead-label,
.text-light .ba-lead-label { color: var(--ba-orange); }

/* Customer language rendered as quotations rather than bullets */
.ba-pain-quotes li {
    font-style: italic;
    color: var(--ba-navy);
}

.ba-pain-quotes li::before {
    content: "\f10d";
    font-size: 11px;
    top: 4px;
    color: var(--ba-orange);
}

/* --------------------------------------------------------------------------
   Foundation cards - problem, process, information, ownership, measurement
   Sits in a Bootstrap .row of auto-width .col-xl columns, so five fit on a
   desktop line and they fall back to halves and then singles.
   -------------------------------------------------------------------------- */
.ba-foundation-row { margin-top: 60px; }

.ba-foundation {
    height: 100%;
    padding: 30px 26px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #ECEAF4;
    box-shadow: 0 2px 24px rgba(7, 18, 49, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
}

.ba-foundation:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 34px rgba(7, 18, 49, 0.1);
}

.ba-foundation-num {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--ba-orange);
}

.ba-foundation h5 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ba-navy);
}

.ba-foundation p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-paragraph);
}

.ba-foundation-tall { padding: 34px 30px; }

/* Dark-surface variant */
.bg-dark .ba-foundation,
.text-light .ba-foundation,
.ba-foundation.ba-foundation-dark {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.bg-dark .ba-foundation h5,
.text-light .ba-foundation h5,
.ba-foundation.ba-foundation-dark h5 { color: var(--white); }

.bg-dark .ba-foundation p,
.text-light .ba-foundation p,
.ba-foundation.ba-foundation-dark p { color: var(--white-common); }

/* --------------------------------------------------------------------------
   Proof cards - baseline, intervention, result and the caveat that keeps
   the claim honest. The caveat is deliberately part of the card, not a
   footnote somewhere nobody reads.
   -------------------------------------------------------------------------- */
.ba-proof {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #ECEAF4;
    box-shadow: 0 2px 24px rgba(7, 18, 49, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-proof:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(7, 18, 49, 0.11);
}

.ba-proof h4 {
    margin-bottom: 16px;
    font-size: 21px;
    line-height: 1.35;
    color: var(--ba-navy);
}

.ba-proof > p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-paragraph);
}

.ba-proof-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    list-style: none;
    margin: 22px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #ECEAF4;
}

.ba-proof-metrics li {
    flex: 1 1 130px;
    min-width: 120px;
}

.ba-proof-metrics li strong {
    display: block;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ba-red);
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ba-proof-metrics li span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-paragraph);
}

.ba-proof-caveat {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px dashed #DDD9EC;
    font-size: 13.5px;
    line-height: 1.65;
    font-style: italic;
    color: #7A7A90;
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   The inform / assist / recommend / decide / act ladder
   Five steps that read left to right on desktop and stack on mobile.
   -------------------------------------------------------------------------- */
.ba-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
}

.ba-ladder-step {
    position: relative;
    flex: 1 1 180px;
    min-width: 170px;
    padding: 28px 24px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #ECEAF4;
    box-shadow: 0 2px 20px rgba(7, 18, 49, 0.06);
}

/* Progressive tint, so the scale reads as a scale */
.ba-ladder-step:nth-child(1) { background: #FFFFFF; }
.ba-ladder-step:nth-child(2) { background: #FFFAF6; }
.ba-ladder-step:nth-child(3) { background: #FFF3EC; }
.ba-ladder-step:nth-child(4) { background: #FFE9DC; }

.ba-ladder-step.ba-ladder-end {
    background: var(--bg-gradient);
    border-color: transparent;
}

.ba-ladder-num {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--ba-orange);
}

.ba-ladder-step h5 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ba-navy);
}

.ba-ladder-step p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-paragraph);
}

.ba-ladder-step.ba-ladder-end .ba-ladder-num,
.ba-ladder-step.ba-ladder-end h5,
.ba-ladder-step.ba-ladder-end p { color: var(--white); }

/* Dark-surface variant of the ladder */
.ba-ladder-dark .ba-ladder-step {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.ba-ladder-dark .ba-ladder-step:nth-child(2) { background: rgba(255, 255, 255, 0.07); }
.ba-ladder-dark .ba-ladder-step:nth-child(3) { background: rgba(255, 255, 255, 0.09); }
.ba-ladder-dark .ba-ladder-step:nth-child(4) { background: rgba(255, 255, 255, 0.12); }

.ba-ladder-dark .ba-ladder-step h5 { color: var(--white); }
.ba-ladder-dark .ba-ladder-step p { color: var(--white-common); }

.ba-ladder-dark .ba-ladder-step.ba-ladder-end {
    background: var(--bg-gradient);
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Groundwork panel - the front door, given a full-width feature block
   -------------------------------------------------------------------------- */
.ba-groundwork {
    position: relative;
    overflow: hidden;
    padding: 60px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ba-sand) 0%, #FFE4D2 100%);
    border: 1px solid #FBD8C0;
}

.ba-groundwork::after {
    position: absolute;
    right: -80px;
    top: -80px;
    content: "";
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 110, 78, 0.28) 0%, rgba(254, 110, 78, 0) 68%);
    pointer-events: none;
}

.ba-groundwork > .row { position: relative; z-index: 1; }

.ba-groundwork h2 {
    margin-bottom: 20px;
    font-size: 36px;
    line-height: 1.25;
    color: var(--ba-navy);
}

.ba-groundwork p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-paragraph);
}

.ba-groundwork .ba-cat-tag { margin-bottom: 18px; }

/* Flush list on a light panel */
.ba-list-flush-dark {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ba-list-flush-dark li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ba-navy);
    font-weight: 500;
}

.ba-list-flush-dark li:last-child { margin-bottom: 0; }

.ba-list-flush-dark li::before {
    position: absolute;
    left: 0;
    top: 2px;
    content: "\f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    color: var(--ba-red);
}

/* --------------------------------------------------------------------------
   Team cards - initials rather than stock photography, until real
   photographs of the team are available.
   -------------------------------------------------------------------------- */
.ba-person {
    height: 100%;
    padding: 38px 34px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #ECEAF4;
    box-shadow: 0 2px 24px rgba(7, 18, 49, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-person:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(7, 18, 49, 0.11);
}

.ba-person-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ba-person h4 {
    margin-bottom: 4px;
    font-size: 21px;
    color: var(--ba-navy);
}

.ba-person-role {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ba-red);
}

.ba-person p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-paragraph);
}

/* --------------------------------------------------------------------------
   Catalogue card variants
   -------------------------------------------------------------------------- */
.ba-cat-tall,
.ba-cat-wide { height: 100%; }

.ba-cat-lead {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-paragraph);
}

.ba-cat-lead:last-child { margin-bottom: 0; }

.bg-dark .ba-cat-lead,
.text-light .ba-cat-lead { color: var(--white-common); }

.ba-cat ul li strong { color: var(--ba-navy); font-weight: 600; }

.bg-dark .ba-cat ul li strong,
.text-light .ba-cat ul li strong { color: var(--white); }

/* Two-column list inside a wide card or panel */
.ba-list-two-col {
    column-count: 2;
    column-gap: 40px;
}

.ba-list-two-col li { break-inside: avoid; }

/* --------------------------------------------------------------------------
   Numbered question list (the ten questions a Consult must answer)
   -------------------------------------------------------------------------- */
.ba-numbered {
    list-style: none;
    counter-reset: ba-num var(--ba-start, 0);
    margin: 0;
    padding: 0;
}

.ba-numbered li {
    position: relative;
    counter-increment: ba-num;
    padding: 18px 0 18px 58px;
    border-bottom: 1px solid #E8E5F2;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ba-navy);
    font-weight: 500;
}

.ba-numbered li:last-child { border-bottom: none; }

.ba-numbered li::before {
    position: absolute;
    left: 0;
    top: 16px;
    content: counter(ba-num, decimal-leading-zero);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ba-orange);
}

.ba-numbered[start="6"] { --ba-start: 5; }

.bg-dark .ba-numbered li,
.text-light .ba-numbered li {
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Light-surface delivery chain (the dark one is defined in PART ONE)
   -------------------------------------------------------------------------- */
.ba-chain-light .ba-chain-step {
    background: var(--white);
    border-color: #ECEAF4;
    box-shadow: 0 2px 20px rgba(7, 18, 49, 0.06);
}

.ba-chain-light .ba-chain-step strong { color: var(--ba-navy); }

.ba-chain-light .ba-chain-step.ba-chain-end {
    background: var(--bg-gradient);
    border-color: transparent;
}

.ba-chain-light .ba-chain-step.ba-chain-end strong { color: var(--white); }

/* A four-step process strip needs the items to share the row evenly */
.ba-process-four .process-style-one-item { flex: 1 1 220px; }

/* --------------------------------------------------------------------------
   FAQ page group headings
   -------------------------------------------------------------------------- */
.ba-faq-group-title {
    margin-bottom: 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ba-red);
}

/* --------------------------------------------------------------------------
   Contact form field labels and reassurance
   -------------------------------------------------------------------------- */
.ba-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--ba-navy);
}

.ba-field-label span { color: var(--ba-red); }

.contact-form-card select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170F4A' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px;
    padding-right: 46px;
}

.ba-form-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-paragraph);
}

.ba-contact-points {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ba-contact-points .ba-list-flush li { font-size: 15px; }

/* --------------------------------------------------------------------------
   Proof section left column
   -------------------------------------------------------------------------- */
.ba-proof-area .fixed-content .ba-note { margin-bottom: 0; }


/* ==========================================================================
   PART THREE - responsive layer
   The template ships breakpoints of its own, but the ba- components above
   are new, and several of the template's own blocks were never sized for a
   phone. Everything below is ordered largest to smallest so the cascade
   reads the same way the screen shrinks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fluid typography. clamp() keeps headings readable at 320px without
   needing a size rule at every breakpoint.
   -------------------------------------------------------------------------- */
.banner-style-one-area .banner-one-content h2 {
    font-size: clamp(30px, 5.2vw, 62px);
    line-height: 1.14;
}

.banner-style-one-area .banner-one-content h4 {
    font-size: clamp(13px, 1.6vw, 16px);
}

.banner-style-one-area .banner-one-content p {
    font-size: clamp(15px, 1.5vw, 18px);
}

.site-heading .title,
.about-style-one-info .title {
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.22;
}

.ba-callout h3 { font-size: clamp(22px, 2.6vw, 34px); }
.ba-groundwork h2 { font-size: clamp(24px, 3vw, 36px); }
.ba-quote { font-size: clamp(16px, 1.7vw, 21px); }

/* Long words and URLs must never push the page sideways */
body { overflow-x: hidden; }

h1, h2, h3, h4, h5, p, li, td, th { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Large desktop down to laptop
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1399px) {
    .ba-groundwork { padding: 50px; }
    .ba-proof { padding: 32px 28px; }
}

@media only screen and (max-width: 1199px) {
    .ba-groundwork { padding: 44px; }
    .ba-foundation { padding: 26px 22px; }
    .ba-foundation h5 { font-size: 17px; }
    .ba-ladder-step { padding: 24px 20px; }
    .ba-proof-metrics li strong { font-size: 23px; }
    .ba-person { padding: 32px 28px; }
    .ba-numbered li { font-size: 16px; padding-left: 52px; }

    /* Five auto columns are too tight below 1200px, so let them wrap */
    .ba-foundation-row > [class*="col-xl"] { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .ba-foundation-row { margin-top: 45px; }
    .ba-groundwork { padding: 40px 34px; }
    .ba-groundwork .button { margin-top: 24px !important; }

    .ba-list-two-col { column-count: 1; }

    /* The proof column carries a left inset on desktop it does not need here */
    .ba-proof-area .pl-50 { padding-left: 15px !important; }
    .ba-proof-area .fixed-content { margin-bottom: 40px; }

    /* Ladder reads better as a 2 x 3 grid than as five thin columns */
    .ba-ladder-step { flex: 1 1 calc(50% - 7px); min-width: calc(50% - 7px); }

    .ba-chain-step { flex: 1 1 calc(33.333% - 10px); min-width: calc(33.333% - 10px); }

    .ba-trust-item { flex: 1 1 calc(50% - 7px); min-width: calc(50% - 7px); }

    .ba-person-avatar { width: 56px; height: 56px; font-size: 18px; }

    /* Inner-page section headings sit centred on their own line */
    .site-heading .ba-section-intro { margin-top: 14px; }
}

/* --------------------------------------------------------------------------
   Large phone / small tablet
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .ba-groundwork {
        padding: 34px 26px;
        border-radius: 16px;
    }

    .ba-groundwork::after { display: none; }
    .ba-groundwork h2 { margin-bottom: 16px; }

    .ba-proof { padding: 28px 24px; }
    .ba-proof h4 { font-size: 19px; }

    .ba-proof-metrics {
        gap: 16px 20px;
        margin-top: 18px;
        padding-top: 18px;
    }

    .ba-proof-metrics li {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

    .ba-proof-metrics li strong { font-size: 21px; }

    /* One idea per line on a phone */
    .ba-ladder-step,
    .ba-chain-step,
    .ba-trust-item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .ba-ladder { gap: 10px; }
    .ba-chain { gap: 10px; }
    .ba-chain-step { padding: 18px 16px; text-align: left; }
    .ba-chain-step span { margin-bottom: 4px; }

    .ba-ladder-step { padding: 20px 18px; }

    .ba-foundation {
        padding: 24px 22px;
        margin-bottom: 20px;
    }

    .ba-foundation-row { margin-top: 35px; }
    .ba-lead-label-center { margin-bottom: 22px; }

    .ba-person { padding: 28px 24px; }
    .ba-person h4 { font-size: 19px; }

    .ba-numbered li {
        padding: 15px 0 15px 46px;
        font-size: 15.5px;
    }

    .ba-numbered li::before { top: 14px; font-size: 13px; }

    .ba-cta-points { gap: 8px 0; }
    .ba-cta-points li { flex: 1 1 100%; }

    .ba-cta-area .ba-callout .text-end,
    .ba-cta-area .ba-callout .text-end .ba-cta-alt { text-align: left !important; }

    /* Tables: let the wrapper scroll rather than squeezing the columns */
    table.ba-table { min-width: 560px; }
    table.ba-table thead th { padding: 14px 16px; font-size: 12px; }
    table.ba-table tbody td { padding: 15px 16px; font-size: 14.5px; }
    table.ba-table tbody td:first-child { width: auto; white-space: nowrap; }

    .ba-table-wrap {
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    /* A visible hint that the table scrolls sideways */
    .ba-table-wrap::after {
        display: block;
        content: "Scroll for the full table \2192";
        margin-top: 10px;
        font-size: 12px;
        letter-spacing: 0.4px;
        color: var(--color-paragraph);
    }

    .text-light .ba-table-wrap::after,
    .bg-dark .ba-table-wrap::after { color: var(--white-secondary); }

    .ba-quote.ba-quote-center { padding: 22px 0 0; }

    .ba-faq-group-title { margin-bottom: 20px; }

    /* Form fields need room to breathe once they are full width */
    .contact-form-card .form-group { margin-bottom: 18px; }
    .ba-contact-points { margin-top: 26px; padding-top: 22px; }

    /* Section rhythm: the template's default padding is generous for a phone */
    .default-padding { padding-top: 70px; padding-bottom: 70px; }
    .default-padding-top { padding-top: 70px; }
    .default-padding-bottom { padding-bottom: 70px; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 575px) {
    .ba-groundwork { padding: 28px 20px; }

    .ba-proof { padding: 24px 20px; }
    .ba-proof-metrics li { flex: 1 1 100%; min-width: 100%; }
    .ba-proof-metrics li strong { font-size: 24px; }
    .ba-proof-caveat { font-size: 13px; }

    .ba-foundation,
    .ba-person,
    .ba-offer-card { padding: 22px 20px; }

    .ba-offer-card .btn { width: 100%; text-align: center; }

    .ba-trust-item { padding: 14px 16px; }
    .ba-trust-item span { font-size: 14px; }

    .ba-microcopy { font-size: 13.5px; }

    /* Stacked buttons should be full width rather than half-orphaned */
    .banner-one-content .button .btn,
    .ba-groundwork .button .btn,
    .ba-callout .btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ba-btn-gap { margin-left: 0; margin-top: 12px; }

    .ba-list-flush-dark li,
    .ba-pain-list li { font-size: 15px; }

    table.ba-table { min-width: 460px; }

    .default-padding { padding-top: 55px; padding-bottom: 55px; }
    .default-padding-top { padding-top: 55px; }
}

/* --------------------------------------------------------------------------
   Small phone - 360px and below still has to work
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 400px) {
    .ba-groundwork { padding: 24px 18px; }
    .ba-proof,
    .ba-foundation,
    .ba-person { padding: 20px 18px; }

    .ba-person-avatar { width: 50px; height: 50px; font-size: 17px; }

    .ba-numbered li { padding-left: 40px; font-size: 15px; }

    .ba-quote { padding-left: 18px; }
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ba-foundation,
    .ba-proof,
    .ba-person,
    .ba-cat,
    .ba-stage {
        transition: none;
    }

    .ba-foundation:hover,
    .ba-proof:hover,
    .ba-person:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Gradient feature card
   The template drops a decorative render at the bottom-left of this card
   with no reserved space for it, so any real paragraph collides with the
   artwork. Give the copy a clear band above it instead.
   -------------------------------------------------------------------------- */
.card-style-one-item {
    display: block;
    padding: 46px 42px 170px;
}

.card-style-one-item img {
    left: 38px;
    height: auto;
    max-height: 130px;
    width: auto;
}

.card-style-one-item h3 {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 18px;
}

.card-style-one-item .info p {
    font-size: 15.5px;
    line-height: 1.7;
}

@media only screen and (max-width: 1199px) {
    .card-style-one-item { padding: 40px 34px 150px; }
    .card-style-one-item img { max-height: 110px; left: 30px; }
}

@media only screen and (max-width: 767px) {
    .card-style-one-item { padding: 34px 28px 130px; }
    .card-style-one-item img { max-height: 92px; left: 24px; }
    .card-style-one-item .info .text-end { text-align: right !important; }
}

/* Three lines of headline reads better here than four, and the hero is
   loud enough already. */
.banner-style-one-area .banner-one-content h2 {
    font-size: clamp(30px, 4.2vw, 58px);
}

/* --------------------------------------------------------------------------
   Process section artwork
   The stock render is full-bleed and full-height on the left, which fights
   the chain and swallows the note underneath it. Hold it back so it reads
   as a background texture rather than a competing element.
   -------------------------------------------------------------------------- */
.ba-process-chained .shape {
    opacity: 0.32;
    height: 82%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.ba-process-chained .shape img { height: 100%; }

.ba-process-chained .ba-chain,
.ba-process-chained .ba-chain-note {
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 991px) {
    .ba-process-chained .shape { opacity: 0.18; }
}

@media only screen and (max-width: 767px) {
    .ba-process-chained .shape { display: none; }
}

/* --------------------------------------------------------------------------
   Service tile centre mark
   Replaces the template's cartoon robot. The source material is explicit
   that humanoid AI imagery is off the table, and a plain mark sits better
   inside the rotating strapline anyway.
   -------------------------------------------------------------------------- */
.ba-curve-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.ba-curve-mark i {
    font-size: 32px;
    color: var(--white);
}

@media only screen and (max-width: 767px) {
    .ba-curve-mark { width: 68px; height: 68px; }
    .ba-curve-mark i { font-size: 26px; }
}

/* The stock icon set mixes white and purple line art, which reads as an
   accident on a single row of cards. Normalise them to white. */
.service-style-one-item .icon img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Contact page
   The template's contact block was designed for a light page. On the dark
   layout the phone and email links inherit a colour that vanishes into the
   background, so pin them explicitly.
   -------------------------------------------------------------------------- */
.contact-style-one-info li a {
    color: var(--white);
    font-weight: 500;
}

.contact-style-one-info li a:hover { color: var(--ba-orange); }

.contact-style-one-info li h4 { color: var(--white); }
.contact-style-one-info li p { color: var(--white-common); }

/* The heading sits in a narrow column, so the stock size strands single
   words on their own line. */
.contact-style-one-info .title {
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.2;
}

/* .ba-list-flush only neutralises margins - it inherits its bullets from
   .ba-stage. Used on its own here, so it needs the markers itself. */
.ba-contact-points .ba-list-flush {
    list-style: none;
    padding: 0;
}

.ba-contact-points .ba-list-flush li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--white-common);
}

.ba-contact-points .ba-list-flush li:last-child { margin-bottom: 0; }

.ba-contact-points .ba-list-flush li::before {
    position: absolute;
    left: 0;
    top: 2px;
    content: "\f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--ba-orange);
}

/* ==========================================================================
   PART FOUR - image placeholders
   The template shipped with stock 3D renders, including a cartoon robot and
   a humanoid AI face. The source pack rules both out ("robots, glowing
   brains and humanoid AI imagery", "generic technology stock imagery"), so
   the slots are held open with a labelled placeholder naming the asset that
   belongs there and the size to supply it at. Drop an <img> in and delete
   the placeholder div.
   ========================================================================== */
.ba-ph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: var(--ba-ph-ratio, 4 / 3);
    padding: 26px 22px;
    text-align: center;
    border-radius: 14px;
    border: 2px dashed rgba(7, 18, 49, 0.22);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(254, 110, 78, 0.05) 0px,
            rgba(254, 110, 78, 0.05) 10px,
            transparent 10px,
            transparent 20px
        ),
        var(--bg-gray);
}

.ba-ph-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 18px;
}

.ba-ph-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ba-navy);
    max-width: 30ch;
}

.ba-ph-meta {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ba-red);
}

.ba-ph-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    font-style: italic;
    color: #7A7A90;
    max-width: 36ch;
}

/* Dark-surface variant */
.bg-dark .ba-ph,
.text-light .ba-ph,
.ba-ph.ba-ph-dark {
    border-color: rgba(255, 255, 255, 0.28);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045) 0px,
            rgba(255, 255, 255, 0.045) 10px,
            transparent 10px,
            transparent 20px
        ),
        rgba(255, 255, 255, 0.04);
}

.bg-dark .ba-ph .ba-ph-label,
.text-light .ba-ph .ba-ph-label,
.ba-ph.ba-ph-dark .ba-ph-label { color: var(--white); }

.bg-dark .ba-ph .ba-ph-meta,
.text-light .ba-ph .ba-ph-meta,
.ba-ph.ba-ph-dark .ba-ph-meta { color: var(--ba-orange); }

.bg-dark .ba-ph .ba-ph-note,
.text-light .ba-ph .ba-ph-note,
.ba-ph.ba-ph-dark .ba-ph-note { color: var(--white-secondary); }

/* On the gradient feature card the dashed box needs to read against orange */
.card-style-one-item .ba-ph {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.14);
}

.card-style-one-item .ba-ph .ba-ph-label { color: var(--white); }
.card-style-one-item .ba-ph .ba-ph-meta { color: rgba(255, 255, 255, 0.85); }

.card-style-one-item .ba-ph .ba-ph-icon {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ba-red);
}

@media only screen and (max-width: 767px) {
    .ba-ph { padding: 20px 16px; gap: 8px; }
    .ba-ph-icon { width: 38px; height: 38px; font-size: 15px; }
    .ba-ph-label { font-size: 14px; }
    .ba-ph-meta { font-size: 11px; }
    .ba-ph-note { display: none; }
}

/* --------------------------------------------------------------------------
   Process section: replaces the humanoid render that used to sit here.
   A soft brand wash instead of a picture of a face.
   -------------------------------------------------------------------------- */
.ba-process-chained .ba-section-wash {
    position: absolute;
    left: 0;
    top: 0;
    width: 46%;
    height: 100%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 8% 30%, rgba(243, 59, 110, 0.30) 0%, rgba(243, 59, 110, 0) 70%),
        radial-gradient(ellipse 60% 50% at 30% 85%, rgba(254, 110, 78, 0.22) 0%, rgba(254, 110, 78, 0) 72%);
}

@media only screen and (max-width: 991px) {
    .ba-process-chained .ba-section-wash { width: 100%; opacity: 0.6; }
}

/* The 170px foot on .card-style-one-item exists only to clear the stock
   render that used to sit bottom-left. With a placeholder (or a real image)
   inside .info instead, that reserved band is dead space. */
.card-style-one-item.ba-card-flush { padding: 42px 38px; }

.card-style-one-item.ba-card-flush .ba-ph { margin-bottom: 28px; }

@media only screen and (max-width: 1199px) {
    .card-style-one-item.ba-card-flush { padding: 36px 30px; }
}

@media only screen and (max-width: 767px) {
    .card-style-one-item.ba-card-flush { padding: 30px 24px; }
}

/* ==========================================================================
   PART FIVE - laptop and contrast fixes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contact form card
   The template gives this panel no background of its own - the light look
   comes entirely from a decorative PNG set inline in the HTML. So the
   heading and paragraph inherited the dark layout's near-white text and
   sat, invisibly, on a light image. Paint the surface explicitly and pin
   the text to it rather than relying on what the artwork happens to be.
   -------------------------------------------------------------------------- */
.contact-form-card {
    background-color: var(--white);
    border: 1px solid #ECEAF4;
    box-shadow: 0 2px 30px rgba(7, 18, 49, 0.08);
}

.contact-form-card .sub-title { color: var(--ba-red); }

.contact-form-card p,
.contact-form-card .ba-form-note { color: var(--color-paragraph); }

.contact-form-card .form-control { color: var(--ba-navy); }

.contact-form-card .form-control::placeholder {
    color: #8A8A9E;
    opacity: 1;
}

/* 80px of padding is a lot of the card once the viewport is not enormous */
@media only screen and (max-width: 1399px) {
    .contact-form-card { padding: 55px; }
}

@media only screen and (max-width: 991px) {
    .contact-form-card { padding: 40px 34px; }
}

@media only screen and (max-width: 575px) {
    .contact-form-card { padding: 30px 24px; }
}

/* --------------------------------------------------------------------------
   Primary navigation on laptops
   Seven top-level items (Groundwork was added to the template's six) total
   817px of links, but the menu box is only 756px at 1280 - so the nav wrapped
   onto a second row and doubled its height, which then pushed the hero
   headline underneath it. Tighten the spacing across the laptop range rather
   than dropping an item.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    nav.navbar .nav.navbar-nav.navbar-center > li > a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
    }

    .attr-nav .button .btn { padding: 12px 18px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Hero on short screens
   .banner-style-one-area is height:100vh, but default-padding is a fixed
   large value, so on a 1366x768 laptop the hero grew to 143% of the viewport:
   the headline ran to five lines and the trust bar sat 167px below the fold.
   Size the headline against viewport HEIGHT as well as width, and pull the
   vertical rhythm in when the screen is short.
   -------------------------------------------------------------------------- */
.banner-style-one-area .banner-one-content h2 {
    font-size: clamp(30px, min(4.2vw, 6.4vh), 58px);
}

@media only screen and (min-width: 1024px) and (max-height: 900px) {
    .banner-style-one-area.default-padding {
        padding-top: 120px;
        padding-bottom: 24px;
    }

    .banner-style-one-area .banner-one-content h4 { margin-bottom: 18px; }
    .banner-style-one-area .banner-one-content h2 { margin-bottom: 20px; }
    .banner-style-one-area .banner-one-content .button { margin-top: 20px !important; }
    .banner-style-one-area .ba-microcopy { margin-top: 14px; }
    .banner-style-one-area .brand-items { padding: 4px 0 18px; }
    .ba-trust-item { padding: 13px 18px; }
}

@media only screen and (min-width: 1024px) and (max-height: 760px) {
    .banner-style-one-area.default-padding {
        padding-top: 108px;
        padding-bottom: 16px;
    }

    .banner-style-one-area .banner-one-content .content > p { font-size: 16px; }
    .ba-trust-item span { font-size: 14px; }
    .ba-microcopy { font-size: 13px; }
}

/* 1200-1279 is the tightest desktop band: the links still overflowed their
   box there even after the first reduction, so go a little further. */
@media only screen and (min-width: 1200px) and (max-width: 1279px) {
    nav.navbar .nav.navbar-nav.navbar-center > li > a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 13.5px;
    }

    .attr-nav .button .btn { padding: 11px 14px; font-size: 13.5px; }
    .navbar-brand .ba-wordmark { font-size: 24px; }
}

/* At exactly 900px tall the trust strip still fell a little under the fold.
   Trim the remaining vertical slack rather than shrinking the type further. */
@media only screen and (min-width: 1024px) and (max-height: 900px) {
    .banner-style-one-area.default-padding {
        padding-top: 112px;
        padding-bottom: 14px;
    }

    .banner-style-one-area .banner-one-content h2 { margin-bottom: 16px; }
    .banner-style-one-area .brand-items { padding: 2px 0 10px; }
    .banner-style-one-area .ba-microcopy { margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   Small text on light surfaces
   These are all small, often uppercase labels. --ba-red is a fill colour and
   only reaches 3.64:1 on white, so they take the ink-weight variant instead.
   Larger headings and solid blocks keep the brighter brand red.
   -------------------------------------------------------------------------- */
.contact-form-card .sub-title,
.ba-person-role,
.ba-ph-meta,
.ba-faq-group-title,
.ba-lead-label {
    color: var(--ba-red-ink);
}

/* Inside dark panels the bright red still has plenty of contrast, so keep it */
.bg-dark .ba-lead-label,
.text-light .ba-lead-label,
.bg-dark .ba-ph-meta,
.text-light .ba-ph-meta { color: var(--ba-orange); }

/* ==========================================================================
   PART SIX - the real brand marks
   Replaces the CSS-drawn wordmark now that the logo files exist. The
   supplied artwork had the navy background baked in, so the versions in
   assets/img/brand are keyed to transparency. "BALTIC" is white, which
   means the wordmark is for dark surfaces only - every placement here is
   on navy.
   ========================================================================== */
.ba-logo {
    display: block;
    height: 46px;
    width: auto;
    max-width: 100%;
}

/* Header brand */
.navbar-brand .ba-logo { height: 46px; }

/* The sticky header shrinks, so the mark comes with it */
nav.navbar.sticked .navbar-brand .ba-logo { height: 38px; }

/* Slide-out panel and footer */
.side .widget .logo .ba-logo { height: 48px; margin-bottom: 4px; }
.footer-bottom-one .logo .ba-logo { height: 44px; }

.ba-logo-link {
    display: inline-block;
    line-height: 0;
}

/* The mobile panel's own copy of the mark */
.navbar-collapse.collapse-mobile > .ba-logo {
    height: 38px;
    margin-bottom: 30px;
}

.navbar-collapse > .ba-logo { display: none; }
.navbar-collapse.collapse-mobile > .ba-logo { display: block; }

@media only screen and (max-width: 767px) {
    .navbar-brand .ba-logo { height: 38px; }
    .footer-bottom-one .logo .ba-logo { height: 36px; }
}

@media only screen and (max-width: 400px) {
    .navbar-brand .ba-logo { height: 32px; }
}

/* --------------------------------------------------------------------------
   The B mark, used wherever the site needs the symbol rather than the name
   -------------------------------------------------------------------------- */
.ba-mark {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Centre of the rotating strapline on the services tile */
.ba-curve-mark {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.42);
    overflow: hidden;
    padding: 0;
}

.ba-curve-mark .ba-mark {
    width: 100%;
    height: 100%;
    padding: 6px;
}

/* Preloader: the mark rather than the template's generic dot grid */
#preloader .ba-preloader-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    animation: ba-mark-pulse 1.6s ease-in-out infinite;
}

@keyframes ba-mark-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.65; }
    50%      { transform: scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #preloader .ba-preloader-mark { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Footer motif
   The template's footer art was a blue stock network globe: generic
   technology imagery of exactly the kind the brand guidance rules out, and
   plainly wrong against a magenta and coral palette. This is the circuit
   trace language taken from the logo's own B mark instead.
   -------------------------------------------------------------------------- */
.footer-style-one .footer-shape {
    opacity: 0.09;
    width: 62%;
    max-width: 760px;
    right: 0;
    left: auto;
    bottom: 0;
}

.footer-style-one .footer-shape img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 991px) {
    .footer-style-one .footer-shape { opacity: 0.07; width: 100%; }
}

/* --------------------------------------------------------------------------
   Consult / Build / Sustain diagram
   Section 17 of the source pack asks for "a simple Consult - Build - Sustain
   diagram". Inline SVG rather than an image file: it stays sharp, retunes
   with the palette, weighs nothing and the text is real text, so it is
   searchable and readable by a screen reader.
   -------------------------------------------------------------------------- */
.ba-diagram {
    padding: 46px 40px 34px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ba-diagram-svg {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    overflow: visible;
}

.ba-diagram-num {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    fill: var(--ba-coral);
}

.ba-diagram-name {
    font-size: 26px;
    font-weight: 700;
    fill: var(--white);
}

.ba-diagram-strap {
    font-size: 15px;
    font-weight: 500;
    fill: var(--white-common);
}

.ba-diagram-loop {
    font-size: 13px;
    font-style: italic;
    fill: var(--white-secondary);
    /* The caption sits on the dashed loop, so knock the line out behind it */
    paint-order: stroke;
    stroke: var(--ba-navy);
    stroke-width: 8px;
    stroke-linejoin: round;
}

.bg-gray .ba-diagram .ba-diagram-loop,
.ba-diagram.ba-diagram-light .ba-diagram-loop {
    fill: var(--color-paragraph);
    stroke: var(--white);
}

/* Light-surface variant, should the diagram ever sit on one */
.bg-gray .ba-diagram,
.ba-diagram.ba-diagram-light {
    background: var(--white);
    border-color: #ECEAF4;
}

.bg-gray .ba-diagram .ba-diagram-name,
.ba-diagram.ba-diagram-light .ba-diagram-name { fill: var(--ba-navy); }

.bg-gray .ba-diagram .ba-diagram-strap,
.ba-diagram.ba-diagram-light .ba-diagram-strap { fill: var(--color-paragraph); }

@media only screen and (max-width: 767px) {
    .ba-diagram { padding: 26px 18px 20px; }

    /* Three circles side by side stop being legible on a phone, so the
       diagram scrolls rather than shrinking into illegibility. */
    .ba-diagram-svg {
        min-width: 620px;
        overflow: visible;
    }

    .ba-diagram {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ba-diagram::after {
        display: block;
        content: "Scroll to see the whole model \2192";
        margin-top: 6px;
        font-size: 12px;
        letter-spacing: 0.4px;
        color: var(--white-secondary);
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Footer bottom without the social row
   The social icons are hidden until the accounts exist, so the lock-up now
   has the full row rather than sitting in an orphaned half-width column.
   -------------------------------------------------------------------------- */
.footer-bottom-one .logo.ba-logo-centred {
    display: flex;
    justify-content: center;
}

.footer-bottom-one .logo.ba-logo-centred .ba-logo-link { line-height: 0; }

/* --------------------------------------------------------------------------
   Hidden image slots
   The remaining placeholders are waiting on photography and a diagram that
   do not exist yet. Rather than ship dashed boxes on a live site, the rows
   holding them carry this class. Delete the class name to bring a slot back
   - the markup underneath is untouched and still names the asset and size.
   -------------------------------------------------------------------------- */
.ba-slot-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Artwork inside the gradient feature card
   Sits as a light inset panel against the magenta/coral card, the way a
   screenshot would.
   -------------------------------------------------------------------------- */
.ba-card-figure {
    display: block;
    margin-bottom: 28px;
}

.ba-card-figure img {
    position: static;
    display: block;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 8px 26px rgba(1, 12, 44, 0.22);
}

/* --------------------------------------------------------------------------
   Button on a gradient card
   The primary button fill is the brand pink, which against the magenta and
   coral card measures 1.24:1 - the shape simply disappears. Deep navy gives
   6.42:1 and echoes the dark tiles in the artwork above it.
   -------------------------------------------------------------------------- */
.btn.btn-style-one.ba-btn-on-gradient {
    background: var(--ba-navy-deep);
    color: var(--white);
    border-color: var(--ba-navy-deep);
    box-shadow: 0 6px 20px rgba(1, 12, 44, 0.28);
}

.btn.btn-style-one.ba-btn-on-gradient::before,
.btn.btn-style-one.ba-btn-on-gradient::after {
    background: var(--ba-navy) !important;
}

.btn.btn-style-one.ba-btn-on-gradient:hover,
.btn.btn-style-one.ba-btn-on-gradient:focus-visible {
    background: var(--white);
    color: var(--ba-navy-deep);
    border-color: var(--white);
}

.btn.btn-style-one.ba-btn-on-gradient i { color: inherit; }

/* --------------------------------------------------------------------------
   Contact form result message
   Bootstrap defines .alert-success and .alert-danger but not .alert-error,
   which is what the form handler returns, so failures were rendering as
   unstyled text. Both states are styled here in brand terms and the
   Bootstrap classes are covered too, in case either is used later.
   -------------------------------------------------------------------------- */
.contact-form .alert {
    position: relative;
    margin: 26px 0 0;
    padding: 18px 22px 18px 56px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: 500;
}

.contact-form .alert::before {
    position: absolute;
    left: 22px;
    top: 18px;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    line-height: 1.5;
}

.contact-form .alert.alert-success {
    background: #ECF8F1;
    border-color: #BCE5CE;
    color: #135E37;
}

.contact-form .alert.alert-success::before {
    content: "\f058";
    color: #1B9E62;
}

.contact-form .alert.alert-error,
.contact-form .alert.alert-danger {
    background: #FDEDF1;
    border-color: #F6C6D2;
    color: #97183F;
}

.contact-form .alert.alert-error::before,
.contact-form .alert.alert-danger::before {
    content: "\f06a";
    color: var(--ba-red-ink);
}

@media only screen and (max-width: 575px) {
    .contact-form .alert {
        padding: 15px 16px 15px 46px;
        font-size: 14.5px;
    }

    .contact-form .alert::before { left: 16px; top: 15px; font-size: 16px; }
}

/* The template's inline validation spans carry .alert-error but no .alert.
   They are empty placeholders, so keep them out of the alert styling. */
.contact-form span.alert-error:empty { display: none; }