/* =====================================================================
   Brothers Power Construction - custom styling
   =====================================================================

   Loaded AFTER the vendor theme so these rules win. The purchased
   template files are never edited, which keeps our changes easy to find
   and means a template update cannot silently overwrite them.

   Contents
     1. Design tokens
     2. Top bar
     3. Header and navigation
     4. Cards and panels
     5. Buttons and badges
     6. Forms
     7. Page banner
     8. Footer
     9. Utilities and motion
    10. Responsive adjustments
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens

   The theme's orange is kept as the brand colour so the site still looks
   like the template the client approved; everything else is tuned around
   it for a cleaner, more modern feel.
   --------------------------------------------------------------------- */
:root {
    /* Sampled from the logo: its roof/lettering red is #e87068, sitting on
       black. That exact salmon is too light for text on white, so the
       darker --bpc-primary-dark carries links and hover states while the
       lighter tone is used for fills and accents. */
    --bpc-primary: #e05a50;
    --bpc-primary-light: #e87068;
    --bpc-primary-dark: #c1443b;
    --bpc-secondary: #1c1c1c;
    --bpc-dark: #161616;
    --bpc-body: #5a6472;
    --bpc-muted: #8b95a3;

    /* Warm neutrals tinted from the logo's red rather than the stock
       blue-grey, which read as light blue next to the brand colour. */
    --bpc-line: #efe6e4;
    --bpc-surface: #fdf6f4;

    /* Deep brick, for the bands that used to be near-black. Still dark
       enough for white text to pass contrast, but clearly on-brand. */
    --bpc-deep: #4a1f1c;

    --bpc-radius: 6px;
    --bpc-radius-lg: 10px;

    /* Layered shadows read as depth rather than a grey smear. */
    --bpc-shadow-sm: 0 1px 3px rgba(30, 40, 54, .06), 0 1px 2px rgba(30, 40, 54, .04);
    --bpc-shadow: 0 4px 12px rgba(30, 40, 54, .08), 0 2px 4px rgba(30, 40, 54, .04);
    --bpc-shadow-lg: 0 12px 32px rgba(30, 40, 54, .12), 0 4px 8px rgba(30, 40, 54, .06);

    --bpc-ease: cubic-bezier(.4, 0, .2, 1);
}

body {
    color: var(--bpc-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------
   1b. Retheming the vendor palette

   The template ships an orange accent (#ffad05) applied through these
   helper classes. Remapping them here recolours the whole site to the
   logo's red in one place, instead of hunting element by element. */
.text-theme-colored,
.text-theme-colored a,
a.text-theme-colored {
    color: var(--bpc-primary) !important;
}

.bg-theme-colored,
.bg-theme-colored-2 {
    background-color: var(--bpc-primary) !important;
}

.border-theme-colored {
    border-color: var(--bpc-primary) !important;
}

/* Links pick up the brand colour, using the darker tone for contrast. */
a {
    color: var(--bpc-primary-dark);
}

a:hover,
a:focus {
    color: var(--bpc-primary);
}

.text-gray {
    color: var(--bpc-muted);
}

/* ---------------------------------------------------------------------
   2. Top bar
   --------------------------------------------------------------------- */
.bpc-topbar {
    background: var(--bpc-dark);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 0;
}

.bpc-topbar a {
    color: rgba(255, 255, 255, .75);
    transition: color .2s var(--bpc-ease);
}

.bpc-topbar a:hover,
.bpc-topbar a:focus {
    color: var(--bpc-primary);
    text-decoration: none;
}

.bpc-topbar .bpc-topbar-item {
    display: inline-block;
    margin-right: 22px;
}

.bpc-topbar .bpc-topbar-item i {
    color: var(--bpc-primary);
    margin-right: 6px;
}

/* Social icons: subtle until hovered, so they do not compete with the
   contact details beside them. */
.bpc-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8) !important;
    font-size: 13px;
    transition: background .2s var(--bpc-ease), color .2s var(--bpc-ease), transform .2s var(--bpc-ease);
}

.bpc-social-link:hover,
.bpc-social-link:focus {
    background: var(--bpc-primary);
    color: #fff !important;
    transform: translateY(-2px);
}

/* WhatsApp keeps its own colour: people recognise it instantly. */
.bpc-social-link.is-whatsapp:hover,
.bpc-social-link.is-whatsapp:focus {
    background: #25d366;
}

/* TikTok is drawn as an inline SVG (no Font Awesome 4 glyph exists), so
   it needs matching to the size of the icon-font glyphs beside it. */
.bpc-social-link svg,
.styled-icons a svg {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

.styled-icons a svg {
    font-size: 15px;
}

/* Top bar tools: social, support, language, sign in. */
.bpc-topbar-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

/* The icons sit inside a span now, so the wrapper needs its own layout;
   without this they inherit block flow and stack one per row. */
.bpc-topbar .bpc-social-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bpc-topbar-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    white-space: nowrap;
}

.bpc-topbar-tool i {
    color: var(--bpc-primary);
}

.bpc-topbar-tool:hover,
.bpc-topbar-tool:focus {
    color: #fff;
    text-decoration: none;
}

/* Sign in reads as the primary action in this bar. */
.bpc-topbar-tool.is-account {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bpc-primary);
    color: #fff;
    font-weight: 600;
}

.bpc-topbar-tool.is-account i {
    color: #fff;
}

.bpc-topbar-tool.is-account:hover,
.bpc-topbar-tool.is-account:focus {
    background: var(--bpc-primary-dark);
}

/* Language switcher: a single ENG button that opens a dropdown. */
.bpc-lang {
    position: relative;
    display: inline-flex;
}

.bpc-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .2s var(--bpc-ease), color .2s var(--bpc-ease);
}

.bpc-lang-toggle:hover,
.bpc-lang-toggle:focus {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    outline: 0;
}

.bpc-lang-caret {
    font-size: 12px;
    transition: transform .2s var(--bpc-ease);
}

.bpc-lang.is-open .bpc-lang-caret {
    transform: rotate(180deg);
}

.bpc-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1040;
    min-width: 170px;
    padding: 6px;
    border-radius: var(--bpc-radius);
    background: #fff;
    box-shadow: var(--bpc-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--bpc-ease), transform .18s var(--bpc-ease), visibility .18s;
    text-align: left;
}

.bpc-lang.is-open .bpc-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bpc-lang-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--bpc-radius);
    background: transparent;
    color: var(--bpc-secondary);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
}

.bpc-lang-item:hover,
.bpc-lang-item:focus {
    background: var(--bpc-surface);
    color: var(--bpc-primary);
    outline: 0;
}

