/* ==========================================================================
   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 ------------------------------------------------- */
    --ba-navy: #170F4A;
    --ba-navy-deep: #0D0830;
    --ba-navy-soft: #241A5E;
    --ba-orange: #F5822A;
    --ba-red: #EE4B52;
    --ba-sand: #FFF3EC;

    /* --- Template variable remap -------------------------------------- */
    --color-primary: #EE4B52;
    --color-secondary: #F5822A;
    --color-style-two: #F5822A;
    --color-style-three: #EE4B52;
    --color-heading: #170F4A;
    --color-paragraph: #55566B;

    --dark: #170F4A;
    --dark-secondary: #241A5E;
    --dark-optional: #0D0830;

    --white-secondary: #BEBAD4;
    --white-common: #E4E1F1;

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

    --box-shadow-secondary: 0 10px 30px 0 rgba(238, 75, 82, 0.35);
    --bg-gradient: linear-gradient(90deg, var(--ba-red) 0%, var(--ba-orange) 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(245, 130, 42, 0.35) 0%, rgba(23, 15, 74, 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(245, 130, 42, 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(23, 15, 74, 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(23, 15, 74, 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(23, 15, 74, 0.1);
    transform: translateY(-5px);
    border-color: rgba(245, 130, 42, 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(23, 15, 74, 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(23, 15, 74, 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(23, 15, 74, 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(23, 15, 74, 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(23, 15, 74, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-proof:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(23, 15, 74, 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(23, 15, 74, 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(245, 130, 42, 0.28) 0%, rgba(245, 130, 42, 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(23, 15, 74, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-person:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(23, 15, 74, 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(23, 15, 74, 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(23, 15, 74, 0.22);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(245, 130, 42, 0.05) 0px,
            rgba(245, 130, 42, 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(238, 75, 82, 0.30) 0%, rgba(238, 75, 82, 0) 70%),
        radial-gradient(ellipse 60% 50% at 30% 85%, rgba(245, 130, 42, 0.22) 0%, rgba(245, 130, 42, 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; }
}