/* Generated stylesheet — shared base (style.css) + deduped per-page CSS files. Do not edit directly; edit the source files under website-redesign/pages/ and regenerate. */

/* ---- shared/base (pages/style.css) ---- */
/* ═══════════════════════════════════════════════════════════
   old.css — WordPress theme base (color variables, resets,
   typography, utility classes) that both pages' custom styles
   below depend on (var(--color-primary) etc.)
   ═══════════════════════════════════════════════════════════ */

/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
:root {
    /* DEFINE VARIABLES */

    /* V1 - Original */
    /*
    --color-primary: #4cc9f0;
    --color-primary-light: #8fe4fe;
    --color-secondary: #001226;
    --color-secondary-30: rgb(0, 18, 38, .3);
    --color-secondary-light: #133458;
    --color-secondary-light-30: rgb(19, 52, 88, .3);
    --color-accent-dark: #54667a;
    --color-accent-light: #7d858f; 
    
    --color-light: #dee7f1;
    --color-white: #ffffff; 
    */

    /* V2 - Tech Green */
/*     
    --color-primary: #D9B08C;
    --color-primary-light: #FFCB9A;
    --color-secondary: #116466;
    --color-secondary-30: rgba(17, 100, 102, .3);
    --color-secondary-light: #4db2a8;
    --color-secondary-light-30: rgba(209, 232, 226, .3);
    --color-accent-dark: #aeccb6;
    --color-accent-light: #edf4ef;

    --color-light: #e9f6ef;
    --color-white: #ffffff;
*/

    /* V2 - Alternate  */
        
    --color-primary: #fd9d58 !important;
    --color-primary-light: #ffb27b !important;
    --color-secondary: #040214 !important;
    --color-secondary-30: rgba(4, 2, 20, .3) !important;
    --color-secondary-light: #367883 !important;
    --color-secondary-light-30: rgba(54, 120, 131, .3) !important;
    --color-accent-dark: #aec8cc !important;
    --color-accent-light: #edf4ef !important;

    --color-light: #e9f5f6 !important;
    --color-white: #ffffff !important;

    /* V3 - Dark Green */
/* 
    --color-primary: #f07b0f;
    --color-primary-light: #f4a255;
    --color-secondary: #003135;
    --color-secondary-30: rgba(0, 49, 53, .3);
    --color-secondary-light: #024950;
    --color-secondary-light-30: rgba(2, 73, 80, .3);
    --color-accent-dark: #0FA4AF;
    --color-accent-light: #AFDDE5;

    --color-light: #e9f6ef;
    --color-white: #ffffff; 
*/

    /* V4 - Dark Desaturated */
/* 
    --color-primary: #45A29E;
    --color-primary-light: #66FCF1;
    --color-secondary: #0B0C10;
    --color-secondary-30: rgba(11, 12, 16, .3);
    --color-secondary-light: #1F2833;
    --color-secondary-light-30: rgba(31, 40, 51, .3);
    --color-accent-dark: #C5C6C7;
    --color-accent-light: #AFDDE5;

    --color-light: #ecf5f7;
    --color-white: #ffffff;  
*/

    /* V5 - Gray Mint */
/* 
    --color-primary: #61892F;
    --color-primary-light: #86C232;
    --color-secondary: #222629;
    --color-secondary-30: rgba(34, 38, 41, .3);
    --color-secondary-light: #474B4F;
    --color-secondary-light-30: rgba(71, 75, 79, .3);
    --color-accent-dark: #6B6E70;
    --color-accent-light: #AFDDE5;

    --color-light: #ecf8f2;
    --color-white: #ffffff; 
*/

    --primary-font-family: Montserrat, sans-serif !important;

    /* RESPONSIVE H1 */
    --max-h1-size: 43 !important;
    --min-h1-size: 35 !important;
    --h1-diff: calc(var(--max-h1-size) - var(--min-h1-size)) !important;
    --h1-responsive: calc((var(--min-h1-size)* 1px) + (var(--h1-diff)*((100vw - 420px)/(1200 - 420)))) !important;
}

:root{
    --responsive-post-hero-gradient: linear-gradient(120deg,var(--color-secondary) 0%,var(--color-secondary-light) 45%, var(--color-secondary-light-30) 100%) !important;
}

@media only screen and (min-width: 768px) and (max-width: 1500px){
    :root{
        --responsive-post-hero-gradient: linear-gradient(120deg,var(--color-secondary) 0%,var(--color-secondary-light) 55%, var(--color-secondary-light-30) 100%) !important;
    }
}

@media only screen and (max-width: 767px){
    :root{
        --responsive-post-hero-gradient: linear-gradient(120deg, var(--color-secondary-light) 0%, var(--color-secondary-light-30) 100%) !important;
    }
}

.large-title, h1{
    font-size: var(--h1-responsive) !important;
}

body {
    font-family: var(--primary-font-family)!important;
    /* WordPress's own theme.json sets global body typography (font-size
       ~22px, font-weight 300, line-height 1.4, letter-spacing -0.1px)
       that's totally different from Bootstrap's reboot defaults these
       designs were built against (1rem/400/1.5/normal) — restoring those
       here so every component that relies on inheriting sane body
       defaults (rather than setting every property explicitly itself)
       behaves the same in WP as it did standalone. No-op outside WP: a
       plain browser already defaults to ~this baseline, so this doesn't
       change anything when a page is opened directly. */
    font-size: 1rem!important;
    font-weight: 400!important;
    line-height: 1.5!important;
    letter-spacing: normal!important;
}

/* Same WP-vs-Bootstrap mismatch as body above, but for headings: WP's
   theme.json sets a generic h1-h6 rule (font-weight:400; line-height:
   1.125; letter-spacing:-0.1px) that beats Bootstrap's own h1-h6 reset
   (font-weight:500; line-height:1.2) via source order, since both are
   plain-tag selectors of equal specificity. Components that set their
   own font-size/weight but not line-height (e.g. .cta-h) inherited WP's
   1.125 instead of Bootstrap's 1.2, reading as visibly tighter line
   spacing than the same heading standalone. Restoring Bootstrap's
   reboot values here so anything not setting its own line-height falls
   back to what these designs were actually built against. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500!important;
    line-height: 1.2!important;
    letter-spacing: normal!important;
}

#main h2, h2{
    font-size: 2rem!important;
}

#main h2.mt-0, #main h3.mt-0, #main h4.mt-0, #main h5.mt-0, #main h6.mt-0{
    margin-block-start: 0!important;
}

#main h3, h3{
    font-size: 1.5rem!important;
    margin-block-start: 1.5rem!important;
}

#main h4, h4{
    font-size: 1.3rem!important;
    margin-block-start: 1.3rem!important;
}

#main h5, h5{
    font-size: 1.2rem!important;
    margin-block-start: 1.2rem!important;
}

#main h6, h6{
    font-size: 1.1rem!important;
    margin-block-start: 1.1rem!important;
}

#main .content ul, #main .content ol{
    margin-block-end: 1.9rem!important;
}

#main li::marker {
    color: var(--color-secondary-light) !important;
}

#main a{
    color: var(--color-secondary-light) !important;
    transition: 0.2s ease-in-out !important;
}

#main a:hover{
    color: var(--color-primary) !important;
}

#main .post-content-inner>:first-child{
    margin-top: 0!important;
}

.color-primary {
    color: var(--color-primary) !important;
}

.color-primary-light {
    color: var(--color-primary-light) !important;
}

.color-secondary {
    color: var(--color-secondary) !important;
}

.color-secondary-light {
    color: var(--color-secondary-light) !important;
}

.color-accent-dark {
    color: var(--color-accent-dark) !important;
}

.color-accent-light {
    color: var(--color-accent-light) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-primary-light {
    background-color: var(--color-primary-light) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-secondary-transparent{
    background-color: var(--color-secondary-30)!important;
}

.bg-secondary-light {
    background-color: var(--color-secondary-light) !important;
}

.bg-secondary-light-transparent{
    background-color: var(--color-secondary-light-30)!important;
}

.bg-accent-dark {
    background-color: var(--color-accent-dark) !important;
}

.bg-accent-light {
    background-color: var(--color-accent-light) !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}

.bg-dark-gradient {
    background-image: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%) !important;
}

.bg-dark-gradient-hero{
    background-image: var(--responsive-post-hero-gradient) !important;
}

.bg-dark-gradient-hero-transparent{
    background-image: linear-gradient(120deg, rgba(4, 2, 20, 1) 0%, rgba(4, 2, 20, .93) 15%, rgba(54, 120, 131, .85) 50%, rgba(54, 120, 131, .93) 85%, rgba(54, 120, 131, 1) 100%) !important;
}

.bg-transparent-gradient {
    background-image: linear-gradient(160deg, var(--color-secondary-30) 0%, var(--color-secondary-light-30) 100%) !important;
}

.bg-grad-sides {
    background: rgb(19, 52, 88) !important;
    background: linear-gradient(90deg, var(--color-secondary-light) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, var(--color-secondary-light) 100%) !important;
}

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

.border-primary-light {
    border-color: var(--color-primary-light) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

.border-secondary-light {
    border-color: var(--color-secondary-light) !important;
}

.bg-primary-img {
    background-image: url("/wp-content/uploads/core-images/main-header-wide.jpg") !important;
    background-size: cover !important;
    background-position: top right !important;
}

.bg-secondary-img {
    background-image: url("/wp-content/uploads/core-images/BK-Black2-1920-optimized.png") !important;
    background-size: cover !important;
    background-position: center right !important;
}

.shadow-primary {
    box-shadow: 0px 0px 20px 2px var(--color-primary) !important;
}

.shadow-secondary {
    box-shadow: 0px 0px 20px 2px var(--color-secondary-30) !important;
}

.opacity-35 {
    opacity: .35 !important;
}

.mt-n5 {
    margin-top: -8rem !important;
}

.mt-n4 {
    margin-top: -6rem !important;
}

.mt-n3 {
    margin-top: -4rem !important;
}

.mt-n2 {
    margin-top: -2rem !important;
}

.mt-n1 {
    margin-top: -1rem !important;
}

.ms-n5 {
    margin-left: -8rem !important;
}

.ms-n4 {
    margin-left: -6rem !important;
}

.ms-n3 {
    margin-left: -4rem !important;
}

.ms-n2 {
    margin-left: -2rem !important;
}

.ms-n1 {
    margin-left: -1rem !important;
}

.w-85 {
    max-width: 85% !important;
}

.w-md-65{
    width: 100% !important;
}

@media only screen and (min-width: 768px){
    .w-md-65{
        width: 65%!important;
    }
}

.position-upper-right {
    right: -30px !important;
    top: -40px !important;
}

@media only screen and (max-width: 992px) {

    .ms-n5,
    .ms-n4,
    .ms-n3,
    .ms-n2,
    .ms-n1 {
        margin-left: unset !important;
    }

    .w-85 {
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .bg-primary-img {
        background-position: center right !important;
    }
}

.btn-primary, .single_add_to_cart_button{
    background-color: unset !important;
    transition: 0.2s ease-in-out!important;
    padding: 10px 20px!important;
    font-weight: 600!important;
    border: 2px solid var(--color-primary)!important;
    border-image-slice: 1!important;
    border-radius: 10px!important;
    color: var(--color-primary)!important;
}

.btn-primary:hover, .single_add_to_cart_button:hover{
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white)!important;
}

#comments input{
    background-color: unset !important;
    transition: 0.2s ease-in-out!important;
    padding: 10px 20px!important;
    font-weight: 600!important;
    border: 2px solid var(--color-primary)!important;
    border-image-slice: 1!important;
    border-radius: 10px!important;
    color: var(--color-primary)!important;
}

#comments input:hover{
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white)!important;
}

.btn.btn-primary:active {
    background-color: var(--color-primary) !important;
}

.btn-secondary {
    background-color: var(--color-secondary-light)!important;
    border: 0!important;
    border-radius: 10px!important;
    transition: 0.2s ease-in-out!important;
    padding: 10px 20px!important;
    font-weight: 600!important;
    color: #ffffff!important;
}

.btn.btn-secondary:active {
    background-color: var(--color-secondary-light)!important;
}

.btn-secondary:hover {
    background-color: var(--color-secondary)!important;
}

blockquote {
    border-left: 2px solid var(--color-primary) !important;
    padding-left: 10px !important;
}

.testimonial-img {
    max-width: 100px !important;
}

.testimonial-img-small {
    max-width: 70px!important;
}

.carousel-item .card {
    width: 80% !important;
}

@media only screen and (max-width: 480px) {
    .carousel-item .card {
        width: 100% !important;
    }

    .hero .fs-5{
        font-size: unset!important;
    }
}

.spinner {
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    -webkit-animation: spin 2s linear infinite !important;
    -moz-animation: spin 2s linear infinite !important;
    animation: spin 2s linear infinite !important;
}

.blur,
.blur>* {
    position: relative !important;
}

.blur:before {
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: inherit !important;
    background-color: inherit !important;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg) !important;
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg) !important;
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg) !important;
        transform: rotate(360deg) !important;
    }
}

body {
    max-width: 2500px !important;
    margin: auto !important;
    box-shadow: 0px 10px 50px #cacaca !important;
}

.splide__slide img {
    width: 100% !important;
    max-width: 170px !important;
    height: auto !important;
    /* Images have no other content in their <a> wrapper, so default
       vertical-align:baseline reserves invisible space below them for a
       text descender that never appears — throwing off the flex
       align-items:center centering on the parent .splide__slide (the <a>
       itself gets centered, but its box includes that phantom gap, so
       the *image* inside ends up visually off-center). Harmless at
       larger sizes where it's a couple of px against a tall logo; became
       obvious once the mobile sizing below made the gap proportionally
       larger relative to a much shorter image. */
    vertical-align: middle;
}

/* The auto-scroll partner-logo marquee (#auto-scroll, perPage:5 desktop /
   3 below 768px via its Splide init) crowds on mobile: the img itself
   kept the full 170px cap regardless of viewport, so text-heavy
   wordmarks rendered cramped with barely any breathing room. Constrained
   by *height* instead of width here — logos have wildly different aspect
   ratios (some are short wide wordmarks, some are tall badges), and
   capping every one to the same *width* meant a wide/flat logo shrank to
   an illegibly short height while a narrow one stayed comparatively
   huge. A shared height keeps every logo equally legible regardless of
   shape, matching how a logo strip normally reads. Sized deliberately
   large/readable — fewer logos visible on screen at once (perPage still
   drops to 3 below 768px per the JS config) is an accepted tradeoff for
   legibility, not a bug. */
@media only screen and (max-width: 767.98px){
    .splide__slide img {
        /* width + height together define a bounding box, not a forced
           exact size — object-fit:contain scales the logo down to fit
           inside it while preserving its native aspect ratio (letting it
           "letterbox" within the box rather than stretch). Setting both
           a fixed width AND height without object-fit forces the browser
           to violate aspect ratio for any logo whose natural ratio
           doesn't exactly match the box — confirmed visibly
           skewed/stretched logos in an earlier version of this rule. */
        width: 190px !important;
        height: 50px !important;
        max-width: 190px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

@media only screen and (max-width: 479.98px){
    .splide__slide img {
        width: 150px !important;
        height: 40px !important;
        max-width: 150px !important;
    }
}

/* Taller band on mobile, matching the bigger logos above — scoped to
   #auto-scroll specifically since .splide__track is reused by the
   (differently-sized) testimonials slider elsewhere on the same pages.
   1.5rem is deliberately more than the marquee's own default py-3
   (1rem), not less: bigger logos need more vertical room around them,
   not the same or tighter spacing. */
@media only screen and (max-width: 767.98px){
    #auto-scroll .splide__track {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

.text-success, .text-danger{
    margin-bottom: -150px !important;
    opacity: 0.1 !important;
}

/* Adjust product template */

.product-template-default #main{
    max-width: 100%!important;
    padding: 0!important;
    margin: 0!important;
}

.product-template-default .woocommerce-breadcrumb{
    display: none !important;
}

.product-template-default .price{
    display: inline !important;
    margin-bottom: 0 !important;
    color: var(--color-white)!important;
}

.product-template-default #price-tier{
    background-color: #ffb27b !important;
}

.product-template-default .cart{
    max-width: 500px !important;
}

.product-template-default .cart .label{
    display: none !important;
}

.product-template-default .cart .value{
    padding: 0 !important;
    background: unset!important;
}

.product-template-default .single-product-sidebar .woocommerce-variation-add-to-cart{
    display: flex !important;
    justify-content: center !important;
}

.hero-separator{
    min-height: 20px!important;
    height: auto!important;
}

/* POST TEMPLATE */

.recent-post{
    font-weight: 500!important;
}

.recent-post .recent-post-img{
    transition: 0.2s ease-in-out !important;
    opacity: 0.8 !important;
}

.recent-post:hover .recent-post-img{
    opacity: 1 !important;
}

#main #comment{
    border-radius: 16px !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: var(--bs-box-shadow-sm) !important;
}

#main #comment:focus{
    outline: none!important;
    box-shadow: inset var(--bs-box-shadow-sm) !important;
}

.elementor-location-footer img.attachment-large.size-large.wp-image-1936{
    width: 199px!important;
    height: 60px!important;
}

.btn-primary:disabled{
    color: #cacaca!important;
    border-color: #cacaca!important;
}

.btn-primary:disabled:hover{
    color: #cacaca!important;
    background: none!important;
}