/* Machine translation, so it should not be mistaken for an official one. */
.bpc-lang-note {
    display: block;
    margin-top: 4px;
    padding: 6px 12px 2px;
    border-top: 1px solid var(--bpc-line);
    font-size: 11px;
    color: var(--bpc-muted);
}

/* ---------------------------------------------------------------------
   Google Translate widget

   Its own control and banner are hidden: the dropdown above drives it,
   and the injected top banner shifts the whole page down and fights the
   fixed header.
   --------------------------------------------------------------------- */
.bpc-gt-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skiptranslate iframe,
iframe.skiptranslate,
.goog-te-banner-frame {
    display: none !important;
}

/* Google sets an inline top offset on <body> to make room for its banner. */
body {
    top: 0 !important;
}

/* Highlight boxes Google draws over translated text. */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Announcement strip, shown only when the admin sets a message. */
.bpc-announcement {
    background: var(--bpc-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 0;
    text-align: center;
}

.bpc-announcement i {
    margin-right: 6px;
}

/* ---------------------------------------------------------------------
   3. Header and navigation
   --------------------------------------------------------------------- */
/* Logo sits inside the nav bar now, with the menu floated right beside
   it, so the contact strip that used to fill this row is gone and the
   header is one compact band. */
.header .menuzord-brand {
    margin: 0 30px 0 0;
    display: flex;
    align-items: center;
    height: 78px;
}

.header .menuzord-brand img {
    max-height: 62px;
    width: auto;
}

/* Page banner sat 60px clear of the nav. */
.inner-header .container {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
}

/* Navigation bar.

   The theme's modern-header-theme-colored2 skin colours the nav links
   white, because it is designed to sit over a dark hero image. On our
   inner pages there is no hero behind it, and .header-nav-wrapper is
   absolutely positioned, so white-on-white made the whole menu vanish.
   We give the bar a real surface and take the link colour back. */
.header-nav {
    position: relative;
    min-height: 78px;
    background: #fff;
    box-shadow: var(--bpc-shadow-sm);
}

/* The theme's scrollToFixed plugin pins this wrapper to the viewport top
   immediately, which parked it on top of the top bar. Sticky positioning
   does the same job but only once the bar is actually scrolled to, so the
   top bar stays visible at rest. !important overrides the inline
   position/top the plugin writes. */
/* The theme pulls this up 35px to overlap a hero image. With the top bar
   above it instead, that negative margin covered the top bar. */
.header-nav .header-nav-wrapper {
    position: static !important;
    margin-top: 0 !important;
    background: #fff;
}

/* Sticky navigation.

   position:sticky cannot be used here: the theme sets overflow-x on
   <body>, and .header is only as tall as the bar itself, so a sticky
   child would have no room to travel. Instead the bar is fixed once the
   page has scrolled past the top strip, and .header reserves the space
   it vacates so the content below does not jump up by 78px. */
body.bpc-nav-fixed .header-nav {
    height: 78px;
}

body.bpc-nav-fixed .header-nav .header-nav-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: var(--bpc-shadow);
    animation: bpcSlideDown .28s var(--bpc-ease);
}

#menuzord.menuzord {
    padding: 0;
    background: transparent;
}

.menuzord-menu > li > a {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 20px 18px;
    transition: color .2s var(--bpc-ease), background .2s var(--bpc-ease);
}

/* Above 1000px style-main.css sets these links to white via
   `.modern-header .header-nav .header-nav-wrapper .menuzord-menu > li > a`.
   That is four classes deep, so a shorter selector loses on specificity no
   matter how late it loads - we have to match its shape to win. */
.modern-header .header-nav .header-nav-wrapper .menuzord-menu > li > a {
    color: var(--bpc-secondary);
}

/* The boxed skin fills the active/hover item with a dark #333 block,
   which fights the rest of the palette. Colouring the word in the logo's
   red is lighter and keeps the bar clean. */
.modern-header .header-nav .header-nav-wrapper .menuzord-menu > li.active > a,
.modern-header .header-nav .header-nav-wrapper .menuzord-menu > li:hover > a,
.modern-header .header-nav .header-nav-wrapper .menuzord-menu > li > a:focus {
    background: transparent;
    color: var(--bpc-primary-dark);
}

/* Menu sits to the right of the logo, vertically centred against it. */
.menuzord-menu.menuzord-right {
    float: right;
}

.menuzord-menu > li {
    padding: 0;
}

.modern-header .header-nav .header-nav-wrapper .menuzord-menu > li > a {
    padding: 29px 16px;
}

/* The boxed skin drops these at 71px, matching its own shorter bar. */
.menuzord-menu ul.dropdown {
    top: 78px;
    border: 0;
    border-radius: var(--bpc-radius);
    box-shadow: var(--bpc-shadow-lg);
    padding: 8px 0;
    overflow: hidden;
}

.menuzord-menu ul.dropdown li ul.dropdown {
    top: 0;
}

.menuzord-menu ul.dropdown li a {
    padding: 10px 20px;
    font-size: 13.5px;
    color: var(--bpc-body);
    transition: background .18s var(--bpc-ease), padding-left .18s var(--bpc-ease);
}

/* Override the boxed skin's dark #333 hover fill here too. The extra
   .menuzord ancestor matches the skin's own selector specificity. */
.menuzord .menuzord-menu ul.dropdown li:hover > a,
.menuzord-menu ul.dropdown li a:hover {
    background: var(--bpc-surface);
    padding-left: 26px;
    color: var(--bpc-primary);
}

/* Sticky header.

   The theme already runs the scrollToFixed plugin on .navbar-scrolltofixed,
   which pins the bar and adds .scroll-to-fixed-fixed. So we only style the
   pinned state - setting position/top/left ourselves would fight the inline
   values the plugin writes. */
.navbar-scrolltofixed.scroll-to-fixed-fixed {
    background: #fff;
    box-shadow: var(--bpc-shadow);
    animation: bpcSlideDown .3s var(--bpc-ease);
}

@keyframes bpcSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   4. Cards and panels
   --------------------------------------------------------------------- */
.border-1px {
    border: 1px solid var(--bpc-line) !important;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    overflow: hidden;
    transition: box-shadow .28s var(--bpc-ease), transform .28s var(--bpc-ease);
}

.border-1px:hover {
    box-shadow: var(--bpc-shadow-lg);
    transform: translateY(-4px);
}

/* Images inside cards lift slightly on hover, which suggests the whole
   card is clickable. */
.border-1px img {
    transition: transform .5s var(--bpc-ease);
}

