/* GENERATED by css-bundle.php (325c0dfa) from: faq-index.css, final-card.css, mobile-navbar.css, responsive-fixes.css, typography.css, hero-colours.css, card-titles.css, quote-modal.css. Do not edit; edit the sources. */

/* ==== faq-index.css ==== */
/* Shared FAQ section (copy of the index.php #faq block, 2026-10-29). Markup comes from faq-index.php: maroon band, intro and art on the left, white accordion panel on the right. */
#faq { position: relative; overflow: hidden; background: #470000; }
#faq::before { content: ""; position: absolute; left: 43%; top: -330px; width: 440px; height: 440px; border-radius: 50%; background: rgba(255, 0, 0, .14); pointer-events: none; }
#faq .container { position: relative; z-index: 1; }
#faq .faq-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 992px) { #faq .faq-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
#faq .faq-intro { position: relative; padding: 0; border-radius: 0; background: none; color: #fff; }
#faq .faq-intro::before { content: none; }
#faq .faq-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 16px; border-radius: 999px; background: #fff; color: #470000; font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
#faq .faq-kicker i { color: #ff0000; font-size: 14px; }
#faq .faq-title { position: relative; margin: 0 0 20px; color: #fff; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
#faq .faq-title span { display: block; color: #ff0000; }
#faq .faq-rule { display: block; width: 44px; height: 2px; margin: 0 0 30px; border-radius: 2px; background: #ff0000; }
#faq .faq-art { display: block; width: min(100%, 380px); height: auto; overflow: visible; }

#faq .faq-right { padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
#faq .hp-faq-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
#faq .hp-faq-item { border: 0; border-bottom: 1px solid #f6d6d6; border-radius: 10px; background: transparent; overflow: hidden; transition: background .2s ease; }
#faq .hp-faq-item:last-child { border-bottom-color: transparent; }
#faq .hp-faq-item:hover, #faq .hp-faq-item[open] { border-bottom-color: transparent; background: #fadcdc; }
#faq .hp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 18px; color: #470000; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
#faq .hp-faq-item summary:focus-visible { outline: 2px solid #ff0000; outline-offset: -3px; }
#faq .hp-faq-item summary::-webkit-details-marker { display: none; }
#faq .hp-faq-q { flex: 1 1 auto; min-width: 0; }
#faq .hp-faq-item summary::after { content: "+"; flex: 0 0 24px; width: 24px; background: none; color: #ff0000; font-size: 24px; font-weight: 700; line-height: 1; text-align: center; }
#faq .hp-faq-item[open] summary { background: none; color: #470000; }
#faq .hp-faq-item[open] summary::after { content: "\2212"; background: none; color: #ff0000; }
#faq .hp-faq-item p { margin: 0; padding: 0 56px 18px 18px; color: #470000; font-size: 16px; line-height: 1.65; }
#faq .hp-faq-item[open] p { animation: faq-in .25s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 575px) { #faq .faq-right { padding: 8px; border-radius: 18px; } #faq .hp-faq-item summary { gap: 12px; padding: 12px 12px; } #faq .hp-faq-item p { padding: 0 14px 16px 12px; } #faq .faq-art { width: min(100%, 280px); } }
section#faq.faq-shared { padding-top: 50px; padding-bottom: 50px; }
#faq .faq-title:not(#_) { font-size: var(--fs-h2, 45px); }
#faq .hp-faq-item p a { color: #ff0000; text-decoration: underline; }
#faq .faq-lead { margin: 0 0 24px; color: #f6d6d6; font-size: 16px; line-height: 1.6; }

/* Section tone system (2026-10-31): the FAQ is a normal section now, so it can be white, burgundy or pink.
   The default look above is the burgundy one; these rules keep the panel and the illustration readable on the light tones. */
#faq[data-ss="w"] .faq-right, #faq[data-ss="p"] .faq-right { border: 1px solid rgba(71, 0, 0, .12); box-shadow: 0 18px 50px rgba(71, 0, 0, .12); }
#faq[data-ss="w"] .faq-art { background: radial-gradient(circle at 50% 56%, rgba(255, 0, 0, .09) 0 58%, transparent 59%); filter: drop-shadow(0 16px 26px rgba(71, 0, 0, .16)); }
#faq[data-ss="p"] .faq-art { background: radial-gradient(circle at 50% 56%, rgba(255, 255, 255, .6) 0 58%, transparent 59%); filter: drop-shadow(0 16px 26px rgba(71, 0, 0, .16)); }
#faq[data-ss="w"]::before, #faq[data-ss="p"]::before { background: rgba(255, 0, 0, .07); }
#faq[data-ss="w"] .hp-faq-item:hover, #faq[data-ss="w"] .hp-faq-item[open], #faq[data-ss="p"] .hp-faq-item:hover, #faq[data-ss="p"] .hp-faq-item[open] { background: rgba(255, 0, 0, .06); }

/* ===== FAQ layout (2026-11-02): centred head (pill, title, short rule), then the questions as white cards in two columns =====
   Layout only: section backgrounds and the heading / pill colours still come from the section tone (css/section-system.css).
   Written with a high-specificity selector so it also wins over the page-specific copies of this block (contact, case study, get a quote,
   industries, insights, about, home). The illustration is not part of this layout. */