.elementor-nav-menu--main .elementor-nav-menu a, .elementor-nav-menu--dropdown .menu-item a{
    padding: 5px 20px!important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES (Business Starter Kit + Homepage)
   ═══════════════════════════════════════════════════════════ */

html{
      overflow-x: hidden !important;
    }

    /* ── BUTTONS ────────────────────────────────────────────── */
    .btn { font-size: 0.9rem !important; font-weight: 600 !important; }

    /* Every button lifts 1px on hover — primary, ghost, and any other
       Bootstrap variant, on every page. The lift is the site's single
       interaction signature: a button that doesn't move on hover reads as
       disabled next to one that does. Applied on .btn AND on
       .btn-outline-cta on its own, because the ghost is sometimes used as a
       bare inline link-button without the .btn class. */
    .btn, .btn-outline-cta { transition: 0.2s ease-in-out !important; }
    /* Same cascade problem, one layer up: a button carrying .reveal also
       inherits `transition: … transform 0.6s ease` from `html.sn-js .reveal`
       (0,2,1), so its hover lift crawls over 0.6s while every other button
       on the page snaps in 0.2s. Keep the 0.6s fade for the reveal entrance,
       run transform at the button's own speed. */
    html.sn-js .reveal.btn,
    html.sn-js .reveal.btn-outline-cta {
      transition: opacity 0.6s ease, transform 0.2s ease-in-out !important;
    }
    /* The two `html.sn-js .reveal.visible…` selectors are not redundant:
       a button carrying .reveal itself (not a wrapper) gets
       `transform: none !important` from `html.sn-js .reveal.visible`,
       which at (0,3,1) outranks a plain `.btn:hover` at (0,2,0) and
       silently kills the lift once the element has animated in. These
       re-assert it above that. The :not() pair keeps disabled buttons
       flat and is what makes a separate :disabled guard unnecessary. */
    html.sn-js .reveal.visible.btn:not(:disabled):not(.disabled):hover,
    html.sn-js .reveal.visible.btn-outline-cta:not(:disabled):not(.disabled):hover,
    .btn:not(:disabled):not(.disabled):hover,
    .btn-outline-cta:not(:disabled):not(.disabled):hover {
      transform: translateY(-1px) !important;
    }

    .btn.btn-primary {
      background-color: var(--color-primary) !important;
      color: var(--color-secondary) !important;
      border-color: var(--color-primary) !important;
    }
    .btn.btn-primary:hover {
      background-color: var(--color-primary-light) !important;
      border-color: var(--color-primary-light) !important;
      color: var(--color-secondary) !important;
      box-shadow: 0 6px 22px rgba(253,157,88,0.3) !important;
      transform: translateY(-1px) !important;
    }
    /* Ghost secondary button. Neutral (blue-grey/white) rather than a
       second orange outline — orange is reserved for the single primary
       action, so a page with two CTAs no longer reads as two equal-weight
       orange buttons competing. Geometry (2px border, 10px radius, and the
       .btn / .hero-actions .btn padding + font-size) is unchanged; only the
       colors differ from the primary. */
    .btn-outline-cta {
      background-color: transparent !important;
      color: var(--color-white) !important;
      border: 2px solid rgba(174,200,204,0.38) !important;
      border-radius: 10px !important;
    }
    .btn-outline-cta:hover {
      background-color: rgba(255,255,255,0.07) !important;
      border-color: var(--color-accent-dark) !important;
      color: var(--color-white) !important;
      box-shadow: none !important;
      transform: translateY(-1px) !important;
    }
    /* On light/white sections the white-on-dark ghost is invisible, so the
       same button inks itself navy over a teal-tinted border/wash instead. */
    .bg-light .btn-outline-cta {
      color: var(--color-secondary) !important;
      border-color: rgba(54,120,131,0.32) !important;
    }
    .bg-light .btn-outline-cta:hover {
      background-color: rgba(54,120,131,0.07) !important;
      border-color: var(--color-secondary-light) !important;
      color: var(--color-secondary) !important;
    }
    /* Hero buttons: same size, dynamic width */
    .hero-actions .btn {
      padding: 10px 20px !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
      line-height: 1.5 !important;
      width: auto !important;
    }

    /* ── GENERAL ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box !important; }
    html { scroll-behavior: smooth !important; }
    body {
      font-family: var(--primary-font-family) !important;
      background: var(--color-secondary) !important;
      color: #4a6870 !important;
      /* `clip`, not `hidden`: overflow-x:hidden on body makes body a scroll
         container, which silently disables position:sticky for everything
         inside it (caught on /articles/' sticky filter toolbar). `clip`
         suppresses the same horizontal overflow without creating one. */
      overflow-x: clip !important;
      /* old.css sets max-width + box-shadow on body for WP; reset those */
      max-width: 100% !important;
      box-shadow: none !important;
    }
    /* Noise texture overlay */
    body::before {
      content: '' !important;
      position: fixed !important; inset: 0 !important;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
      opacity: 0.02 !important; pointer-events: none !important; z-index: 0 !important;
    }
    nav, section, footer { position: relative !important; z-index: 1 !important; }

    /* ── NAV ─────────────────────────────────────────────────── */
    .sn-nav {
      backdrop-filter: blur(14px) !important;
      border-bottom: 1px solid rgba(174,200,204,0.12) !important;
      position: sticky !important; top: 0 !important; z-index: 100 !important;
      padding: 12px 0 !important; /* keeps total header height constant now that the logo is taller */
    }
    .sn-logo { display: inline-flex !important; align-items: center !important; text-decoration: none !important; }
    .sn-logo img { display: block !important; width: auto !important; }

    /* ── HERO ────────────────────────────────────────────────── */
    /* Change 1: bigger headline + diagonal bottom clip */
    .hero { padding: 7rem 0 calc(6rem + 80px) !important; overflow: hidden !important; position: relative !important; }
    @media (max-width: 767px) { .hero { padding: 7rem 0 !important; } }

    /* ── BADGE ───────────────────────────────────────────────── */
    .hero-badge {
      display: inline-flex !important; align-items: center !important; gap: 0.45rem !important;
      background: rgba(253,157,88,0.1) !important; border: 1px solid rgba(253,157,88,0.22) !important;
      color: var(--color-primary) !important; font-size: 0.8rem !important; font-weight: 700 !important;
      letter-spacing: 0.1em !important; text-transform: uppercase !important;
      padding: 0.38rem 1rem !important; border-radius: 100px !important;
    }

    /* ── HERO HEADING ────────────────────────────────────────── */
    /* Change 1 (continued): larger font size */
    .hero-h1 { font-size: clamp(2rem,5vw,3.5rem) !important; font-weight: 800 !important; color: var(--color-white) !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; max-width: 1150px !important; }
    .hero-h1 .accent { color: var(--color-primary) !important; }
    .hero-sub { font-size: 1.1rem !important; font-weight: 300 !important; color: var(--color-accent-dark) !important; max-width: 640px !important; }
    /* ── HERO TAGLINE (site addition) ────────────────────────────
       Bold lead-in line above hero-sub, for pages whose source copy
       pairs a short bold tagline with a longer description — keeps
       the two visually distinct without relying on <strong> alone. */
    .hero-tagline { font-size: clamp(1.15rem,2.2vw,1.4rem) !important; font-weight: 700 !important; color: var(--color-white) !important; max-width: 640px !important; line-height: 1.5 !important; }
    .hero-actions { gap: 1rem !important; flex-wrap: wrap !important; align-items: center !important; }

    /* ── EYEBROW + ORANGE BAR ────────────────────────────────── */
    .eyebrow { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--color-primary) !important; }
    .orange-bar { width: 32px !important; height: 2px !important; background: var(--color-primary) !important; }

    /* ── SECTION HEADING ─────────────────────────────────────── */
    .section-h { font-size: clamp(1.7rem,3.2vw,2.5rem) !important; font-weight: 800 !important; color: var(--color-white) !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; }

    /* ── SECTION PADDING ─────────────────────────────────────── */
    .s-pad { padding: 5.5rem 0 !important; }

    /* ── PULL QUOTE ──────────────────────────────────────────── */
    /* ── QUOTE BLOCK ─────────────────────────────────────────── */
    .quote-block { background: rgba(54,120,131,0.15) !important; border: 1px solid rgba(253,157,88,0.28) !important; border-radius: 14px !important; padding: 1.75rem 2rem !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
    .quote-block::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 3px !important; background: linear-gradient(180deg, transparent, var(--color-primary), transparent) !important; }
    .quote-block p { font-size: 1rem !important; font-weight: 600 !important; color: var(--color-white) !important; margin: 0 !important; line-height: 1.65 !important; }

    /* ── PROBLEM ASIDE ───────────────────────────────────────── */
    .problem-aside { position: sticky !important; top: 5rem !important; }

    /* ── PROBLEM / GUIDE BODY TEXT ───────────────────────────── */
    .problem-body, .guide-copy { font-size: 1rem !important; color: var(--color-accent-dark) !important; }
    .problem-body p, .guide-copy p { margin-bottom: 1.1rem !important; }

    /* ── STAKE CARD ──────────────────────────────────────────── */
    .stake-card, .step-card, .inc-card {
      background: rgba(54,120,131,0.07) !important;
      border: 1px solid rgba(174,200,204,0.12) !important;
      border-radius: 12px !important;
      padding: 2rem !important;
      transition: border-color 0.2s, transform 0.2s !important;
    }
    .step-card:hover { border-color: rgba(253,157,88,0.4) !important; transform: translateY(-3px) !important; }
    .inc-card:hover  { border-color: rgba(253,157,88,0.4) !important; }
    /* Site addition: flex-column so a trailing .inc-card-link can be pinned
       to the bottom of the card with margin-top:auto. */
    .inc-card { display: flex !important; flex-direction: column !important; }
    /* Site addition: small "Learn More" link at the bottom of an .inc-card,
       for cards that link out to their own dedicated page. */
    .inc-card-link { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; margin-top: auto !important; font-size: 0.85rem !important; font-weight: 700 !important; color: var(--color-primary) !important; text-decoration: none !important; }
    /* .inc-card-link's margin-top:auto bottom-pins it inside a flex-column
       .inc-card. Used standalone — after a carousel, under a prose column —
       auto resolves to 0 and the link collapses against whatever is above it.
       This modifier gives it a real gap in that context. */
    .inc-card-link--standalone { margin-top: 1.5rem !important; }
    .inc-card-link i { font-size: 0.75rem !important; transition: transform 0.2s !important; }
    .inc-card-link:hover i { transform: translateX(3px) !important; }

    .stake-label { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--color-primary) !important; }
    .stake-body { font-size: 1rem !important; color: var(--color-accent-dark) !important; line-height: 1.7 !important; }
    .stakes-close { text-align: left !important; font-size: 0.95rem !important; font-weight: 600 !important; color: var(--color-light) !important; }

    /* ── STEP CARD ───────────────────────────────────────────── */
    /* Change 2: bigger ghost numbers */
    .step-num { font-size: 5rem !important; font-weight: 900 !important; color: rgba(253,157,88,0.15) !important; line-height: 1 !important; position: absolute !important; top: 1.25rem !important; right: 1.5rem !important; letter-spacing: -0.05em !important; }
    .step-card { position: relative !important; }
    .step-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--color-white) !important; max-width: 82% !important; line-height: 1.4 !important; padding-top: 0.25rem !important; }
    /* Bold one-liner between .step-title and .step-body, so a step card can
       carry a short claim and its explanation without them running together.
       Shared: used by /discovery-call/ and the service-page template. */
    .step-lead { font-size: 1rem !important; font-weight: 700 !important; color: var(--color-white) !important; }
    .bg-light .step-lead { color: var(--color-secondary) !important; }
    .step-title i { color: var(--color-primary) !important; font-size: 0.95rem !important; }
    .step-body { font-size: 0.95rem !important; color: var(--color-accent-dark) !important; line-height: 1.65 !important; }

    /* Change 2 (continued): progress arrows between step cards */
    @media (min-width: 992px) {
      .step-card::after {
        content: '→' !important;
        position: absolute !important;
        right: -1.2rem !important;
        top: 2.2rem !important;
        color: rgba(253,157,88,0.5) !important;
        font-size: 1.6rem !important;
        pointer-events: none !important;
        z-index: 2 !important;
      }
      .step-final .step-card::after { display: none !important; }
    }

    /* ── INC CARD ────────────────────────────────────────────── */
    .inc-icon { width: 44px !important; height: 44px !important; background: rgba(253,157,88,0.1) !important; border-radius: 8px !important; }
    .inc-icon i { color: var(--color-primary) !important; font-size: 1.15rem !important; }
    .inc-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--color-white) !important; }
    .inc-text { font-size: 0.9rem !important; color: var(--color-accent-dark) !important; line-height: 1.6 !important; }

    /* ── INC CARD GHOST COUNTER (unused, kept for reference) ─── */
    .inc-num-grid { counter-reset: inc-counter !important; }
    .inc-num-grid .inc-card {
      counter-increment: inc-counter !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .inc-num-grid .inc-card::before {
      content: counter(inc-counter, decimal-leading-zero) !important;
      position: absolute !important;
      top: -0.5rem !important;
      right: 0.75rem !important;
      font-size: 4.5rem !important;
      font-weight: 900 !important;
      color: rgba(253,157,88,0.07) !important;
      line-height: 1 !important;
      letter-spacing: -0.05em !important;
      pointer-events: none !important;
    }

    /* ── ANALYSIS VISUAL ─────────────────────────────────────── */
    .analysis-visual { background: rgba(54,120,131,0.15) !important; border: 1px solid rgba(174,200,204,0.12) !important; border-radius: 14px !important; padding: 1.5rem 1.75rem !important; position: relative !important; overflow: hidden !important; }
    .analysis-visual::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, var(--color-primary), transparent) !important; }
    .av-title { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(174,200,204,0.5) !important; }
    .av-row { display: flex !important; align-items: flex-start !important; gap: 0.85rem !important; margin-bottom: 0.6rem !important; }
    .av-num { font-size: 0.72rem !important; font-weight: 800 !important; color: var(--color-primary) !important; background: rgba(253,157,88,0.1) !important; border-radius: 4px !important; width: 26px !important; height: 26px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 1px !important; }
    .av-text { font-size: 0.9rem !important; color: var(--color-accent-dark) !important; line-height: 1.5 !important; }
    .av-text strong { color: var(--color-light) !important; font-weight: 600 !important; }
    .av-connector { width: 1px !important; height: 10px !important; background: rgba(174,200,204,0.12) !important; margin-left: 11px !important; margin-bottom: 0.6rem !important; }

    /* ── TESTIMONIAL ─────────────────────────────────────────── */
    /* Five-star rating row, first child of .quote-block, ahead of the quote
       itself — canonical on every testimonial carousel, §14. */
    .testimonial-stars { color: var(--color-primary) !important; font-size: 0.75rem !important; margin-bottom: 0.5rem !important; }
    .testimonial-q { font-size: 1.05rem !important; font-style: italic !important; color: var(--color-light) !important; line-height: 1.75 !important; font-weight: 300 !important; }
    .testimonial-who { font-size: 0.82rem !important; font-weight: 700 !important; color: var(--color-primary) !important; letter-spacing: 0.04em !important; }

    /* ── PRICING ─────────────────────────────────────────────── */
    /* Change 4: wider pricing wrap */
    .pricing-wrap { max-width: 700px !important; position: relative !important; }
    .pricing-glow { position: absolute !important; inset: -50px !important; background: radial-gradient(ellipse at center, rgba(54,120,131,0.12), transparent 70%) !important; pointer-events: none !important; }
    .pricing-card { background: rgba(54,120,131,0.04) !important; border: 1px solid rgba(253,157,88,0.28) !important; border-radius: 18px !important; padding: 3rem 2.5rem !important; position: relative !important; overflow: hidden !important; }
    .pricing-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, transparent, var(--color-primary) 40%, transparent) !important; }
    .pricing-label { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--color-primary) !important; }
    .pricing-amount { font-size: 3.2rem !important; font-weight: 900 !important; color: var(--color-white) !important; line-height: 1 !important; letter-spacing: -0.03em !important; }
    .pricing-period { font-size: 0.85rem !important; color: var(--color-accent-dark) !important; }
    .pricing-note { font-size: 0.875rem !important; color: rgba(174,200,204,0.5) !important; }
    .pricing-divider { height: 1px !important; background: rgba(174,200,204,0.12) !important; }
    .pricing-feat { display: flex !important; align-items: center !important; gap: 0.75rem !important; font-size: 0.95rem !important; color: var(--color-accent-dark) !important; text-align: left !important; }
    .pricing-feat i { color: var(--color-primary) !important; font-size: 0.8rem !important; flex-shrink: 0 !important; }
    .pricing-footer { font-size: 0.875rem !important; color: rgba(174,200,204,0.5) !important; }

    /* ── MYTHS LIST ──────────────────────────────────────────── */
    .myths-list { border-top: 1px solid rgba(174,200,204,0.1) !important; }
    .myth-item {
      display: grid !important;
      grid-template-columns: 4.5rem 1fr !important;
      gap: 0 2.5rem !important;
      padding: 1.1rem 0 !important;
      border-bottom: 1px solid rgba(174,200,204,0.1) !important;
      align-items: start !important;
    }
    /* Change 3: bigger myth numbers */
    .myth-n {
      font-size: 4rem !important; font-weight: 900 !important;
      color: rgba(253,157,88,0.3) !important;
      line-height: 1 !important; letter-spacing: -0.05em !important;
      padding-top: 0.2rem !important;
    }
    /* The myth copy has to compete with an oversized ghost numeral, so it
       reads as a real sub-heading rather than a tiny eyebrow tag. */
    .myth-q {
      font-size: 1.25rem !important; font-style: italic !important; font-weight: 600 !important;
      color: rgba(174,200,204,0.7) !important;
      margin-bottom: 0 !important; line-height: 1.4 !important;
    }
    .myth-a {
      font-size: 1rem !important; color: var(--color-accent-dark) !important;
      line-height: 1.6 !important;
      border-top: 1px solid rgba(174,200,204,0.1) !important;
      margin-top: 0.5rem !important; padding-top: 0.5rem !important;
    }
    @media (max-width: 575px) {
      .myth-item { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
      .myth-n { font-size: 1.5rem !important; }
    }

    /* ── FAQ ─────────────────────────────────────────────────── */
    .faq-item {
      background: rgba(54,120,131,0.06) !important;
      border: 1px solid rgba(174,200,204,0.12) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      transition: border-left-color 0.25s, box-shadow 0.25s !important;
      position: relative !important;
    }
    .faq-item.active {
      border-color: rgba(253, 157, 88, 0.28) !important;
      box-shadow: 0 4px 20px rgba(54,120,131,0.15) !important;
    }
    .faq-item.active:before{
      content:"" !important;
      height: 100% !important;
      width: 2px !important;
      background: linear-gradient(0deg, transparent, var(--color-primary) 40%, transparent) !important;
      left: 0 !important;
      top: 0 !important;
      position: absolute !important;
      display: block !important;
    }
    .faq-btn {
      width: 100% !important; background: none !important; border: none !important; text-align: left !important;
      padding: 1.1rem 1.4rem !important;
      font-family: var(--primary-font-family) !important; font-size: 1rem !important; font-weight: 600 !important;
      color: var(--color-light)!important; cursor: pointer !important;
      display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 1rem !important;
      transition: color 0.2s !important;
    }
    .faq-btn:hover, .faq-item.active .faq-btn { color: var(--color-primary)!important; }
    /* Pushed to the far edge by margin, not by space-between on the row: the
       question is a bare text node between the counter and this icon, so
       space-between centred it instead of sitting it beside the counter. */
    .faq-icon { transition: transform 0.3s ease !important; font-size: 0.75rem !important; flex-shrink: 0 !important; margin-left: auto !important; }
    .faq-item.active .faq-icon { transform: rotate(180deg) !important; }
    .faq-body-wrap {
      display: grid !important;
      grid-template-rows: 0fr !important;
      transition: grid-template-rows 0.35s ease !important;
    }
    .faq-body-wrap.open { grid-template-rows: 1fr !important; }
    .faq-body {
      overflow: hidden !important;
      font-size: 0.95rem !important; color: var(--color-accent-dark) !important; line-height: 1.72 !important;
      padding: 0 1.4rem !important;
      transition: padding 0.35s ease !important;
    }
    .faq-body.open { padding: 0 1.4rem 1.1rem !important; }

    /* ── FAQ SECTION ─────────────────────────────────────────── */
    .faq-section { position: relative !important; overflow: hidden !important; }
    .faq-section .container { position: relative !important; z-index: 1 !important; }
    /* The FAQ accordion is the one documented exception to §17's full-width rule
       and to §7's left-align rule — see DESIGN-CONVENTIONS.md §6d. Every
       .faq-section on every page uses this wrapper and a centred header,
       regardless of tier; only colour changes on the light tier. */
    .faq-wrap { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }
    /* ── FAQ COUNTER ─────────────────────────────────────────── */
    .faq-list { counter-reset: faq-counter !important; }
    .faq-list .faq-item { counter-increment: faq-counter !important; }
    .faq-list .faq-btn::before {
      content: counter(faq-counter, decimal-leading-zero) !important;
      font-size: 0.78rem !important;
      font-weight: 800 !important;
      color: rgba(174,200,204,0.4) !important;
      letter-spacing: 0.06em !important;
      margin-right: 0.15rem !important;
      flex-shrink: 0 !important;
      min-width: 1.8rem !important;
    }

    /* ── CTA SECTION ─────────────────────────────────────────── */
    .cta-section { padding: 7rem 0 !important; border-top: 1px solid rgba(174,200,204,0.12) !important; position: relative !important; overflow: hidden !important; }
    /* Site correction: capped below hero-h1's max (3.5rem) — the original
       4rem max read as louder than the hero on shorter, single-CTA pages. */
    .cta-h { font-size: clamp(1.75rem,3.5vw,2.75rem) !important; font-weight: 900 !important; color: var(--color-white) !important; letter-spacing: -0.03em !important; margin-bottom: 1rem !important; }
    .cta-sub { font-size: 0.95rem !important; color: var(--color-accent-dark) !important; max-width: 480px !important; }
    /* Some closing CTAs carry longer copy than the usual one-liner — e.g. the
       case-study template folds a whole "why work with us" paragraph into
       .cta-sub (§6e) — and 480px makes that read as an unnecessarily tall,
       narrow column of text. Widen it rather than fighting the copy. */
    .cta-sub--wide { max-width: 720px !important; }

    /* ── CTA STATS ─────────────────────────────────────────────── */
    /* Change 6: new CTA stats classes */
    .cta-stats { display: flex !important; align-items: center !important; justify-content: center !important; gap: 2.5rem !important; flex-wrap: wrap !important; }
    .cta-stat-item { text-align: center !important; min-width: 120px !important; }
    .cta-stat-n { display: block !important; font-size: 2.8rem !important; font-weight: 900 !important; color: var(--color-primary) !important; line-height: 1 !important; letter-spacing: -0.05em !important; }
    .cta-stat-l { display: block !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(174,200,204,0.55) !important; }
    .cta-stat-divider { width: 1px !important; height: 40px !important; background: rgba(174,200,204,0.15) !important; }
    @media (max-width: 575px) { .cta-stat-divider { display: none !important; } }

    /* ── DARK SECTION ORB SYSTEM ─────────────────────────────── */
    .dark-section { position: relative !important; overflow: hidden !important; }
    .dark-section .container { position: relative !important; z-index: 1 !important; }

    /* Orb ring — JS sets transform: rotate() based on scroll progress */
    .orb-ring {
      position: absolute !important; inset: 0 !important;
      pointer-events: none !important; z-index: 0 !important;
    }

    /* Individual orbs — percentage positions so orbit radius stays proportional */
    .orb {
      position: absolute !important; border-radius: 50% !important;
    }
    .orb-teal {
      width: clamp(80vh, 100vw, 1200px) !important;
      height: clamp(80vh, 100vw, 1200px) !important;
      /* center anchored at (35%, 18%) of the section */
      top: 75% !important; left: 25% !important;
      transform: translate(-50%, -50%) !important;
      background: radial-gradient(circle, rgba(54,120,131,0.35) 0%, rgba(54,120,131,0.15) 45%, transparent 100%) !important;
      filter: blur(clamp(50px, 7vw, 90px)) !important;
    }
    .orb-warm {
      width: clamp(80vh, 100vw, 1200px) !important;
      height: clamp(80vh, 100vw, 1200px) !important;
      /* center anchored at (55%, 82%) of the section */
      top: 25% !important; left: 75% !important;
      transform: translate(-50%, -50%) !important;
      background: radial-gradient(circle, rgba(253,157,88,0.20) 0%, rgba(253,157,88,0.1) 45%, transparent 100%) !important;
      filter: blur(clamp(40px, 6vw, 80px)) !important;
    }

    @media (max-width: 1200px){
      .orb-teal{
        top: 50%!important;
        left: 0%!important;
        transform: translate(-50vw, -50vw)!important;
      }

      .orb-warm{
        top: 20%!important;
        left: 80%!important;
        transform: translate(-50vw, -50vw)!important;
      }
    }

    @media (max-width: 767px){
      .orb-teal{
        top: 25%!important;
        left: -60%!important;
        transform: translate(-50vw, -50vw)!important;
      }

      .orb-warm{
        top: 75%!important;
        left: 145%!important;
        transform: translate(-120vw, -120vw)!important;
      }
    }

    /* ── FOOTER ──────────────────────────────────────────────── */
    .sn-footer { border-top: 1px solid rgba(174,200,204,0.12) !important; font-size: 0.8rem !important; color: rgba(174,200,204,0.5) !important; }

    /* ── LIGHT SECTION TEXT OVERRIDES ────────────────────────── */
    .bg-light .section-h, .bg-light h2 { color: var(--color-secondary) !important; }
    .bg-light p, .bg-light .problem-body p, .bg-light .guide-copy p,
    .bg-light .stake-body, .bg-light .step-body, .bg-light .inc-text,
    .bg-light .myth-a, .bg-light .faq-body, .bg-light .av-text { color: #4a6870 !important; }
    .bg-light .av-text strong { color: var(--color-secondary) !important; }
    /* Site correction: .stake-title is a <p>, so on a light/white section it
       lost its own colour to `.bg-light p` above and rendered in muted body
       grey — the sub-heading of a stake-card looked like more body copy. */
    .bg-light .stake-title { color: var(--color-secondary) !important; }
    /* Same trap: .pricing-amount is a <p> with no light-tier rule, so the
       headline price rendered in the same grey as the small print under it.
       Needed once the investment section can sit on the white tier. */
    .bg-light .pricing-amount { color: var(--color-secondary) !important; }

    /* ── BOX-FREE LAYOUT PRIMITIVES ──────────────────────────
       Counterweights to .inc-card. A page that runs card grid after card grid
       reads as one texture; these give a section structure without drawing a
       box around every item. */

    /* Numbered sequence: oversized ghost numeral + label + description, rows
       separated by a hairline. Use where the order genuinely means something. */
    .capability-row {
      grid-template-columns: 4.5rem 1fr;
      gap: 0 2.5rem;
      padding: 2rem 0;
      border-bottom: 1px solid rgba(174,200,204,0.1);
    }

    .capability-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .capability-row__num {
      font-size: 3.5rem;
      font-weight: 900;
      color: rgba(253,157,88,0.3);
      letter-spacing: -0.05em;
      padding-top: 0.2rem;
    }

    .capability-row__label {
      font-size: 1.05rem;
      color: var(--color-white);
    }

    .capability-row__desc {
      font-size: 1rem;
      color: var(--color-accent-dark);
      line-height: 1.75;
    }

    .bg-light .capability-row { border-bottom-color: rgba(54,120,131,0.12); }
    .bg-light .capability-row__label { color: var(--color-secondary) !important; }
    .bg-light .capability-row__desc { color: #4a6870 !important; }
    .bg-light .capability-row__num { color: rgba(253,157,88,0.6); }

    @media (max-width: 575px) {
      .capability-row { grid-template-columns: 1fr; gap: 0.5rem; }
      .capability-row__num { font-size: 1.5rem; }
    }

    /* Compact numbered row. .capability-row's 3.5rem ghost numeral is a
       display device — it carries two or three steps and collapses into noise
       past that. From four items up, use this instead and lay the rows out in
       two columns (§3c). */
    .capability-row--compact { padding: 0.9rem 0 !important; grid-template-columns: 2.25rem 1fr !important; gap: 0 1rem !important; }

    /* Step-chain connector between two stacked .capability-row--compact rows
       in a single column — a vertical line dropping from one numeral to the
       next, closed with a small arrowhead, carrying over the old boxed
       .step-card sequence's card-to-card "→" as a top-to-bottom flow. */
    .capability-row-connector { display: flex !important; flex-direction: column !important; align-items: center !important; width: 2.25rem !important; margin: -0.1rem 0 !important; }
    .capability-row-connector__bar { width: 2px !important; height: 1.35rem !important; background: rgba(253,157,88,0.4) !important; }
    .capability-row-connector__head { color: rgba(253,157,88,0.6) !important; font-size: 0.7rem !important; line-height: 1 !important; margin-top: -3px !important; }
    .bg-light .capability-row-connector__bar { background: rgba(253,157,88,0.5) !important; }
    .bg-light .capability-row-connector__head { color: rgba(253,157,88,0.75) !important; }
    .capability-row--compact .capability-row__num { font-size: 1.15rem !important; padding-top: 0.1rem !important; color: var(--color-primary) !important; opacity: 0.85 !important; text-align: center !important; }
    .capability-row--compact .capability-row__desc { font-size: 0.95rem !important; line-height: 1.6 !important; }

    /* Pill list — the lightest list texture, for short labels (service names,
       tools, deliverable types). Values lifted from .story-facts__tag, which
       already does exactly this on /showcase/. */
    .tag-list { display: flex !important; flex-wrap: wrap !important; gap: 0.6rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
    .tag-list li {
      display: inline-block !important;
      background: rgba(253,157,88,0.1) !important;
      color: var(--color-light) !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
      padding: 0.5rem 1rem !important;
      border-radius: 8px !important;
      border: 1px solid rgba(174,200,204,0.15) !important;
    }
    .bg-light .tag-list li { color: var(--color-secondary) !important; border-color: rgba(54,120,131,0.18) !important; }

    /* Arrow list — hairline-separated rows with a chevron marker. The fourth
       list texture: it reads as "things you can add on" rather than "things
       you get", and its row rules give a short list enough vertical presence
       to hold a section, which a strip of pills cannot. */
    .arrow-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
    .arrow-list li {
      position: relative !important;
      padding: 0.85rem 0 0.85rem 1.9rem !important;
      border-bottom: 1px solid rgba(174,200,204,0.15) !important;
      font-size: 0.98rem !important;
      line-height: 1.5 !important;
      color: var(--color-accent-dark) !important;
    }
    .arrow-list li:last-child { border-bottom: none !important; }
    .arrow-list li::before {
      content: "\2192" !important;
      position: absolute !important;
      left: 0 !important;
      top: 0.85rem !important;
      color: var(--color-primary) !important;
      font-weight: 700 !important;
    }
    /* Items that name another service link to it; the rest stay plain text.
       The row keeps its colour so a half-linked list doesn't look broken. */
    .arrow-list a {
      color: inherit !important;
      text-decoration: none !important;
      border-bottom: 1px solid rgba(253,157,88,0.35) !important;
      transition: color 0.2s, border-color 0.2s !important;
    }
    .arrow-list a:hover { color: var(--color-primary) !important; border-bottom-color: var(--color-primary) !important; }
    .arrow-list a:focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 3px !important; }

    .bg-light .arrow-list li { color: #4a6870 !important; border-bottom-color: rgba(54,120,131,0.15) !important; }

    /* Dot list — lighter than .check-row (no icon glyph), heavier than a tag.
       The third list texture, so a page with three lists needn't repeat one. */
    .dot-list { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid !important; gap: 0.75rem !important; }
    .dot-list li { position: relative !important; padding-left: 1.35rem !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--color-accent-dark) !important; }
    .dot-list li::before {
      content: "" !important;
      position: absolute !important;
      top: 0.55em !important;
      left: 0 !important;
      width: 7px !important;
      height: 7px !important;
      border-radius: 50% !important;
      background: var(--color-primary) !important;
    }
    .bg-light .dot-list li { color: #4a6870 !important; }

    /* Definition variant: a term leading each row, with the explanation running
       on after it. Used when the items each need a sentence of their own — a
       bare row or a pill would force that sentence to be thrown away. Rows sit
       further apart than the plain .dot-list because each is two lines, not one. */
    .dot-list--defs { gap: 1.15rem !important; }
    .dot-list__term {
      display: block !important;
      font-weight: 700 !important;
      font-size: 1rem !important;
      color: var(--color-white) !important;
      letter-spacing: -0.01em !important;
      margin-bottom: 0.15rem !important;
    }
    .bg-light .dot-list__term { color: var(--color-secondary) !important; }

    /* A paragraph carrying a section's argument rather than a caption. Slightly
       larger than body text and capped in width so it stays readable in a
       narrow column (§2). */
    .lead-copy {
      font-size: 1rem !important;
      line-height: 1.8 !important;
      color: var(--color-accent-dark) !important;
      margin-bottom: 1.1rem !important;
    }
    .lead-copy:last-child { margin-bottom: 0 !important; }
    .bg-light .lead-copy { color: #4a6870 !important; }

    /* Hairline-ruled block — the plainest box-free unit. A rule above the
       content instead of a border around it. Works as a stacked list (each
       item .ruled) or as columns of a split (each column .ruled). */
    .ruled {
      border-top: 1px solid rgba(174,200,204,0.18) !important;
      padding-top: 1.25rem !important;
    }
    .bg-light .ruled { border-top-color: rgba(54,120,131,0.18) !important; }
    .ruled__label {
      font-size: 0.72rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      color: var(--color-primary) !important;
    }
    .ruled__title { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--color-white) !important; }
    .bg-light .ruled__title { color: var(--color-secondary) !important; }
    .ruled__text { font-size: 0.95rem !important; color: var(--color-accent-dark) !important; line-height: 1.7 !important; }
    .bg-light .ruled__text { color: #4a6870 !important; }

    /* Sub-items belonging to a .ruled block's intro. A single continuous rule
       down the left edge instead of a per-item marker: the grouping is the
       whole point here, and every marker style (icons, dots, arrows, pills) is
       already spent elsewhere on these pages — §3c allows one texture each. */
    .ruled__items {
      list-style: none !important;
      margin: 0.9rem 0 0 !important;
      padding: 0 0 0 1rem !important;
      border-left: 1px solid rgba(174,200,204,0.18) !important;
    }
    .bg-light .ruled__items { border-left-color: rgba(54,120,131,0.18) !important; }
    .ruled__items li {
      font-size: 0.95rem !important;
      color: var(--color-accent-dark) !important;
      line-height: 1.7 !important;
      padding: 0.28rem 0 !important;
    }
    .bg-light .ruled__items li { color: #4a6870 !important; }

    /* ── FILTER TOOLBAR ──────────────────────────────────────
       Chips + a live-region status line, used by any page that filters a
       grid client-side (/audits/, /articles/). Promoted out of audits.css.
       A hidden card must also be hidden from the accessibility tree, so the
       markup uses [hidden] and each page adds the display override for its
       own column class — [hidden] alone loses to Bootstrap's .col-* rules. */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1rem;
    }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.5rem 1rem;
      border: 2px solid rgba(54,120,131,0.28);
      border-radius: 999px;
      background: transparent;
      font-family: var(--primary-font-family);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-secondary);
      cursor: pointer;
      transition: 0.2s ease-in-out;
    }

    /* Matches the sitewide button lift (DESIGN-CONVENTIONS §4) — a chip is a
       button, so it moves on hover like every other one. */
    .filter-chip:hover {
      border-color: var(--color-secondary-light);
      background: rgba(54,120,131,0.07);
      transform: translateY(-1px);
    }

    .filter-chip.is-active {
      border-color: var(--color-primary);
      background: var(--color-primary);
      color: var(--color-secondary);
    }

    .filter-chip:focus-visible {
      outline: 3px solid var(--color-secondary-light);
      outline-offset: 3px;
    }

    .filter-chip__count {
      font-size: 0.72rem;
      font-weight: 800;
      opacity: 0.65;
    }

    .filter-bar .filter-status,
    .filter-status {
      font-size: 0.82rem !important;
      font-weight: 600 !important;
      color: #4a6870 !important;
    }

    .filter-empty {
      font-size: 0.95rem !important;
      font-weight: 600 !important;
      color: #4a6870 !important;
    }

    /* ── PARTNER STRIP ───────────────────────────────────────
       The Splide logo rail directly under a hero. It is hero chrome, not a
       section in the three-tier rhythm (§3): no padding, no section header,
       so it reads as the bottom edge of the dark hero band rather than as a
       second dark section against it. */
    .partner-strip { border-top: 1px solid rgba(174,200,204,0.1) !important; }
    .partner-strip img {
      max-height: 46px !important;
      width: auto !important;
      opacity: 0.75 !important;
      transition: opacity 0.2s !important;
    }
    .partner-strip a:hover img { opacity: 1 !important; }

    /* ── CALENDLY FRAME ──────────────────────────────────────
       Calendly renders an opaque white document that centres its own card, so
       across a full 1320px container the calendar floats in a wide empty band.
       Constraining it to a half/two-thirds column is what fixes that — the
       wrapper itself deliberately carries NO background, border or radius:
       the widget already draws its own white rounded card, and giving the
       wrapper one too produced a visible card-inside-a-card.

       What the wrapper is actually for: Calendly injects its iframe as an
       inline element, so the line box adds ~7px of descender space beneath it
       — enough that the container's scrollHeight exceeds its clientHeight and
       the embed grows a scrollbar. Blocking the iframe removes the gap. */
    .calendly-frame .calendly-inline-widget,
    .calendly-frame iframe {
      display: block !important;
    }
    .bg-light .quote-block p { color: var(--color-secondary) !important; }
    /* Site correction: .cta-sub had no light-bg override, reading as barely-visible on white sections */
    .bg-light .cta-sub { color: #4a6870 !important; }
    .bg-light .faq-btn { color: #4a6870 !important; }
    .bg-light .faq-btn:hover, .bg-light .faq-item.active .faq-btn { color: var(--color-secondary-light) !important; }
    .bg-light .stakes-close { color: var(--color-secondary) !important; }
    /* Change 7: stronger card shadows on light sections */
    .bg-light .stake-card, .bg-light .step-card, .bg-light .inc-card,
    .bg-light .myth-cell {
      background: #ffffff !important;
      border-color: rgba(174,200,204,0.4) !important;
      box-shadow: 0 4px 28px rgba(54,120,131,0.13) !important;
    }
    .bg-light .quote-block {
      background: #ffffff !important;
      border-color: rgba(253,157,88,0.28) !important;
      box-shadow: 0 2px 16px rgba(54,120,131,0.07) !important;
    }
    .bg-light .inc-card:hover {
      border-color: rgba(253,157,88,0.45) !important;
      box-shadow: 0 4px 24px rgba(253,157,88,0.1) !important;
    }
    .bg-light .step-card:hover {
      border-color: rgba(253,157,88,0.45) !important;
      box-shadow: 0 6px 24px rgba(253,157,88,0.1) !important;
    }
    .bg-light .faq-item { background: #ffffff !important; border-color: rgba(174,200,204,0.3) !important; box-shadow: 0 2px 12px rgba(54,120,131,0.06) !important; }
    .bg-light .faq-item.active { border-left-color: var(--color-primary) !important; box-shadow: 0 4px 20px rgba(253,157,88,0.1) !important; }
    .bg-light .faq-icon { color: var(--color-secondary) !important; }
    .bg-light .myth-q { color: #5a7a82 !important; }
    /* Change 7 (continued): stronger analysis-visual shadow on light */
    .bg-light .analysis-visual {
      background: #ffffff !important;
      border-color: rgba(253, 157, 88, 0.28) !important;
      box-shadow: 0 4px 28px rgba(54,120,131,0.1) !important;
    }
    .bg-light .av-title { color: #5a7a82 !important; }
    .bg-light .av-connector { background: rgba(54,120,131,0.2) !important; }
    .bg-light .testimonial-q { color: var(--color-secondary) !important; }
    .bg-light .myths-list { border-top-color: rgba(54,120,131,0.12) !important; }
    .bg-light .myth-item { border-bottom-color: rgba(54,120,131,0.12) !important; }
    .bg-light .myth-a { border-top-color: rgba(54,120,131,0.12) !important; }
    .bg-light .myth-n { color: rgba(253,157,88,0.6) !important; }
    .bg-light .faq-item { border-left-color: rgba(54,120,131,0.2) !important; }

    /* ── REVEAL ANIMATION ────────────────────────────────────────────
       Scoped under html.sn-js (added by the reveal <script> itself) so
       that if the script gets stripped by the CMS/editor, content just
       stays fully visible instead of stuck at opacity:0 forever. ── */
    html.sn-js .reveal { opacity: 0 !important; transform: translateY(22px) !important; transition: opacity 0.6s ease, transform 0.6s ease !important; }
    html.sn-js .reveal.visible { opacity: 1 !important; transform: none !important; }
    .reveal-d1 { transition-delay: 0.1s !important; }
    .reveal-d2 { transition-delay: 0.2s !important; }
    .reveal-d3 { transition-delay: 0.3s !important; }
    .reveal-d4 { transition-delay: 0.4s !important; }

    /* ── PROBLEM SECTION REDESIGN ───────────────────────────────── */
    .prob-subtitle { font-size: 1.05rem !important; color: #4a6870 !important; line-height: 1.75 !important; max-width: 560px !important; margin: 0 !important; }
    .prob-scenario-prose { font-size: 1rem !important; font-weight: 300 !important; color: #4a6870 !important; line-height: 1.9 !important; margin: 0 !important; }
    /* display intentionally omitted here — Bootstrap's own d-none/d-flex/d-md-flex/d-md-none
       utility classes on the elements control visibility per breakpoint. Once this file's
       declarations are forced !important (style-important.css), a display value declared
       here would tie with and can beat those utility classes, showing both dividers at once. */
    .prob-vsep { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.9rem !important; color: var(--color-primary) !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; }
    .prob-vsep::before, .prob-vsep::after { content: '' !important; width: 1px !important; flex: 1 !important; min-height: 24px !important; background: rgba(174,200,204,0.35) !important; }
    .prob-hsep { align-items: center !important; gap: 1rem !important; color: var(--color-primary) !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; }
    .prob-hsep::before, .prob-hsep::after { content: '' !important; flex: 1 !important; height: 1px !important; background: rgba(174,200,204,0.35) !important; }

    /* ── BIZALCHEMY PROMO ────────────────────────────────────────── */
    .ba-body { font-size: 0.95rem !important; }
    .ba-icon-box { width: 72px !important; height: 72px !important; background: rgba(253,157,88,0.18) !important; border-radius: 16px !important; }
    .ba-title { font-family: var(--primary-font-family) !important; font-weight: 800 !important; font-size: 1.1rem !important; color: var(--color-primary) !important; letter-spacing: -0.02em !important; }
    .ba-meta { font-size: 0.875rem !important; }
    .ba-feat { font-size: 0.85rem !important; color: #4a6870 !important; }

    /* ═══════════════════════════════════════════════════════════
       HOMEPAGE (index-001) — ADDITIONS
       Rules below are only used by the homepage page. They are
       harmless no-ops on the Business Starter Kit page since it
       has no matching elements/classes.
       ═══════════════════════════════════════════════════════════ */

    /* ── NAV (homepage's fuller navbar with links + mobile toggler) ── */
    .nav-link-light {
      color: var(--color-accent-dark) !important;
      transition: color 0.2s !important;
    }
    .nav-link-light:hover {
      color: var(--color-primary) !important;
    }
    .navbar-toggler { border: 0 !important; color: var(--color-accent-dark) !important; box-shadow: none !important; }

    .section-sub { font-size: 1rem !important; color: var(--color-accent-dark) !important; max-width: 620px !important; }
    .stake-title { font-size: 1.3rem !important; font-weight: 800 !important; color: var(--color-white) !important; }

    /* ── STAKE ICON (title row for "We Are" / "We're Not") ──────
       A small colour-washed icon tile beside the title — the same
       language as .inc-icon — instead of a bare glyph or a circle badge. */
    .stake-icon {
      width: 40px !important; height: 40px !important; border-radius: 10px !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      background: rgba(253,157,88,0.12) !important; flex-shrink: 0 !important;
    }
    .stake-icon i { color: var(--color-primary) !important; font-size: 1.05rem !important; }
    .stake-icon--negative { background: rgba(174,200,204,0.1) !important; }
    .stake-icon--negative i { color: rgba(174,200,204,0.75) !important; }
    .bg-light .stake-icon--negative { background: rgba(54,120,131,0.08) !important; }
    .bg-light .stake-icon--negative i { color: #5a7a82 !important; }

    /* ── CIRCLE BADGE (numbers / initials / check-x) ─────────── */
    .circle-badge {
      width: 48px !important; height: 48px !important; border-radius: 50% !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      font-weight: 800 !important; font-size: 0.9rem !important;
      border: 2px solid var(--color-primary) !important;
      color: var(--color-primary) !important;
      flex-shrink: 0 !important;
    }
    .circle-badge.muted { border-color: rgba(174,200,204,0.4) !important; color: rgba(174,200,204,0.6) !important; }

    /* ── NOT LIST (We Are / We're Not) ───────────────────────── */
    .not-list-item { display: flex !important; align-items: flex-start !important; gap: 0.75rem !important; margin-bottom: 1rem !important; }
    /* Same first-line alignment as .check-row — see the note there. */
    .not-list-item i { flex-shrink: 0 !important; line-height: 1.5rem !important; margin-top: 0 !important; color: var(--color-primary) !important; }
    .not-list-item p { color: var(--color-accent-dark) !important; }
    .not-list-item strong { color: var(--color-white) !important; }

    /* ── TESTIMONIAL (split name/role, homepage's carousel format) ── */
    .testimonial-who-name { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--color-primary) !important; }
    .testimonial-who-role { font-size: 0.82rem !important; color: var(--color-accent-dark) !important; }

    /* Site correction: every .testimonial-who-* lives inside a .quote-block,
       whose `.quote-block p` (0,1,1) outranked the bare classes above (0,1,0)
       and painted name and role the SAME colour — killing the hierarchy the
       two classes exist to create. Re-declared one level deeper (0,2,0) so
       the intended accent-name / muted-role split actually renders.

       Dark tier gets the literal intent (orange 9.9:1, blue-grey 11.7:1 on
       navy — both comfortable). The light tier deliberately does NOT: orange
       measures 1.9–2.1:1 and blue-grey 1.6–1.8:1 on the pale/white grounds,
       far below the 4.5:1 floor, so it keeps navy (18–20:1) for the name and
       the standard body grey (5.4–6.0:1) for the role. Same hierarchy —
       accent name, muted role — expressed in colours each ground can carry.
       The .bg-light selectors are (0,3,0) to clear `.bg-light .quote-block p`
       at (0,2,1). */
    .quote-block .testimonial-who-name { color: var(--color-primary) !important; }
    .quote-block .testimonial-who-role { color: var(--color-accent-dark) !important; }
    .bg-light .quote-block .testimonial-who-name { color: var(--color-secondary) !important; }
    .bg-light .quote-block .testimonial-who-role { color: #4a6870 !important; }

    /* ── CHECK LIST (benefits) ───────────────────────────────── */
    .check-row { display: flex !important; align-items: flex-start !important; gap: 0.85rem !important; }
    /* The icon must optically sit on the FIRST line of its text, however many
       lines that text wraps to. With align-items:flex-start both boxes share a
       top edge, so the glyph centres only if the icon's line box is exactly as
       tall as one line of the paragraph — 0.98rem x 1.5 = 1.47rem. It was
       previously 1.5 x its own (larger) font-size plus a 0.15rem nudge, which
       pushed the icon 4.7px below the text's first-line centre. */
    .check-row i { font-size: 1.15rem !important; color: var(--color-primary) !important; flex-shrink: 0 !important; line-height: 1.47rem !important; margin-top: 0 !important; }
    .check-row p { font-size: 0.98rem !important; color: var(--color-secondary) !important; margin: 0 !important; }
    /* Site addition: check-row's default text color assumes a light section;
       this variant makes it legible when reused on a dark-section too. */
    .dark-section .check-row p { color: var(--color-accent-dark) !important; }

    /* A real sub-heading, not an eyebrow tag — it has to hold its own
       against the 4rem ghost numeral beside it (feedback: focus was landing
       on the number instead of the myth). */
    .myth-label { font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -0.015em !important; text-transform: none !important; color: var(--color-white) !important; margin-bottom: 0.25rem !important; }
    .bg-light .myth-label { color: var(--color-secondary) !important; }

    /* ── TESTIMONIALS-SPLIDE (canonical testimonial carousel, §14) ──
       Bootstrap's .carousel can only ever show one slide, so it can't do a
       2-visible/scroll-1 layout on desktop. Every testimonial carousel
       sitewide runs on Splide instead (already a page dependency everywhere
       via the partner-strip rail) — see §14 for the markup/JS snippet. */
    .testimonials-splide { position: relative !important; }
    .testimonials-splide .splide__track { position: relative !important; padding-bottom: 3rem !important; }
    .testimonials-splide .splide__slide { height: auto !important; display: flex !important; }
    .testimonials-splide .quote-block { width: 100% !important; }

    /* A separate sitewide rule sizes .splide__slide img for the partner-logo
       rail (up to 170px wide) — it bleeds into testimonial avatar photos
       too, so win it back with higher specificity (§15's documented trap). */
    .testimonials-splide .splide__slide img.testimonial-avatar {
      width: 48px !important; height: 48px !important; max-width: 48px !important;
      object-fit: cover !important;
    }

    /* Arrows — same geometry as the old .carousel-control-prev/-next: sit
       outside the card in the container gutter, desktop only. The track's
       own box is card-height-plus-3rem (that 3rem is reserved for the
       pagination row below), so the arrows layer is trimmed to `bottom: 3rem`
       to match just the card area — centering at 50% of the untrimmed box
       lands the arrows above the card's real vertical center. */
    .testimonials-splide .splide__arrows { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 3rem !important; pointer-events: none !important; }
    .testimonials-splide .splide__arrow {
      position: absolute !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 3rem !important; height: 3rem !important;
      background: none !important; border: none !important;
      color: var(--color-primary) !important;
      opacity: 0.8 !important;
      font-size: 1.75rem !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      pointer-events: auto !important;
      transition: opacity 0.2s ease, color 0.2s ease !important;
    }
    .testimonials-splide .splide__arrow svg { display: none !important; }
    .testimonials-splide .splide__arrow:hover,
    .testimonials-splide .splide__arrow:focus-visible { color: var(--color-primary) !important; opacity: 1 !important; }
    .testimonials-splide .splide__arrow--prev { right: 100% !important; left: auto !important; }
    .testimonials-splide .splide__arrow--next { left: 100% !important; right: auto !important; }

    /* Below 1220px the gutter beside the container is narrower than the 3rem
       arrow, so showing them would push past the viewport edge and add a
       horizontal scrollbar. Pagination stays and the carousel auto-rotates,
       so nothing becomes unreachable. */
    @media (max-width: 1219.98px) {
      .testimonials-splide .splide__arrow { display: none !important; }
    }

    /* Pagination — bar-style dots matching the old .carousel-indicators */
    .testimonials-splide .splide__pagination {
      position: absolute !important; bottom: 0.75rem !important; left: 0 !important; right: 0 !important; z-index: 2 !important;
      display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important;
      padding: 0 !important; margin: 0 !important; list-style: none !important;
    }
    .testimonials-splide .splide__pagination__page {
      width: 30px !important; height: 3px !important;
      min-width: 0 !important; min-height: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      background: rgba(174,200,204,0.4) !important;
      opacity: 1 !important; margin: 0 !important;
      transition: background-color 0.2s ease !important;
    }
    .testimonials-splide .splide__pagination__page.is-active { background: var(--color-primary) !important; transform: none !important; }
    .bg-light .testimonials-splide .splide__pagination__page { background: rgba(54,120,131,0.3) !important; }
    .bg-light .testimonials-splide .splide__pagination__page.is-active { background: var(--color-primary) !important; }

    /* ── TRUST BAR ───────────────────────────────────────────── */
    .trust-bar { border-top: 1px solid rgba(174,200,204,0.12) !important; border-bottom: 1px solid rgba(174,200,204,0.12) !important; }
    .trust-logo {
      font-size: 0.72rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
      color: rgba(174,200,204,0.45) !important;
      text-decoration: none !important;
      transition: color 0.2s !important;
    }
    .trust-logo:hover { color: var(--color-primary) !important; }

    /* ── FOOTER (homepage's expanded multi-column footer) ───── */
    .footer-heading { font-size: 0.9rem !important; font-weight: 800 !important; color: var(--color-white) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
    .footer-social-link { color: var(--color-white) !important; font-size: 1.3rem !important; text-decoration: none !important; transition: color 0.2s !important; }
    .footer-social-link:hover { color: var(--color-primary) !important; }
    /* Site addition: .footer-social-link reused in page body content
       (e.g. /about-us/'s "Follow Our Work" row), not just the always-
       dark footer — needs its own readable color on a light section. */
    .bg-light .footer-social-link { color: var(--color-secondary) !important; }
    .bg-light .footer-social-link:hover { color: var(--color-primary) !important; }
    .footer-link { color: rgba(174,200,204,0.5) !important; text-decoration: none !important; transition: color 0.2s !important; }
    .footer-link:hover { color: var(--color-primary) !important; }
    .footer-divider { border-color: rgba(174,200,204,0.12) !important; }
    .footer-badges { display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; }
    .footer-badge { width: 64px !important; height: 64px !important; object-fit: contain !important; flex: 0 0 auto !important; }
    @media (max-width: 991.98px) {
      .footer-badges { display: grid !important; grid-template-columns: repeat(2, 96px) !important; gap: 0.9rem !important; }
      .footer-badge { width: 96px !important; height: 96px !important; }
    }
    .footer-badges-tablet { gap: 1.25rem !important; }
    .footer-badges-tablet .footer-badge { width: 110px !important; height: 110px !important; }
    @media (min-width: 1200px) {
      .footer-badge { width: 100px !important; height: 100px !important; }
    }

    /* ── LIGHT SECTION TEXT OVERRIDES (homepage-only combos) ─── */
    .bg-light .not-list-item strong { color: var(--color-secondary) !important; }
    .bg-light .circle-badge.muted { border-color: rgba(54,120,131,0.35) !important; color: #5a7a82 !important; }
    .bg-light .faq-body { color: #4a6870 !important; }
    .bg-light .faq-list .faq-btn::before { color: rgba(54,120,131,0.35) !important; }

.bg-grad-sides {
    background-image: linear-gradient(90deg, rgb(4, 2, 20) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, rgb(4, 2, 20) 100%)!important;
pointer-events: none;
}
    /* ══════════════════════════════════════════════════════════
       WHITE ("PAPER") SECTION TIER
       A third section background between the pale .bg-light and the
       navy .dark-section, so a long page stops reading as one
       dark/light/dark/light drumbeat.

       USAGE: always paired — class="bg-light bg-paper". The pale tier's
       whole text-color override block is keyed on .bg-light, so dropping
       it would lose every heading/body color rule. The compound
       .bg-light.bg-paper selectors below outrank the plain .bg-light
       ones regardless of source order.
       ══════════════════════════════════════════════════════════ */
    .bg-light.bg-paper { background-color: var(--color-white) !important; }

    /* Every card component is white on the pale tier — on the white tier
       that would be invisible, so the relationship inverts: the card takes
       the pale tint and the section keeps the white. */
    .bg-light.bg-paper .stake-card,
    .bg-light.bg-paper .step-card,
    .bg-light.bg-paper .inc-card,
    .bg-light.bg-paper .myth-cell,
    .bg-light.bg-paper .analysis-visual,
    .bg-light.bg-paper .quote-block,
    .bg-light.bg-paper .faq-item {
      background: var(--color-light) !important;
      border-color: rgba(174,200,204,0.55) !important;
      box-shadow: none !important;
    }
    .bg-light.bg-paper .quote-block { border-color: rgba(253,157,88,0.3) !important; }
    .bg-light.bg-paper .inc-card:hover,
    .bg-light.bg-paper .step-card:hover {
      border-color: rgba(253,157,88,0.5) !important;
      box-shadow: none !important;
    }
    .bg-light.bg-paper .faq-item { border-left-color: rgba(54,120,131,0.25) !important; }

    /* ══════════════════════════════════════════════════════════
       HERO CARD — the aside box in a split (two-column) hero.
       Dark heroes only; every hero on this site is dark.
       ══════════════════════════════════════════════════════════ */
    /* rgba(4,2,20,x) is --color-secondary; the high alpha is what lets the
       card sit legibly over the .orb-ring glow behind it. Radius/border
       are .analysis-visual's own values. */
    .hero-card {
      background: rgba(4,2,20,0.62) !important;
      border: 1px solid rgba(174,200,204,0.2) !important;
      border-radius: 14px !important;
      padding: 2rem !important;
      backdrop-filter: blur(14px) !important;
    }
    .hero-card__title {
      font-size: 1.25rem !important;
      font-weight: 700 !important;
      color: var(--color-white) !important;
      letter-spacing: -0.02em !important;
      line-height: 1.3 !important;
    }
    /* list-style/margin/padding are reset here rather than via utilities
       because list-style has no Bootstrap utility equivalent. */
    .hero-card-list {
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
      display: grid !important;
      gap: 1rem !important;
    }
    .hero-card-list li { position: relative !important; padding-left: 1.5rem !important; }
    .hero-card-list li::before {
      content: "" !important;
      position: absolute !important;
      /* Centres the dot on the first line of the item's label. Measured, not
         guessed — 0.5em sat 1.5px low. */
      top: 0.4em !important;
      left: 0 !important;
      width: 8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      background: var(--color-primary) !important;
    }
    .hero-card-list__link { display: block !important; text-decoration: none !important; }
    .hero-card-list__label {
      display: block !important;
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      color: var(--color-white) !important;
      transition: color 0.2s !important;
    }
    .hero-card-list__link:hover .hero-card-list__label { color: var(--color-primary) !important; }
    .hero-card-list__desc {
      display: block !important;
      font-size: 0.85rem !important;
      color: var(--color-accent-dark) !important;
      line-height: 1.5 !important;
    }
    /* Headline value in a hero-card row — the number/figure being read, with
       .hero-card-list__desc as its caption. Shared: both the audit-page and
       service-page templates use it. */
    .fact-value {
      font-size: 1.05rem !important;
      font-weight: 800 !important;
      letter-spacing: -0.01em !important;
    }
    .hero-card__foot {
      padding-top: 1.25rem !important;
      border-top: 1px solid rgba(174,200,204,0.2) !important;
      font-size: 0.82rem !important;
      color: var(--color-accent-dark) !important;
    }
    .hero-card__foot a { color: var(--color-primary) !important; font-weight: 700 !important; text-decoration: none !important; }
    .hero-card__foot a:hover { text-decoration: underline !important; }

    /* The split hero's copy column is left-aligned, so the hero-sub's own
       centering max-width no longer applies the same way — let it fill. */
    .hero-copy .hero-sub { max-width: none !important; }

/* ---- about-us/about.css ---- */
/* ═══════════════════════════════════════════════════════════
   about.css — page-specific extras for /about-us/
   .team-chip: a compact photo+name+role card — a real card
   (background/border/shadow/hover copied from .inc-card /
   .bg-light .inc-card) rather than a bare divider-line list. The
   photo bleeds flush to the card's own left/top/bottom edge (no
   padding around it, card itself clips via overflow:hidden) so it
   can run larger without looking like an oversized circle floating
   inside a small pill — the card's own height is set by the photo,
   text sits in a padded body beside it. Paired with intro copy in
   the section's left column so photos aren't the only thing
   carrying the section.
   ═══════════════════════════════════════════════════════════ */

/* Larger icon size for the "Follow Our Work" row specifically —
   scoped to .team-social rather than bumping .footer-social-link's
   own base size, since that shared class will also drive the
   sitewide footer once it's built as a global include, and this
   size preference is specific to this page's usage of it.
   !important is required here: .footer-social-link's own font-size
   in the shared stylesheet is itself !important, and a non-important
   rule always loses to an !important one regardless of specificity. */
.team-social .footer-social-link {
  font-size: 1.75rem !important;
}

/* Fixed, square, integer photo size — not stretched to whatever
   fractional height the text side happens to need. The photos are
   400x400 source images; letting flex-stretch resize them to a
   non-square, sub-pixel height (e.g. 76x81.3px) forces the browser
   into a skewed downscale that shows as visible resampling
   artifacts (moiré on high-contrast detail like glasses/hair). A
   fixed square target scales cleanly and uniformly instead. */
.team-chip {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  height: 84px;
  background: rgba(54,120,131,0.07);
  border: 1px solid rgba(174,200,204,0.12);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.team-chip:hover {
  border-color: rgba(253,157,88,0.4);
}

.team-chip__photo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* When an image-optimization plugin rewrites <img class="team-chip__photo">
   into <picture class="team-chip__photo"><source><img></picture> (for WebP
   delivery), the class ends up on the wrapper, not the actual <img> — so the
   sizing/object-fit above never reaches the real image and it renders at its
   native 400x400. This re-applies the same sizing to the inner <img> too. */
.team-chip__photo img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  display: block;
}

/* Same picture-wrapping issue as .team-chip__photo above, but for the
   site-wide "rounded-circle" avatar pattern used inline (e.g.
   <img class="rounded-circle" style="width:48px;height:48px;object-fit:cover">
   in testimonial/showcase quote blocks). The image-optimization plugin's
   WebP rewrite moves the class AND inline style onto the wrapping <picture>
   instead of the <img>, so the real image ignores that sizing and renders
   at its native dimensions (typically 100x100), overflowing its box. This
   makes the actual <img> always fill whatever box the <picture> establishes,
   regardless of the specific pixel size set per-instance. */
picture.rounded-circle {
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}

picture.rounded-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-chip__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-width: 0;
}

.team-chip__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.15rem;
}

.team-chip__role {
  font-size: 0.78rem;
  color: var(--color-accent-dark);
  line-height: 1.3;
  margin: 0;
}

.bg-light .team-chip {
  background: #ffffff;
  border-color: rgba(174,200,204,0.4);
  box-shadow: 0 4px 28px rgba(54,120,131,0.13);
}

.bg-light .team-chip:hover {
  border-color: rgba(253,157,88,0.45);
  box-shadow: 0 4px 24px rgba(253,157,88,0.1);
}

.bg-light .team-chip__name { color: var(--color-secondary); }
.bg-light .team-chip__role { color: #4a6870; }

/* Quiet brand signature at the bottom of the "What This Looks Like"
   card — the card's checklist read shorter than its neighbouring
   column, leaving empty space below it; a logo mark reads as a
   deliberate closing flourish rather than a stray leftover gap.
   The source file (Serenichron-logo-01.svg, copied into ../assets/)
   originally used pure white fill for the wordmark and the compass
   icon's inner mark, meant for a dark background — recolored those
   fills to #040214 directly in the SVG so it reads on this card's
   white background without needing a tile behind it. */
.analysis-visual__signature {
  border-top: 1px solid rgba(174,200,204,0.15);
}

.analysis-visual__signature img {
  height: 64px;
  width: auto;
  display: block;
}

.bg-light .analysis-visual__signature { border-top-color: rgba(54,120,131,0.15); }

/* ---- ai-content-generation-and-marketing-audit/audit-page.css ---- */
/* ═══════════════════════════════════════════════════════════
   audit-page.css — the audit-page template (shared by all 17)

   This file is the ONLY page-specific CSS the template needs;
   every other component on the page comes from ../style.css.

   One genuinely new thing: the cost/after pair. The template
   replaces each page's wall of prose with two .ruled columns
   read side by side — the cost of doing nothing, then what
   changes after the audit. The only gap in the shared
   vocabulary is that both sides would otherwise show identical
   orange ticks, which destroys the contrast the pairing exists
   to create.
   ═══════════════════════════════════════════════════════════ */

/* The "cost of doing nothing" column. Keeps .check-row for layout but swaps
   the glyph to bi-x-circle-fill and mutes it to blue-grey, so the two columns
   read as opposites at a glance. A tick — even a muted one — next to
   "feast-or-famine revenue" reads as a feature. No new colour is introduced:
   this is --color-accent-dark, the blue-grey already used for body copy on
   dark sections. */
.cost-list .check-row i {
  color: rgba(174,200,204,0.45) !important;
}

.bg-light .cost-list .check-row i {
  color: rgba(54,120,131,0.4) !important;
}

/* .fact-value, .partner-strip and .capability-row all live in ../style.css —
   they are shared with the service-page template. */

/* ---- ai-readiness-and-integration-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- ai-workflow-automation-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- articles/articles.css ---- */
/* ═══════════════════════════════════════════════════════════
   articles.css — page-specific extras for /articles/
   .article-card: an image-topped blog card. No template component
   covers a card with a thumbnail image, since none of the other
   pages feature a content archive.
   The filter chips and status line live in ../style.css as
   .filter-bar / .filter-chip / .filter-status — shared with /audits/.
   ═══════════════════════════════════════════════════════════ */

.article-card {
  position: relative; /* containing block for .inc-card-link's .stretched-link */
  background: #ffffff;
  border: 1px solid rgba(174,200,204,0.3);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(54,120,131,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(253,157,88,0.15);
}

/* .inc-card-link's own :hover only fires when the cursor is directly over
   the small link text — with the whole card now clickable (.stretched-link),
   the arrow should react to a hover anywhere on the card so the affordance
   matches the actual click target. */
.article-card:hover .inc-card-link i { transform: translateX(3px); }

/* Was a background-image div. With 80 cards on the page that is 80 eager
   requests, and a CSS background cannot be lazy-loaded — an <img> with
   loading="lazy" and intrinsic dimensions can, and reserves its own space so
   the grid does not reflow as thumbnails arrive. */
.article-card__image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: rgba(54,120,131,0.06);
  overflow: hidden;
}

/* FlyingPress's WebP delivery rewrites <img class="article-card__image"> into
   <picture class="article-card__image"><source><img></picture> for any upload
   that still has a .jpg/.png original — the class (and its sizing) lands on
   the wrapping <picture>, which isn't a replaced element, so object-fit above
   never reaches the real image and it renders at native size, spilling over
   the card body below. Re-apply the sizing to the actual <img> inside; the
   overflow:hidden above clips it if this still isn't enough on its own. */
.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* The series name. Reads as a label, not a heading — it repeats on most cards,
   so it must not compete with the title. */
.article-card__cat {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.article-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

/* Capped at four lines so a long summary cannot push one card's "Read More"
   out of line with its neighbours in the same row. */
.article-card__desc {
  font-size: 0.88rem;
  line-height: 1.62;
  color: #4a6870;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__date {
  font-size: 0.76rem;
  font-weight: 600;
  color: #6b8a92;
}

.article-card__body .inc-card-link { margin-top: 0 !important; }

/* [hidden] alone loses to Bootstrap's display rules on .col-*, so a
   filtered-out column needs this to actually leave the layout. */
.article-col[hidden] { display: none !important; }

/* ── ARCHIVE TOOLBAR ──────────────────────────────────────── */

/* Sticky because the grid runs to 80 cards: the reader is deep in the list
   when they decide to narrow it.

   It is a direct child of the section, NOT of .container, so the band bleeds
   edge to edge. Inside .container it only spanned the container's width, and
   the cards scrolling underneath showed their box-shadows past both ends of
   the bar. The controls keep the page's normal width via their own .container
   nested inside. */
.archive-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-light);
  /* Symmetric: pinned at top:0 the bar butts against the viewport edge, so
     without the top padding the search box sat flush to it. */
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(54,120,131,0.18);
  transition: box-shadow 0.2s ease;
}

/* A zero-height marker sitting immediately above the toolbar in normal flow.
   Once it scrolls out of view the bar is pinned, which is when it earns a
   shadow — before that a shadow would just float over the hero for no reason.
   It must stay outside .archive-toolbar: a sticky element is a containing
   block, so a nested sentinel would ride along and never trip the observer. */
.archive-toolbar__sentinel {
  height: 1px;
  margin-bottom: -1px;
}

.archive-toolbar.is-stuck {
  box-shadow: 0 6px 20px rgba(54,120,131,0.13);
  border-bottom-color: rgba(54,120,131,0.28);
}

.archive-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.archive-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.archive-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #6b8a92;
  pointer-events: none;
}

.archive-search__input,
.archive-select__input {
  width: 100%;
  font-family: var(--primary-font-family);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-secondary);
  background: #ffffff;
  border: 2px solid rgba(54,120,131,0.28);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  transition: border-color 0.2s;
}

.archive-search__input { padding-left: 2.6rem; padding-right: 2.6rem; }

.archive-search__input::placeholder { color: #8aa3aa; font-weight: 500; }

.archive-search__input:focus,
.archive-select__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.archive-search__input:focus-visible,
.archive-select__input:focus-visible {
  outline: 3px solid var(--color-secondary-light);
  outline-offset: 2px;
}

/* The native clear affordance is inconsistent across browsers and invisible on
   this ground, so it is replaced by a button that is also keyboard-reachable. */
.archive-search__input::-webkit-search-cancel-button { display: none; }

.archive-search__clear {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(54,120,131,0.1);
  color: var(--color-secondary);
  font-size: 0.65rem;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.archive-search__clear:hover {
  background: var(--color-primary);
  transform: translateY(calc(-50% - 1px));
}

.archive-select { flex: 0 1 170px; }

/* Room for the caret, which the padding above would otherwise sit text under. */
.archive-select__input {
  padding-right: 2.2rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23367883'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

@media (max-width: 575.98px) {
  .archive-select { flex: 1 1 100%; }
  /* Three stacked controls plus the chip row is too tall to pin to a phone
     viewport — it would eat most of the screen it is meant to filter. */
  .archive-toolbar { position: static; box-shadow: none; }
}

/* ---- audits/audits.css ---- */
/* ═══════════════════════════════════════════════════════════
   audits.css — page-specific extras for /audits/

   Two content types the template doesn't cover:
   1. A catalog card that leads with a cover image — .inc-card has
      no image slot, and no existing component pairs a 16:10 figure
      with a title/description/feature-list/CTA stack.
   2. A client-side filter toolbar — nothing in the template is a
      set of toggle chips.

   Everything below is grounded in existing tokens (--color-primary,
   --color-secondary, --color-accent-dark, --color-light) and copies
   .inc-card's own radius/border/shadow values rather than inventing
   a second card recipe.
   ═══════════════════════════════════════════════════════════ */

/* ── CATALOG CARD ─────────────────────────────────────────── */

/* .inc-card already supplies background, border, radius, padding and
   the flex column; this only adds the image slot and tightens the
   padding so 4 cards sit comfortably across at lg. */
.audit-card {
  padding: 1.25rem !important;
  overflow: hidden;
}

/* 16:10, matching the generated SVG covers' own viewBox. Fixed ratio
   via the width/height attributes in markup + this rule, so the grid
   never reflows as images decode. */
.audit-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: var(--color-secondary);
}

/* Category tag. Same type treatment as .eyebrow but scoped here so it
   keeps its colour on the white tier — a bare .eyebrow loses to
   `.bg-light p` and greys out (see DESIGN-CONVENTIONS §15). */
.audit-card .audit-card__cat {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-bottom: 0.5rem !important;
}

.audit-card .audit-card__title {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

.audit-card .audit-card__desc {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}

/* Value-proposition list. Orange tick built from a border pair rather
   than an icon font, so it needs no extra markup inside each <li>. */
.audit-card__props {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.audit-card .audit-card__prop {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: var(--color-accent-dark) !important;
}

.audit-card .audit-card__prop::before {
  content: "";
  position: absolute;
  /* Centres the tick on the first line of the item. Measured, not guessed —
     0.35em sat 1.2px low. */
  top: 0.26em;
  left: 0;
  width: 0.42rem;
  height: 0.7rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bg-light .audit-card .audit-card__prop { color: #4a6870 !important; }

/* Delivery line — the one hard fact every audit page states. Sits above
   the CTA with a hairline separating it from the value list. */
.audit-card .audit-card__meta {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(174,200,204,0.15);
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--color-accent-dark) !important;
}

.bg-light .audit-card .audit-card__meta {
  border-top-color: rgba(54,120,131,0.15);
  color: #4a6870 !important;
}

/* .btn's own padding is right, but the card is narrow — drop the font a
   step so "View Audit" never wraps at the 4-up breakpoint. */
.audit-card__cta {
  font-size: 0.82rem !important;
  padding: 8px 16px !important;
}

/* ── FILTER TOOLBAR ───────────────────────────────────────── */

/* Moved to ../style.css as .filter-bar / .filter-chip / .filter-status — the
   /articles/ archive needs the same controls, so the shape belongs to the
   shared vocabulary (§8) rather than to this page. */

/* [hidden] alone loses to Bootstrap's own display rules on .col-*, so the
   filter's hidden cards need this to actually leave the layout. */
.audit-card-col[hidden] { display: none !important; }

/* ── HERO CARD COUNT BADGE ────────────────────────────────── */

/* Small tally beside each focus area in the hero index. */
.hero-card-list__count {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(253,157,88,0.15);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-primary);
}

/* Published price. Only one of the 16 audits currently has a price posted on
   serenichron.com (Website Performance & Speed Audit, $49.99 on /shop/), so
   this renders on that card alone rather than every card carrying an empty or
   invented slot. It sits inside .audit-card__meta as its own line, which keeps
   the CTA row-aligned: mt-auto pins the meta block's BOTTOM, so a two-line
   meta grows upward and never shifts the button. */
.audit-card .audit-card__price {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  letter-spacing: -0.01em;
}

/* ── "MORE AUDITS HIDDEN" CARD ────────────────────────────── */

/* Appended to the end of any filtered result set so hidden cards leave a
   visible trace. Deliberately reuses .inc-card/.audit-card so it sits in the
   grid rhythm, but reads as an action rather than a catalogue entry: dashed
   figure instead of a cover image, and the whole tile is the button.
   It's a <button>, so Reboot's UA styles need clearing back to card defaults. */
/* Translucent orange fill (18% over the white tier = #ffede1) rather than the
   solid brand orange: solid would out-shout the 16 real audit cards it sits
   beside, and nothing on this page carries a full-orange panel. At 18% the
   tile is unmistakably the odd one out while navy text still clears 18:1 on it.
   Consequence: NOTHING inside this card can be orange — --color-primary on
   this ground measures 1.82:1, so the tag and the "+N" go navy instead. */
.audit-showall {
  width: 100%;
  text-align: left;
  font-family: var(--primary-font-family);
  cursor: pointer;
  box-shadow: none !important;
}

/* The white tier re-tints every card component to the pale fill via
   `.bg-light.bg-paper .inc-card` at (0,3,0) — a bare `.audit-showall` at
   (0,1,0) loses to it even with !important, and the tile silently renders as
   just another pale card. Matching on .audit-card.audit-showall clears it at
   (0,4,0) instead of relying on file order. */
.bg-light.bg-paper .audit-card.audit-showall {
  border-style: solid !important;
  border-color: rgba(253,157,88,0.55) !important;
  background: rgba(253,157,88,0.18) !important;
}

.bg-light.bg-paper .audit-card.audit-showall:hover {
  border-color: var(--color-primary) !important;
  background: rgba(253,157,88,0.26) !important;
}

.audit-showall:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

/* Stands in for the 16:10 cover image so the card keeps the grid's vertical
   rhythm — same aspect-ratio and margin as .audit-card__img. A white veil over
   the orange keeps it reading as an empty slot rather than more card surface,
   and the dashed edge is what still says "placeholder, not an audit". */
.audit-showall__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 1rem;
  border: 2px dashed rgba(253,157,88,0.7);
  border-radius: 8px;
  background: rgba(255,255,255,0.55);
}

.audit-showall__plus {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-secondary);
}

/* The category slot on a real card is orange; here that would be 1.82:1, so it
   takes navy and leans on letter-spacing alone to read as a label. */
.audit-showall .audit-showall__cat {
  color: var(--color-secondary) !important;
  opacity: 0.65;
}

/* The inner CTA is a <span> dressed as a button (no interactive element nested
   inside the tile's own <button>). It uses .btn-primary rather than the ghost
   the 16 real cards use: the ghost inks itself navy over a teal border on light
   sections, which on this orange ground reads as a disabled control. Solid
   orange on the 18% wash separates cleanly and puts navy-on-orange at 9.9:1.
   .btn's own hover lift still fires when the pointer is over it, which reads
   correctly since the whole tile is clickable anyway. */
.audit-showall .audit-card__cta {
  display: block;
  text-align: center;
}

/* Title colour on the white tier — two separate failures of the same rule.
   .audit-card__title is a <p>, so it lost to `.bg-light p` and rendered in
   exactly the same grey as the description directly beneath it, flattening
   the card's hierarchy. .audit-showall__title is a <span>, which `.bg-light p`
   never reaches, so it kept .inc-title's white and disappeared against the
   white ground entirely (1:1 contrast). Both are re-declared at (0,3,0) —
   enough to clear `.bg-light p` at (0,1,1) — in navy (20.5:1 on white). */
.bg-light .audit-card .audit-card__title,
.bg-light .audit-showall .audit-showall__title {
  color: var(--color-secondary) !important;
}

/* ---- business-automation-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- business-growth-strategy/business-growth-strategy.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- contact/contact.css ---- */
/* ═══════════════════════════════════════════════════════════
   contact.css — page-specific extras for /contact/
   The "Contact Me" form has no template equivalent. This page is
   also a one-off: a single full-height hero (no sections below it)
   with the form living in a .hero-card beside the copy, instead of
   the usual fixed-padding hero + separate content section.
   ═══════════════════════════════════════════════════════════ */

/* Fills the viewport since there's nothing below it — .hero's own
   padding still applies (not overridden here), min-height just
   ensures the section never reads shorter than the viewport. */
.hero--full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* .contact-form lives inside a dark .hero-card now, not a light
   section, so labels use the dark-tier muted tone — the same token
   .partner-form (also a dark-section form) already uses. */
.contact-form label {
  color: var(--color-accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.contact-form .form-control {
  border-radius: 10px;
  border: 1px solid rgba(174,200,204,0.3);
  padding: 0.65rem 0.9rem;
}

/* ---- conversion-rate-optimization-cro-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- customer-journey-and-behavior-analytics-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- customer-relationship-management-crm-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- data-driven-decision-making-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- digital-transformation-and-tech-stack-optimisation-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- discovery-call/discovery-call.css ---- */
/* ═══════════════════════════════════════════════════════════
   discovery-call.css — page-specific extras for /discovery-call/

   The Calendly inline embed sits inside the page's dark hero, so it's
   asked to render as a dark panel instead of its default white document
   — otherwise it's a bright rectangle punched into the dark section.

   Calendly has no first-party dark-mode toggle. The embed exposes
   background_color / text_color / primary_color as query params on
   data-url (see index.html) — that's an account-level color
   customization, not guaranteed on every plan. Three non-obvious fixes
   below came from directly inspecting the live embed's DOM rather than
   guessing from the rendered pixels — see each rule's comment for the
   evidence:
     - the "day has availability" chip color is NOT a simple alpha-blend
       of primary_color over background_color; a background_color with
       any blue bias (including our own brand navy) skews it magenta,
       so the embed is asked for pure black instead.
     - a faint light hairline near the widget's bottom edge on load is
       Google's invisible reCAPTCHA badge shadow, masked with our own
       ::after strip since we can't reach into Calendly's iframe to
       restyle it directly.
     - the unselected time-slot buttons keep a hard-coded blue border
       (#0099ff) no matter what color params are passed — confirmed
       identical even against Calendly's own zero-params default theme,
       so it's a platform constant with no reachable fix from this page.
   Everything else here is "as dark as the embed allows," not a
   pixel-perfect match to the rest of the page — re-verify against the
   live Calendly account if its branding settings ever change.

   One content type the template doesn't cover: a third-party
   booking widget hosted inside the hero. .hero-card is the
   closest component but it's built for text — it has no way to
   host an iframe that brings its own background.

   Values are copied from .hero-card (radius, border, translucent
   navy ground, backdrop blur) so the booking panel reads as the
   same object, not a second card style.
   ═══════════════════════════════════════════════════════════ */

/* Same shell as .hero-card: rgba(4,2,20,x) is --color-secondary, and the high
   alpha is what lets it sit legibly over the .orb-ring glow behind it. */
.booking-panel {
  background: rgba(4,2,20,0.62) !important;
  border: 1px solid rgba(174,200,204,0.2) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  backdrop-filter: blur(14px) !important;
}

.booking-panel__title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

/* Calendly renders its own opaque document, so the wrapper supplies the
   rounded corner and clips the iframe to it — without overflow:hidden the
   iframe's square corners punch through the radius. Background matches the
   background_color param passed on data-url — see the note below on why
   that value (and not pure black) was chosen. */
.booking-panel__widget {
  position: relative;
  background: #080617;
  border-radius: 10px;
  overflow: hidden;
}

/* Masks the grecaptcha-badge shadow described below with a strip of our
   own, same-origin DOM — thin enough (6px) to only ever clip a sliver off
   whatever real content happens to be at the very bottom edge, never a
   whole button or its label (buttons run 40px+ tall with centered text).
   pointer-events:none keeps it purely visual: clicks pass straight through
   to the iframe underneath, so nothing under this strip loses interactivity. */
.booking-panel__widget::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #080617;
  pointer-events: none;
  z-index: 2;
}

/* Reserves the widget's height before Calendly's script runs, so the hero
   doesn't collapse and then jump on a slow connection. */
.booking-panel__widget .calendly-inline-widget {
  min-width: 100%;
  height: 640px;
}

/* Calendly's "day has availability" chip isn't a plain alpha-blend of
   primary_color over background_color — it's mixed in a way that's very
   sensitive to hue in the background. Tested empirically: background_color
   values with ANY blue bias push that chip toward magenta/plum; only a
   hue-neutral background_color keeps it a proper translucent orange.

   background_color=080617 above is sampled directly from the panel's own
   rendered navy (rgba(4,2,20,0.62) over the hero, ~rgb(8,6,23) at the
   widget's edges) — a deliberate trade-off, not an oversight: it makes the
   widget blend almost seamlessly into the panel, at the cost of the day
   chip rendering magenta instead of orange (confirmed: rgb(97,52,85)).
   A hue-neutral gray tuned to the same brightness (#070707) keeps the chip
   orange with only a modest, still-visible seam. Pick one on purpose.

   overflow:hidden here is a defensive default for the iframe's own CSS
   box (distinct from overflow inside the cross-origin document, which we
   can't reach). It does NOT fix a faint light hairline some visitors see
   near the widget's bottom edge on load. Root-caused via direct DOM
   inspection of the live embed: Calendly's page injects Google's
   `.grecaptcha-badge` (the invisible-reCAPTCHA corner badge, hidden by
   Calendly's own CSS after collapsing it to 0x0) for spam protection on
   the booking form, and that badge carries a browser-default
   `box-shadow: 0 0 5px rgb(128,128,128)`. The shadow itself is present
   in every embed, light or dark — it's just invisible against Calendly's
   normal white background, so this dark theme is what makes a
   pre-existing, otherwise-imperceptible artifact visible, not a bug this
   treatment introduced. It's rendered by Google's script inside Calendly's
   iframe — two cross-origin hops from this page — so no CSS or Calendly
   URL param here can reach, restyle, or remove it; that's a browser
   security boundary, not a missing setting. Masked instead, from our own
   side, via .booking-panel__widget::after above — see that rule for why
   a thin strip is safe where an earlier, taller mask attempt wasn't. */
.booking-panel__widget .calendly-inline-widget iframe {
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}

.booking-panel__widget .calendly-inline-widget.is-ready iframe {
  opacity: 1;
}

/* The iframe fading in from opacity:0 (above) hides Calendly's own boot-up
   flash, but that leaves a plain dark box with nothing happening on
   screen for however long that takes — this is the loading feedback for
   that gap. Sits over the same widget box, fades out on the same
   .is-ready trigger the iframe reveal already uses (real content painted,
   or the 4s safety-net timeout — see the page's own script), so there's
   exactly one "ready" signal driving both. */
.booking-panel__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.calendly-inline-widget.is-ready ~ .booking-panel__loader {
  opacity: 0;
}
.booking-panel__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(174,200,204,0.2);
  border-top-color: var(--color-primary);
  animation: booking-panel-spin 0.8s linear infinite;
}
@keyframes booking-panel-spin {
  to { transform: rotate(360deg); }
}
.booking-panel__loader-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}

@media (max-width: 575px) {
  .booking-panel { padding: 1rem !important; }
  .booking-panel__widget .calendly-inline-widget { height: 720px; }
}

.booking-panel__foot {
  padding-top: 1rem !important;
  border-top: 1px solid rgba(174,200,204,0.2) !important;
  font-size: 0.78rem !important;
  color: var(--color-accent-dark) !important;
}

.booking-panel__foot a {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* The confidentiality line closing the hero's copy column. Muted rather than
   body-weight — it's a reassurance, not a selling point. */
.hero-copy .discovery-confidential {
  padding-top: 1rem !important;
  border-top: 1px solid rgba(174,200,204,0.15) !important;
  font-size: 0.82rem !important;
  font-style: italic !important;
  color: var(--color-accent-dark) !important;
}

/* .step-lead moved to ../style.css — the service-page template uses it too,
   so it belongs in the shared component vocabulary. */

/* ---- ecommerce-store-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- email-marketing-and-automation-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- google-analytics-and-ga4-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- marketing-funnel-and-lead-nurturing-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- partners/partners.css ---- */
/* ═══════════════════════════════════════════════════════════
   partners.css — page-specific extras for /partners/
   Technology Partners cards use plain .inc-card (that section is
   already a dark-section, so .inc-card's own default dark styling
   applies with no override needed).
   Strategic/Affiliate Partners cards sit on bg-light sections but
   must stay dark — the live source keeps these logo cards dark
   regardless of section, since the logos are white/light marks.
   .inc-card can't do that (its .bg-light override flips it white),
   so .partner-card exists for this one case — every value below is
   copied directly from the template's own tokens/components
   (.inc-card's default background+border+radius+padding, .inc-title
   and .inc-text's default dark-section colors) rather than invented.
   ═══════════════════════════════════════════════════════════ */

.partner-card {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
  border: 1px solid rgba(174,200,204,0.12);
  border-radius: 12px;
  padding: 2rem;
}

/* Selector scoped under .partner-card (not just .partner-card__text):
   the shared stylesheet's ".bg-light p" rule is also !important and
   has higher specificity than a single class, so it would otherwise
   win and force this permanently-dark card's text to the light-section
   body color — illegible against a dark gradient. */
.partner-card .partner-card__text {
  font-size: 0.9rem;
  color: var(--color-light) !important;
  line-height: 1.6;
}

.partner-logo {
  height: 44px;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--color-white);
}

.partner-logo svg,
.partner-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.partner-form label {
  color: var(--color-accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.partner-form .form-control,
.partner-form .form-select {
  border-radius: 10px;
  border: 1px solid rgba(174,200,204,0.3);
  padding: 0.65rem 0.9rem;
}

.partner-form .form-check-label {
  color: var(--color-accent-dark);
  font-size: 0.85rem;
}

.partner-form .form-check-label a {
  color: var(--color-primary);
}

/* ---- product-listing-and-marketplace-seo-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- seo-and-content-optimization-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ---- services/services.css ---- */
/* ═══════════════════════════════════════════════════════════
   services.css — page-specific extras for /services/
   .capability-row: a big ghost-number + bold label + description
   row. Structurally identical to .myth-item's grid, but that
   class is semantically a Q&A pair (italic myth-q + rebuttal
   myth-a) — wrong fit for a plain capability list. Values are
   copied 1:1 from .myth-item's tokens, just renamed.
   ═══════════════════════════════════════════════════════════ */

/* .capability-row moved to ../style.css — the service-page template uses it
   as its box-free numbered sequence, so it belongs in the shared vocabulary. */

/* .inc-card-link--standalone moved to ../style.css — it is now used by the
   audit-page template too, so it belongs in the shared component vocabulary
   rather than being defined per page. */

/* ---- showcase/showcase.css ---- */
/* ═══════════════════════════════════════════════════════════
   showcase.css — page-specific extras for /showcase/
   Every client story follows one fixed frame — eyebrow, logo,
   intro, headline stat(s), testimonial(s), facts strip — so the
   reader always reads the same shape in the same order. Only the
   content after the facts strip (the "how we did it" narrative)
   varies per story. Components below support that frame; a
   testimonial carousel (when a story has more than one quote)
   reuses Bootstrap's own carousel + the site's existing
   .quote-block, not a new component. The top-of-page marquee
   further down is the one genuinely new component on this page.
   ═══════════════════════════════════════════════════════════ */

/* Client logo, shown at the top of every chapter — a plain white
   tile so a client's own brand mark stays legible on both light
   and dark sections. No template component covers a third-party
   image mark (.inc-icon is for our own bootstrap-icon glyphs). */
.client-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(174,200,204,0.25);
  padding: 0.6rem 1.1rem;
}

.client-logo-badge img {
  height: 30px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

/* Modifier for a client mark that's white/light-colored art on a
   transparent background (e.g. Guides Collective's logo) — the
   default white tile would make it disappear. */
.client-logo-badge--dark {
  background: var(--color-secondary);
  border-color: rgba(174,200,204,0.3);
}

/* On the white tier the white tile has no edge to sit against, so the badge
   dissolves into the section ground and the logo appears to float. Stronger
   border restores the tile. (--dark keeps its own border — a navy tile on
   white already reads as a tile.) */
.bg-light.bg-paper .client-logo-badge {
  border-color: rgba(54,120,131,0.28);
}

/* Auto-scrolling testimonial marquee, right below the hero. Pure
   CSS/JS — no third-party carousel library — since the site's only
   precedent for an auto-scroll slider (the template's Splide.js
   "Partners Slider") points at a WordPress-theme-relative JS path
   that won't resolve in this static build. The card list is
   rendered twice in markup; a small rAF loop in index.html drives
   real `scrollLeft` (not a CSS transform) so the same track is
   natively drag-scrollable by hand, not just auto-playing. Pauses
   on hover exactly as before; also pauses while the user is
   actively dragging, and stays paused until they move off. Always
   on a light section (fixed by page's alternation), so the card is
   light-only — no dark-section variant needed. */
.testimonial-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.testimonial-marquee::-webkit-scrollbar {
  display: none;
}

.testimonial-marquee.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.testimonial-marquee__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}

/* Column layout (rather than just block flow) so the who-block below
   can be pushed to the bottom via margin-top: auto — every card in
   the track is already stretched to the row's tallest card height
   (flex row default align-items: stretch), so this bottom-aligns the
   photo/name/title group across every card regardless of how many
   lines its own quote runs to. */
.testimonial-marquee-card {
  flex: 0 0 auto;
  width: 380px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(174,200,204,0.3);
  border-radius: 14px;
  box-shadow: 0 4px 28px rgba(54,120,131,0.1);
  padding: 1.75rem;
  -webkit-user-select: none;
  user-select: none;
}

.testimonial-marquee-card img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.testimonial-marquee-card__mark {
  font-family: Georgia, serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(253,157,88,0.35);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.testimonial-marquee-card__quote {
  font-size: 0.95rem;
  color: var(--color-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  min-height: 4.8em;
}

.testimonial-marquee-card__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.testimonial-marquee-card__who img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-marquee-card__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0;
}

.testimonial-marquee-card__role {
  font-size: 0.76rem;
  color: #4a6870;
  margin: 0;
}

/* Same `.bg-light p` trap as .story-stat__num below: these are <p> elements
   on a light section, so they need .bg-light scoping + !important or the
   quote and the name both render in muted body grey instead of navy. */
.bg-light .testimonial-marquee-card__quote { color: var(--color-secondary) !important; }
.bg-light .testimonial-marquee-card__name { color: var(--color-secondary) !important; }
.bg-light .testimonial-marquee-card__role { color: #4a6870 !important; }

/* White-tier support. The marquee sits on the pale tier today, but its card
   is hardcoded white — if the section is ever re-tiered the cards would
   vanish into the ground. Invert to the pale fill like every other card
   component does on .bg-paper. */
.bg-light.bg-paper .testimonial-marquee-card {
  background: var(--color-light);
  border-color: rgba(174,200,204,0.55);
  box-shadow: none;
}

@media (max-width: 575px) {
  .testimonial-marquee-card { width: 280px; }
}

/* The recurring "facts strip" — Client / Scope / Time frame /
   Technologies — identical treatment on every chapter. Its bottom
   border is the separator: fixed frame above it, per-story
   narrative below it. */
.story-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(174,200,204,0.15);
  border-bottom: 1px solid rgba(174,200,204,0.15);
}

.story-facts__item { min-width: 150px; }

/* Spacing below the label is Bootstrap's own .mb-3 utility, applied
   directly in markup — not set here. */
.story-facts__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.story-facts__value {
  font-size: 0.92rem;
  color: var(--color-light);
  font-weight: 600;
  line-height: 1.4;
}

.bg-light .story-facts { border-color: rgba(54,120,131,0.15); }
.bg-light .story-facts__value { color: var(--color-secondary) !important; }
.bg-light .story-facts__label { color: var(--color-primary) !important; }

/* Multi-value facts (e.g. several project websites) stack instead
   of running together comma-separated on one line. Layout
   (d-flex flex-column gap-1) is set in markup via Bootstrap
   utilities; only font sizing stays here, since no fs-* utility
   matches this value. Deliberately no color set — a nested <a>
   keeps Bootstrap's own link color instead of losing it to this
   class. */
.story-facts__list {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

/* .story-facts__tags: no CSS of its own — layout is set in markup
   via Bootstrap utilities (d-flex flex-wrap gap-2 mt-3), kept as a
   class purely as a hook for future targeting. The mt-3 is
   deliberately larger than the label's mb-2 so it, not the label's
   margin, wins the adjacent-margin collapse: a tag's border is a
   crisp edge sitting right at its own box boundary (unlike plain
   text, whose line-height adds invisible padding above the
   glyphs), so it needs the extra room to read as the same gap. */

.story-facts__tag {
  display: inline-block;
  background: rgba(253,157,88,0.1);
  color: var(--color-light);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(174,200,204,0.15);
}

.bg-light .story-facts__tag {
  color: var(--color-secondary);
  border-color: rgba(54,120,131,0.15);
}

/* The headline stat grid — one shared component for every story's
   "result at a glance," whether it holds one number or four. Tiles
   are capped and centered so a 1-stat story doesn't stretch to
   fill the row the way a 4-stat story does. */
.story-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 200px));
  justify-content: center;
  gap: 1.75rem 2.5rem;
}

.story-stat__num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.story-stat__label {
  font-size: 0.85rem;
  color: var(--color-accent-dark);
  margin-top: 0.4rem;
}

/* Both of these are <p> elements, so on a light or white section they lose
   to the shared stylesheet's `.bg-light p { color: #4a6870 !important }` —
   !important beats non-important at any specificity. Scoped under .bg-light
   AND marked !important so (0,2,0) wins the tie. Without this the headline
   result number — the loudest thing in each story — rendered in muted body
   grey on every light section instead of orange. */
.bg-light .story-stat__num { color: var(--color-primary) !important; }
.bg-light .story-stat__label { color: #4a6870 !important; }

/* Small rounded badge used for a duration/relationship callout
   (e.g. "2 years and counting") inside the per-story narrative. */
.story-duration-badge {
  display: inline-block;
  background: rgba(253,157,88,0.12);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

/* ---- technologies/technologies.css ---- */
/* ═══════════════════════════════════════════════════════════
   technologies.css — page-specific extras for /technologies/

   .tech-item: one tool — its name and a line on what it does.
   Brand logos were tried and dropped: only 61 of the 84 tools
   had a usable mark, and a wall mixing real logos with monogram
   placeholders read worse than no logos at all.

   A hairline above each item is what gives the grid its structure
   now that nothing anchors the left edge. Same device as .ruled,
   which is safe here: all eight sections are one parallel series
   and share a single texture by design (§17).
   ═══════════════════════════════════════════════════════════ */

.tech-item {
  border-top: 1px solid rgba(174,200,204,0.18);
  padding-top: 1rem;
}

.bg-light .tech-item { border-top-color: rgba(54,120,131,0.18); }

.tech-item__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.tech-item__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-accent-dark);
  margin-bottom: 0;
}

.bg-light .tech-item__name { color: var(--color-secondary); }
.bg-light .tech-item__desc { color: #4a6870; }

/* ── HERO INDEX ───────────────────────────────────────────── */

/* The hero card is a table of contents for a ten-section page, so its rows are
   links. They keep the card's own type; only the hover state marks them out. */
.hero-card-list--index .hero-card-list__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.hero-card-list--index .hero-card-list__link:hover .hero-card-list__label {
  color: var(--color-primary);
}

.hero-card-list--index .hero-card-list__link:focus-visible {
  outline: 3px solid var(--color-secondary-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero-card-list__count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-accent-dark);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ---- website-performance-and-speed-audit/audit-page.css (identical to ai-content-generation-and-marketing-audit/audit-page.css, skipped) ---- */

/* ── HEADER: default Gutenberg Navigation block, styled to match sn-nav ──
   Structure: Group.sn-nav > Group.container > Site Logo + Navigation.sn-navigation
   (see wp-content/themes/twentytwentyfive/parts/header.html) */

.sn-nav {
  padding: 12px 0;
}
/* backdrop-filter (from pages/style.css's .sn-nav rule) creates a new
   containing block for position:fixed descendants — that traps the
   Navigation block's fixed, full-viewport mobile overlay menu inside the
   nav bar's own 64px height instead of covering the screen. Disable it
   only below the breakpoint where that overlay can open (991.98px — see
   the overlay-breakpoint override below); desktop keeps the blur since
   nothing there is position:fixed. */
@media (max-width: 991.98px) {
  .sn-nav {
    backdrop-filter: none !important;
    background-color: var(--color-secondary) !important;
  }
}

/* WP core switches the Navigation block from hamburger/overlay to inline
   at a fixed 600px breakpoint. That's too narrow for this nav (5 items +
   a CTA button) on its own, but the real ceiling is set by Bootstrap's
   OWN .container breakpoint tiers, not raw viewport width: .container
   maxes out at 720px for any viewport from 768px up to 991.98px (its "md"
   tier) and only widens to 960px at 992px (the "lg" tier). An earlier
   pass used a flat 899.98px cutoff, which landed inside that 768-991px
   zone — inline nav switched on at 900px while .container was still
   capped at 720px, so the nav wrapped to two rows anyway (confirmed: at
   977px .container measured exactly 720px with flex-wrap:wrap). Match
   Bootstrap's own tier boundary instead of picking an independent number,
   so the inline nav only turns on once .container has actually widened to
   fit it. Overrides core's `@media (min-width: 600px)` visibility rules
   for these two elements. */
@media (min-width: 600px) and (max-width: 991.98px) {
  .sn-navigation .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .sn-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
.sn-nav .container {
  align-items: center;
  min-height: 40px;
}

/* Logo */
.wp-block-site-logo img {
  height: 40px !important;
  width: auto !important;
  display: block;
}

/* Nav row */
.sn-navigation {
  margin-left: auto !important;
  gap: 0.5rem;
}
.sn-navigation .wp-block-navigation__container {
  align-items: center;
  gap: 0.35rem;
}

/* Links */
.sn-navigation .wp-block-navigation-item__content {
  color: var(--color-accent-dark) !important;
  font-family: var(--primary-font-family);
  font-weight: 500 !important;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem !important;
  transition: color 0.2s;
}
.sn-navigation .wp-block-navigation-item__content:hover,
.sn-navigation .wp-block-navigation-item__content:focus {
  color: var(--color-primary) !important;
}
/* Clicking a desktop nav item (top-level, dropdown, or the CTA button)
   focuses it, and Twenty Twenty-Five's global `*:focus{outline:2px
   solid}` picks up currentColor — orange here, since the :focus rule
   above sets that as the text color — so every click flashed an orange
   outline box. Same bug/fix as the mobile overlay's auto-focus highlight
   (further down this file): suppress the outline for :focus that isn't
   :focus-visible (mouse clicks aren't, in modern browsers) so it only
   shows for genuine keyboard tab navigation. */
.sn-navigation .wp-block-navigation-item__content:focus:not(:focus-visible) {
  outline: none !important;
}
/* Same click-flash bug on the logo link — it's .custom-logo-link, not
   .wp-block-navigation-item__content, so the rule above doesn't reach
   it. Twenty Twenty-Five's global focus outline defaults to
   currentColor, which for a link is whatever color it inherits (not
   necessarily orange here, but still an unwanted flash on click either
   way) — same fix regardless of the actual color. */
.sn-nav .custom-logo-link:focus:not(:focus-visible) {
  outline: none !important;
}
/* Twenty Twenty-Five's theme.json global styles underline nav links on
   hover (:root :where(.wp-block-navigation a...):hover), specific enough
   (:root + class + :hover) to beat a plain selector — override explicitly
   on every state, including the CTA button. */
.sn-navigation .wp-block-navigation-item__content,
.sn-navigation .wp-block-navigation-item__content:hover,
.sn-navigation .wp-block-navigation-item__content:focus,
.sn-navigation .wp-block-navigation-item__content:active {
  text-decoration: none !important;
}
.sn-navigation .wp-block-navigation__submenu-icon svg {
  fill: currentColor;
  width: 0.65em;
  height: 0.65em;
}
/* Nested toggles (Audits/Services' own chevron, one level inside
   Offerings' dropdown) render invisible without this: the icon is a
   <button>, and without an inherited `color` its currentColor fill/stroke
   resolves to the browser's default black — invisible against the dark
   dropdown panel. Same root cause already fixed once for the mobile
   overlay's submenu icons (see the .is-menu-open rules below); this is
   the desktop-dropdown equivalent. Matches the nested link text's own
   colour (--color-accent-dark) so the arrow and its label read as one
   unit. No rotation change needed — core already points a nested
   submenu's chevron at 3 o'clock (opens rightward) vs. 12 o'clock for a
   top-level one (opens downward); it was just invisible. */
.sn-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
  color: var(--color-accent-dark);
}

/* Dropdown panels (submenus, incl. nested Audits/Services under Offerings).
   width:max-content sizes each panel to its own content — the "Audits" /
   "Services" panel stays narrow, the long audit/service title lists grow
   up to max-width (380px is a ceiling, not a floor) before wrapping.
   Applied to every panel regardless of depth: a
   `.submenu-container .submenu-container` selector doesn't reliably match
   the actually-active nested flyout — WP's Interactivity API doesn't keep
   the DOM path a naive depth selector expects. */
.sn-navigation .wp-block-navigation__submenu-container {
  background: var(--color-secondary) !important;
  border: 1px solid rgba(174, 200, 204, 0.15);
  border-radius: 10px;
  padding: 0.4rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  width: max-content !important;
  min-width: 0 !important;
  max-width: 380px !important;
}
.sn-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.55rem 0.85rem !important;
  border-radius: 6px;
  white-space: normal;
}
.sn-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(253, 157, 88, 0.08);
}
.sn-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  line-height: 1.35;
}

/* CTA — one class (menu-cta), added per-item in the Navigation block, styled as a button */
.sn-navigation .wp-block-navigation-item.menu-cta .wp-block-navigation-item__content {
  background: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  font-weight: 600 !important;
  border-radius: 8px;
  padding: 0.55rem 1.1rem !important;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sn-navigation .wp-block-navigation-item.menu-cta .wp-block-navigation-item__content:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-secondary) !important;
  box-shadow: 0 6px 22px rgba(253, 157, 88, 0.3);
  transform: translateY(-1px);
}

/* ── Mobile / tablet overlay menu ──────────────────────────────────────
   Applies whenever the hamburger opens (< 992px — see the breakpoint
   override above). Three things needed real work beyond core's defaults:
   1. Core forces every nested submenu permanently visible in the overlay
      (`.has-child .submenu-container { opacity:1; visibility:visible;
      height:auto; ... }`, unconditional) — even though it already wires a
      working click handler + `aria-expanded` state on each toggle button.
      That flattened all 30 links (16 audits + 7 services) into one long
      list with no way to collapse it. Fixed by reversing that rule:
      collapsed by default, opens via `[aria-expanded="true"] + .submenu`
      — reusing WP's own state instead of building a parallel one.
   2. Twenty Twenty-Five's global `*:focus { outline: 2px solid }` picks up
      `currentColor`, which is orange on a focused/hovered link — reads as
      a stray box around whichever item auto-focuses on open. Replaced
      with a left accent bar + tint instead of an outline.
   3. The CTA was buried at the bottom of a 30-item list. Pinned it as a
      sticky footer within the scrollable overlay so it's reachable
      without hunting for it. */

.sn-navigation .wp-block-navigation__responsive-container-open svg {
  fill: var(--color-light);
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--color-secondary) !important;
}
/* WP's own overlay padding (clamp(1rem, var(--wp--style--root--padding-
   right), 20rem), ~30px at phone widths) insets the whole dialog — and
   since the close button is `right:0` relative to that dialog, it ends
   up ~30px from the true edge while the closed-state hamburger (a plain
   flex item in .sn-nav .container, Bootstrap's 12px gutter) sits ~12px
   from the edge. Match the overlay's own padding to that same 12px so
   both buttons anchor to the same edge — also aligns the list items
   underneath to the same edge the closed nav already uses, not just the
   button in isolation. */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  transition: background-color 0.2s;
  /* Matching right edges (previous pass) still left the icon itself ~10px
     left of the hamburger's icon, because this button is a larger 44px
     circular touch target vs. the hamburger's 24px — same right edge,
     but a wider box means a further-left center. Shift past the edge by
     half the width difference ((44-24)/2 = 10px) so the icon centers
     match exactly, not just the edges. */
  right: -10px !important;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
  background: rgba(174, 200, 204, 0.1);
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  fill: var(--color-light);
}

/* WP auto-focuses the first item (Offerings) programmatically every time
   the overlay opens (callbacks.focusFirstElement) — that's not a real
   user interaction, so it shouldn't look like one. An earlier pass used
   plain :focus here on the assumption Chromium wouldn't treat that
   auto-focus as :focus-visible, which turned out backwards: it actually
   matches :focus but NOT :focus-visible (verified directly — a plain
   :focus rule was painting a permanent-looking highlight on "Offerings"
   on every open, which read as a stray/stuck selection rather than focus
   feedback). Split it: no visual indicator at all for :focus-without-
   -visible (the auto-focus case — also needs outline:none explicitly,
   otherwise Twenty Twenty-Five's global `*:focus{outline:2px solid}`
   fills back in), and the nice highlight only for genuine :focus-visible
   (real keyboard tab navigation). */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
  outline: none !important;
  background: none !important;
  box-shadow: none !important;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  outline: none !important;
  background: rgba(253, 157, 88, 0.1);
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

/* Level 1 — Offerings, Showcase, Articles, About Us. Excludes .menu-cta:
   it's a direct child of the same top-level container, so without
   :not(.menu-cta) this generic styling (light-colored text, meant for
   plain nav links) was overriding the CTA's own dark-on-orange button
   colors — the button rendered with white text on mobile instead of
   matching the desktop version. */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.menu-cta) {
  border-bottom: 1px solid rgba(174, 200, 204, 0.1);
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.menu-cta) > .wp-block-navigation-item__content {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--color-light) !important;
  padding: 1rem 0.25rem !important;
}
/* Core hides the toggle icon entirely in the default overlay (it assumes
   everything is force-expanded, so no toggle is needed) — bring it back
   now that submenus collapse again. */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--color-light);
}
/* The chevron path has no explicit stroke — it resolves via currentColor,
   which without an inherited `color` defaults to black and disappears
   against the dark overlay background. */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg path {
  stroke: currentColor;
}
/* Core also sets flex-direction:column on .has-child in the overlay —
   harmless while the toggle button was display:none (label just sat
   above the always-expanded list), but now that the button is visible
   again it stacked directly under the label instead of beside it. Force
   label + chevron onto one row, with the submenu list wrapping to its
   own full-width row below (flex-basis:100% is the standard "always wrap
   this item to a new line" trick within a wrapping flex row). */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
  flex: 1 1 auto;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-icon {
  flex: 0 0 auto;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
  flex: 1 1 100% !important;
  /* !important needed: the desktop dropdown rule above
     (.wp-block-navigation__submenu-container { width: max-content
     !important; max-width: 380px !important; }) has no .is-menu-open
     exclusion, so it also reaches into the mobile overlay and — since
     it's !important — beats a plain (non-important) width:100% here,
     even though the collapsed submenu is visually clipped via
     max-height:0. That left the row 380px wide (desktop's max-content
     cap) inside a 330px-wide overlay, pushing the chevron off-screen. */
  width: 100% !important;
  max-width: 100% !important;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
  width: 2.75rem;
  height: 2.75rem;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg {
  transition: transform 0.25s ease;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Collapse every nested list by default; only the branch whose toggle is
   aria-expanded="true" opens. Height-animated via max-height (the list
   length is dynamic, so an exact grid-rows collapse isn't practical) —
   generous enough to never clip the longest branch (16 audit links). */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container {
  max-height: 2000px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* Level 2 — Audits / Services (inside the Offerings branch) */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: none;
  box-shadow: none;
  border-left: 2px solid rgba(253, 157, 88, 0.25);
  margin-left: 0.5rem !important;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  padding: 0.85rem 0.25rem 0.85rem 1rem !important;
}

/* Level 3 — individual audit / service page links */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--color-accent-dark) !important;
  padding: 0.65rem 0.25rem 0.65rem 1.25rem !important;
  line-height: 1.4;
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  border-left-color: rgba(174, 200, 204, 0.15);
}

/* CTA — pinned first via `order`, right under the close button, so it's
   immediately visible with zero scrolling. (Tried position:sticky at the
   bottom first — since the CTA's natural flow position is at the very
   end of a list that can run to 30+ items when Offerings is expanded, a
   bottom-0 sticky element stays pinned for the entire scroll and visibly
   overlaps whatever list item happens to scroll underneath it, e.g.
   "Marketing Funnel & Lead Nurturing Audit" mid-list. Pinning to the top
   avoids that whole class of overlap issue outright.) */
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.menu-cta {
  order: -1;
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(174, 200, 204, 0.15);
}
.sn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.menu-cta .wp-block-navigation-item__content {
  display: block;
  text-align: center;
  font-size: 1rem !important;
  padding: 0.9rem !important;
}
/* ── Strip WordPress's global block spacing from the page-content wrapper ──
   theme.json sets styles.spacing.blockGap (1.2rem, shows up as margin-top
   on <main> and, same cause, on <footer>) and styles.spacing.padding
   (50px, shows up via the has-global-padding class on .entry-content)
   site-wide. Our redesigned pages are full-bleed Bootstrap layouts that
   manage their own spacing, so both need to go. Scoped to the specific
   tag+class combos used only by the page-content wrapper and the footer
   template part — NOT a blanket `.wp-block-group` rule, which would also
   strip the header's .sn-nav / .container groups that need their own
   padding. */
main.wp-block-group,
.entry-content.wp-block-post-content,
footer.wp-block-template-part {
  margin: 0 !important;
  padding: 0 !important;
}

/* The rule above zeroes <main>'s own box, but theme.json's blockGap also
   applies as margin-top on each of <main>'s direct children via WP's
   `.is-layout-flow > * + *` block-gap rule — a separate mechanism, since
   it targets the sibling relationship, not the <main> element itself.
   Every section on a redesigned page sets its own spacing with Bootstrap
   classes/padding, so this default (visible as an ~19px gap above e.g.
   templates/single.html's .cta-section) needs to default to 0 the same
   way, not just on <main> itself. */
main.wp-block-group.is-layout-flow > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* .sn-redesign (the alignfull wrapper injected around every redesigned
   page's content — see wordpress/REDESIGN-PUSH.md, "alignfull" section)
   overflows the viewport on mobile. Cause: WP's core `.alignfull` rule
   bleeds content outward using the theme.json --wp--style--root-padding-*
   custom property (`margin-left: calc(-1 * var(--wp--style--root-padding-
   left))`, roughly) to compensate for .entry-content's own padding. We
   zeroed .entry-content's actual padding above, but that CSS variable is
   still defined (30-50px, from theme.json's clamp), so the compensating
   negative margin still fires — pulling .sn-redesign outward by 30px+ on
   both sides with nothing left to compensate for, i.e. pure overflow.
   Since .entry-content is already edge-to-edge with zero padding, the
   bleed technique is redundant here; .sn-redesign just needs to match its
   parent's box exactly. */
.sn-redesign {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* ── FOOTER: Gutenberg blocks (Columns, Site Logo, Social Links,
   Navigation ref: "Quick Links" wp_navigation post, Separator), styled to
   match homepage/index-001.html's <footer class="sn-footer bg-secondary">
   reference. Base colors/spacing (.sn-footer, .footer-heading,
   .footer-link, .footer-social-link, .footer-divider) already live in
   pages/style.css — this file only covers the parts that are genuinely
   new here: the Navigation block used as a vertical Quick Links list,
   and the Social Links block. */

/* The outer .sn-footer group (layout:flex, orientation:vertical) defaults
   to align-items:flex-start, and WP's own flex-layout CSS zeroes out
   Bootstrap's .container { margin-left/right: auto } on its flex-item
   children (confirmed: computed margin-left/right both 0px despite
   Bootstrap's rule) — so .container sat pinned to the left edge instead
   of centering within the full-width footer, same underlying "flex
   parent overrides block-centering assumptions" issue as elsewhere in
   this build. Centering via align-items on the parent instead of
   fighting to restore the (now-irrelevant) auto margins. */
.sn-footer {
  align-items: center !important;
}
.sn-footer .container {
  padding-top: 0;
  padding-bottom: 0;
}
.footer-columns {
  gap: 3rem !important;
}
/* The reference (index-001.html) gives the Quick Links column its own
   offset-lg-1 — an extra column's worth of space specifically before it,
   not the symmetric gap Logo|QuickLinks|Mission got here from plain
   equal-width wp:columns. Nudging it right with extra margin to
   approximate that same "Quick Links sits apart from the logo, not
   flush beside it" spacing. */
.footer-columns > .wp-block-column:nth-child(2) {
  margin-left: 2.5rem !important;
}

/* .footer-bottom (layout:flex, justifyContent:space-between) shrink-
   wrapped to its own content width (~475px) instead of spanning the
   full container — it's a flex-item child of .container, which is
   itself flex/vertical and doesn't stretch children to full width by
   default (same category of issue as the .sn-footer centering fix
   above). With no extra width to distribute, space-between had nothing
   to push apart, so the legal links sat close to the copyright text
   instead of at the right edge. */
.footer-bottom {
  width: 100% !important;
}

/* Quick Links list — match .footer-link's size/color exactly (the
   Navigation block's own default sizing is noticeably larger, ~18px,
   than the rest of the footer's small print) and give it list-like
   vertical rhythm instead of the Navigation block's default flex gap. */
.footer-quicklinks.wp-block-navigation {
  gap: 0.6rem !important;
}
.footer-quicklinks .wp-block-navigation-item__content {
  color: rgba(174, 200, 204, 0.5) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.footer-quicklinks .wp-block-navigation-item__content:hover {
  color: var(--color-primary) !important;
}

/* Social links — WP's "Logos Only" style variant already strips the
   default circle background; just recolor to match .footer-social-link
   and size them consistently with the reference (1.3rem glyphs). */
.footer-social-links.wp-block-social-links {
  margin-top: 0.75rem !important;
}
.footer-social-links .wp-social-link a {
  color: var(--color-white) !important;
  transition: color 0.2s;
}
.footer-social-links .wp-social-link:hover a {
  color: var(--color-primary) !important;
}
.footer-social-links .wp-social-link svg {
  width: 1.6rem;
  height: 1.6rem;
}
.footer-social-links.wp-block-social-links {
  gap: 1rem !important;
}

.footer-bottom p {
  color: rgba(174, 200, 204, 0.5) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}
.footer-legal-link + .footer-legal-link {
  margin-left: 1.25rem;
}

/* Same click-flash bug as the header (see header-nav.css): Twenty
   Twenty-Five's global `*:focus{outline:2px solid}` picks up currentColor,
   so clicking any footer link/icon flashed an orange (or otherwise
   unwanted-looking) outline box. Suppress it for :focus that isn't
   :focus-visible (mouse clicks aren't, in modern browsers) so the outline
   only shows for genuine keyboard tab navigation — across every clickable
   element in the footer, not just the Useful Links nav. */
.footer-quicklinks .wp-block-navigation-item__content:focus:not(:focus-visible),
.sn-footer .custom-logo-link:focus:not(:focus-visible),
.footer-social-links .wp-social-link a:focus:not(:focus-visible),
.footer-legal-link:focus:not(:focus-visible) {
  outline: none !important;
}
/* ── SINGLE POST TEMPLATE ─────────────────────────────────────
   Styles for wp-content/themes/twentytwentyfive/templates/single.html —
   the default template every blog post renders through. Not a
   website-redesign/pages/<slug> page, so it has no page-level CSS file of
   its own; this is appended into the theme's style.css build alongside
   header-nav.css / footer.css / page-wrapper-fixes.css.

   This is a reading template, not a marketing page — DESIGN-CONVENTIONS.md
   is used here for visual identity (tokens, type, buttons, shape/motion)
   only. Its page-anatomy rules (§6-§8: hero variants, full-width sections,
   card-grid limits) are written for argument-making marketing pages and
   are deliberately not all followed here — a two-column reading layout
   with a sticky "keep reading" rail is the right shape for an article,
   not a chessboard of dark/light sections. */

/* ── HERO — featured image background, or the flat dark fallback ──── */
.post-hero { overflow: hidden !important; }
.post-hero--image {
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 46vh !important;
  padding: 7rem 0 !important;
  display: flex !important;
  align-items: center !important;
}
@media (max-width: 767.98px) {
  .post-hero--image { min-height: 38vh !important; padding: 6rem 0 !important; }
}

/* The navy scrim over the photo. Full strength (unchanged) on the left,
   where the eyebrow/title/meta sit — masked down to ~60% of its own
   strength by the right edge, so the photo itself becomes a little more
   visible there instead of the text-legibility area. The gradient's own
   colour stops never change; only the mask varies its opacity by x. */
.post-hero--image::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(4,2,20,0.86) 0%, rgba(4,2,20,0.9) 50%, rgba(4,2,20,0.96) 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.6) 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.6) 100%) !important;
}
.post-hero__inner { position: relative !important; z-index: 1 !important; width: 100% !important; }

.post-hero__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--color-accent-dark) !important;
}
.post-hero__meta .wp-block-post-author-name,
.post-hero__meta .wp-block-post-date { color: inherit !important; }
.post-hero__meta-dot { opacity: 0.5 !important; }

/* core/post-terms renders its taxonomy link with the browser's default
   link colour unless told otherwise — .eyebrow only colours itself, not
   descendant <a> tags. */
.eyebrow a { color: inherit !important; text-decoration: none !important; }
.eyebrow a:hover { text-decoration: underline !important; }

/* ── BODY SECTION — reading column + sticky sidebar, no section margin ── */
.post-body-section {
  margin: 0 !important;
  padding: 4rem 0 5rem !important;
}
@media (max-width: 767.98px) {
  .post-body-section { padding: 3rem 0 3.5rem !important; }
}

.post-layout {
  display: flex !important;
  align-items: stretch !important;
  gap: 3.5rem !important;
}
@media (max-width: 991.98px) {
  .post-layout { flex-direction: column !important; gap: 3rem !important; }
  .post-layout__main, .post-layout__side { flex-basis: 100% !important; width: 100% !important; }
}

/* ── ARTICLE BODY ────────────────────────────────────────────
   .post-body is core/post-content itself (className passed straight onto
   its rendered wrapper). */
.post-body-section .post-body p {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.4rem !important;
  color: #4a6870 !important;
}
.post-body-section .post-body p:last-child { margin-bottom: 0 !important; }
.post-body-section .post-body strong { color: var(--color-secondary) !important; font-weight: 700 !important; }
.post-body-section .post-body a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(253,157,88,0.4) !important;
  text-underline-offset: 2px !important;
  transition: text-decoration-color 0.2s ease-in-out !important;
}
.post-body-section .post-body a:hover { text-decoration-color: var(--color-primary) !important; }

/* Headings inherit correct navy colour from the ambient .bg-light h2 rule
   in pages/style.css; only size/weight/rhythm are set here. */
.post-body h2, .post-body h3, .post-body h4 {
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
}
.post-body h2 { font-size: 1.6rem !important; margin: 2.75rem 0 1.1rem !important; }
.post-body h3 { font-size: 1.3rem !important; margin: 2.25rem 0 1rem !important; }
.post-body h4 { font-size: 1.1rem !important; margin: 1.75rem 0 0.85rem !important; }
.post-body > *:first-child { margin-top: 0 !important; }

/* wp:quote — the accent-stripe idea (§5) turned sideways: one edge carries
   the orange rule instead of a top ::before. */
.post-body-section .post-body blockquote {
  border-left: 3px solid var(--color-primary) !important;
  padding: 0.25rem 0 0.25rem 1.5rem !important;
  margin: 2rem 0 !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--color-secondary) !important;
}
.post-body-section .post-body blockquote p { font-size: inherit !important; line-height: 1.6 !important; margin-bottom: 0.5rem !important; }
.post-body-section .post-body blockquote cite {
  display: block !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: #4a6870 !important;
  margin-top: 0.5rem !important;
}

.post-body ul, .post-body ol { padding-left: 1.25rem !important; margin-bottom: 1.4rem !important; }
.post-body-section .post-body li { color: #4a6870 !important; font-size: 1.05rem !important; line-height: 1.7 !important; margin-bottom: 0.5rem !important; }
.post-body ul { list-style: none !important; }
.post-body ul li { position: relative !important; padding-left: 1.4rem !important; }
.post-body ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.7em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--color-primary) !important;
}
.post-body ol { list-style: decimal !important; }
.post-body ol li::marker { color: var(--color-primary) !important; font-weight: 700 !important; }