.border-1px:hover img {
    transform: scale(1.04);
}

.bg-silver-light {
    background: var(--bpc-surface) !important;
    border-radius: var(--bpc-radius-lg);
}

/* ---------------------------------------------------------------------
   5. Buttons and badges
   --------------------------------------------------------------------- */
.btn {
    border-radius: var(--bpc-radius);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .2s var(--bpc-ease), box-shadow .2s var(--bpc-ease), transform .12s var(--bpc-ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn-theme-colored {
    background: var(--bpc-primary);
    border-color: var(--bpc-primary);
    color: #fff;
}

.btn-theme-colored:hover,
.btn-theme-colored:focus {
    background: var(--bpc-primary-dark);
    border-color: var(--bpc-primary-dark);
    color: #fff;
    box-shadow: 0 6px 16px rgba(224, 90, 80, .3);
}

.btn-lg {
    padding: 13px 30px;
    font-size: 15px;
}

.label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

/* ---------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------- */
.form-control {
    height: auto;
    padding: 11px 14px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius);
    box-shadow: none;
    font-size: 14px;
    transition: border-color .2s var(--bpc-ease), box-shadow .2s var(--bpc-ease);
}

.form-control:focus {
    border-color: var(--bpc-primary);
    box-shadow: 0 0 0 3px rgba(224, 90, 80, .14);
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bpc-secondary);
    margin-bottom: 6px;
}

/* A red border alone is easy to miss, so invalid fields also get a tint. */
.form-control.border-danger {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, .03);
}

.alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: var(--bpc-radius);
    padding: 14px 18px;
    box-shadow: var(--bpc-shadow-sm);
}

.alert-success { border-left-color: #27ae60; background: #eafaf1; color: #1e7e46; }
.alert-danger  { border-left-color: #e74c3c; background: #fdedec; color: #a93226; }
.alert-warning { border-left-color: #f39c12; background: #fef5e7; color: #9c6710; }
.alert-info    { border-left-color: #3498db; background: #ebf5fb; color: #21618c; }

/* ---------------------------------------------------------------------
   7. Page banner
   --------------------------------------------------------------------- */
.inner-header .title {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--bpc-secondary);
}

.inner-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin-top: 12px;
    font-size: 13.5px;
}

.inner-header .breadcrumb > li + li::before {
    content: "\f105";
    font-family: FontAwesome;
    color: var(--bpc-muted);
    padding: 0 10px;
}

/* ---------------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------------- */
.footer {
    background: var(--bpc-dark);
    color: rgba(255, 255, 255, .62);
}

/* The logo is a JPEG with a baked-in white background, so on the dark
   footer it shows as a white rectangle. A deliberate rounded panel reads
   as intentional until a transparent PNG is supplied. */
.footer .footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.footer .footer-logo img {
    max-height: 58px;
}

/* The default logo is a JPEG with a baked-in white background, so on the
   dark footer it shows as a white rectangle; a deliberate rounded panel
   reads as intentional. A dedicated footer logo is assumed to be
   transparent already and gets no panel. */
.footer .footer-logo:not(.is-custom) img {
    background: #fff;
    padding: 8px 12px;
    border-radius: var(--bpc-radius);
}

/* Short "who we are" paragraph under the logo. */
.bpc-footer-about {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .62);
}

.bpc-footer-contact {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.bpc-footer-contact li {
    display: flex;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}

.bpc-footer-contact i {
    flex: 0 0 16px;
    margin-top: 3px;
    color: var(--bpc-primary);
}

.bpc-footer-contact a {
    color: rgba(255, 255, 255, .62);
}

.bpc-footer-contact a:hover {
    color: var(--bpc-primary);
}

/* Footer news list. Titles render as plain text until article.php
   exists, and the theme's dark-on-dark default made them unreadable. */
.footer .latest-posts .post-title,
.footer .latest-posts .post-title a {
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.55;
}

.footer .latest-posts .post-title a:hover {
    color: var(--bpc-primary);
}

.footer .latest-posts .post-date {
    color: var(--bpc-primary);
    font-size: 12px;
}

/* Social row under the contact details. */
/* A fixed 7-across grid keeps the icons in tidy rows whatever the
   client enables, instead of leaving a single orphan on a second line. */
.bpc-footer-social {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    max-width: 268px;
}

.bpc-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .75) !important;
    font-size: 14px;
    transition: background .2s var(--bpc-ease), color .2s var(--bpc-ease), transform .2s var(--bpc-ease);
}

.bpc-footer-social-link:hover,
.bpc-footer-social-link:focus {
    background: var(--bpc-primary);
    color: #fff !important;
    transform: translateY(-2px);
}