html body section#faq .faq-split:not(#_), html body section#faq .faq-left:not(#_) { display: block; }
html body section#faq .faq-intro:not(#_) { text-align: center; }
html body section#faq .faq-kicker:not(#_) { margin: 0 auto 18px; }
html body section#faq .faq-title:not(#_) { max-width: 1000px; margin: 0 auto 18px; text-align: center; }
html body section#faq .faq-title span:not(#_) { display: inline; }
html body section#faq .faq-rule:not(#_) { margin: 0 auto 34px; }
html body section#faq .faq-lead:not(#_) { max-width: 760px; margin: 0 auto 28px; text-align: center; }
html body section#faq .faq-art:not(#_) { display: none; }
html body section#faq .faq-right:not(#_) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html body section#faq .hp-faq-list:not(#_) { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--faq-rows, 4), auto); gap: 0 22px; align-items: start; margin: 0; }
html body section#faq .hp-faq-list.is-cols:not(#_) { grid-auto-flow: row; grid-template-rows: none; }
html body section#faq .hp-faq-col:not(#_) { display: flex; flex-direction: column; min-width: 0; }
html body section#faq .hp-faq-item:not(#_) { display: block; margin: 0 0 14px; border: 1px solid rgba(71, 0, 0, .12); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 8px rgba(71, 0, 0, .05); transition: border-color .2s ease, box-shadow .2s ease; }
html body section#faq .hp-faq-item:not(#_):hover, html body section#faq .hp-faq-item[open]:not(#_) { border-color: rgba(255, 0, 0, .4); background: #fff; box-shadow: 0 8px 22px rgba(71, 0, 0, .1); }
html body section#faq .hp-faq-item summary:not(#_) { min-height: 72px; padding: 20px 26px; font-size: 18px; line-height: 1.35; }
html body section#faq .hp-faq-item p:not(#_) { padding: 0 60px 22px 26px; }
@media (max-width: 767px) {
  html body section#faq .hp-faq-list:not(#_) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  html body section#faq .hp-faq-item summary:not(#_) { min-height: 60px; padding: 16px 18px; font-size: 17px; }
  html body section#faq .hp-faq-item p:not(#_) { padding: 0 18px 18px 18px; }
}


/* ==== final-card.css ==== */
/* Last section of every page (home page #inquiry look, 2026-10-29): a white band holding one rounded maroon card with soft red glows,
   a dot grid and a deep shadow. Add class "final-card" to the page's last <section> (its direct child .container becomes the card).
   Content is untouched; only background and shape change. Text inside is white, #ff0000 is kept for accents. */