/* Inline content images. */
.post-body figure.wp-block-image { margin: 2rem 0 !important; }
.post-body figure.wp-block-image img { width: 100% !important; height: auto !important; border-radius: 12px !important; display: block !important; }
.post-body-section .post-body figcaption {
  font-size: 0.85rem !important;
  font-style: italic !important;
  color: #4a6870 !important;
  text-align: center !important;
  margin-top: 0.6rem !important;
}

/* Code + embeds + tables + hr — round out the block-type coverage found
   across the imported posts. */
.post-body-section .post-body pre,
.post-body-section .post-body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  background: var(--color-light) !important;
  color: var(--color-secondary) !important;
}
.post-body pre {
  padding: 1.25rem !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.4rem !important;
}
.post-body code { padding: 0.15rem 0.4rem !important; border-radius: 4px !important; font-size: 0.9em !important; }
.post-body pre code { padding: 0 !important; background: none !important; }

.post-body figure.wp-block-embed { margin: 2rem 0 !important; }
.post-body .wp-block-embed__wrapper { position: relative !important; padding-top: 56.25% !important; height: 0 !important; }
.post-body .wp-block-embed__wrapper iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 12px !important; }

.post-body-section .post-body table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 1.4rem !important; font-size: 0.95rem !important; }
.post-body-section .post-body th, .post-body-section .post-body td {
  padding: 0.75rem 1rem !important;
  border: 1px solid rgba(54,120,131,0.12) !important;
  color: #4a6870 !important;
  text-align: left !important;
}
.post-body-section .post-body th { color: var(--color-secondary) !important; font-weight: 700 !important; }