/* Recognisable brand colours on hover, where people expect them. */
.bpc-footer-social-link.is-whatsapp:hover { background: #25d366; }
.bpc-footer-social-link.is-facebook:hover { background: #1877f2; }
.bpc-footer-social-link.is-twitter:hover  { background: #1da1f2; }
.bpc-footer-social-link.is-linkedin:hover { background: #0a66c2; }
.bpc-footer-social-link.is-youtube:hover  { background: #ff0000; }
.bpc-footer-social-link.is-telegram:hover { background: #229ed9; }
.bpc-footer-social-link.is-pinterest:hover{ background: #e60023; }
.bpc-footer-social-link.is-behance:hover  { background: #1769ff; }
.bpc-footer-social-link.is-tiktok:hover   { background: #000; }

.bpc-footer-social-link.is-instagram:hover {
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
}

.footer .widget-title {
    position: relative;
    margin-bottom: 24px;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.footer .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 2px;
    background: var(--bpc-primary);
}

.footer a {
    color: rgba(255, 255, 255, .62);
    transition: color .2s var(--bpc-ease), padding-left .2s var(--bpc-ease);
}

.footer a:hover,
.footer a:focus {
    color: var(--bpc-primary);
    text-decoration: none;
}

.footer .list-border li {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: 9px 0;
}

.footer .list-border li:last-child {
    border-bottom: 0;
}

.footer .list.angle-double-right li a:hover {
    padding-left: 5px;
}

.footer-bottom {
    background: rgba(0, 0, 0, .25) !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ---------------------------------------------------------------------
   8b. Home page
   --------------------------------------------------------------------- */

/* Hero slider. Each slide is a background image with a dark scrim so the
   caption stays readable whatever photograph the client uploads. */
.bpc-hero {
    position: relative;
}

.bpc-hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    background-color: var(--bpc-secondary);
    background-size: cover;
    background-position: center;
}

/* Video background. Sits under the scrim and above the poster image, and
   is cropped to fill the slide the same way background-size:cover does. */
.bpc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.bpc-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(18, 18, 18, .88) 0%, rgba(18, 18, 18, .72) 45%, rgba(18, 18, 18, .55) 100%);
}

.bpc-hero-caption {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 40px 0;
    color: #fff;
}

.bpc-hero-caption h1 {
    margin: 0 0 16px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.bpc-hero-caption p {
    margin: 0 0 26px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

.bpc-hero-caption .btn {
    margin: 0 10px 10px 0;
}

/* Owl's default controls are tiny and sit awkwardly over a photograph. */
.bpc-hero-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    font-size: 22px !important;
    transition: background .2s var(--bpc-ease);
}

.bpc-hero-carousel .owl-nav button:hover {
    background: var(--bpc-primary) !important;
}

.bpc-hero-carousel .owl-nav .owl-prev { left: 24px; }
.bpc-hero-carousel .owl-nav .owl-next { right: 24px; }

.bpc-hero-carousel .owl-dots {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
}

.bpc-hero-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: rgba(255, 255, 255, .45);
    border-radius: 50%;
    display: inline-block;
    transition: background .2s var(--bpc-ease), width .2s var(--bpc-ease);
}

.bpc-hero-carousel .owl-dots .owl-dot.active span {
    width: 26px;
    border-radius: 5px;
    background: var(--bpc-primary);
}

/* Headline figures.

   Flex rather than the theme's floated grid: Bootstrap 3 columns are
   floats, and with four unequal-height cells the row grew far taller
   than its content. */
.bpc-stats {
    background: var(--bpc-deep);
    padding: 34px 0;
}

/* The theme puts 60px of vertical padding on every .container. */
.bpc-stats .container,
.bpc-section .container,
.bpc-cta .container {
    padding-top: 0;
    padding-bottom: 0;
}

.bpc-stats .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bpc-stats .row > [class*="col-"] {
    float: none;
}

.bpc-stat {
    text-align: center;
    padding: 10px 0;
}

.bpc-stat-value {
    display: block;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bpc-primary-light);
}

.bpc-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

/* Section rhythm */
section {
    background: #fff;
}

.bpc-section {
    padding: 72px 0;
}

.bpc-section-alt {
    background: var(--bpc-surface);
}

.bpc-section-head {
    margin-bottom: 42px;
    text-align: center;
}

.bpc-section-head h2 {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 800;
    color: var(--bpc-secondary);
}

.bpc-section-head p {
    margin: 0;
    font-size: 15.5px;
    color: var(--bpc-muted);
}

.bpc-section-head-left {
    text-align: left;
    margin-bottom: 28px;
}

/* Card grids.

   Bootstrap 3 columns are floats, so cards of differing heights snag on
   each other and the grid goes ragged. Flex rows keep every card in its
   place and let them share a common height. */
.bpc-section .row {
    display: flex;
    flex-wrap: wrap;
}

.bpc-section .row > [class*="col-"] {
    float: none;
    display: flex;
    flex-direction: column;
}

/* The news/FAQ row is two unrelated columns, not a card grid, so its
   children should not be stretched to match each other. */
.bpc-section .row.bpc-row-plain > [class*="col-"] {
    display: block;
}

.bpc-section .row > [class*="col-"] > .bpc-card,
.bpc-section .row > [class*="col-"] > .bpc-service-card {
    flex: 1 1 auto;
}

/* Service cards.

   A red rule grows down the left edge on hover and the icon tile fills
   with brand colour, so the whole card reads as one deliberate move
   rather than a box that merely lifts. */
.bpc-service-card {
    position: relative;
    height: 100%;
    margin-bottom: 30px;
    padding: 32px 28px;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    box-shadow: var(--bpc-shadow-sm);
    overflow: hidden;
    transition: transform .28s var(--bpc-ease), box-shadow .28s var(--bpc-ease);
}

.bpc-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: var(--bpc-primary);
    transition: height .32s var(--bpc-ease);
}

.bpc-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bpc-shadow-lg);
}

.bpc-service-card:hover::before {
    height: 100%;
}

.bpc-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border-radius: var(--bpc-radius-lg);
    background: rgba(224, 90, 80, .1);
    color: var(--bpc-primary);
    font-size: 24px;
    transition: background .28s var(--bpc-ease), color .28s var(--bpc-ease), transform .28s var(--bpc-ease);
}

.bpc-service-card:hover .bpc-service-icon {
    background: var(--bpc-primary);
    color: #fff;
    transform: scale(1.06);
}

.bpc-service-card h4 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--bpc-secondary);
    transition: color .2s var(--bpc-ease);
}

.bpc-service-card:hover h4 {
    color: var(--bpc-primary);
}

.bpc-service-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--bpc-body);
}

/* Content cards, shared by projects and vehicles */
.bpc-card {
    margin-bottom: 30px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    overflow: hidden;
    transition: transform .25s var(--bpc-ease), box-shadow .25s var(--bpc-ease);
}

.bpc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bpc-shadow-lg);
}

.bpc-card-media {
    display: block;
    height: 200px;
    overflow: hidden;
    background: var(--bpc-surface);
}

.bpc-card-media-sm {
    height: 150px;
}

.bpc-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--bpc-ease);
}

.bpc-card:hover .bpc-card-media img {
    transform: scale(1.05);
}

/* Shown when a row has no image yet, so the card keeps its shape. */
.bpc-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bpc-line);
    font-size: 46px;
}

.bpc-card-body {
    padding: 20px;
}

.bpc-card-meta {
    margin-bottom: 10px;
}

.bpc-card-meta .label {
    margin-right: 4px;
    font-weight: 600;
}

.bpc-card-body h4 {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
}

.bpc-card-body h4 a {
    color: var(--bpc-secondary);
}

.bpc-card-body h4 a:hover {
    color: var(--bpc-primary);
}

.bpc-card-body p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--bpc-body);
}

.bpc-card-location {
    font-size: 13px !important;
    color: var(--bpc-muted) !important;
}

.bpc-card-location i {
    margin-right: 5px;
    color: var(--bpc-primary);
}

.bpc-price {
    margin: 10px 0 0 !important;
    font-size: 18px !important;
    font-weight: 700;
    color: var(--bpc-primary) !important;
}

.bpc-price span {
    font-size: 13px;
    font-weight: 400;
    color: var(--bpc-muted);
}

/* Progress bar for ongoing projects. Drawn here rather than with the
   theme's .progress-bar, whose JS rewrites the inline width. */