html body section.final-card:not(#_) { position: relative; overflow: visible; background: #fff; background-image: none; padding-top: 50px; padding-bottom: 50px; color: #fff; }
html body section.final-card:not(#_)::before, html body section.final-card:not(#_)::after { content: none; display: none; }
html body section.final-card:not(#_) > .container { position: relative; overflow: clip; box-sizing: border-box; width: calc(100% - 24px); max-width: 1476px; margin-inline: auto; padding: clamp(28px, 3.4vw, 52px); border-radius: 26px; background: #470000; box-shadow: 0 26px 60px rgba(71, 0, 0, .28); color: #fff; }
html body section.final-card:not(#_) > .container::before { content: ""; display: block; position: absolute; right: -90px; top: -330px; left: auto; bottom: auto; width: 560px; height: 560px; border-radius: 50%; background: rgba(255, 0, 0, .1); pointer-events: none; }
html body section.final-card:not(#_) > .container::after { content: ""; display: block; position: absolute; left: 34%; bottom: -400px; right: auto; top: auto; width: 620px; height: 620px; border-radius: 50%; background: rgba(255, 0, 0, .1); pointer-events: none; clear: none; }
html body section.final-card:not(#_) > .container > * { position: relative; z-index: 1; }
html body section.final-card:not(#_) :is(h1, h2, h3, h4, p, li, span, strong, a:not(.global-cta):not(.global-cta)){ color: inherit; }
html body section.final-card:not(#_) :is(h2, .final-card__title) { color: #fff; }
/* dot grid accent like the home page contact box */
html body section.final-card:not(#_) > .container > :first-child::after { content: ""; position: absolute; left: -10px; bottom: -22px; z-index: -1; width: 130px; height: 110px; background-image: radial-gradient(#ff0000 1.6px, transparent 1.8px); background-size: 16px 16px; opacity: .6; pointer-events: none; }
@media (max-width: 575px){ html body section.final-card:not(#_) { padding-top: 36px; padding-bottom: 36px; } html body section.final-card:not(#_) > .container { width: calc(100% - 24px); border-radius: 20px; padding: 24px 18px; } }
/* arrow glyphs inside circles stay white even in white inner cards (the span colour rule above would make them inherit the card text colour) */


/* ==== mobile-navbar.css ==== */
/* ==========================
   Mobile Sidebar
========================== */

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 15px rgba(0,0,0,.2);
    overflow-y: auto;
    transition: left .3s ease;
    z-index: 1040;
}

.mobile-sidebar.active{
    left:0;
}

.mobile-sidebar .nav{
    flex-direction:column;
}

.mobile-sidebar .nav-link{
    display:flex;
    align-items:center;
    padding:14px;
    color:#333;
    border-bottom:1px solid #f0f0f0;
}

.mobile-sidebar .nav-link:hover{
    background:#f9f9f9;
    color:#0066cc;
}

.mobile-sidebar .nav-link i{
    width:20px;
    margin-right:10px;
}

.mobile-sidebar .dropdown-menu{
    position:static;
    float:none;
    width:100%;
    margin:0;
    padding:0;
    border:none;
    box-shadow:none;
    background:#f9f9f9;
    font-size:12px;
    max-height:0;
    overflow-y:auto;
    transition:max-height .3s ease;
}

.mobile-sidebar .dropdown-menu.show{
    max-height:250px;
}

.mobile-sidebar .dropdown-item{
    display:flex;
    align-items:center;
    padding:10px 20px;
    color:#1A4D7F;
    border-bottom:1px solid #e0e0e0;
}

.mobile-sidebar .dropdown-item:hover,
.mobile-sidebar .dropdown-item:first-child{
    background:#f9f9f9;
    color:#333;
}

.mobile-sidebar .dropdown-item i{
    margin-left:10px;
    color:#ff0000;
}

/* ==========================
   General
========================== */

li a i{
    color:#ff0000;
}

.nav-link:hover,
.nav-link:focus{
    color:#ff0000 !important;
}

.size-20{
    font-size:16px;
}

.Global-white{
    background:#fff;
    border-radius:50%;
}

/* ==========================
   Hamburger
========================== */

.mobile-menu-toggle{
    display:none;
    background:none;
    border:none;
    padding:8px 12px;
    font-size:24px;
    cursor:pointer;
    z-index:1001;
}

.mobile-menu-toggle i{
    color:#ff0000;
}

/* ==========================
   Overlay
========================== */

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    display:none;
    opacity:0;
    transition:opacity .3s ease;
    z-index:1030;
}

.sidebar-overlay.active{
    display:block;
    opacity:1;
}

/* ==========================
   Close Button
========================== */

.sidebar-close{
    position:absolute;
    top:15px;
    right:15px;
    background:none;
    border:none;
    color:#333;
    font-size:24px;
    cursor:pointer;
}

/* ==========================
   Topbar
========================== */

.topbar{
    display:none;
}

/* ==========================
   Mobile
========================== */

@media (max-width:991.98px){

    .mobile-menu-toggle{
        display:block;
    }

    .topbar{
        display:block;
    }

    .navbar{
        padding:10px 0;
    }

    .navbar-brand{
        margin-left:1rem;
        margin-right:auto;
    }

    .navbar-collapse{
        display:none !important;
    }

    .navbar .container{
        display:flex;
        align-items:center;
        position:relative;
    }

    .mobile-icons{
        position:absolute;
        top:50%;
        right:55px;
        transform:translateY(-50%);
        display:flex !important;
        align-items:center;
        z-index:1000;
    }

    .mobile-icons .dropdown-menu{
        min-width:150px;
        right:0;
        left:auto;
        margin-top:12px;
    }

    .mobile-icons .dropdown-item{
        display:flex;
        align-items:center;
        gap:10px;
        white-space:nowrap;
    }

    .mobile-icons .nav-link{
        color:#000 !important;
        font-weight:600;
    }

    .mobile-icons .nav-link:hover,
    .mobile-icons .nav-link:focus,
    .mobile-icons .nav-link:active{
        color:#000 !important;
    }

    .mobile-icons .nav-link i{
        color:#ff0000 !important;
    }

    .mobile-icons .nav-link img{
        filter:none;
    }
}

/* ==========================
   Desktop
========================== */

@media (min-width:992px){

    .mobile-sidebar,
    .mobile-menu-toggle,
    .sidebar-overlay{
        display:none !important;
    }

    .navbar-collapse{
        display:flex !important;
    }

    .topbar{
        display:block;
    }
}

/* ==== responsive-fixes.css ==== */
/* =========================================================
   responsive-fixes.css  (2026-10-23)
   Shared, low-specificity responsive safety layer. Loaded last by the
   head files (head-open.php, in/head-open.php, ae/ng/sp headers) so it
   sits on top of style-*.css without editing those large files.
   Page-specific problems are fixed in the page / template itself.
========================================================= */

/* 0. Brand red: one value for the whole site (#FF0000). Use var(--brand-red) for solid red and
   rgba(var(--brand-red-rgb), .12) for translucent red so no other red shade is introduced. */
:root { --brand-red: #ff0000; --brand-red-rgb: 255, 0, 0; }

/* 1. Root overflow guard.
   Animated or decorative elements (AOS slide-ins, particles, glow circles) must never create a sideways scroll
   or let a phone pan the page. Applied at the root so position:sticky headers keep working. */
html { overflow-x: clip; }

/* 1b. Scroll lock. Menus and modals lock the page with document.body.style.overflow = "hidden" (Bootstrap uses the same, plus .modal-open).
   Because html now carries the guard above, body's overflow is no longer handed to the viewport, so the lock is mirrored onto html here. */
html:has(body[style*="overflow: hidden"]),
html:has(body[style*="overflow:hidden"]),
html:has(body.modal-open) { overflow: hidden; }

/* 2. Media never wider than its container; images keep their aspect ratio when capped. */
img, video, canvas, iframe, embed, object { max-width: 100%; }
img { height: auto; }

/* 3. Long words / URLs wrap instead of pushing the layout wider. */
h1, h2, h3, h4, h5, h6, p, li, dd, blockquote, figcaption, label, summary { overflow-wrap: break-word; }

/* 4. Code and pre-formatted blocks scroll inside themselves. */
pre { max-width: 100%; overflow-x: auto; }

/* 5. Headings that carry an old fixed inline pixel size (45px / 55px / 30px) are scaled down on phones.
   Inline styles can only be beaten with !important; the attribute selectors keep this limited to those headings. */
@media (max-width: 767px){
    h1[style*="font-size:55px"], h1[style*="font-size: 55px"],
    h2[style*="font-size:45px"], h2[style*="font-size: 45px"] {
        font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
        line-height: 1.2 !important;
    }
    h3[style*="font-size:30px"], h3[style*="font-size: 30px"] {
        font-size: clamp(1.35rem, 5.6vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }
}

/* 6. Intro slide-in used on several heroes: a shorter travel distance on small screens. */
@media (max-width: 767px){
    @keyframes heroSlideIn {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }
}

/* 7. Touch targets: about 44px high on touch devices. */
@media (pointer: coarse){
    .btn, .btn-round, .an2-btn{ min-height: 44px; }
}

/* 8. Keyboard focus is always visible (:where keeps specificity at zero so any page-specific outline still wins). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #ff0000;
    outline-offset: 2px;
}

/* 9. Respect "reduce motion": animations and transitions finish instantly (end state is still reached). */
@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. Small labels never drop below a readable size on phones (selectors prefixed with `body` so they beat the page-level rules
   that set 9-10.5px; named after the elements the audit found on /career, /about, /solutions, /case-study and one service page). */
@media (max-width: 767px){
    body .badge-strip .badge { font-size: 12px; }
    body .technology-item span { font-size: 12px; }
    body .delivery-badge-content span { font-size: 11px; }
    body .solh-faq-answer-number, body .solh-faq-answer-label, body .solh-cta-label, body .solh-crm-node span { font-size: 11px; }
    body .cs-item-type, body .cs-eyebrow { font-size: 12px; }
    body .hv-title { font-size: 11px; }
}

/* 11. Text links that act as buttons ("Read more", "Explore ...") get a comfortable tap height on touch screens. */
@media (pointer: coarse){
    .read-more-btn, .sv2-more, .blog-card-link, .cs-item-link, .solh-category-link, .solh-map-link, .bfbtn, .mfd-topic-btn, a.indh-rel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    div.indh-rel a, .hdd-rel a, .sv2-rel a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* 12. Breadcrumb links, topic buttons and card links: comfortable tap height on touch screens. */
@media (pointer: coarse){
    .bcx li a { min-height: 44px; }
    .insh-links button, .industry-modern-card__body a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 13. Remaining touch-target groups found by the final audit:
   service-page related links, the legal contents list, the regional header icons and the regional social icons. */
@media (pointer: coarse){
    .sv3-rlinks a, .tos-sidebar nav a { display: flex; align-items: center; min-height: 44px; }
    .mobile-icons a, .nav-item.gap-4 a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}

/* 14. Decorative micro labels found at desktop widths: raised to a readable size (these sit in circles / chips that have room for 11px). */
body .delivery-badge-content span { font-size: 11px; }
body .badge-strip .badge { font-size: 12px; }
body .solh-journey-number, body .solh-faq-answer-number, body .solh-faq-answer-label, body .solh-cta-label, body .solh-crm-center small, body .solh-tech-center small { font-size: 11px; }

/* 15. Regional headers (in / ae / ng / sp). The 8-9 icon + label items need roughly 1000-1100px next to the logo, more than the Bootstrap
   container offers between 992px and 1365px, so the last item ran past the screen edge (and the root clip hid it).
   992-1199px: icons are dropped and spacing tightened. 1200-1365px: icons stay, spacing and type are one step smaller.
   From 1366px up the menu is unchanged. */
@media (min-width: 992px) and (max-width: 1199px){
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link { padding-left: 10px; padding-right: 10px; font-size: 15px; }
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link > i:first-child { display: none; }
}
@media (min-width: 1200px) and (max-width: 1365px){
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link { padding-left: 10px; padding-right: 10px; font-size: 15px; }
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link > i:first-child { margin-right: 6px !important; }
    .navbar .navbar-brand { flex-basis: 200px; }
}

/* 16. The regional logos sit in a fixed box (150-180 x 40px) whose proportions differ from the image, which squeezed the logo by up to 26%.
   contain keeps the box and the layout, and restores the artwork's own proportions. */
.navbar-brand img { object-fit: contain; object-position: left center; }

/* 17. Touch comfort for two small text-link groups on the regional pages: the "Let's Connect" pill and the state / city link lists. */
@media (pointer: coarse){
    .connect-btn { display: inline-flex; align-items: center; min-height: 36px; }
    .city-grid-list .city-link { padding-top: 8px; padding-bottom: 8px; }
}


/* ==== typography.css ==== */
/* =========================================================
   ALIVE INC. TYPOGRAPHY SYSTEM  (css/typography.css)
   One place for every type decision on the site: font family, the heading scale, body / card / lead text,
   eyebrows, buttons, navigation, forms and the footer. Pages and templates keep their own layout CSS;
   this file only decides how text looks.

   How it wins: it loads after the template styles and every selector below is prefixed `html body`
   (and, where a template uses deeper class chains, boosted with :not(#_)). That out-ranks class based
   template rules without !important. Text that carries an inline style="" attribute (icons, big stat numbers,
   a few labels) is left alone on purpose.

   Scale (desktop / tablet <=1023px / mobile <=767px):
     H1 55 / 48 / 37   H2 45 / 36 / 32   H3 32 / 28 / 25   H4 24 / 22 / 21   H5 20   H6 18
     body 16, card text 16, lead 18, eyebrow 15 / 14, button 16, small 14, meta 13
   Archivo is loaded in 400-700; weights above 700 render as 700, so 800 is declared only where the
   design has always asked for the heaviest cut.
========================================================= */
:root {
    --ff-base: Archivo, sans-serif;

    --fs-h1: 55px;  --lh-h1: 1.15;  --fw-h1: 800;  --ls-h1: -.015em;
    --fs-h2: 45px;  --lh-h2: 1.2;   --fw-h2: 800;  --ls-h2: -.015em;
    --fs-h3: 32px;  --lh-h3: 1.25;  --fw-h3: 700;  --ls-h3: -.01em;
    --fs-h4: 24px;  --lh-h4: 1.3;   --fw-h4: 700;  --ls-h4: 0;
    --fs-h5: 20px;  --lh-h5: 1.35;  --fw-h5: 700;  --ls-h5: 0;
    --fs-h6: 18px;  --lh-h6: 1.4;   --fw-h6: 700;  --ls-h6: 0;

    --fs-body: 16px;       --lh-body: 1.65;       --fw-body: 400;
    --fs-lead: 18px;       --lh-lead: 1.6;
    --fs-card-text: 16px;  --lh-card-text: 1.55;
    --fs-list: 16px;       --lh-list: 1.55;

    --fs-eyebrow: 15px;    --lh-eyebrow: 1.3;     --fw-eyebrow: 700;  --ls-eyebrow: .12em;
    --fs-btn: 16px;        --lh-btn: 1.2;         --fw-btn: 700;
    --fs-nav: 15px;        --lh-nav: 1.3;         --fw-nav: 600;
    --fs-chip: 14px;       --fw-chip: 600;
    --fs-label: 14px;      --fw-label: 600;
    --fs-input: 16px;
    --fs-footer-link: 15px;
    --fs-small: 14px;      --lh-small: 1.5;
    --fs-meta: 13px;       --lh-meta: 1.5;
}
@media (max-width: 1023px){
    :root {
        --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px;
        --fs-eyebrow: 14px;
    }
}
@media (max-width: 767px){
    :root {
        --fs-h1: 37px; --fs-h2: 32px; --fs-h3: 25px; --fs-h4: 21px;
        --fs-eyebrow: 14px;
        --lh-h1: 1.15; --lh-h2: 1.2;
    }
}


/* ---------------------------------------------------------
   1. FONT FAMILY: Archivo everywhere text is set (icon fonts, code and the logo artwork are left alone)
--------------------------------------------------------- */
html body { font-family: var(--ff-base); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); }
html body :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, small, blockquote, figcaption, summary, input, textarea, select, button, .h1, .h2, .h3, .h4, .h5, .h6):not(#_) { font-family: var(--ff-base); }

/* ---------------------------------------------------------
   2. HEADINGS (by level). Every <h2> is a section title, every <h1> a page title.
   Card, step and list-item titles are <h3>/<h4>/<h5> in the templates; they use the H5 / H6 tokens (section 3).
--------------------------------------------------------- */
html body :is(h1, .h1):not(#_) { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
/* Global site only (root templates mark <html data-site="global">; /in/ and the other country sites do not): every page title is #470000. The doubled :not(#_) outranks page-level hero rules without !important. */
html[data-site="global"] body h1:not(#_):not(#_) { color: #470000; }
html body :is(h2, .h2):not(#_) { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
html body :is(h3, .h3):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
html body :is(h4, .h4):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(h5, .h5):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
html body :is(h6, .h6):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
/* Bootstrap size helpers win over the tag they sit on (e.g. <h4 class="h5">) */
html body :is(h1, h2, h3, h4, h5, h6).h1:not(#_) { font-size: var(--fs-h1); line-height: var(--lh-h1); }
html body :is(h1, h2, h3, h4, h5, h6).h2:not(#_) { font-size: var(--fs-h2); line-height: var(--lh-h2); }
html body :is(h1, h2, h3, h4, h5, h6).h3:not(#_) { font-size: var(--fs-h3); line-height: var(--lh-h3); }
html body :is(h1, h2, h3, h4, h5, h6).h4:not(#_) { font-size: var(--fs-h4); line-height: var(--lh-h4); }
html body :is(h1, h2, h3, h4, h5, h6).h5:not(#_) { font-size: var(--fs-h5); line-height: var(--lh-h5); }
html body :is(h1, h2, h3, h4, h5, h6).h6:not(#_) { font-size: var(--fs-h6); line-height: var(--lh-h6); }

/* Headings that are not section titles: sub-section CTA titles, accordion wrappers, uppercase mini labels, legal clauses, article subheads */
html body h3.fw-bold:not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }
html body :is(.accordion-header):not(#_) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
html body :is(.s2-sum h2, .sl3-groups h3, .hub-anchor h3, .mfd-header h3, .abt-eyebrow):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
html body :is(.tos-content h2, .tos-section h2, .lm-box h2):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.hb-hero h2):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.iv3-faq h3, .sv3-faq h3, .sl3-faq h3, .hp-faq-item h3):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); }

/* Article / long-form reading: sub-headings step down one level (H2 -> H3 size, H3 -> H4, H4 -> H5) so the page title stays the biggest thing */
html body :is(.post-body h2):not(#_) { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
html body :is(.post-body h3):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.post-body h4):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }

/* Titles of cards inside the templates that are <h3>/<h4> but small by design: keep them on the H5 token, and the blog card title one step smaller */
html body :is(.blog-card-title, .wsg-card-title, .commitment-title, .bento-card h4, .premium-card h4, .tech-box h4):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); }


/* ---------------------------------------------------------
   3. BODY TEXT
   p / li: 16px. Lead paragraphs (hero introductions) 18px. Card text keeps the tighter 1.55 line-height.
--------------------------------------------------------- */
html body p:not(#_) { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); }
html body :is([class*="card"], [class*="tile"], [class*="-mod"], [class*="step"], [class*="-row"], [class*="why-"], [class*="feature-info"], [class*="-item"]) p:not(#_) { line-height: var(--lh-card-text); }
html body :is(.sv3-problem, .sl3-intro, .iv3-intro, .s2-intro p, .lf-hero p, .hb-hero p, .sp-hero p, .header-inner-title p, .hero-p, .s2-final p, .iv3-hero .iv3-intro, .recognition-header p, .ins-hero-text p, .hp-hero-lead-in):not(#_) { font-size: var(--fs-lead); line-height: var(--lh-lead); }
html body :is(.post-body p, .post-body li):not(#_) { font-size: var(--fs-body); line-height: 1.75; }
html body :is(.post-body > p:first-of-type):not(#_) { font-size: var(--fs-lead); line-height: 1.7; }
html body :is(li, dd, dt):not(#_) { font-size: var(--fs-list); line-height: var(--lh-list); }

/* small text and metadata: captions, meta lines, card excerpts, table cells */
html body :is(.portfolio-desc, .blog-card-excerpt, .support-text, .tech-item p, .process-row .content p, .wsg-card-summary, .post-meta, .post-crumb, .post-toc-list a, .post-share a, .post-share button, .post-back, .blog-card-meta, .iv3-gname, .sl3-gname, .portfolio-outcome, .tos-content p.disclaimer):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }
html body :is(.post-author-role, .post-body figcaption, .mfd-label):not(#_) { font-size: var(--fs-meta); line-height: var(--lh-meta); }
html body :is(.alv-consent__text):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------------------------------------------------------
   4. EYEBROW LABELS: 15px / 700 / .12em, always uppercase
--------------------------------------------------------- */
html body :is(.hp-kicker, .sv3-eyebrow, .sv3-kicker, .sl3-kick, .sl3-tag, .iv3-eyebrow, .iv3-tag, .sv3-tag, .sol-eyebrow, .hb-eyebrow, .sv2-kicker, .csx-cards-eyebrow, .cs-eyebrow, .lf-eyebrow, .lf-tag, .sp-eyebrow, .sp-tag, .s2-tag, .rt2-kicker, .hire2-kicker, .crm2-kicker, .post-cat-pill, .benefits-eyebrow, .tech-collection-count, .fq3-sub, .hp-topics-eyebrow, .ticket-kicker, .process-kicker, .hero-eyebrow, .section-tag):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* ---------------------------------------------------------
   5. BUTTONS: 16px / 700. Colours, shapes and hover effects stay with each button's own CSS.
--------------------------------------------------------- */
html body :is(.btn, .btn1, .global-cta, .global-cta, .sv3-btn, .sl3-btn, .iv3-btn, .hp3-more, .hp3-ctabar-btn, .ow3-btn, .read-more-btn, .btn-read-more, .btn-apply-card, .s2-sumbtn, .cta-rounded-red, .alv-consent__btn, .hp-inq-submit, .rs-cta, button[type="submit"], input[type="submit"]):not(#_){ font-size: var(--fs-btn); font-weight: var(--fw-btn); line-height: var(--lh-btn); letter-spacing: 0; text-transform: none; }
html body :is(.btn1, .btn):not(#_) { text-transform: none; }

/* filter chips, tabs and tags */
html body :is(.portfolio-filter-btn, .mfd-topic-btn, .bfbtn, .elite-pill, .dash-tab, .hp3-chip, .sl3-tech span, .iv3-chips span, .sp-tech span, .blog-tag, .btag):not(#_) { font-size: var(--fs-chip); font-weight: var(--fw-chip); line-height: 1.3; letter-spacing: 0; text-transform: none; }

/* FAQ questions: H6 token */
html body :is(.accordion-button, .sv3-faq summary, .fq3-card summary, .sl3-faq summary, .hp-faq-item summary, button.btn.collapsed):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); text-transform: none; }

/* ---------------------------------------------------------
   6. FORMS: label 14/600, fields 16/400 (16px also stops iOS zooming into a field), messages 13-14
--------------------------------------------------------- */
html body :is(label, .form-label):not(#_) { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4; letter-spacing: 0; text-transform: none; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select, .form-control, .form-select):not(#_) { font-size: var(--fs-input); font-weight: var(--fw-body); line-height: 1.5; }
html body :is(.invalid-feedback, .form-text, .help-block, .error-message):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------------------------------------------------------
   7. NAVIGATION (header)
   Menu links (16px / 600), sub-menu links (15px / 600) and the compact header buttons are sized by the header files and already
   match the scale; the list reset below only stops the body list size from reaching menu items.
--------------------------------------------------------- */
html body :is(header, nav, .an2-header, .an2-menu, .navbar) li:not(#_) { font-size: inherit; line-height: inherit; }

/* ---------------------------------------------------------
   8. FOOTER
--------------------------------------------------------- */
html body :is(footer h6, .footer-title):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); letter-spacing: 0; }
html body :is(footer li, footer li a, .footer-links a, .ft2-list a, .ft2-group a):not(#_) { font-size: var(--fs-footer-link); line-height: 1.6; }
html body :is(.ft2-tag):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }
html body :is(.ft2-blurb):not(#_) { font-size: var(--fs-body); line-height: var(--lh-body); }
html body :is(footer p.mb-0, footer .copyright p):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }


/* ---------------------------------------------------------
   9. COMPONENT EXCEPTIONS (found by comparing every page before / after this file existed)
--------------------------------------------------------- */
/* An <h4> that is a card / panel / tile title uses the H5 token; an <h4> that is a section subtitle keeps the H4 token */
html body :is([class*="card"], [class*="tile"], [class*="panel"], [class*="why-alive"], [class*="bento"], [class*="premium"], [class*="-mod"], [class*="project"]) h4:not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); text-transform: none; }
html body :is(.accordion-icon h4):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }

/* Large panel / featured-item titles are H3 */
html body :is(.sol-panel h4, .ins-feature h5, .hp-topics-head h4):not(#_) { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

/* Uppercase label headings inside bands and cards use the eyebrow token */
html body :is(.hp-region__item-top h4, .ai2-intro-services-heading h4):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* Section subtitles (the line under a section title) are H4 */
html body :is(p.hp-sub, .hp-sub, .sol-new-subtitle, .hb-h3, .iv3-split-sub):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

/* Lead paragraphs that are not named above */
html body :is(.hp-hero-connect, .hp-region__intro):not(#_) { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* Footer copyright 14px; the cookie-banner buttons stay compact */
html body :is(.ft2-bottom p, footer .copyright p, footer p.mb-0):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }
html body .alv-consent__btns .alv-consent__btn:not(#_) { font-size: var(--fs-small); line-height: 1.3; }

/* ---------------------------------------------------------
   10. TEMPLATE EXCEPTIONS (second pass: every page compared before / after)
--------------------------------------------------------- */
/* h2 / p used as a card title: H4 (large content cards) or H5 (small cards) */
html body :is(.s2-card h2):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.indh-card h2, p.card-title, .solh-journey-step h4, .solh-tech-item h4):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }

/* a heading that sits under the page title as its subtitle: H4 */
html body :is(.solh-hero h2, .sv2-hero h2, .indh-hero-content h2, .abt-lead, .abt-final-lead, .abt-hero-sub, .abt-copy h3.abt-sub):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.abt-brand):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); }

/* big feature titles, stat numbers and sub-section titles that are <h3>: H3 token */
html body :is(.cs-item-title, .abt-row-head h3, .abt-trio h3, .abt-beyond h3, .blog-featured-title, .stat-item h3, .floating-card h3, .consult-box h3, .p-5 h3.yellow, .p-5 h3.green, .feature-content h3.text-white, .display-title, .support-display-title, .related-wrap h2, .showcase-card .card-text h3):not(#_) { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

/* closing statements on the About page: H2 token */
html body :is(.abt-statement h3, .abt-close p):not(#_) { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }

/* small uppercase label headings: eyebrow token */
html body :is(.sol-tech-group h4, .tos-sidebar h3, .sol-rel h3):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* lead paragraphs: Bootstrap .lead and the page-specific lead classes */
html body :is(p.lead, .sv2-lead, .hdd-lead2, .indh-lead, .insh-lead, .dt-big):not(#_) { font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: var(--lh-lead); }

/* micro labels (badges, tags, pills, step numbers, card captions): 13px floor. Only the size changes; weight, spacing and shape stay with each component. */
html body :is(.badge, .ptag, .portfolio-cat-badge, .feat-badge span, .country-badge, .hp-chip, .cs-item-tag, .cs-item-type, .cs-rel a, .s2-links span, .s2-side b, .ft2-ct b, .blog-card-link, .lm-row b, .sl3-step b, .hp-pbar em, .hp-project-tag, .hp-insight-tag, .hp-review-src, .mfd-count, .ticket-file-name, .card-badge, .csx-cta-label, .solh-cta-label, .solh-faq-answer-label, .solh-faq-answer-bottom span, .solh-category-nav-label span, .badge-open-status, .solh-crm-node span, .solh-crm-center small, .solh-tech-center small, .solh-journey-number, .solh-faq-nav-number, .solh-tech-number, .solh-category-number, .solh-map-number, .solh-faq-answer-number):not(#_) { font-size: var(--fs-meta); }

/* Hero pills (the small label with an icon above every hero title): the icon is #470000 on every global page. The doubled :not(#_) outranks the per-template pill rules. */
html[data-site="global"] body :is(.wcat-hero .wcat-eyebrow, .sv3-hero :is(.sv3-kicker, .sv3-eyebrow, .sv3-tag), .sl3-hero :is(.sl3-tag, .sl3-kick), .s2-hero :is(.s2-tag, .lfp-pill), .iv3-hero :is(.iv3-tag, .iv3-eyebrow), :is(.banner-04, .svp-hero, .abx-hero, .csp-hero, .ctp-hero, .gqp-hero, .inp-hero) .hp-kicker, .inx-hero .inx-pill, .hero .hero-eyebrow) :is(i, svg):not(#_):not(#_) { color: #470000; fill: currentColor; }

/* Pill icons: 14px on every global page (the tone system drew them at 16px, several templates at 13px). */
html[data-site="global"] body :is(.ss-eb, .hp-kicker, .wcat-eyebrow, .sv3-eyebrow, .sv3-kicker, .sl3-kick, .sl3-tag, .s2-eyebrow, .s2-tag, .lfp-pill, .iv3-eyebrow, .iv3-tag, .svp-pill, .sol-eyebrow, .inx-pill, .section-tag, .hero-eyebrow, .inp-hero-tag) > i:not(#_):not(#_) { font-size: 14px; }
html[data-site="global"] body :is(.ss-eb, .hp-kicker, .wcat-eyebrow, .sv3-eyebrow, .sv3-kicker, .sl3-kick, .sl3-tag, .s2-eyebrow, .s2-tag, .lfp-pill, .iv3-eyebrow, .iv3-tag, .svp-pill, .sol-eyebrow, .inx-pill, .section-tag, .hero-eyebrow, .inp-hero-tag) > svg:not(#_):not(#_) { width: 14px; height: 14px; }


/* ==== hero-colours.css ==== */
/* ==========================================================================
   Hero colours (2026-11-06) - one standard for the heroes of the global site.
   H1 white | first paragraph under the H1 #470000 | every hero pill #470000 with a #FF0000 icon and white text.
   Colour only: nothing here touches size, weight, spacing, layout or animation.
   Loaded by head-open.php after typography.css (which sets every page title and hero pill icon to #470000), hence the doubled
   :not(#_) and the !important on the targeted hero elements only.
   Left out on purpose, because the new colours would disappear on their backgrounds:
   - light heroes: Industries detail pages (.iv3-hero), AliveCRM, MLM, blog posts;
   - the maroon paragraph on dark heroes (Products and company pages .s2-hero, Solutions, Global Presence, legacy service pages): those keep their light paragraph.
   The service-page heroes (.wcat-hero) get the same colours from css/service-category-content.css.
   ========================================================================== */

/* 1. H1 - the whole title, including any highlighted span, is white */
html body :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .inx-hero, .csp-hero, .ctp-hero, .gqp-hero, .s2-hero, .solh-hero, .sol-hero, .sl3-hero, .sv3-hero, .hb-hero, .career-hero, .header-team) h1:not(#_):not(#_),
html body :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .inx-hero, .csp-hero, .ctp-hero, .gqp-hero, .s2-hero, .solh-hero, .sol-hero, .sl3-hero, .sv3-hero, .hb-hero, .career-hero, .header-team) h1 *:not(#_):not(#_),
html body h1.hero-animate:not(#_):not(#_) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 2. The first paragraph directly under the H1 (the lead line of each red hero) - the other hero paragraphs keep their colour */
html body :is(
  .banner-subtitle,
  .abx-hero h1 + p,
  :is(.svp-hero, .inp-hero, .csp-hero, .ctp-hero, .gqp-hero) h1 + p,
  .inx-hero h1 + h2.inx-lead,
  .career-hero p.hero-p,
  p.hero-animate-delay
):not(#_):not(#_),
html body :is(.banner-subtitle, .abx-hero h1 + p) :is(strong, em, span, a):not(#_):not(#_) {
  color: #470000 !important;
  -webkit-text-fill-color: #470000 !important;
}

/* 3. Pills / tags / badges inside the hero: maroon fill, white label, red icon (shape, padding and border are untouched) */
html body :is(
  :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .csp-hero, .ctp-hero, .gqp-hero) .hp-kicker,
  .inx-hero :is(.inx-pill, .inx-chips-hero li),
  .inp-hero .inp-hero-tag,
  .s2-hero :is(.s2-tag, .lfp-pill),
  .sv3-hero :is(.sv3-kicker, .sv3-eyebrow, .sv3-tag),
  .sl3-hero :is(.sl3-tag, .sl3-kick),
  .sol-hero .sol-tag
):not(#_):not(#_) {
  background: #470000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body :is(
  :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .csp-hero, .ctp-hero, .gqp-hero) .hp-kicker,
  .inx-hero :is(.inx-pill, .inx-chips-hero li),
  .inp-hero .inp-hero-tag,
  .s2-hero :is(.s2-tag, .lfp-pill),
  .sv3-hero :is(.sv3-kicker, .sv3-eyebrow, .sv3-tag),
  .sl3-hero :is(.sl3-tag, .sl3-kick),
  .sol-hero .sol-tag
) :is(i, svg, svg *):not(#_):not(#_) {
  color: #ff0000 !important;
  -webkit-text-fill-color: #ff0000 !important;
  fill: #ff0000 !important;
}


/* ==== card-titles.css ==== */
/* Card titles (2026-11-06): one shared rule for the title of every white card.
   js/card-titles.js adds .ct-title to a card's title element only when the card really has a white background, so dark, red and pink cards are not
   affected. Colour only: the title's size, weight, spacing, the icon beside it and the description are untouched. The doubled :not(#_) and
   !important beat the per-template title colours and the section-tone colours; the script drops the class while a card's hover state is not white. */
html body .ct-title.ct-title:not(#_):not(#_),
html body .ct-title.ct-title:not(#_):not(#_) a,
html body .ct-title.ct-title:not(#_):not(#_) a:is(:hover, :focus-visible) {
  color: #ff0000 !important;
  -webkit-text-fill-color: #ff0000 !important;
}


/* ==== quote-modal.css ==== */
/* Quote / enquiry pop-up (js: openModal() in head-open.php). The AliveCRM form is loaded into #modal-form-container the first time a button opens it.
   Markup lives at the end of footer.php. Page-agnostic: every selector starts with .alv-modal. */
.alv-modal{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(71,0,0,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-sizing:border-box}
.alv-modal.active{display:flex}
.alv-modal-box{position:relative;width:100%;max-width:720px;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(22px,3vw,34px);border-radius:24px;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,.35);box-sizing:border-box}
.alv-modal-close{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#470000;color:#fff;font-size:17px;line-height:1;cursor:pointer;transition:background .2s ease}
.alv-modal-close:hover,.alv-modal-close:focus-visible{background:#ff0000;outline:none}
#modal-form-container{padding-top:8px}
#modal-form-container iframe{display:block;width:100%;min-height:360px;border:0}
@media(max-width:575px){.alv-modal{padding:10px}.alv-modal-box{max-height:calc(100vh - 20px);border-radius:18px;padding:20px 14px}}

/* AliveCRM form embedded in a page (contact, get a quote, home, services, hire pages): the script drops an iframe right where the tag is */
.alv-form-embed{width:100%;min-height:360px}
.alv-form-embed iframe{display:block;width:100%;border:0}

/* concise privacy notice under the enquiry forms (form-privacy-notice.php) */
.form-privacy-notice{max-width:640px;margin:16px auto 0;padding:14px 18px;border:1px solid rgba(71,0,0,.14);border-left:4px solid #ff0000;border-radius:14px;background:#fff7f7;color:#3a3a3a;font-size:14.5px;line-height:1.55;text-align:left}
.form-privacy-notice p{margin:0 0 6px;color:inherit;font-size:inherit;line-height:inherit}
.form-privacy-notice p:last-child{margin-bottom:0}
html body .form-privacy-notice .form-privacy-notice__title:not(#_){display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#470000;font-weight:800}
.form-privacy-notice__title i{color:#ff0000}
.form-privacy-notice a{color:#ff0000;font-weight:700;text-decoration:underline;text-underline-offset:3px}