.post-body hr { border: none !important; border-top: 1px solid rgba(54,120,131,0.12) !important; margin: 2.5rem 0 !important; }

/* ── STICKY "KEEP READING" SIDEBAR ───────────────────────────
   §3's white-tier rule: on the white/paper tier, cards take the pale fill
   with a stronger border and no shadow — applied here to a list widget
   rather than a grid card, since a sidebar has no equivalent in Part II. */
.post-sidebar {
  position: sticky !important;
  top: 2rem !important;
  background: var(--color-light) !important;
  border: 1px solid rgba(54,120,131,0.15) !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
}
.post-sidebar__eyebrow { margin-bottom: 0.5rem !important; }
.post-sidebar .orange-bar { margin-bottom: 1.25rem !important; }

.post-sidebar__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.post-sidebar__item { border-bottom: 1px solid rgba(54,120,131,0.15) !important; }
.post-sidebar__item:last-child { border-bottom: none !important; }

.post-sidebar__link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  padding: 1rem 0 !important;
  text-decoration: none !important;
}
.post-sidebar__thumb {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex: none !important;
}
.post-sidebar__body { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.post-sidebar__cat {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-bottom: 0.25rem !important;
}
.post-sidebar__title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--color-secondary) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease-in-out !important;
}
.post-sidebar__link:hover .post-sidebar__title { color: var(--color-primary) !important; }
.post-sidebar__date { font-size: 0.78rem !important; color: #4a6870 !important; margin-top: 0.3rem !important; }

.post-sidebar__all { display: inline-flex !important; margin-top: 1.5rem !important; }

@media (max-width: 991.98px) {
  .post-sidebar { position: static !important; }
}

/* ── PLAIN LEGAL PAGES (Terms & Conditions, Privacy Policy, Cookie Policy EU) ──
   These aren't part of the Bootstrap redesign (no .sn-redesign wrapper) — they
   render through WordPress's default block-theme page template and inherit
   the site-wide dark background + a narrow WP "constrained" reading column.
   Match content width to Bootstrap's own .container breakpoints and give the
   page a plain white background instead. */
body.page-id-2440,
body.page-id-2435,
body.page-id-2240 {
  background: #ffffff !important;
}

/* WP core's block-layout engine additionally clamps every direct child of
   .entry-content (h1, h2, p, ul, …) to var(--wp--style--global--content-size)
   — a separate, narrower constraint (645px, from the parent theme's
   theme.json) layered on top of .entry-content's own width above. Widening
   .entry-content alone only centers that narrow column inside the wider box;
   redefining the variable itself (custom properties inherit down the DOM)
   fixes every child in one place instead of overriding WP's own per-child
   selector directly. */
body.page-id-2440,
body.page-id-2435,
body.page-id-2240 {
  --wp--style--global--content-size: 100%;
}

/* The Complianz cookie-consent plugin (page 2240's [cmplz-document] shortcode
   output) ships its own stylesheet with a hardcoded #cmplz-document
   { max-width: 800px } — a third, independent constraint that doesn't use
   the WP content-size variable above at all, so overriding that alone
   doesn't reach it. */
#cmplz-document {
  max-width: 100% !important;
}