.bpc-progress {
    height: 6px;
    margin-top: 12px;
    border-radius: 3px;
    background: var(--bpc-line);
    overflow: hidden;
}

.bpc-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--bpc-primary);
}

.bpc-progress-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--bpc-muted);
}

/* News list */
.bpc-news-item {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--bpc-line);
}

.bpc-news-item:last-child {
    border-bottom: 0;
}

.bpc-news-media {
    flex: 0 0 130px;
    height: 92px;
    border-radius: var(--bpc-radius);
    overflow: hidden;
}

.bpc-news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bpc-news-date {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bpc-primary);
}

.bpc-news-body h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.bpc-news-body h4,
.bpc-news-body h4 a {
    color: var(--bpc-secondary);
}

.bpc-news-body h4 a:hover {
    color: var(--bpc-primary);
}

.bpc-news-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--bpc-body);
}

/* FAQ accordion */
.bpc-faq .panel {
    margin-bottom: 10px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius);
    background: #fff;
    box-shadow: none;
}

.bpc-faq-question {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.bpc-faq-question a {
    display: block;
    padding: 14px 18px;
    color: var(--bpc-secondary);
    text-decoration: none;
}

.bpc-faq-question a:hover,
.bpc-faq-question a:not(.collapsed) {
    color: var(--bpc-primary);
}

.bpc-faq-question a::after {
    content: "\f106"; /* chevron up */
    float: right;
    font-family: FontAwesome;
    color: var(--bpc-muted);
}

.bpc-faq-question a.collapsed::after {
    content: "\f107"; /* chevron down */
}

.bpc-faq-answer {
    padding: 0 18px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bpc-body);
}

/* ---------------------------------------------------------------------
   8a. Page banner
   --------------------------------------------------------------------- */
.bpc-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 260px;
    padding: 56px 0;
    background-color: var(--bpc-deep);
    background-size: cover;
    background-position: center;
}

/* Scrim: dark enough for white text over any uploaded photograph, and
   angled so the brand colour reads at the left edge. */
.bpc-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(74, 31, 28, .93) 0%, rgba(28, 20, 19, .82) 48%, rgba(28, 20, 19, .68) 100%);
}

.bpc-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.bpc-banner-title {
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.bpc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
}

.bpc-breadcrumb li {
    color: rgba(255, 255, 255, .7);
}

.bpc-breadcrumb li + li::before {
    content: "\f105"; /* angle-right */
    font-family: FontAwesome;
    margin-right: 8px;
    color: rgba(255, 255, 255, .4);
}

.bpc-breadcrumb a {
    color: rgba(255, 255, 255, .7);
}

.bpc-breadcrumb a:hover {
    color: #fff;
}

.bpc-breadcrumb .is-active {
    color: var(--bpc-primary-light);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   8bb. About page and the shared "Why Choose Us" row
   --------------------------------------------------------------------- */
.bpc-prose p {
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--bpc-body);
}

.bpc-about-actions {
    margin-top: 26px;
}

.bpc-about-actions .btn {
    margin: 0 10px 10px 0;
}

/* Figures panel beside the intro. */
.bpc-about-figures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.bpc-about-figure {
    padding: 22px 18px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    text-align: center;
}

/* The years figure carries the most weight, so it spans the row. */
.bpc-about-figure.is-lead {
    grid-column: 1 / -1;
    border-color: transparent;
    background: var(--bpc-primary);
}

.bpc-about-figure.is-lead .bpc-about-figure-value,
.bpc-about-figure.is-lead .bpc-about-figure-label {
    color: #fff;
}

.bpc-about-figure-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bpc-primary);
}

.bpc-about-figure-label {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bpc-muted);
}

/* Mission / vision */
.bpc-mv-card {
    height: 100%;
    padding: 32px 28px;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    box-shadow: var(--bpc-shadow-sm);
}

.bpc-mv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: var(--bpc-radius);
    background: rgba(224, 90, 80, .1);
    color: var(--bpc-primary);
    font-size: 22px;
}

.bpc-mv-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-mv-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--bpc-body);
}

/* Why choose us */
.bpc-why-card {
    height: 100%;
    margin-bottom: 26px;
    padding: 28px 22px;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    box-shadow: var(--bpc-shadow-sm);
    text-align: center;
    transition: transform .25s var(--bpc-ease), box-shadow .25s var(--bpc-ease);
}

.bpc-why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bpc-shadow-lg);
}

.bpc-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--bpc-primary);
    color: #fff;
    font-size: 24px;
}

.bpc-why-card h4 {
    margin: 0 0 10px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-why-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--bpc-body);
}

/* Team */
.bpc-team-card {
    height: 100%;
    margin-bottom: 26px;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    box-shadow: var(--bpc-shadow-sm);
    overflow: hidden;
    transition: transform .25s var(--bpc-ease), box-shadow .25s var(--bpc-ease);
}

.bpc-team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bpc-shadow-lg);
}

.bpc-team-media {
    height: 220px;
    background: var(--bpc-surface);
}

.bpc-team-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bpc-team-body {
    padding: 18px;
    text-align: center;
}

.bpc-team-body h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-team-role {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bpc-primary);
}

.bpc-team-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bpc-body);
}

/* Dark outline button, for light backgrounds. */
.btn-outline-dark {
    border: 2px solid var(--bpc-line);
    background: transparent;
    color: var(--bpc-secondary);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    border-color: var(--bpc-primary);
    background: var(--bpc-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------
   8c. News, articles and shared listing furniture
   --------------------------------------------------------------------- */

/* Category filter pills */
.bpc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 38px;
}

.bpc-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--bpc-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpc-secondary);
    transition: all .2s var(--bpc-ease);
}

.bpc-filter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bpc-surface);
    font-size: 11.5px;
    color: var(--bpc-muted);
}

.bpc-filter:hover {
    border-color: var(--bpc-primary);
    color: var(--bpc-primary);
    text-decoration: none;
}

.bpc-filter.is-active {
    border-color: var(--bpc-primary);
    background: var(--bpc-primary);
    color: #fff;
}

.bpc-filter.is-active span {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.bpc-card-date {
    font-size: 12.5px;
    color: var(--bpc-muted);
}

.bpc-readmore {
    display: inline-block;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpc-primary);
}

.bpc-readmore i {
    margin-left: 4px;
    transition: transform .2s var(--bpc-ease);
    display: inline-block;
}

.bpc-readmore:hover i {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   Gallery

   A masonry-ish grid: auto-fill keeps the tiles a consistent size at any
   width without needing per-breakpoint column counts.
   --------------------------------------------------------------------- */
.bpc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.bpc-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--bpc-radius-lg);
    overflow: hidden;
    background: var(--bpc-surface);
}

