.hero_content .hero_title_1 {
  font-size: 50px;
  font-weight: 600;
  line-height: 60px;
  color: #ffffff !important;
  margin-top: 5px;
  display: block; 
}

.hero_content .hero_title_2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  /*color: #94a3b8 !important;*/
  margin-top: 5px;
  display: block; 
}

.footer_link {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: #9e9db3;
	margin: 0px;	
}   

.footer_link:hover {
	color: #a31d38 !important;
}

.footer_title {
  color: #a31d38 !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero_content .hero_title_1 {
    font-size: 30px;
    line-height: 60px;
  }

  .hero_content .hero_title_2 {
    font-size: 20px;
    line-height: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero_content .hero_title_1 {
    font-size: 30px;
    line-height: 60px;
  }

  .hero_content .hero_title_2 {
    font-size: 20px;
    line-height: 60px;
  }
}

@media (max-width: 767px) {
  .hero_content .hero_title_1 {
    font-size: 20px;
    line-height: 38px;
  }

  .hero_content .hero_title_2 {
    font-size: 15px;
    line-height: 38px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero_content .hero_title_1 {
    font-size: 30px;
    line-height: 60px;
  }

  .hero_content .hero_title_2 {
    font-size: 20px;
    line-height: 60px;
  }
}

.hero_content .hero_title span {
  display: contents;
  color: #a31d38;
}

/* Simon confirmed in the colour meeting that this background is meant to be
   a very dark navy, not black: "I do not think it is black... you should go
   with that colour." This is the single place blue is intentional. */
.bg-dark-custom {
	background-color: #1a212d;
}

.bg-dark-light-custom {
  background-color: #1f2632;
}

/* Smooth transition for the glow effect */
.btn-glow, .btn-glow-light {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Colored light glow matching a primary theme */
.btn-glow:hover {
  transform: translateY(-1px); /* Optional: slight lift effect */
  box-shadow: 0 0 15px rgba(163, 29, 56, 0.65); /* Commeris red glow */
}

/* Soft white/light-gray glow for dark buttons or dark themes */
.btn-glow-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Pure white light effect */
}

/* Colour meeting: red and white only, no third surface colour. These cards
   were blue, then briefly neutral grey; Simon rejected both. Red background
   with white text. */
.card-brand {
  background-color: #a31d38 !important;
  border: none !important;
  transition: all 0.3s ease;
}

.card-brand:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(163, 29, 56, 0.8) !important;
  transition: all 0.3s ease;
}

.card-brand p,
.card-brand li,
.card-brand .text-white-50,
.card-brand h2,
.card-brand h3,
.card-brand h4,
.card-brand h5 {
  color: #ffffff !important;
}

/* The secondary card surface must not introduce a third colour either. */
.card-custom {
  background-color: #a31d38 !important;
  border: none !important;
  transition: all 0.3s ease;
}

.card-custom p,
.card-custom li,
.card-custom .text-white-50,
.card-custom h3,
.card-custom h4,
.card-custom h5 {
  color: #ffffff !important;
}

.card-custom:hover {
  border-color: #ffffff !important;
  transform: translateY(-5px); /* Moves the card slightly up */
  box-shadow: 0 0 20px rgba(163, 29, 56, 0.8) !important; /* Adds a red glow */
  transition: all 0.3s ease; /* Makes the animation smooth */
}

/* Red links and red buttons are invisible on the red card surfaces. Inside
   any brand-red card they invert: links go white, solid red buttons become
   white with red text. The matching inline `style="color:#a31d38"`
   declarations were removed from the markup, since an inline !important
   outranks every stylesheet rule and no CSS fix could have reached them. */
.card-brand .text-danger,
.card-custom .text-danger,
.card-custom-home .text-danger,
.card-brand a.text-danger,
.card-custom a.text-danger,
.card-custom-home a.text-danger {
  color: #ffffff !important;
}

.card-brand a.text-danger:hover,
.card-custom a.text-danger:hover,
.card-custom-home a.text-danger:hover {
  text-decoration: underline !important;
}