/* The header (.sn-nav) has no opaque background of its own on desktop — it's
   designed to sit transparently over a dark hero section, relying on
   backdrop-filter blur of whatever's behind it. On these white-background
   pages that leaves the logo and nav links (styled light, for a dark
   backdrop) nearly invisible. Give the header its normal dark backdrop
   unconditionally here, same var already used for the mobile nav above. */
.page-id-2440 .sn-nav,
.page-id-2435 .sn-nav,
.page-id-2240 .sn-nav {
  background-color: var(--color-secondary) !important;
}

.page-id-2440 .entry-content,
.page-id-2435 .entry-content,
.page-id-2240 .entry-content {
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

@media (min-width: 768px) {
  .page-id-2440 .entry-content,
  .page-id-2435 .entry-content,
  .page-id-2240 .entry-content { max-width: 720px !important; }
}
@media (min-width: 992px) {
  .page-id-2440 .entry-content,
  .page-id-2435 .entry-content,
  .page-id-2240 .entry-content { max-width: 960px !important; }
}
@media (min-width: 1200px) {
  .page-id-2440 .entry-content,
  .page-id-2435 .entry-content,
  .page-id-2240 .entry-content { max-width: 1140px !important; }
}
@media (min-width: 1400px) {
  .page-id-2440 .entry-content,
  .page-id-2435 .entry-content,
  .page-id-2240 .entry-content { max-width: 1320px !important; }
}