.bpc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--bpc-ease);
}

.bpc-gallery-item:hover img {
    transform: scale(1.06);
}

.bpc-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(74, 31, 28, .1) 0%, rgba(74, 31, 28, .82) 100%);
    opacity: 0;
    transition: opacity .3s var(--bpc-ease);
    text-align: center;
}

.bpc-gallery-item:hover .bpc-gallery-overlay,
.bpc-gallery-item:focus .bpc-gallery-overlay {
    opacity: 1;
}

.bpc-gallery-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bpc-primary);
    color: #fff;
    font-size: 17px;
    transform: translateY(8px);
    transition: transform .3s var(--bpc-ease);
}

.bpc-gallery-item:hover .bpc-gallery-zoom {
    transform: translateY(0);
}

.bpc-gallery-caption {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.bpc-gallery-caption small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* Empty state, used wherever a listing has nothing to show. */
.bpc-empty {
    padding: 60px 20px;
    text-align: center;
}

.bpc-empty i {
    font-size: 46px;
    color: var(--bpc-line);
}

.bpc-empty h4 {
    margin: 18px 0 8px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-empty p {
    margin: 0 0 18px;
    color: var(--bpc-muted);
}

/* Pagination */
.bpc-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 34px;
}

.bpc-pagination a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    justify-content: center;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--bpc-secondary);
    transition: all .2s var(--bpc-ease);
}

.bpc-pagination a:hover {
    border-color: var(--bpc-primary);
    color: var(--bpc-primary);
    text-decoration: none;
}

.bpc-pagination a.is-active {
    border-color: var(--bpc-primary);
    background: var(--bpc-primary);
    color: #fff;
}

/* Article page */
.bpc-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    font-size: 13px;
    color: var(--bpc-muted);
}

.bpc-article-meta i {
    margin-right: 5px;
    color: var(--bpc-primary);
}

.bpc-article-meta .label {
    font-size: 12px;
}

.bpc-article-hero {
    margin-bottom: 26px;
    border-radius: var(--bpc-radius-lg);
    overflow: hidden;
}

.bpc-article-hero img {
    width: 100%;
    height: auto;
}

.bpc-article-lead {
    margin-bottom: 22px;
    padding-left: 18px;
    border-left: 3px solid var(--bpc-primary);
    font-size: 17px;
    line-height: 1.7;
    color: var(--bpc-secondary);
}

.bpc-article-body p {
    margin-bottom: 18px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--bpc-body);
}

.bpc-article-foot {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--bpc-line);
}

/* Article sidebar */
.bpc-sidebar-block {
    margin-bottom: 26px;
    padding: 22px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius-lg);
    background: #fff;
}

.bpc-sidebar-block h4 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-related {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bpc-line);
}

.bpc-related:last-child {
    border-bottom: 0;
}

.bpc-related-media {
    flex: 0 0 58px;
    height: 52px;
    border-radius: var(--bpc-radius);
    overflow: hidden;
}

.bpc-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bpc-related-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bpc-secondary);
}

.bpc-related:hover .bpc-related-title {
    color: var(--bpc-primary);
}

.bpc-related-date {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--bpc-muted);
}

.bpc-sidebar-cta {
    background: var(--bpc-surface);
    text-align: center;
}

.bpc-sidebar-cta p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bpc-body);
}

/* ---------------------------------------------------------------------
   8d. Forms

   Shared by the contact form and the permit, internship and booking
   applications, so all four look like one system rather than four
   different pages that happen to collect data.
   --------------------------------------------------------------------- */
.bpc-form-card {
    padding: 34px;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    box-shadow: var(--bpc-shadow);
}

.bpc-form-head {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bpc-line);
}

.bpc-form-head h3 {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-form-head p {
    margin: 0;
    font-size: 14px;
    color: var(--bpc-muted);
}

/* Numbered step heading, for the multi-part applications. */
.bpc-form-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bpc-line);
}

.bpc-form-step:first-of-type {
    margin-top: 0;
}

.bpc-form-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bpc-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.bpc-form-step h4 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-form-step p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--bpc-muted);
}

/* Two-screen progress tabs on the internship application form. */
.bpc-step-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--bpc-line);
}

.bpc-step-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--bpc-muted);
}

.bpc-step-tab.is-active {
    border-bottom-color: var(--bpc-primary);
    color: var(--bpc-secondary);
}

.bpc-step-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bpc-line);
    color: var(--bpc-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.bpc-step-tab.is-active .bpc-step-tab-num {
    background: var(--bpc-primary);
    color: #fff;
}

/* Fields */
.bpc-field {
    margin-bottom: 20px;
}

.bpc-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpc-secondary);
}

.bpc-field label span {
    color: var(--bpc-primary);
}

.bpc-field label .bpc-optional {
    color: var(--bpc-muted);
    font-weight: 400;
}

.bpc-field input[type="text"],
.bpc-field input[type="email"],
.bpc-field input[type="tel"],
.bpc-field input[type="number"],
.bpc-field input[type="date"],
.bpc-field input[type="password"],
.bpc-field select,
.bpc-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius);
    background: #fff;
    font-size: 14.5px;
    color: var(--bpc-secondary);
    transition: border-color .2s var(--bpc-ease), box-shadow .2s var(--bpc-ease);
}

.bpc-field textarea {
    resize: vertical;
    min-height: 120px;
}

.bpc-field input:focus,
.bpc-field select:focus,
.bpc-field textarea:focus {
    outline: 0;
    border-color: var(--bpc-primary);
    box-shadow: 0 0 0 3px rgba(224, 90, 80, .14);
}

.bpc-field input::placeholder,
.bpc-field textarea::placeholder {
    color: #b9c0c9;
}

/* Inline validation, shown next to the field that failed rather than in
   one list at the top, so the fix is where the eye already is. */
.bpc-field.has-error input,
.bpc-field.has-error select,
.bpc-field.has-error textarea {
    border-color: var(--bpc-primary);
    background: rgba(224, 90, 80, .04);
}

.bpc-field-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--bpc-primary-dark);
}

.bpc-field-help {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--bpc-muted);
}

/* File inputs, used heavily by the permit and internship applications. */
.bpc-file {
    position: relative;
    display: block;
    padding: 18px;
    border: 1px dashed var(--bpc-line);
    border-radius: var(--bpc-radius);
    background: var(--bpc-surface);
    transition: border-color .2s var(--bpc-ease), background .2s var(--bpc-ease);
}

.bpc-file:hover {
    border-color: var(--bpc-primary);
    background: #fff;
}