.card-brand .btn-danger,
.card-custom .btn-danger,
.card-custom-home .btn-danger {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #a31d38 !important;
}

.card-brand .btn-danger:hover,
.card-custom .btn-danger:hover,
.card-custom-home .btn-danger:hover {
  background-color: #f1f3f5 !important;
  color: #a31d38 !important;
}

/* Main page heading in the brand red.
   Only one brand red is used anywhere, per Simon. Note that #a31d38 on the
   dark navy measures 2.15:1, below the 3:1 large-text threshold, so a red
   heading is only legible on light surfaces. Pages still on the dark
   background must keep WHITE headings rather than introduce a second red. */
.page_heading {
  color: #a31d38 !important;
}

/* On a light surface the exact brand red has plenty of contrast, so use it. */
.sticky .page_heading,
.bg-white .page_heading {
  color: #a31d38 !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.card-custom-home {
  background-color: #a31d38 !important; /*#252b37*/
  transition: all 0.3s ease;
}

.card-custom-home:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(163, 29, 56, 0.8); /* Changed to red glow to match request */
  transition: all 0.3s ease;
}

/* Readability.
   The old body grey (#9e9db3) and Bootstrap's .text-white-50
   (rgba(255,255,255,.5)) technically passed WCAG AA on the dark navy, but at
   roughly 5:1 they read as washed out, especially on a phone outdoors. These
   values are lighter and comfortably above AA, while staying clearly grey
   secondary text rather than full white. */
p {
	color: #b6bdca !important;
}

.text-white-50 {
	color: #c3cad6 !important;
}

/* On the solid red brand cards the grey above drops to 3.99:1, below the
   4.5:1 AA threshold, because the `p` rule outranks the .text-white class in
   the markup. White on #a31d38 is 7.53:1. */
.card-custom-home p,
.card-custom-home li,
.card-custom-home .card-text,
.card-custom-home .card-title,
.card-custom-home .text-white-50 {
	color: #ffffff !important;
}

/* Bootstrap's .text-muted is too pale on a near-white surface. The testimonials
   section this was written for has been removed; it is kept for the light
   pilot pages and scoped to them, because #55606d on the dark navy would be
   unreadable. */
body.app_page .text-muted,
body.light_page .text-muted {
	color: #55606d !important;
}

/* ---------------------------------------------------------------------------
   HOMEPAGE BANDS: GREY, WHITE, RED.

   Simon: "we're gonna get rid of this blue section... we will go to this
   format, Grey, white, red", and the old hero was "too big".

   The hero photo (hero.jpg) is gone, so the band is a flat light grey and all
   its text flips from white to dark. The navbar is position:fixed, so the top
   padding here is what clears it; do not drop below ~110px or the heading
   slides under the bar.

   Grey is #d8dbe1, darkened one step from the first #e9ebee attempt. It is a
   new surface value, so it belongs in the palette note in section 6 of the
   handover.
--------------------------------------------------------------------------- */
/* .header_hero.hero_grey {
  background-color: #606267b1;
  background-image: none;
} */

/* .header_hero {
  background-image: url(../images/hero.jpg); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.header_hero {
  background-image:
    
    url("../images/Home5.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.hero_grey .single_hero {
  height: auto !important;
  min-height: 0 !important;
  padding: 90px 0 30px !important;
}

.hero_grey .hero_content {
  padding-top: 0;
}

/* The theme sets this heading to a pale grey-blue (#9aa3ad) that was only
   legible over the dark photo. */
.hero_grey .hero_content .hero_title{
  color:#a31d38
}
.hero_grey .hero_content .hero_title_2 {
  color: #ffffff !important;
}

/* The global `p` rule is light grey for the dark pages and would be invisible
   here, hence the override. */