.bpc-file-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpc-secondary);
}

.bpc-file-label i {
    color: var(--bpc-primary);
    font-size: 17px;
}

.bpc-file input[type="file"] {
    width: 100%;
    font-size: 13px;
    color: var(--bpc-body);
}

.bpc-file.is-required .bpc-file-label::after {
    content: "Required";
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(224, 90, 80, .12);
    color: var(--bpc-primary-dark);
    font-size: 11px;
    font-weight: 600;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.bpc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bpc-form-actions {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--bpc-line);
}

.bpc-form-actions .btn i {
    margin-right: 7px;
}

/* Summary panel beside a form, e.g. the permit fee. */
.bpc-form-aside {
    padding: 24px;
    border-radius: var(--bpc-radius-lg);
    background: var(--bpc-surface);
}

.bpc-form-aside h4 {
    margin: 0 0 14px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-form-aside ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bpc-form-aside li {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bpc-body);
}

.bpc-form-aside li i {
    flex: 0 0 15px;
    margin-top: 3px;
    color: var(--bpc-primary);
}

/* Bootstrap-classed forms inherit the same look.

   The internship and vehicle-booking pages use the theme's .form-group /
   .form-control markup. Styling those here means all four forms match
   without rewriting each page, and any form added later fits in too. */
.bpc-section .form-group,
.bpc-form-card .form-group {
    margin-bottom: 20px;
}

.bpc-section .form-group > label,
.bpc-form-card .form-group > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpc-secondary);
}

.bpc-section .form-control,
.bpc-form-card .form-control {
    height: auto;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bpc-line);
    border-radius: var(--bpc-radius);
    background: #fff;
    box-shadow: none;
    font-size: 14.5px;
    color: var(--bpc-secondary);
    transition: border-color .2s var(--bpc-ease), box-shadow .2s var(--bpc-ease);
}

.bpc-section .form-control:focus,
.bpc-form-card .form-control:focus {
    outline: 0;
    border-color: var(--bpc-primary);
    box-shadow: 0 0 0 3px rgba(224, 90, 80, .14);
}

.bpc-section .form-control::placeholder,
.bpc-form-card .form-control::placeholder {
    color: #b9c0c9;
}

/* The pages mark invalid fields with .border-danger. */
.bpc-section .form-control.border-danger,
.bpc-form-card .form-control.border-danger {
    border-color: var(--bpc-primary);
    background: rgba(224, 90, 80, .04);
}

.bpc-section .text-danger,
.bpc-form-card .text-danger {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--bpc-primary-dark) !important;
}

/* The theme's Bootstrap 3 alerts, softened to match .bpc-alert. */
.bpc-section .alert,
.bpc-form-card .alert {
    padding: 16px 18px;
    border: 0;
    border-radius: var(--bpc-radius-lg);
    font-size: 14px;
    line-height: 1.65;
}

.bpc-section .alert-info,
.bpc-form-card .alert-info {
    background: var(--bpc-surface);
    color: var(--bpc-body);
}

.bpc-section .alert-warning,
.bpc-form-card .alert-warning {
    background: #fdf3e4;
    color: #8a6116;
}

.bpc-section .alert-danger,
.bpc-form-card .alert-danger {
    background: rgba(224, 90, 80, .09);
    color: var(--bpc-primary-dark);
}

.bpc-section .alert-success,
.bpc-form-card .alert-success {
    background: #e9f6ee;
    color: #1e7a45;
}

.bpc-section .alert .alert-link,
.bpc-form-card .alert .alert-link {
    font-weight: 600;
    text-decoration: underline;
}

/* Declaration checkbox */
.bpc-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 24px 0 0;
    padding: 16px 18px;
    border-radius: var(--bpc-radius);
    background: var(--bpc-surface);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bpc-body);
    cursor: pointer;
}

.bpc-check input {
    margin: 3px 0 0;
    flex: 0 0 auto;
}

/* Alerts, replacing the theme's Bootstrap 3 alert boxes. */
.bpc-alert {
    display: flex;
    gap: 14px;
    margin-bottom: 26px;
    padding: 18px 20px;
    border-radius: var(--bpc-radius-lg);
    font-size: 14px;
    line-height: 1.65;
}

.bpc-alert i {
    flex: 0 0 18px;
    margin-top: 2px;
    font-size: 17px;
}

.bpc-alert strong {
    display: block;
    margin-bottom: 4px;
}

.bpc-alert p,
.bpc-alert ul {
    margin: 0;
}

.bpc-alert ul {
    padding-left: 18px;
}

.bpc-alert.is-error {
    background: rgba(224, 90, 80, .09);
    color: var(--bpc-primary-dark);
}

.bpc-alert.is-error i {
    color: var(--bpc-primary);
}

.bpc-alert.is-info {
    background: var(--bpc-surface);
    color: var(--bpc-body);
}

.bpc-alert.is-info i {
    color: var(--bpc-primary);
}

.bpc-alert a {
    font-weight: 600;
    color: var(--bpc-primary-dark);
    text-decoration: underline;
}

/* Fee panel */
.bpc-fee-card {
    margin-bottom: 22px;
    padding: 26px;
    border-radius: var(--bpc-radius-lg);
    background: var(--bpc-primary);
    color: #fff;
}

.bpc-fee-label {
    display: block;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .85;
}

.bpc-fee-value {
    display: block;
    margin: 6px 0 10px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.bpc-fee-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    opacity: .9;
}

/* Numbered "how it works" list */
.bpc-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bpc-step;
}

.bpc-steps li {
    display: flex;
    gap: 11px;
    margin-bottom: 13px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bpc-body);
}

.bpc-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bpc-primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

/* Help panel */
.bpc-help-card {
    margin-top: 22px;
    padding: 26px;
    border-radius: var(--bpc-radius-lg);
    background: var(--bpc-deep);
    color: #fff;
    text-align: center;
}

.bpc-help-card i {
    font-size: 28px;
    color: var(--bpc-primary-light);
}

.bpc-help-card h4 {
    margin: 12px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.bpc-help-card p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

/* Contact page details column */
.bpc-contact-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.bpc-contact-list li {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.bpc-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--bpc-radius);
    background: rgba(224, 90, 80, .1);
    color: var(--bpc-primary);
    font-size: 17px;
}

.bpc-contact-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bpc-body);
}

.bpc-contact-body strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bpc-muted);
    font-weight: 600;
}

.bpc-contact-body a {
    color: var(--bpc-body);
}

.bpc-contact-body a:hover {
    color: var(--bpc-primary);
}

/* Reuses the footer social pills, but on a light background. */
.bpc-contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bpc-contact-social .bpc-footer-social-link {
    background: var(--bpc-surface);
    color: var(--bpc-body) !important;
}

.bpc-contact-social .bpc-footer-social-link:hover {
    color: #fff !important;
}

/* Contact map. Full-bleed strip below the form. */
.bpc-map {
    position: relative;
    height: 420px;
    background: var(--bpc-surface);
}

.bpc-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Visually hidden, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   8e. Payment pages
   --------------------------------------------------------------------- */
.bpc-pay-summary {
    width: 100%;
    margin: 4px 0 0;
}

.bpc-pay-summary th,
.bpc-pay-summary td {
    padding: 12px 0;
    border-bottom: 1px solid var(--bpc-line);
    font-size: 14.5px;
    vertical-align: top;
}

.bpc-pay-summary th {
    width: 38%;
    font-weight: 500;
    color: var(--bpc-muted);
    text-align: left;
}

.bpc-pay-summary td {
    color: var(--bpc-secondary);
    font-weight: 600;
}

.bpc-pay-summary tr.is-total th,
.bpc-pay-summary tr.is-total td {
    border-bottom: 0;
    padding-top: 16px;
    font-size: 19px;
}

.bpc-pay-summary tr.is-total td {
    color: var(--bpc-primary);
    font-weight: 800;
}

.bpc-pay-summary small {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--bpc-muted);
}

/* Success and info variants of the shared alert. */
.bpc-alert.is-success {
    background: #e9f6ee;
    color: #1e7a45;
}

.bpc-alert.is-success i {
    color: #1e7a45;
}

/* The three outcome buttons on the test payment page. */
.bpc-sim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Receipt / outcome page */
.bpc-receipt {
    max-width: 620px;
    margin: 0 auto;
    padding: 44px 36px;
    border-radius: var(--bpc-radius-lg);
    background: #fff;
    box-shadow: var(--bpc-shadow);
    text-align: center;
}

.bpc-receipt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    border-radius: 50%;
    font-size: 32px;
    color: #fff;
}

.bpc-receipt-icon.is-paid {
    background: #1e7a45;
}

.bpc-receipt-icon.is-failed {
    background: var(--bpc-primary);
}

.bpc-receipt h2 {
    margin: 0 0 12px;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--bpc-secondary);
}

.bpc-receipt-lead {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bpc-body);
}

.bpc-receipt .bpc-pay-summary {
    text-align: left;
    margin-bottom: 28px;
}

.bpc-receipt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Closing call to action */
.bpc-cta {
    padding: 64px 0;
    background: var(--bpc-deep);
    color: #fff;
}

.bpc-cta h2 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
}

.bpc-cta p {
    margin: 0 0 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, .8);
}

.bpc-cta-actions {
    margin-top: 22px !important;
}

.bpc-cta-actions .btn {
    margin: 0 8px 10px;
}

/* Light outline button, for use on the dark hero and CTA panels. */
.btn-outline-light {
    border: 2px solid rgba(255, 255, 255, .55);
    background: transparent;
    color: #fff;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    border-color: #fff;
    background: #fff;
    color: var(--bpc-secondary);
}

/* ---------------------------------------------------------------------
   9. Utilities and motion
   --------------------------------------------------------------------- */
.bpc-section-title {
    position: relative;
    margin-bottom: 14px;
    font-weight: 700;
    color: var(--bpc-secondary);
}

.bpc-lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bpc-muted);
}

a {
    transition: color .2s var(--bpc-ease);
}

img {
    max-width: 100%;
    height: auto;
}

/* Visible focus for keyboard users. The theme removes outlines entirely,
   which makes the site unusable without a mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--bpc-primary);
    outline-offset: 2px;
}

/* Respect a reduced-motion preference: animation should never be forced
   on someone who has asked the system to avoid it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   10. Responsive adjustments
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .header-widget-contact-info-box .contact-info {
        margin: 8px 12px;
    }
}

@media (max-width: 1000px) {
    /* Below the theme's mobile breakpoint the nav shows its own brand,
       so the logo in the header strip above would be a second copy. */
    .header-middle .menuzord-brand {
        display: none;
    }

    .menuzord .menuzord-brand img {
        max-height: 40px;
    }

    /* The nav is absolutely positioned on desktop; on mobile it needs to
       sit in the flow or it overlaps the page title. */
    .header-nav .header-nav-wrapper {
        position: static !important;
    }

    .header-nav {
        min-height: 0;
    }
}

/* Someone who has asked their system to reduce motion should not be given
   a looping video; the poster image conveys the same thing. */
@media (prefers-reduced-motion: reduce) {
    .bpc-hero-video {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Phones get the poster image rather than downloading the video. */
    .bpc-hero-video {
        display: none;
    }

    /* Banner and forms on small screens. */
    .bpc-banner {
        min-height: 190px;
        padding: 38px 0;
    }

    .bpc-banner-title {
        font-size: 26px;
    }

    .bpc-form-card {
        padding: 22px 18px;
    }

    .bpc-topbar-tools {
        justify-content: center;
        margin-top: 8px;
    }

    /* Home page: tighter type and spacing on small screens. */
    .bpc-hero-slide {
        min-height: 430px;
    }

    .bpc-hero-caption h1 {
        font-size: 30px;
    }

    .bpc-hero-caption p {
        font-size: 15px;
    }

    .bpc-hero-caption .btn {
        display: block;
        margin: 0 0 10px;
    }

    .bpc-hero-carousel .owl-nav {
        display: none;
    }

    .bpc-section {
        padding: 48px 0;
    }

    .bpc-section-head h2,
    .bpc-cta h2 {
        font-size: 25px;
    }

    .bpc-stat-value {
        font-size: 30px;
    }

    /* Stacked news items read better without the thumbnail crop. */
    .bpc-news-item {
        display: block;
    }

    .bpc-news-media {
        width: 100%;
        height: 150px;
        margin-bottom: 12px;
    }

    .bpc-topbar {
        text-align: center;
        font-size: 12px;
    }

    .bpc-topbar .bpc-topbar-item {
        display: block;
        margin: 3px 0;
    }

    /* Social icons move onto their own centred row on small screens. */
    .bpc-topbar .bpc-social-wrap {
        margin-top: 8px;
    }

    .header-widget-contact-info-box .contact-info {
        display: flex;
        justify-content: center;
        margin: 10px 0;
    }

    .border-1px:hover {
        /* Lift on hover is meaningless on touch and causes jumpiness. */
        transform: none;
    }
}