.hero_grey .hero_content p {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   The white band. Heading in brand red on white, which is 7.53:1. Body copy
   stays the dark grey used on every other light page rather than red, because
   a full paragraph of red is hard to read; the red is carried by the heading.
   The four cards keep the standing rule: red surface, white text.
--------------------------------------------------------------------------- */
.home_white {
  background-color: #f4f4f4;
  padding: 70px 0 50px;
}

.home_white .section_title .title {
  color: #a31d38 !important;
}

.home_white .section_title p {
  color: #41474f !important;
}

.icon-circle {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

/* Homepage cards: the icon lives in a .col-sm-2 and the heading in a
   .col-sm-10. Inside a half-width card that 2/12 column computes to roughly
   34px of content box, which is narrower than the 60px circle, so the circle
   overflowed onto the heading at tablet widths. Let the icon column size to
   its content and give the remaining space to the text. Below 576px the
   columns stack as before, so the mobile layout is untouched. */
/* 576px to 767px: two cards sit side by side, so each is only ~300px wide.
   That is too narrow for icon-beside-text; the heading cramps and breaks
   mid-word. Stack the icon above the text instead. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .app-card .card-body > .row > .col-sm-2,
  .app-card .card-body > .row > .col-sm-10 {
    flex: 0 0 100%;
    width: 100%;
  }
  .app-card .card-body > .row > .col-sm-2 {
    margin-bottom: 14px;
  }
}

/* 768px and up there is room for icon beside text. */
@media (min-width: 768px) {
  .app-card .card-body > .row {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .app-card .card-body > .row > .col-sm-2 {
    flex: 0 0 auto;
    width: auto;
  }
  .app-card .card-body > .row > .col-sm-10 {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
}

/* The logo images now declare their intrinsic width/height so the browser
   can reserve space and avoid layout shift. The theme stylesheet only sets
   a width, so without height:auto the browser would honour the height
   attribute and stretch the logo. */
.navbar-brand img,
.navbar-brand-page img,
.footer_logo {
  height: auto;
}

.footer_logo {
  width: 200px;
  max-width: 100%;
}

/* Horizontal overflow fix.
   Bootstrap's .row applies side margins of -(gutter / 2), and .g-5 raises the
   gutter to 3rem, so the row hangs 24px outside its column box. The .container
   only has 12px of padding to absorb that, so below the sm breakpoint (where
   the container is full width and has no spare auto margin) every page using
   .g-5 pushed 12px past the viewport and scrolled sideways. Columns are
   stacked at this width anyway, so the wide gutter buys nothing here. */
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}

/* Long unbroken strings (email addresses, product names) must not force the
   page wider than the screen on narrow phones.
   This uses `anywhere` rather than `break-word` deliberately: both break the
   word visually, but only `anywhere` also reduces the element's min-content
   width. With `break-word` the flex column is still sized to the unbroken
   string, so the column refuses to shrink and the page still scrolls
   sideways. That is exactly what happened to the contact email. */
@media (max-width: 575.98px) {
  body {
    overflow-wrap: anywhere;
  }

  /* Email addresses carry an explicit <wbr> after the "@", so they get a
     clean break at that point instead of the arbitrary mid-word break the
     body rule above would otherwise produce ("...serp.c / om"). break-word
     only breaks a chunk that cannot fit alone, and neither half can be too
     wide, so this stays overflow-safe. */
  .contact_email_link {
    overflow-wrap: break-word;
  }

  /* p-5 is 48px of padding on each side, which leaves barely 240px of content
     on a 360px phone. Roomy on desktop, wasteful and overflow-prone here. */
  .card.p-5,
  .card .p-5 {
    padding: 1.75rem !important;
  }

  /* The contact email is set at fs-5 (20px); 27 characters at that size
     cannot fit a narrow phone. Drop it to body size so it wraps once. */
  .contact_email_link {
    font-size: 1rem !important;
  }
}
/* ---------------------------------------------------------------------------
   Navbar and footer bars in the brand red, per Simon. The white logo
   (logo.png) is used on both, and all navigation text is white.
--------------------------------------------------------------------------- */
.sticky {
  background-color: #a31d38 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22) !important;
}

.sticky .navbar-nav .nav-item a,
.sticky .navbar-nav .nav-item a.nav-link {
  color: #ffffff !important;
}

/* The theme already draws an animated 3px bar under the hovered item via
   .navbar-nav .nav-item a::before. Adding text-decoration here as well drew a
   SECOND line a few pixels higher, so every top-level item showed two
   underlines on hover. The bar is the intended one; the text-decoration is
   not. */
.sticky .navbar-nav .nav-item a:hover,
.sticky .navbar-nav .nav-item a.active {
  color: #ffffff !important;
  text-decoration: none;
}

.sticky .navbar-nav .nav-item a::before {
  background-color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Dropdown items (Apps / Services / Industries).

   The rule above sets every anchor inside .nav-item to white, and it outranks
   the dropdown styling in header-nav.php: ".sticky .navbar-nav .nav-item a"
   is three classes plus an element, while ".navbar .dropdown-menu
   .dropdown-item" is only three classes, so !important on the less specific
   rule loses. The desktop dropdown panel has Bootstrap's white background, so
   the result was white text on white and the submenus read as empty.

   Desktop: white panel, so the items must be dark and only invert on hover.
   Mobile: the panel is transparent over the red navbar, so white is correct
   there and is left alone.
--------------------------------------------------------------------------- */
@media all and (min-width: 992px) {
  .sticky .navbar-nav .nav-item .dropdown-menu .dropdown-item,
  .sticky .navbar-nav .nav-item a.dropdown-item {
    color: #a31d38 !important;
  }

  .sticky .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover,
  .sticky .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus,
  .sticky .navbar-nav .nav-item a.dropdown-item:hover,
  .sticky .navbar-nav .nav-item a.dropdown-item:focus {
    color: #ffffff !important;
    background-color: #a31d38 !important;
  }
}

/* ---------------------------------------------------------------------------
   MOBILE MENU PANEL.

   The theme gives .navbar-collapse a WHITE background below 992px
   (style.css, two media queries), while the rule further up paints every link
   inside .nav-item white to suit the red bar. Below the lg breakpoint that
   combination is white on white, so the expanded menu, top-level items and
   submenus alike, reads as blank. This is the mobile half of the same bug as
   the desktop dropdown.

   Fixed by painting the panel brand red so it reads as the navbar continuing
   downwards. White text is then correct at every level, and the submenu panel
   can stay transparent over it as it already does.
--------------------------------------------------------------------------- */
@media all and (max-width: 991.98px) {
  .sticky .navbar-collapse,
  .sticky .navbar-collapse.show,
  .sticky .navbar-collapse.collapsing {
    background-color: #a31d38 !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22) !important;
  }

  /* Submenu items sit on that red panel, so they stay white, not red. */
  .sticky .navbar-nav .nav-item .dropdown-menu .dropdown-item,
  .sticky .navbar-nav .nav-item a.dropdown-item {
    color: #ffffff !important;
  }

  /* A faint divider so the submenu reads as nested rather than as more
     top-level items. */
  .sticky .navbar .dropdown-menu {
    border-left: 2px solid rgba(255, 255, 255, 0.35) !important;
    margin-left: 6px !important;
  }
}

/* The animated bar belongs to the top-level items only. On a dropdown item it
   painted a stray white rule along the bottom edge of the hovered row. */
.navbar .dropdown-menu .dropdown-item::before,
.sticky .navbar-nav .nav-item .dropdown-menu .dropdown-item::before {
  display: none !important;
}

.sticky .navbar-toggler .toggler-icon {
  background-color: #ffffff !important;
}

.sticky .submenu-toggle {
  color: #ffffff !important;
}

/* Footer: the links band and the credit strip both carry the brand red,
   with the credit strip a shade deeper so the two read as separate rows. */
.contact_area::before {
  background-color: #a31d38 !important;
}

.contact_area .text-dark,
.contact_area .footer_link,
.contact_area p,
.contact_area a {
  color: #ffffff !important;
}

.contact_area .footer_title {
  color: #ffffff !important;
}

.contact_area .footer_link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
   PAGE CANVAS BELOW THE FOOTER.

   On a page shorter than the viewport the area under the footer is painted by
   the canvas, not by any element. The light pilot pages set a white body, so
   that strip turned white and the page appeared to end in a blank band.
   Giving <html> a dark value puts it back. Body backgrounds are unaffected, so
   the light pages stay white where their content actually is.

   Black, matching the credit strip below, so the two read as one band with no
   seam where they meet. This is the theme's original footer colour.
--------------------------------------------------------------------------- */
html {
  background-color: #000000;
}

/* ---------------------------------------------------------------------------
   FOOTER CONTACT ROWS.

   Modelled on the acumens.com footer Simon pointed at: a label on the left with
   its pill button beside it, stacked as two rows.

     Contact Support  [ Contact ]
     Email            [ Send Email ]

   The old "Get in Touch" heading and the "Email: info@commeris.com" line were
   removed on his instruction; the address now lives on the Send Email button.

   The labels share a fixed min-width so both buttons line up vertically
   regardless of label length.

   Both buttons sit on the solid brand-red band, so they use the two brand
   colours only: the primary inverts to white with red text, the secondary is
   outlined in white. No third surface colour and no darker red on hover, so the
   hover feedback is the same lift and glow used everywhere else.
--------------------------------------------------------------------------- */
.footer_touch_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 16px;
}

.footer_touch_row:last-child {
  margin-bottom: 0;
}

.footer_touch_row .footer_title {
  margin-bottom: 0;
  /*min-width: 170px;*/
}

/* These selectors are deliberately three classes deep. Two rules would
   otherwise win and flatten the buttons into plain text:
     - .btn_cta is declared LATER in this file at equal specificity, so its red
       background and border would override a bare .footer_btn.
     - .contact_area a { color:#fff !important } is one class plus an element,
       so it outranks !important on a bare .footer_btn.
   Checked against the rendered page, not assumed. */
.contact_area .footer_touch_row .footer_btn {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #a31d38 !important;
  padding: 9px 24px;
}

.contact_area .footer_touch_row .footer_btn:hover,
.contact_area .footer_touch_row .footer_btn:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #a31d38 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.contact_area .footer_touch_row .footer_btn_alt {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

.contact_area .footer_touch_row .footer_btn_alt:hover,
.contact_area .footer_touch_row .footer_btn_alt:focus {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

@media (max-width: 575.98px) {
  .footer_touch_row .footer_title {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   FOOTER HEIGHT.

   The enquiry form made the fourth column much taller than the other three, so
   the row height is set by the form. On top of that the section carried pt-5
   and pb-5 and the form column carried mb-5, which left roughly 6rem of empty
   red below the last line of content. Padding is trimmed here and the mb-5 was
   removed from the markup; the list columns lose their default bottom margin
   so the short columns do not add to the gap either.
--------------------------------------------------------------------------- */
/* Bottom padding is set here rather than with a pb-* utility so it can be
   tuned to a value between Bootstrap's steps. pb-3 (16px) left the last line
   of links sitting too close to the credit strip; pb-5 (48px) reopened the
   empty band the form used to cause. 32px sits between the two and is a touch
   more than the 24px at the top, which is how footers usually read. */
.contact_area {
  padding-bottom: 32px;
}

.contact_area .single_features ul {
  margin-bottom: 0;
}

.contact_area .single_features p:last-child {
  margin-bottom: 0;
}

.contact_area .footer_title {
  margin-bottom: 0;
}

/* The credit strip is BLACK, not the brand red used by the links band above
   it. This is the theme's original footer colour, restored on request.
   Note for the colour review: black is a surface value that is not in the
   documented palette (one red, the navy, white, two greys), so it is worth
   Simon confirming it alongside the rest. White on black is 21:1. */

/* The contact page briefly had a white footer with red text and the red logo.
   Simon reverted that, so every page is back to the one red footer and the
   body.footer_light rules are gone. If it is ever wanted again, the form
   fields are the hard part: on white they need red borders and dark text,
   because translucent white on white is invisible. */

.footer_area {
  background-color: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 10px;
  padding-bottom: 10px;
}

.footer_area .credit {
  color: #ffffff;
}

/* ===========================================================================
   APP DETAIL PAGE  (pilot: container-leasing-management)
   Light layout modelled on the Acumens app pages Simon referenced: white
   background, centred title, a single vertical feature list, no side boxes
   and no coloured badges. Applied to ONE app page pending his approval.
   =========================================================================== */
body.app_page {
  background-color: #f4f4f4;
}

body.app_page p {
  color: #41474f !important;
}

/* The 150px top padding here used to clear the fixed navbar. The image hero
   above it now does that, so this is ordinary section spacing. */
.app_intro_section {
  padding: 55px 0 20px;
}

.app_features_section,
.app_faq_section {
  padding: 20px 0 60px;
}

.app_closing_section {
  padding: 20px 0 90px;
}

.app_title {
  color: #a31d38;
  font-weight: 700;
  margin-bottom: 14px;
}

.app_tagline {
  color: #1a212d !important;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 26px;
}

.app_lead {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 18px;
}

/* The app description sits alone under the hero and is the first thing read on
   the white part of the page, so it is set noticeably larger than body copy. */
.app_description {
  font-size: 1.3rem;
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 575.98px) {
  .app_description {
    font-size: 1.1rem;
  }
}

/* Section headings, centred with a short red rule beneath, as on Acumens. */
.app_section_title {
  color: #a31d38;
  text-align: center;
  font-weight: 700;
  margin: 40px 0 34px;
  position: relative;
  padding-bottom: 14px;
}

.app_section_title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 74px;
  height: 3px;
  margin-left: -37px;
  background-color: #a31d38;
}

/* Feature list: one column, reading top to bottom. */
.feature_list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
}

.feature_list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  color: #41474f;
  line-height: 1.7;
}

.feature_list li strong {
  color: #1a212d;
}

/* Tick drawn in CSS so it needs no icon font and cannot fail to load. */
.feature_tick {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: #a31d38;
  position: relative;
}

.feature_tick::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

/* FAQs */
.faq_list {
  max-width: 820px;
  margin: 0 auto;
}

.faq_item {
  border-bottom: 1px solid #e6e8ec;
  padding: 18px 0;
}

.faq_item:last-child {
  border-bottom: none;
}

.faq_q {
  color: #1a212d;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.faq_a,
body.app_page .faq_a,
body.light_page .faq_a {
  margin-bottom: 0;
  line-height: 1.75;
  color: #6b6b6e !important;
}

/* ---------------------------------------------------------------------------
   Action buttons. Brand red, with the same lift-and-glow hover the homepage
   "Get Started" button uses, tinted red so it reads on a white background.
--------------------------------------------------------------------------- */
.app_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.btn_cta {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 50px;
  background-color: #a31d38;
  color: #ffffff !important;
  border: 2px solid #a31d38;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn_cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(163, 29, 56, 0.65);
  color: #ffffff !important;
}

.btn_cta_outline {
  background-color: transparent;
  color: #a31d38 !important;
}

.btn_cta_outline:hover {
  background-color: #a31d38;
  color: #ffffff !important;
}

/* AppSource listing URL not supplied yet: shown but clearly not clickable,
   so the layout can be reviewed without a dead link. */
.btn_cta_disabled {
  background-color: transparent;
  border-color: #c8ccd2;
  color: #9aa0a8 !important;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .app_actions .btn_cta { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   CTA BUTTON HOVER.

   Only the homepage "Get Started" and "Contact Us" buttons carried the
   lift-and-glow treatment, because only they have the .btn-glow-light class.
   Every other call to action on the site ("Talk to an Expert", "Request a
   Demo", "Learn More", "Submit Enquiry", "View All Verticals") was a plain
   Bootstrap button with no hover feedback at all. These rules give them the
   same effect without having to touch the class list on every page.

   The glow is white on the dark pages and red on the light ones, since a
   white glow is invisible against a white background.
--------------------------------------------------------------------------- */
.btn-danger,
.btn-outline-light,
.btn-outline-danger,
.btn-light {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, color 0.2s ease;
}

.btn-danger:hover,
.btn-outline-light:hover,
.btn-outline-danger:hover,
.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* On a brand-red card the solid button is inverted to white on red, so the
   white glow still reads. On a white page it would not, so tint it red. */
body.app_page .btn-danger:hover,
body.app_page .btn-outline-danger:hover,
body.light_page .btn-danger:hover,
body.light_page .btn-outline-danger:hover {
  box-shadow: 0 0 15px rgba(163, 29, 56, 0.65);
}

/* Inside a red card the surface is red either way, so keep the white glow. */
body.app_page .card-brand .btn-danger:hover,
body.app_page .card-custom .btn-danger:hover,
body.light_page .card-brand .btn-danger:hover,
body.light_page .card-custom .btn-danger:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------------
   LIGHT PAGE SHELL.

   The app pilot introduced body.app_page. The service and industry pilots need
   the same white shell, so the rules are shared rather than duplicated. Keep
   both names: app_page stays on the app pages, light_page covers the rest.
--------------------------------------------------------------------------- */
body.light_page {
  background-color: #f4f4f4;
}

body.light_page p {
  color: #41474f !important;
}

/* ---------------------------------------------------------------------------
   IMAGE HERO BAND.

   Apps, services and industries all open with the same band: the page image
   under a dark navy gradient. On the light pilots the body text rule above
   would otherwise repaint the hero paragraph dark grey on a dark photo, so the
   hero text colours are restated here at a specificity that wins.

   HEADING COLOUR: brand red, as requested, matching the rest of the site.
   Recording the measurement rather than silently applying it: #a31d38 on this
   gradient is 2.15:1, below even the 3:1 large-text threshold. It is legible
   as shape but not by the contrast standard. The only fixes that keep ONE red
   are a white heading or a light hero surface, both of which were declined.
   Everything else in the band stays white or near-white so the rest of the
   hero reads cleanly.
--------------------------------------------------------------------------- */
.hero_band {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0 50px;
}

/* The app hero carries title, tagline, a paragraph and three buttons, so it
   needs more room than a title-and-button hero. */
.hero_band_tall {
  padding: 140px 0 70px;
}

.hero_band .page_heading,
body.app_page .hero_band .page_heading,
body.light_page .hero_band .page_heading {
  color: #a31d38 !important;
}

.hero_band p,
.hero_band .text-white-50,
body.app_page .hero_band p,
body.app_page .hero_band .text-white-50,
body.light_page .hero_band p,
body.light_page .hero_band .text-white-50 {
  color: #c3cad6 !important;
}

.hero_band .hero_tagline,
body.app_page .hero_band .hero_tagline,
body.light_page .hero_band .hero_tagline {
  color: #ffffff !important;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}

.hero_band .hero_lead,
body.app_page .hero_band .hero_lead,
body.light_page .hero_band .hero_lead {
  color: #d7dde6 !important;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 820px;
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   HERO BUTTONS.

   These were .btn-outline-light: transparent, so they had no background and
   nothing to hover. They now carry a real surface. Only the two brand colours
   are used, no third shade and no darker red on hover, so the hover feedback
   is the lift and glow rather than a colour change.
--------------------------------------------------------------------------- */
/* Borderless by request. The button reads as a solid red pill; its label is
   white on red at 7.53:1, so only the outer edge is soft against the navy. */
.btn_hero {
  background-color: #a31d38;
  border-color: #a31d38;
  color: #ffffff !important;
}

.btn_hero:hover,
.btn_hero:focus {
  background-color: #a31d38;
  border-color: #a31d38;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* Secondary action: the inverse surface, so both are solid and on-brand. */
.btn_hero_alt {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #a31d38 !important;
}

.btn_hero_alt:hover,
.btn_hero_alt:focus {
  background-color: #ffffff;
  color: #a31d38 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* "Download from AppSource": the real URL is still not supplied (handover
   8.9), but it is styled as a full, enabled-looking button by request, so it
   is visually identical to one that works.
   It is still a <span>, not a link, so a click does nothing, and aria-disabled
   keeps the truth available to assistive tech. The visual cue that used to
   warn a reviewer is gone, so this MUST get its real URL before launch: on the
   page it now looks completely ready. */
.btn_hero_pending {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #a31d38 !important;
}

@media (max-width: 575.98px) {
  .hero_band { padding: 100px 0 40px; }
  .hero_band_tall { padding: 110px 0 50px; }
  .hero_actions .btn_cta { width: 100%; text-align: center; }
  .hero_band .hero_tagline { font-size: 1.25rem; }
}

/* A left-aligned variant of the centred section title, for the two-column
   industry layout where a centred heading would float away from its content. */
.app_section_title.title_left {
  text-align: left;
  margin-top: 0;
}

.app_section_title.title_left::after {
  left: 0;
  margin-left: 0;
}

/* Brand-red link on a light surface. Bootstrap's .text-danger is #dc3545,
   a second red, which Simon has ruled out. */
.link_brand {
  color: #a31d38 !important;
  text-decoration: none;
}

.link_brand:hover,
.link_brand:focus {
  color: #a31d38 !important;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   INDUSTRY DETAIL LAYOUT  (pilot: industries/construction)

   Simon's alignment brief, handover 8.3:
     - "How Commeris Helps" must start level with the TOP of the first segment
       card (not the heading above it) and end level with the BOTTOM of the
       second row of segment cards, so its height equals those two rows.
     - "Relevant Solutions" must start level with the TOP of the Common
       Challenges list (again, not its heading).

   A plain two-column float cannot express that, because the right column would
   start at the top of the left column's heading. A named-area grid can: each
   heading occupies a row of its own with the right-hand cell left empty, so the
   boxes begin exactly one row later.

   The segment cards are themselves a 1fr-row grid at height 100%, so they
   stretch to whatever the row ends up being. Without that, a "How Commeris
   Helps" paragraph taller than the cards would grow the row and the bottom
   edges would stop matching.
--------------------------------------------------------------------------- */
.industry_grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 30px;
  row-gap: 0;
  grid-template-areas:
    "seghead   ."
    "segcards  helps"
    "chalhead  ."
    "challist  solutions";
  align-items: stretch;
}

.industry_grid > .ind_seghead   { grid-area: seghead; }
.industry_grid > .ind_segcards  { grid-area: segcards; }
.industry_grid > .ind_chalhead  { grid-area: chalhead; }
.industry_grid > .ind_challist  { grid-area: challist; }
.industry_grid > .ind_helps     { grid-area: helps; }
.industry_grid > .ind_solutions { grid-area: solutions; }

/* The gap between the two blocks is carried by the second heading, so the
   grid rows stay exactly as tall as their content and the edges line up. */
.industry_grid > .ind_chalhead {
  margin-top: 44px;
}

.ind_segcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  height: 100%;
}

.ind_segcards > .card,
.ind_helps,
.ind_solutions {
  margin: 0;
  height: 100%;
}

.ind_challist {
  margin: 0;
}

/* Challenges read as problems, not features, so they take a plain red marker
   rather than the tick used for capabilities. */
.challenge_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.challenge_list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  line-height: 1.7;
  color: #41474f;
}

.challenge_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #a31d38;
}

/* Below the lg breakpoint there is no room for two columns, so everything
   stacks in source order and the stretch rules are switched off. */
@media (max-width: 991.98px) {
  .industry_grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "seghead"
      "segcards"
      "chalhead"
      "challist"
      "helps"
      "solutions";
  }

  .ind_segcards {
    grid-template-rows: auto;
    height: auto;
  }

  .ind_segcards > .card,
  .ind_helps,
  .ind_solutions {
    height: auto;
  }

  .industry_grid > .ind_helps {
    margin-top: 44px;
  }

  .industry_grid > .ind_solutions {
    margin-top: 24px;
  }
}

@media (max-width: 575.98px) {
  .ind_segcards {
    grid-template-columns: minmax(0, 1fr);
  }
}

#faqs,
#faqs + section.pb-100 {
  background-color: #f4f4f4 !important;
}

.industry_grid .card-brand:hover,
.industry_grid .card-custom:hover,
.industry_grid .card:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}