/* =====================================================
   WILSON WISE ACCOUNTING LLC
   MAIN STYLESHEET — PART 1
   File: assets/css/styles.css

   DEFAULT RULE:
   Header and footer are global and must remain the same
   across all pages.

   Page-specific CSS must always be scoped by body class:
   body.index-page
   body.about-page
   body.services-page
   body.contact-page
   Update this with the code: 
   
   /* =====================================================
   GLOBAL VARIABLES START

   Purpose:
   Brand colors, spacing, shadow, content width,
   and responsive layout settings used across the site.
===================================================== */

:root {
    --color-navy: #03045e;
    --color-blue: #0077b6;
    --color-blue-dark: #004e64;
    --color-cyan: #00b4d8;
    --color-light-blue: #90e0ef;
    --color-pale-blue: #caf0f8;
    --color-gold: #ffcc00;
    --color-green: #00FF00;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #03045e;
    --color-muted: #555555;

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.18);

    --max-width: 1280px;
    --content-width: 1200px;
    --text-width: 900px;

    --header-height: 144px;
    --transition-standard: all 0.3s ease;
}

/* =====================================================
   GLOBAL VARIABLES END
===================================================== */


/* =====================================================
   GLOBAL RESET / BASE STYLES START

   Purpose:
   Removes browser default spacing, prevents horizontal
   overflow, keeps sizing predictable, and sets the
   website font family.
===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "Open Sans", Arial, sans-serif;
    background: var(--color-light-blue);
    color: var(--color-text);
    line-height: 1.6;
    text-align: center;
}

main,
section,
div {
    max-width: 100%;
}

img,
video {
    max-width: 100%;
}

img {
    display: block;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    cursor: pointer;
}

/* =====================================================
   GLOBAL RESET / BASE STYLES END
===================================================== */





/* =====================================================
   GLOBAL SECTION ALIGNMENT SYSTEM START

   Default rule:
   - Section wrappers stay centered on the page.
   - Titles and short intro text are centered.
   - Longer body paragraphs are left-aligned.
   - Paragraphs stay lined up under the centered title area.
   - Text uses balance/pretty wrapping to reduce widows.
===================================================== */

.container,
.section-container,
.section-inner {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(12px, 2vw, 20px);
    padding-right: clamp(12px, 2vw, 20px);
}

/* Default section header group */
.section-header {
    width: 100%;
    max-width: var(--text-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
    text-align: center;
}

/* Titles are centered by default */
.section-inner h1,
.section-inner h2,
.section-header h1,
.section-header h2 {
    text-align: center;
    text-wrap: balance;
    margin-left: auto;
    margin-right: auto;
}

/* Short intro/subtext is centered by default */
.section-subtext,
.section-intro,
.section-lead,
.section-header p {
    max-width: var(--text-width);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: pretty;
}

/* Main paragraph area sits under the centered title area */
.section-copy {
    width: 100%;
    max-width: var(--text-width);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Long paragraphs are left-aligned for readability */
.section-copy p,
.section-body p,
.long-copy p {
    text-align: left;
    text-wrap: pretty;
    margin-bottom: 16px;
}

/* Cards stay centered as objects */
.card,
.insight-card,
.insight-item,
.industry {
    text-align: center;
    min-width: 0;
}

/* Card titles stay centered */
.card h3,
.insight-card h3,
.insight-item h3,
.industry h3 {
    text-align: center;
    text-wrap: balance;
}

/* Card paragraphs line up neatly under centered titles */
.card p,
.insight-card p,
.insight-item p,
.industry p {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-wrap: pretty;
}

/* For text-heavy cards, use this class */
.text-heavy-card p,
.text-heavy-card li {
    text-align: left;
    text-wrap: pretty;
}

/* =====================================================
   GLOBAL SECTION ALIGNMENT SYSTEM END
===================================================== */


/* =====================================================
   GLOBAL COMPONENTS START

   Purpose:
   Shared buttons and reusable elements.
   Keep general button styling here.
   Page-specific button spacing belongs in page sections.
===================================================== */

.cta-btn {
    display: inline-block;
    background-color: var(--color-gold);
    color: var(--color-navy);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-standard);
    border: none;
    cursor: pointer;
    text-align: center;
}

.cta-btn:hover,
.cta-btn:focus {
    background-color: var(--color-green);
    color: var(--color-navy);
    outline: none;
}

/* =====================================================
   GLOBAL COMPONENTS END
===================================================== */


/* =====================================================
   GLOBAL CONTENT PROTECTION START

   Purpose:
   - Prevents casual text selection.
   - Prevents image/video dragging.
   - Blocks printing from showing the page content.
   - Keeps forms usable when forms are added later.

   Important:
   This discourages copying, but no browser can fully stop
   screenshots or advanced developer tools.
===================================================== */

/* Prevent text selection across the public website */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Prevent long-press image save on mobile devices */
img,
video {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Keep buttons and links clickable */
a,
button {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}

/* Allow typing/selecting inside forms when forms are added */
input,
textarea,
select,
[contenteditable="true"],
.copy-allowed {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Blocks normal printing of the page */
@media print {
    body * {
        visibility: hidden !important;
    }

    body::before {
        content: "This website content is protected by Wilson Wise Accounting LLC.";
        visibility: visible !important;
        display: block;
        padding: 80px 30px;
        color: #03045e;
        font-size: 24px;
        font-weight: 800;
        text-align: center;
    }
}

/* =====================================================
   GLOBAL CONTENT PROTECTION END
===================================================== */


/* =====================================================
   GLOBAL HEADER START
   DEFAULT FOR EVERY PAGE

   IMPORTANT:
   The header is shared by every page.
   Do not place this inside INDEX.HTML.
   Do not create a different header per page unless
   the full website design changes.
===================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    min-height: var(--header-height);
    background: var(--color-navy);
    color: var(--color-pale-blue);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-container {
    width: 100%;
    max-width: var(--max-width);
    min-height: var(--header-height);
    margin: 0 auto;
    padding: 8px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

/* =====================================================
   HEADER BRAND IDENTITY — DIGITAL LOGO SYSTEM

   Purpose:
   - Supports the new digital HTML/CSS logo.
   - Keeps the logo compact and professional.
   - Keeps fallback support for old image-based headers
     on pages not yet updated.
===================================================== */

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 285px;
    flex-shrink: 0;
}

/* New digital logo wrapper */
.logo-link.logo-link-redesigned {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;

    color: var(--color-pale-blue);
    text-decoration: none;
    text-align: left;

    max-width: 430px;
}

/* Old logo fallback wrapper */
.logo-link {
    color: var(--color-pale-blue);
    text-decoration: none;
    text-align: center;
    font-weight: 700;
}

/* Old logo fallback image */
.logo-image {
    width: 40px;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease;
    margin: 0 auto 8px;
}

.logo-image:hover,
.logo-image:focus {
    transform: scale(1.03);
}

/* Old divider fallback */
.header-divider {
    width: 90%;
    border-top: 2px solid var(--color-gold);
    margin: 4px auto 8px;
}

/* Old company name fallback */
.company-name {
    display: block;
    color: var(--color-green);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
}

.highlighted {
    color: var(--color-gold);
    font-weight: 900;
    font-size: 1.4em;
}

/* Compact digital logo mark */
.brand-mark {
    position: relative;
    width: 78px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

/* Gold circle */
.brand-ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--color-gold);
    border-radius: 50%;
    box-shadow:
        0 0 10px rgba(255, 204, 0, 0.18),
        inset 0 0 8px rgba(255, 204, 0, 0.12);
}

/* Open sweep detail */
.brand-ring::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    background: var(--color-navy);
    border-radius: 50%;
}

/* Spark detail */
.brand-spark {
    position: absolute;
    top: 5px;
    right: 9px;
    width: 7px;
    height: 7px;
    background: var(--color-gold);
    transform: rotate(45deg);
    box-shadow:
        0 0 8px rgba(255, 204, 0, 0.85),
        0 0 14px rgba(255, 204, 0, 0.45);
    z-index: 3;
}

.brand-spark::before,
.brand-spark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--color-gold);
    transform: translate(-50%, -50%);
}

.brand-spark::before {
    width: 16px;
    height: 1.5px;
}

.brand-spark::after {
    width: 1.5px;
    height: 16px;
}

/* Monogram container */
.brand-monogram {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Monogram letters */
.mono-letter {
    position: absolute;
    font-family: "Roboto", "Times New Roman", serif;
    font-weight: 900;
    line-height: 1;
    color: var(--color-gold);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 10px rgba(255, 204, 0, 0.22),
        2px 3px 8px rgba(0, 0, 0, 0.35);
}

.mono-w-one {
    top: 12px;
    left: 12px;
    font-size: 2.45rem;
    letter-spacing: -4px;
}

.mono-w-two {
    top: 25px;
    left: 29px;
    font-size: 2.05rem;
    letter-spacing: -4px;
}

.mono-a {
    top: 35px;
    left: 47px;
    font-size: 1.95rem;
}

/* Divider sits under the text only */
.brand-divider {
    grid-column: 2;
    width: 100%;
    max-width: 270px;
    margin: 2px 0 3px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.brand-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-gold), transparent);
    opacity: 0.9;
}

.brand-diamond {
    width: 7px;
    height: 7px;
    background: var(--color-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Text block */
.brand-text-wrap {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* Tagline */
.company-tagline {
    margin: 0 0 3px;
    color: var(--color-gold);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.1;
}

/* Main company name */
.company-name-main {
    display: block;
    color: var(--color-white);
    font-family: "Roboto", "Times New Roman", serif;
    font-size: clamp(1.1rem, 1.5vw, 1.65rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Secondary company line */
.company-name-sub {
    display: block;
    margin-top: 3px;
    color: var(--color-pale-blue);
    font-family: "Roboto", "Times New Roman", serif;
    font-size: clamp(0.72rem, 1vw, 1rem);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* Service line */
.company-services-line {
    display: block;
    margin-top: 4px;
    color: var(--color-gold);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* Hover polish */
.logo-link.logo-link-redesigned:hover .brand-mark,
.logo-link.logo-link-redesigned:focus .brand-mark {
    transform: translateY(-1px) scale(1.02);
    transition: transform 0.3s ease;
}

.logo-link.logo-link-redesigned:hover .company-name-main,
.logo-link.logo-link-redesigned:focus .company-name-main {
    color: var(--color-pale-blue);
    transition: color 0.3s ease;
}

/* =====================================================
   GLOBAL NAVIGATION START
===================================================== */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.nav-row {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 15px;
}

.nav-row li {
    position: relative;
}

.main-nav a {
    color: var(--color-pale-blue);
    text-decoration: none;
    font-weight: 700;
    padding: 8px 6px;
    display: inline-block;
    transition: color 0.3s ease, background-color 0.3s ease;
    text-align: center;
}

.main-nav a:hover,
.main-nav a:focus {
    color: var(--color-cyan);
    outline: none;
}

.main-nav .nav-cta {
    color: var(--color-navy);
    background: var(--color-green);
    padding: 9px 12px;
    border-radius: 6px;
}

.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus {
    color: var(--color-navy);
    background: var(--color-gold);
}

/* =====================================================
   DESKTOP DROPDOWN NAVIGATION
===================================================== */

.has-dropdown .dropdown-sub-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 1001;
    min-width: 190px;
    transform: translateX(-50%);
    list-style: none;

    background: rgba(202, 240, 248, 0.98);
    border: 1px solid rgba(255, 204, 0, 0.22);
    border-radius: 14px;
    box-shadow: var(--shadow-medium);

    padding: 10px;
}

.has-dropdown:hover .dropdown-sub-nav,
.has-dropdown:focus-within .dropdown-sub-nav {
    display: block;
}

.dropdown-sub-nav li {
    white-space: nowrap;
}

.dropdown-sub-nav li a {
    display: block;
    padding: 11px 16px;

    color: var(--color-navy);
    text-decoration: none;
    text-align: center;
    font-weight: 700;

    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.dropdown-sub-nav li a:hover,
.dropdown-sub-nav li a:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);
    transform: translateY(-2px);
    outline: none;
}

/* =====================================================
   BURGER BUTTON
   JavaScript toggles .is-open on .main-nav.
===================================================== */

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;

    border: 2px solid var(--color-gold);
    border-radius: 14px;

    background: rgba(202, 240, 248, 0.08);
    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nav-toggle:hover,
.nav-toggle:focus {
    background: rgba(255, 204, 0, 0.12);
    border-color: var(--color-green);
    transform: translateY(-2px);
    outline: none;
}

.nav-toggle-line {
    width: 25px;
    height: 3px;
    background: var(--color-gold);
    border-radius: 999px;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Burger turns into X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background: var(--color-green);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background: var(--color-green);
}

/* =====================================================
   MOBILE / TABLET DROPDOWN WINDOW
===================================================== */

body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 998;

    background: rgba(3, 4, 94, 0.45);
    backdrop-filter: blur(4px);
}

/* =====================================================
   HEADER RESPONSIVE START
   Rule:
   Same desktop look, scaled down for tablet and mobile.
===================================================== */

@media (max-width: 1200px) {
    :root {
        --header-height: 132px;
    }

    .header-container {
        min-height: var(--header-height);
        padding: 8px 16px;
        gap: 14px;
    }

    .logo-container {
        min-width: 250px;
    }

    .logo-link.logo-link-redesigned {
        max-width: 360px;
        column-gap: 10px;
    }

    .brand-mark {
        width: 66px;
        height: 66px;
    }

    .mono-w-one {
        top: 10px;
        left: 10px;
        font-size: 2rem;
    }

    .mono-w-two {
        top: 21px;
        left: 24px;
        font-size: 1.7rem;
    }

    .mono-a {
        top: 30px;
        left: 39px;
        font-size: 1.6rem;
    }

    .company-tagline {
        font-size: 0.58rem;
        letter-spacing: 0.8px;
    }

    .company-name-main {
        font-size: 1.15rem;
        letter-spacing: 1px;
    }

    .company-name-sub {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .company-services-line {
        font-size: 0.5rem;
        letter-spacing: 0.7px;
    }

    .brand-divider {
        max-width: 220px;
        gap: 8px;
    }

    .nav-row {
        gap: 8px;
    }

    .main-nav a {
        font-size: 0.86rem;
        padding: 7px 5px;
    }

    .main-nav .nav-cta {
        padding: 8px 10px;
    }
}

@media (max-width: 1024px) {
    :root {
        --header-height: 118px;
    }

    .site-header {
        min-height: var(--header-height);
        z-index: 1000;
    }

    .header-container {
        min-height: var(--header-height);
        padding: 8px 14px;
        gap: 12px;
        position: relative;
    }

    .logo-container {
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .logo-link.logo-link-redesigned {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 10px;
        max-width: 320px;
        text-align: left;
    }

    .brand-mark {
        width: 58px;
        height: 58px;
        margin: 0;
    }

    .mono-w-one {
        top: 9px;
        left: 8px;
        font-size: 1.75rem;
    }

    .mono-w-two {
        top: 19px;
        left: 21px;
        font-size: 1.45rem;
    }

    .mono-a {
        top: 27px;
        left: 34px;
        font-size: 1.35rem;
    }

    .brand-divider {
        grid-column: 2;
        max-width: 190px;
        margin: 2px 0;
        gap: 7px;
    }

    .brand-diamond {
        width: 6px;
        height: 6px;
    }

    .brand-text-wrap {
        grid-column: 2;
        align-items: flex-start;
    }

    .company-tagline,
    .company-name-main,
    .company-name-sub,
    .company-services-line {
        text-align: left;
    }

    .company-tagline {
        font-size: 0.52rem;
        letter-spacing: 0.6px;
    }

    .company-name-main {
        font-size: 1rem;
        letter-spacing: 0.8px;
    }

    .company-name-sub {
        font-size: 0.62rem;
        letter-spacing: 1.4px;
    }

    .company-services-line {
        font-size: 0.46rem;
        letter-spacing: 0.5px;
    }

    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 1003;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .nav-toggle-line {
        width: 22px;
        height: 3px;
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 14px;
        left: auto;
        z-index: 1002;

        width: min(390px, calc(100vw - 28px));
        max-height: calc(100vh - var(--header-height) - 24px);
        overflow-y: auto;

        display: block;
        padding: 18px;

        background:
            linear-gradient(145deg, rgba(3, 4, 94, 0.98), rgba(0, 119, 182, 0.96)),
            var(--color-navy);

        border: 1px solid rgba(202, 240, 248, 0.22);
        border-radius: 22px;
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(0.98);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .nav-row {
        width: 100%;
        list-style: none;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;

        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .nav-row li {
        width: 100%;
        position: relative;
    }

    .main-nav a {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 14px 16px;
        border-radius: 14px;

        color: var(--color-pale-blue);
        text-align: center;
        text-decoration: none;
        font-weight: 800;
        letter-spacing: 0.2px;

        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(202, 240, 248, 0.12);

        transition:
            color 0.3s ease,
            background-color 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease;
    }

    .main-nav a:hover,
    .main-nav a:focus {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);
        transform: translateY(-2px);
        outline: none;
    }

    .main-nav .nav-cta {
        color: var(--color-navy);
        background: var(--color-green);
        border-color: var(--color-green);
        box-shadow: 0 8px 20px rgba(0, 255, 0, 0.18);
    }

    .main-nav .nav-cta:hover,
    .main-nav .nav-cta:focus {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);
    }

    .has-dropdown > a::after {
        content: "▾";
        display: inline-block;
        margin-left: 10px;
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }

    .has-dropdown.is-open > a::after {
        transform: rotate(180deg);
    }

    .has-dropdown .dropdown-sub-nav {
        position: static;
        transform: none;

        display: block;
        width: 100%;
        min-width: 0;

        max-height: 0;
        overflow: hidden;
        opacity: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        border-radius: 14px;
        box-shadow: none;

        transition:
            max-height 0.35s ease,
            opacity 0.3s ease,
            margin-top 0.3s ease;
    }

    .has-dropdown.is-open .dropdown-sub-nav {
        max-height: 420px;
        opacity: 1;
        margin-top: 8px;
    }

    .dropdown-sub-nav li {
        width: 100%;
        white-space: normal;
    }

    .dropdown-sub-nav li a {
        padding: 12px 14px;
        font-size: 0.95rem;
        font-weight: 700;

        color: var(--color-navy);
        background: rgba(202, 240, 248, 0.92);
        border: 1px solid rgba(255, 204, 0, 0.18);
        border-radius: 12px;

        text-align: center;
    }

    .dropdown-sub-nav li a:hover,
    .dropdown-sub-nav li a:focus {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);
        outline: none;
    }
}

@media (max-width: 640px) {
    :root {
        --header-height: 100px;
    }

    .site-header {
        min-height: var(--header-height);
    }

    .header-container {
        min-height: var(--header-height);
        padding: 7px 10px;
        gap: 8px;
    }

    .logo-link.logo-link-redesigned {
        max-width: 250px;
        column-gap: 8px;
    }

    .brand-mark {
        width: 46px;
        height: 46px;
    }

    .brand-ring {
        border-width: 2px;
    }

    .brand-ring::after {
        width: 18px;
        height: 18px;
        right: -2px;
        bottom: 5px;
    }

    .brand-spark {
        width: 5px;
        height: 5px;
        top: 4px;
        right: 6px;
    }

    .brand-spark::before {
        width: 12px;
        height: 1px;
    }

    .brand-spark::after {
        width: 1px;
        height: 12px;
    }

    .mono-w-one {
        top: 7px;
        left: 7px;
        font-size: 1.38rem;
        letter-spacing: -3px;
    }

    .mono-w-two {
        top: 15px;
        left: 17px;
        font-size: 1.15rem;
        letter-spacing: -3px;
    }

    .mono-a {
        top: 21px;
        left: 28px;
        font-size: 1.05rem;
    }

    .brand-divider {
        max-width: 150px;
        gap: 5px;
        margin: 1px 0;
    }

    .brand-line {
        height: 1px;
    }

    .brand-diamond {
        width: 5px;
        height: 5px;
    }

    .company-tagline {
        font-size: 0.43rem;
        letter-spacing: 0.4px;
        margin-bottom: 2px;
    }

    .company-name-main {
        font-size: 0.78rem;
        letter-spacing: 0.5px;
    }

    .company-name-sub {
        font-size: 0.48rem;
        letter-spacing: 0.8px;
    }

    .company-services-line {
        font-size: 0.36rem;
        letter-spacing: 0.3px;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .main-nav {
        top: calc(100% + 8px);
        right: 10px;
        width: calc(100vw - 20px);
        padding: 14px;
        border-radius: 20px;
    }

    .main-nav a {
        padding: 11px 12px;
        font-size: 0.9rem;
    }

    .dropdown-sub-nav li a {
        font-size: 0.86rem;
    }
}

/* =====================================================
   HEADER RESPONSIVE END
===================================================== */

/* =====================================================
   GLOBAL NAVIGATION END
===================================================== */

/* =====================================================
   GLOBAL HEADER END
===================================================== */


/* =====================================================
   GLOBAL FOOTER START
   DEFAULT FOR EVERY PAGE

   IMPORTANT:
   This footer is shared by every page.
   Keep this footer global and consistent across the full website.
   Do not place footer CSS inside INDEX.HTML or any page-specific block.
===================================================== */

footer[role="contentinfo"] {
    background: #101010;
    color: var(--color-white);
    padding: 48px 20px 28px;
    text-align: center;
}

/* Main footer container */
.footer-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =====================================================
   FOOTER TOP BAR
   Contains logo/copyright on the left and legal links on the right.
===================================================== */

.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    padding: 24px 28px;
    margin-bottom: 42px;

    background: rgba(202, 240, 248, 0.06);
    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow: hidden;
}

/* Logo + copyright block */
.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;

    flex: 1 1 520px;
    min-width: 280px;

    text-align: left;
}

/* Logo image with sleek zoom hover */
.footer-logo img {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 14px;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    transform-origin: center;
}

/* Zoom closer on hover, return to normal when not hovered */
.footer-logo img:hover,
.footer-logo img:focus {
    transform: scale(1.12);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38);
}

/* Copyright / small footer text */
.footer-logo p {
    max-width: 650px;
    margin: 0;

    color: var(--color-pale-blue);
    font-size: 0.92rem;
    line-height: 1.65;

    text-align: left;
    text-wrap: pretty;
}

/* Top legal links */
.footer-bar ul {
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0;
    padding: 0;

    flex: 0 1 460px;
}

/* Top legal link items */
.footer-bar li {
    margin: 0;
}

/* Top legal link buttons */
.footer-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 14px;
    border-radius: 999px;

    color: var(--color-pale-blue);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(202, 240, 248, 0.14);

    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.footer-bar a:hover,
.footer-bar a:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    outline: none;
}

/* =====================================================
   FOOTER MAIN GRID
   Contains company summary, quick links, and services.
===================================================== */

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 34px;

    margin-bottom: 42px;
    text-align: center;
}

/* Footer grid cards */
.footer-grid > div {
    min-height: 100%;
    padding: 28px 24px;

    background: rgba(202, 240, 248, 0.055);
    border: 1px solid rgba(202, 240, 248, 0.14);
    border-radius: 18px;

    box-shadow: var(--shadow-soft);
}

/* Footer headings */
.footer-grid h3,
.footer-grid h4,
.footer-company-info h4,
.footer-contact-info h4 {
    color: var(--color-gold);
    margin: 0 auto 16px;

    font-size: 1.18rem;
    line-height: 1.3;
    font-weight: 800;

    text-align: center;
    text-wrap: balance;
}

/* Footer grid paragraphs */
.footer-grid p {
    max-width: 360px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    line-height: 1.7;
    text-align: left;
    text-wrap: pretty;
}

/* Footer link lists */
.footer-links ul,
.footer-contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 11px;
    text-align: center;
}

/* Footer links */
.footer-grid a,
.footer-info-area a {
    color: var(--color-pale-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-grid a:hover,
.footer-info-area a:hover,
.footer-grid a:focus,
.footer-info-area a:focus {
    color: var(--color-gold);
    outline: none;
}

/* Social icons below company summary */
.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;

    margin-top: 20px;
}

.social-links a {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-gold);
    font-size: 1.15rem;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 50%;

    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.social-links a:hover,
.social-links a:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    transform: translateY(-3px);
    outline: none;
}

/* =====================================================
   FOOTER INFO AREA
   Contains address/contact details and secure contact channels.
===================================================== */

.footer-info-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;

    padding: 0;
    text-align: center;
}

/* Info cards */
.footer-company-info,
.footer-contact-info {
    padding: 28px 24px;

    background: rgba(202, 240, 248, 0.055);
    border: 1px solid rgba(202, 240, 248, 0.14);
    border-radius: 18px;

    box-shadow: var(--shadow-soft);
}

/* Address and company contact paragraphs */
.footer-company-info p {
    max-width: 420px;
    margin: 0 auto 12px;

    color: var(--color-pale-blue);
    line-height: 1.7;

    text-align: center;
    text-wrap: pretty;
}

/* Contact list */
.footer-contact-info li {
    margin-bottom: 12px;

    color: var(--color-pale-blue);
    line-height: 1.55;

    text-align: center;
    text-wrap: pretty;
}

/* Contact icons */
.footer-contact-info i {
    margin-right: 8px;
    color: var(--color-gold);
}

/* Bottom social icon row */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;

    margin-top: 22px;
}

.footer-social a {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-gold);
    font-size: 1.16rem;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 50%;

    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.footer-social a:hover,
.footer-social a:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    transform: translateY(-3px);
    outline: none;
}

/* =====================================================
   FOOTER RESPONSIVE
   Same structure as desktop, scaled down.
===================================================== */

@media (max-width: 1024px) {
    .footer-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .footer-logo {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 14px;
        min-width: 0;
    }

    .footer-logo img {
        width: 64px;
        height: 64px;
    }

    .footer-logo p {
        font-size: 0.78rem;
        text-align: left;
    }

    .footer-bar ul {
        justify-content: flex-end;
        gap: 8px;
        flex: 0 1 380px;
    }

    .footer-bar a {
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .footer-grid {
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 16px;
    }

    .footer-grid > div,
    .footer-company-info,
    .footer-contact-info {
        padding: 20px 14px;
    }

    .footer-grid h3,
    .footer-grid h4,
    .footer-company-info h4,
    .footer-contact-info h4 {
        font-size: 0.95rem;
    }

    .footer-grid p {
        font-size: 0.85rem;
        text-align: left;
    }

    .footer-info-area {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    footer[role="contentinfo"] {
        padding: 30px 8px 22px;
    }

    .footer-container {
        padding: 0;
    }

    .footer-bar {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 14px 10px;
        border-radius: 12px;
    }

    .footer-logo {
        flex: 1 1 58%;
        min-width: 0;
        gap: 8px;
    }

    .footer-logo img {
        width: 42px;
        height: 42px;
        border-radius: 9px;
    }

    .footer-logo p {
        font-size: 0.5rem;
        line-height: 1.35;
        text-align: left;
    }

    .footer-bar ul {
        flex: 1 1 42%;
        gap: 4px;
        justify-content: flex-end;
    }

    .footer-bar a {
        font-size: 0.48rem;
        padding: 5px 6px;
    }

    .footer-grid {
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 7px;
        margin-bottom: 22px;
    }

    .footer-grid > div,
    .footer-company-info,
    .footer-contact-info {
        padding: 12px 7px;
        border-radius: 10px;
    }

    .footer-grid h3,
    .footer-grid h4,
    .footer-company-info h4,
    .footer-contact-info h4 {
        font-size: 0.62rem;
        margin-bottom: 8px;
    }

    .footer-grid p,
    .footer-company-info p,
    .footer-contact-info li {
        font-size: 0.48rem;
        line-height: 1.35;
    }

    .footer-info-area {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .social-links,
    .footer-social {
        gap: 5px;
        margin-top: 10px;
    }

    .social-links a,
    .footer-social a {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

/* =====================================================
   GLOBAL FOOTER END
===================================================== */

/* =====================================================
   FOOTER RESPONSIVE

   Rule:
   - Footer keeps the same desktop-style layout.
   - Tablet and mobile views scale the layout down.
   - The footer should not become crooked, oversized,
     or mismatched on smaller screens.
===================================================== */

@media (max-width: 1024px) {
    .footer-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .footer-logo {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 14px;
        min-width: 0;
    }

    .footer-logo img {
        width: 64px;
        height: 64px;
    }

    .footer-logo p {
        font-size: 0.78rem;
        line-height: 1.45;
        text-align: left;
    }

    .footer-bar ul {
        justify-content: flex-end;
        gap: 8px;
        flex: 0 1 380px;
    }

    .footer-bar a {
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .footer-grid {
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 16px;
    }

    .footer-grid > div,
    .footer-company-info,
    .footer-contact-info {
        padding: 20px 14px;
    }

    .footer-grid h3,
    .footer-grid h4,
    .footer-company-info h4,
    .footer-contact-info h4 {
        font-size: 0.95rem;
    }

    .footer-grid p {
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: left;
    }

    .footer-info-area {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .footer-company-info p,
    .footer-contact-info li {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

@media (max-width: 640px) {
    footer[role="contentinfo"] {
        padding: 30px 8px 22px;
    }

    .footer-container {
        padding: 0;
    }

    .footer-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 10px;
        border-radius: 12px;
    }

    .footer-logo {
        flex: 1 1 58%;
        min-width: 0;
        gap: 8px;
    }

    .footer-logo img {
        width: 42px;
        height: 42px;
        border-radius: 9px;
    }

    .footer-logo p {
        font-size: 0.5rem;
        line-height: 1.35;
        text-align: left;
    }

    .footer-bar ul {
        flex: 1 1 42%;
        gap: 4px;
        justify-content: flex-end;
    }

    .footer-bar a {
        font-size: 0.48rem;
        padding: 5px 6px;
    }

    .footer-grid {
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 7px;
        margin-bottom: 22px;
    }

    .footer-grid > div,
    .footer-company-info,
    .footer-contact-info {
        padding: 12px 7px;
        border-radius: 10px;
    }

    .footer-grid h3,
    .footer-grid h4,
    .footer-company-info h4,
    .footer-contact-info h4 {
        font-size: 0.62rem;
        margin-bottom: 8px;
    }

    .footer-grid p,
    .footer-company-info p,
    .footer-contact-info li {
        font-size: 0.48rem;
        line-height: 1.35;
    }

    .footer-info-area {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .social-links,
    .footer-social {
        gap: 5px;
        margin-top: 10px;
    }

    .social-links a,
    .footer-social a {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

/* =====================================================
   GLOBAL FOOTER END
===================================================== */



/* =====================================================
   INDEX.HTML START

   Purpose:
   Everything below belongs only to index.html.

   Rule:
   All selectors are scoped with body.index-page so the
   homepage cannot accidentally change another page.

   Layout:
   The page layout stays the same, but visible text and
   section content are centered.
===================================================== */

body.index-page {
    padding-top: calc(var(--header-height) + 25px);
}

/* Small badge below the fixed header. */
body.index-page .trust-badge {
    margin-top: 0;

    background: var(--color-pale-blue);
    color: var(--color-navy);
    text-align: center;
    font-weight: 800;
    padding: 12px 20px;

    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    position: relative;
    z-index: 5;
}


body.index-page .trust-badge i {
    color: var(--color-blue);
    margin-right: 8px;
}

/* Homepage video hero. */
body.index-page .hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;

    /* Underlay image behind the hero video */
    background-image: url("../images/backgrounds/hero-background-underlay.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Light overlay over hero video for readability */
body.index-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Adjust this number if needed:
       0.15 = very light
       0.25 = balanced
       0.35 = darker
    */
    background: rgba(3, 4, 94, 0.10);

    z-index: 1;
}

body.index-page .background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;

    /* Lets the underlay show slightly but keeps the video bright */
    opacity: 0.90;
}

/* Hero content wrapper */
body.index-page .hero-content {
    position: relative;
    z-index: 2;

    /* Keeps the hero text block centered on the page */
    width: min(var(--content-width), calc(100% - 40px));
    margin: 0 auto;

    /* Controls spacing around the title, subtext, and broker notice */
    padding: 40px 20px 120px;

    /* The wrapper stays centered */
    text-align: center;
}

/* Hero title */
body.index-page .hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    line-height: 1.1;
    font-weight: 900;

    /* Centers the title */
    text-align: center;
    margin: 0 auto 20px;

    /* Helps avoid ugly title breaks */
    text-wrap: balance;

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.65);
}

/* Hero subtext under the title */
body.index-page .hero-content p {
    color: var(--color-white);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;

    /* This controls how wide the paragraph is */
    max-width: 760px;

    /* This centers the paragraph box under the title */
    margin: 0 auto;

    /* This makes the paragraph text align left inside that centered box */
    text-align: left;

    /* Helps reduce one-word widows */
    text-wrap: pretty;

    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}


/* =====================================================
   INDEX PAGE — SERVICES OVERVIEW CARDS

   Purpose:
   - Keeps all four service cards in one horizontal row.
   - Prevents cards from stacking on desktop/tablet.
   - Keeps each service title on one line.
===================================================== */

/* Main “Our Services” title */
body.index-page .services-overview h1 {
    color: var(--color-white);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.6);
    letter-spacing: 3px;
    margin: 0 auto 70px;
    text-align: center;
    text-wrap: balance;
}

/* Container holding all four service cards */
body.index-page .service-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    /* Keeps all four cards horizontally aligned */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    /* Even spacing between cards */
    gap: 24px;

    align-items: stretch;
    justify-items: stretch;
    text-align: center;
}

/* Individual service card */
body.index-page .service-item {
    width: 100%;
    min-width: 0;
    min-height: 455px;

    background-color: #caf0f8;
    border-radius: 14px;
    padding: 18px;

    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    overflow: hidden;
    text-align: center;
}

/* Card hover effect */
body.index-page .service-item:hover {
    transform: translateY(-00px);
    box-shadow: var(--shadow-medium);
}

/* Service card links */
body.index-page .service-item a {
    display: block;
    width: 100%;
    color: var(--color-navy);
    text-decoration: none;
    text-align: center;
}

/* Service images */
body.index-page .service-item img {
    width: 100%;
    height: 315px;

    border-radius: 12px;
    margin: 0 auto 16px;

    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Image zoom on hover */
body.index-page .service-item:hover img {
    transform: scale(1.05);
}

/* Service titles — forced into one line */
body.index-page .service-item h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.15vw, 1.2rem);
    line-height: 1.2;
    font-weight: 900;

    text-align: center;

    /* Keeps title on one horizontal line */
    white-space: nowrap;

    /* Prevents title from breaking layout */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main success/client-focused content block. */
body.index-page .thought-leadership-container {
    position: relative;
    width: 100%;
    margin: 60px auto;
    padding: 60px 0;
    overflow: hidden;
    text-align: center;
}

body.index-page .thought-leadership-container > .section-inner {
    padding-top: 60px;
    padding-bottom: 60px;
    border-radius: 15px;
    backdrop-filter: blur(10px) saturate(150%);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-medium);
    text-align: center;
}

body.index-page .thought-leadership-container h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #003366;
    margin: 0 auto 28px;
    text-align: center;
}

/* Insights intro card section. */
body.index-page .insights-section {
    padding: 60px 20px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
    margin: 50px auto;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
}

body.index-page .insights-content {
    margin: 0 auto 36px;
    width: 100%;
    text-align: center;
}

body.index-page .insights-heading {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--color-white);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    text-align: center;
}

body.index-page .insights-subtext {
    font-size: 1.2rem;
    color: #000000;
    max-width: 850px;

    /* Keeps the paragraph box centered under the title */
    margin: 0 auto;

    /* Aligns the sentence left inside that centered box */
    text-align: left;

    /* Helps prevent awkward one-word endings */
    text-wrap: pretty;
}

/* Reusable homepage card grid. */
body.index-page .insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
    text-align: center;
}

body.index-page .insight-card,
body.index-page .insight-item {
    background: rgba(255, 255, 255, 0.86);
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

body.index-page .insight-card:hover,
body.index-page .insight-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

body.index-page .insight-card i,
body.index-page .insight-item i {
    font-size: 2.5rem;
    color: var(--color-blue);
    margin-bottom: 15px;
}

/* Card titles stay centered */
body.index-page .insight-card h3,
body.index-page .insight-item h3 {
    font-size: 1.1rem;
    color: #003366;
    margin-bottom: 10px;
    text-align: center;
    text-wrap: balance;
}

/* Card paragraphs align left under the centered title */
body.index-page .insight-card p,
body.index-page .insight-item p {
    font-size: 1rem;
    color: #333333;

    /* Keeps paragraph readable inside the card */
    max-width: 280px;

    /* Centers the paragraph box inside the card */
    margin-left: auto;
    margin-right: auto;

    /* Aligns the words left inside that centered box */
    text-align: left;

    /* Helps avoid awkward one-word endings */
    text-wrap: pretty;
}

/* WOW message section. */
body.index-page .new-wow-section {
    position: relative;
    width: 100%;
    padding: 50px 0;
    text-align: center;
}

body.index-page .text-layout {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
    margin-bottom: 40px;
    text-align: center;
}


/* =====================================================
   WOW MESSAGE SECTION

   Purpose:
   Both WOW boxes use the same image.
   The second box now has its own see-through overlay.
===================================================== */

/* Both WOW boxes */
body.index-page .text-layout .wow-box,
body.index-page .text-layout .sub-wow-box {
    position: relative;
    width: 48%;
    min-height: 260px;
    padding: 30px;
    border-radius: 10px;
    color: var(--color-white);

    /* Same image for both boxes */
    background-image: url("../images/backgrounds/quickbooks-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: var(--shadow-soft);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Overlay for the first WOW box */
body.index-page .wow-box .overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 94, 0.55);
    z-index: 1;
}

/* Overlay for the second WOW box */
body.index-page .sub-wow-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 94, 0.55);
    z-index: 1;
}

/* First WOW text */
body.index-page .wow-text {
    position: relative;
    z-index: 2;
    top: 110px;

    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 900;
    color: var(--color-green);
    background-color: rgba(3, 4, 90, 0.70);
    padding: 1rem 2rem;
    border-radius: 15px;
    text-align: left;
    text-wrap: balance;

    animation: bubble-pop 2s infinite ease-in-out alternate;
}

/* Second WOW text */
body.index-page .sub-wow-text {
    position: relative;
    z-index: 2;
    top: 50px;

    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;

    /* Light blue */
    background: var(--color-pale-blue);

    width: 100%;
    max-width: 520px;

    margin-left: auto;
    margin-right: auto;
    padding: 20px;

    border-radius: 8px;
    text-align: left;
    text-wrap: pretty;

    /* Makes it look soft and elegant over the image */
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-soft);
}

/* Small pulse animation for WOW headline. */
@keyframes bubble-pop {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

/* Trust statement block. */
body.index-page .trust-section {
    margin: 40px auto 0;
    padding: 2rem;
    background: var(--color-pale-blue);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    max-width: var(--text-width);
    text-align: center;
}

body.index-page .trust-section h3 {
    font-size: 2rem;
    color: var(--color-navy);
    margin-bottom: 1rem;
    text-align: center;
}

body.index-page .trust-section p {
    font-size: 1.1rem;
    color: #000000;
    line-height: 1.7;
    margin-bottom: 12px;
    text-align: left;
}

body.index-page .trust-section .bold-text {
    font-size: 1.25rem;
    color: var(--color-green);
    font-weight: 800;
    background-color: var(--color-navy);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

/* Game changer split section. */
body.index-page .game-changer-section {
    padding: 60px 20px;
    background-color: #eae7dc;
    border-radius: 14px;
    text-align: center;
}

body.index-page .game-changer-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    text-align: left;
}

body.index-page .game-changer-image {
    flex: 1 1 40%;
    min-height: 350px;
    background: url("../images/backgrounds/game-changer-background.jpg") no-repeat center center/cover;
    position: relative;
    filter: sepia(30%) saturate(1.3);
    opacity: 0.95;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}

/* Game changer text content */
body.index-page .game-changer-content {
    flex: 1 1 50%;
    max-width: 760px;

    /* Keeps the whole text area centered inside its side of the section */
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

/* Game changer title */
body.index-page .game-changer-content h3 {
    font-size: 1.7rem;
    color: #03045e;
    margin: 0 auto 20px;

    /* Title centered */
    text-align: center;
    text-wrap: balance;
}

/* Game changer paragraphs */
body.index-page .game-changer-content p {
    font-size: 1.1rem;
    color: #000000;
    line-height: 1.7;

    /* Keeps paragraphs lined up under the title */
    max-width: 680px;
    margin: 0 auto 16px;

    /* Paragraph text aligned left inside the centered text box */
    text-align: left;
    text-wrap: pretty;
}

/* Growth split section. */
body.index-page .growth-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 20px;
    background-color: #f8f9fa;
    border-radius: 14px;
    margin-top: 40px;
    text-align: center;
}

body.index-page .growth-content {
    width: 50%;
    text-align: center;
}

/* Growth title */
body.index-page .growth-content h3 {
    font-size: 2rem;
    color: var(--color-navy);
    margin: 0 auto 20px;
    text-align: center;
    text-wrap: balance;
}

/* Growth paragraph */
body.index-page .growth-content p {
    font-size: 1.1rem;
    color: #000000;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 16px;
    text-align: left;
    text-wrap: pretty;
}

body.index-page .growth-image {
    width: 50%;
    min-height: 300px;
    background: url("../images/backgrounds/growth-background.jpg") no-repeat center center/cover;
    filter: grayscale(20%) contrast(1.2);
    opacity: 0.9;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}

/* Resource insight cards section */
body.index-page .resource-insights-grid {
    margin-top: 50px;
}

/* Each resource card */
body.index-page .resource-insights-grid .insight-item {
    background: rgba(255, 255, 255, 0.86);
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Keeps the card content organized */
    text-align: center;
}

/* Hover effect */
body.index-page .resource-insights-grid .insight-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

/* Card icons */
body.index-page .resource-insights-grid .insight-item i {
    font-size: 2.5rem;
    color: var(--color-blue);
    margin-bottom: 15px;
}

/* Card titles */
body.index-page .resource-insights-grid .insight-item h3 {
    font-size: 1rem;
    color: #003366;
    margin: 0 auto 10px;

    /* Title centered */
    text-align: center;
    text-wrap: balance;
}

/* Card paragraphs */
body.index-page .resource-insights-grid .insight-item p {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;

    /* Keeps paragraph lined up under the title */
    max-width: 280px;
    margin: 0 auto;

    /* Paragraph text aligned left inside centered box */
    text-align: left;
    text-wrap: pretty;
}

/* Homepage contact block. */
body.index-page .index-contact {
    padding: 60px 0;
    text-align: center;
}

body.index-page .index-contact > .section-inner {
    padding-top: 40px;
    padding-bottom: 40px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-medium);
    text-align: center;
}

body.index-page .index-contact-title,
body.index-page .index-security-title {
    background-color: var(--color-navy);
    color: var(--color-green);
    padding: 10px 20px;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    border-radius: 6px;
    display: inline-block;
    margin: 0 auto 30px;
    text-align: center;
    text-wrap: balance;
}

body.index-page .index-contact-image-wrap {
    width: 100%;
    text-align: center;
}

body.index-page .index-contact-image {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 20px;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}

body.index-page .index-contact-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    text-align: center;
}

body.index-page .index-contact-method {
    background-color: transparent;
    color: var(--color-navy);
    padding: 10px 18px;
    font-size: 1.9rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition-standard);
    text-align: center;
}

body.index-page .index-contact-method-small {
    font-size: 1.5rem;
}

body.index-page .index-contact-method-large {
    font-size: 2rem;
}

body.index-page .index-contact-method:hover,
body.index-page .index-contact-method:focus {
    transform: scale(1.05);
    box-shadow: var(--shadow-soft);
    background-color: #00e600;
    outline: none;
}

/* Security / compliance block. */
body.index-page .index-security {
    padding: 50px 0;
    text-align: center;
}

body.index-page .index-security-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: center;
}

body.index-page .index-security-copy {
    flex: 1 1 100%;
    max-width: var(--text-width);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.index-page .index-security-copy p {
    font-size: clamp(1.2rem, 3vw, 2rem);
    line-height: 1.6;
    color: #000000;
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
    text-align: left;
}

body.index-page .index-security-copy p:last-child {
    margin-bottom: 80px;
}

body.index-page .index-brand-blue {
    color: #0b5ed7;
}

body.index-page .index-alert-red {
    color: red;
}

/* Compliance icons/cards under security section */
body.index-page .index-compliance-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 20px;
}

/* Each compliance card */
body.index-page .index-compliance-item {
    width: min(100%, 420px);
    padding: 24px 22px;

    background: rgba(202, 240, 248, 0.65);
    border: 1px solid rgba(3, 4, 94, 0.16);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(4px);

    text-align: center;
}

/* Compliance title stays centered */
body.index-page .index-compliance-item h3 {
    font-size: 1.35rem;
    color: var(--color-navy);
    font-weight: 900;
    line-height: 1.25;

    max-width: 320px;
    margin: 0 auto 10px;

    text-align: center;
    text-wrap: balance;
}

/* Compliance paragraph aligns left under centered title */
body.index-page .index-compliance-item p {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;

    max-width: 320px;
    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}

/* Industry highlight and industry list. */
body.index-page .industry-section {
    padding: 40px 0;
    text-align: center;
}

body.index-page .index-industry-highlight {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 40px;
    padding: 40px 0;
    text-align: center;
}

body.index-page .index-industry-image-wrap {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.index-page .index-industry-image {
    width: 100%;
    max-width: 900px;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Precision Clarity Confidence text area */
body.index-page .index-industry-content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Section title stays centered */
body.index-page .index-industry-content h3 {
    font-size: 2rem;
    margin: 0 auto 20px;
    text-align: center;
    text-wrap: balance;
    color: var(--color-navy);
}

/* Paragraphs align left inside a centered text box */
body.index-page .index-industry-content p {
    font-size: clamp(1.2rem, 3vw, 2rem);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 20px;

    /* Paragraph text aligned left under the centered title */
    text-align: left;
    text-wrap: pretty;

    color: #000000;
    font-family: Arial, sans-serif;
}

/* Industries We Serve section */
body.index-page .index-industries-section {
    padding: 50px 20px;
    background-color: var(--color-light-blue);
    border-radius: 14px;
    text-align: center;
}

/* Main title: centered */
body.index-page .index-industries-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--color-gold);
    background-color: var(--color-navy);
    padding: 10px 20px;
    border-radius: 6px;

    /* Keeps title centered */
    text-align: center;
    text-wrap: balance;

    /* Centers the title block */
    max-width: 900px;
    margin: 0 auto 30px;
}

/* =====================================================
   SUCCESS-ORIENTED INDUSTRY INTRO SECTION

   Rule:
   - Section stays centered on the page.
   - Title stays centered.
   - Paragraph is larger and aligned left inside a centered box.
   - No button here, so clients continue through the page.
===================================================== */

body.index-page .industries-intro {
    padding: 60px 0;
    text-align: center;
}

body.index-page .industries-intro > .section-inner {
    padding-top: 70px;
    padding-bottom: 70px;

    background: linear-gradient(to right, var(--color-blue), #00a8e8);
    color: var(--color-pale-blue);

    border-radius: 14px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

/* Title wrapper */
body.index-page .industries-intro .section-header {
    max-width: 950px;
    margin: 0 auto 26px;
    text-align: center;
}

/* Title centered */
body.index-page .industries-intro h2 {
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 900;
    line-height: 1.2;

    color: var(--color-pale-blue);

    margin: 0 auto;
    text-align: center;
    text-wrap: balance;
}

/* Paragraph wrapper centered under title */
body.index-page .industries-intro .section-copy {
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
}

/* Paragraph larger, readable, and left-aligned */
body.index-page .industries-intro p {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 600;
    line-height: 1.75;

    color: var(--color-navy);

    margin: 0;
    text-align: left;
    text-wrap: pretty;
}

/* =====================================================
   INDUSTRIES WE SERVE SECTION

   Rule:
   - Main section title is centered.
   - Intro paragraph is left-aligned inside a centered box.
   - Industry card headings stay white and on one horizontal line.
   - Industry card paragraphs stay left-aligned under each heading.
===================================================== */

/* Main intro paragraph under Industries We Serve */
body.index-page .industry-description {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #000000;

    /* Keeps paragraph lined up neatly under the centered title */
    max-width: 1000px;
    margin: 0 auto 3rem;

    /* Paragraph text aligned left inside centered box */
    text-align: left;
    text-wrap: pretty;
}

/* Industry cards grid */
body.index-page .industries-list {
    display: grid;

    /* Desktop view: three clean columns */
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 30px;
    align-items: stretch;
    justify-items: stretch;
}

/* Each industry card */
body.index-page .industry {
    background: #00a8e8;
    color: var(--color-navy);

    padding: 24px;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

/* Industry card titles: white, centered, one horizontal line */
body.index-page .industry h3 {
    font-size: clamp(0.95rem, 1.25vw, 1.35rem);
    color: var(--color-pale-blue);
    line-height: 1.25;
    font-weight: 900;

    /* Title centered */
    text-align: center;

    /* Forces title to stay on one horizontal line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Allows the title to use the full card width */
    max-width: 100%;
    margin: 0 auto 12px;
}

/* Industry card paragraphs: left aligned under centered title */
body.index-page .industry p {
    font-size: 1rem;
    color: var(--color-navy);
    line-height: 1.6;

    /* Keeps paragraph lined up under the title */
    max-width: 300px;
    margin: 0 auto;

    /* Text aligned left inside centered box */
    text-align: left;
    text-wrap: pretty;
}

/* Industry image card */
body.index-page .industry-image {
    background: rgba(202, 240, 248, 0.92);
    padding: 16px;
    border-radius: 14px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.index-page .industry-image img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Left bottom image: man-and-woman image */
body.index-page .industry-team-image {
    min-height: 100%;
}

/* Right bottom image: new Wilson Wise brand feature */
body.index-page .industry-brand-feature {
    grid-column: span 2;
    padding: 14px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.95);

    border: 1px solid rgba(3, 4, 94, 0.08);
}

/* New brand image styling */
body.index-page .industry-brand-feature img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}

/* Final homepage CTA. */
body.index-page .cta-section {
    padding: 80px 0;
    background: var(--color-blue);
    color: var(--color-pale-blue);
    text-align: center;
}

body.index-page .cta-section h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
}

body.index-page .cta-section p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    text-align: center;
}

/* Back-to-top button.
   JavaScript adds .is-visible when the user scrolls down. */
body.index-page #backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--color-blue);
    color: var(--color-pale-blue);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 119, 182, 0.8);
    transition: background-color 0.3s ease;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

body.index-page #backToTop.is-visible {
    display: flex;
}

body.index-page #backToTop:hover,
body.index-page #backToTop:focus {
    background: var(--color-cyan);
    outline: none;
}

/* =====================================================
   INDEX PAGE — SCROLL BACKGROUND WRAPPER

   This controls the background from Our Services
   down to the final CTA.
===================================================== */

body.index-page .index-scroll-background {
    position: relative;

    background-image:
        linear-gradient(
            rgba(144, 224, 239, 0.72),
            rgba(202, 240, 248, 0.80)
        ),
        url("../images/backgrounds/site-scroll-background-glass-building.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding-bottom: 0;
}

/* =====================================================
   INDEX RESPONSIVE SYSTEM

   Rule:
   - Do not completely redesign layouts on smaller screens.
   - Keep the same desktop structure.
   - Scale down columns, cards, spacing, and typography.
===================================================== */

@media (max-width: 1024px) {
    section {
        scroll-margin-top: var(--header-height);
    }

    body.index-page {
        padding-top: var(--header-height);
    }

    body.index-page .trust-badge {
        font-size: 0.9rem;
        padding: 8px 14px;
    }

    body.index-page .hero-content {
    width: min(100%, calc(100% - 32px));
    padding: 34px 18px 92px;
    }

    body.index-page .hero-content h1 {
        font-size: clamp(2rem, 5vw, 3.4rem);
    }

    body.index-page .hero-content p {
        font-size: clamp(1rem, 2.2vw, 1.45rem);
        max-width: 660px;
    }

    /* Keeps the broker notice smaller and lower on tablet */
body.index-page .hero-funding-notice {
    position: relative;
    top: 34px;

    max-width: 640px;
    margin: 18px auto 0;
    padding: 12px 14px 13px;

    border-radius: 12px;
}

body.index-page .hero-notice-badge {
    padding: 6px 10px;
    margin-bottom: 8px;

    font-size: 0.62rem;
}

body.index-page .hero-disclaimer {
    max-width: 600px;
    margin: 0;

    font-size: 0.76rem;
    line-height: 1.48;
}

    body.index-page .services-overview {
        padding: 90px 0;
    }

    body.index-page .services-overview h1 {
        font-size: clamp(2.2rem, 6vw, 4.2rem);
        margin-bottom: 42px;
    }

    body.index-page .service-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        max-width: 100%;
    }

    body.index-page .service-item {
        min-height: 320px;
        padding: 12px;
        border-radius: 12px;
    }

    body.index-page .service-item img {
        height: clamp(145px, 24vw, 230px);
        margin-bottom: 12px;
        border-radius: 10px;
    }

    body.index-page .service-item h3 {
        font-size: clamp(0.68rem, 1.5vw, 0.95rem);
        white-space: nowrap;
    }

    body.index-page .thought-leadership-container {
        margin: 42px auto;
        padding: 42px 0;
    }

    body.index-page .thought-leadership-container > .section-inner {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    body.index-page .thought-leadership-container h2 {
        font-size: clamp(1.7rem, 4vw, 2.3rem);
    }

    body.index-page .insights-section {
        padding: 42px 16px;
        margin: 34px auto;
    }

    body.index-page .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 28vw, 260px), 1fr));
        gap: 16px;
    }

    body.index-page .insight-card,
    body.index-page .insight-item {
        padding: 18px;
        border-radius: 13px;
    }

    body.index-page .insight-card i,
    body.index-page .insight-item i {
        font-size: 2rem;
    }

    body.index-page .insight-card h3,
    body.index-page .insight-item h3 {
        font-size: 0.95rem;
    }

    body.index-page .insight-card p,
    body.index-page .insight-item p {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    body.index-page .text-layout {
        flex-direction: row;
        gap: 18px;
    }

    body.index-page .text-layout .wow-box,
    body.index-page .text-layout .sub-wow-box {
        width: 50%;
        min-height: 210px;
        padding: 20px;
    }

    body.index-page .wow-text {
        top: 70px;
        font-size: clamp(1.15rem, 3vw, 1.65rem);
        padding: 0.8rem 1rem;
    }

    body.index-page .sub-wow-text {
        top: 30px;
        font-size: clamp(1rem, 2.4vw, 1.35rem);
        padding: 15px;
    }

    body.index-page .trust-section {
        max-width: 92%;
        padding: 1.5rem;
    }

    body.index-page .trust-section h3 {
        font-size: clamp(1.4rem, 3vw, 1.8rem);
    }

    body.index-page .trust-section p {
        font-size: 0.98rem;
    }


    body.index-page .trust-section .bold-text {
    display: block;

    width: 100%;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 9px 8px;

    font-size: clamp(0.58rem, 1.45vw, 0.9rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.15px;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;

    text-align: center;
}

    body.index-page .game-changer-wrapper,
    body.index-page .growth-section,
    body.index-page .index-industry-highlight {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 22px;
    }

    body.index-page .game-changer-image,
    body.index-page .growth-image {
        min-height: 240px;
    }

    body.index-page .growth-content {
        width: 50%;
    }

    body.index-page .growth-image {
        width: 50%;
    }

    body.index-page .resource-insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22vw, 220px), 1fr));
        gap: 14px;
    }

    body.index-page .index-contact,
    body.index-page .index-security {
        padding: 42px 0;
    }

    body.index-page .index-contact-title,
    body.index-page .index-security-title {
        font-size: clamp(1.4rem, 4vw, 2rem);
    }

    body.index-page .index-contact-image {
        max-width: 520px;
    }

    body.index-page .index-contact-method {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    }

    body.index-page .index-security-copy p {
        font-size: clamp(1rem, 2.5vw, 1.45rem);
    }

    body.index-page .industries-intro {
        padding: 42px 0;
    }

    body.index-page .industries-intro > .section-inner {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    body.index-page .industries-intro h2 {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
    }

    body.index-page .industries-intro p {
        font-size: clamp(1rem, 2.3vw, 1.25rem);
    }

    body.index-page .index-industry-image-wrap,
    body.index-page .index-industry-content {
        flex: 1 1 50%;
    }

    body.index-page .index-industry-content h3 {
        font-size: clamp(1.35rem, 3vw, 1.75rem);
    }

    body.index-page .index-industry-content p {
        font-size: clamp(0.9rem, 2.2vw, 1.2rem);
    }

    body.index-page .index-industries-section {
        padding: 38px 14px;
    }

    body.index-page .index-industries-title {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    body.index-page .industry-description {
        font-size: clamp(0.95rem, 2.4vw, 1.25rem);
        max-width: 90%;
    }

    body.index-page .industries-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    body.index-page .industry {
        padding: 18px 12px;
        border-radius: 10px;
    }

    body.index-page .industry h3 {
        font-size: clamp(0.7rem, 1.6vw, 1rem);
    }

    body.index-page .industry p {
        font-size: clamp(0.68rem, 1.5vw, 0.88rem);
        line-height: 1.45;
        max-width: 100%;
    }

    body.index-page .industry-image img {
        min-height: 210px;
    }

    body.index-page .cta-section {
        padding: 58px 0;
    }

    body.index-page .cta-section h2 {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
    }

    body.index-page .cta-section p {
        font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    }
}

@media (max-width: 700px) {
    body.index-page .trust-badge {
        font-size: 0.72rem;
        padding: 6px 10px;
    }

    body.index-page .hero {
        min-height: calc(100vh - var(--header-height));
    }

    body.index-page .hero-content {
    width: min(100%, calc(100% - 24px));
    padding: 28px 12px 70px;
    }

    body.index-page .hero-content h1 {
    font-size: clamp(1.28rem, 6.2vw, 2.05rem);
    line-height: 1.08;

    max-width: 100%;
    margin: 0 auto 14px;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;

    text-align: center;
}

    body.index-page .hero-content p {
        font-size: clamp(0.95rem, 4vw, 1.15rem);
        max-width: 92%;
        line-height: 1.55;
    }

    /* Keeps the broker notice smaller and controlled on mobile */
body.index-page .hero-funding-notice {
    position: relative;
    top: 22px;

    max-width: 92%;
    margin: 14px auto 0;
    padding: 10px 10px 11px;

    border-left-width: 3px;
    border-radius: 10px;
}

body.index-page .hero-notice-badge {
    width: fit-content;
    padding: 5px 8px;
    margin-bottom: 7px;

    font-size: clamp(0.46rem, 1.9vw, 0.58rem);
    letter-spacing: 0.45px;
}

body.index-page .hero-notice-badge i {
    font-size: 0.68rem;
}

body.index-page .hero-disclaimer {
    max-width: 100%;
    margin: 0;

    font-size: clamp(0.58rem, 2.45vw, 0.72rem);
    line-height: 1.38;
}

    body.index-page .services-overview {
        padding: 56px 0;
    }

    body.index-page .services-overview h1 {
        font-size: clamp(1.7rem, 9vw, 2.4rem);
        letter-spacing: 1px;
        margin-bottom: 26px;
    }

    body.index-page .service-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 0 4px;
    }

    body.index-page .service-item {
        min-height: 150px;
        padding: 6px;
        border-radius: 9px;
    }

    body.index-page .service-item img {
        height: clamp(72px, 22vw, 105px);
        margin-bottom: 7px;
        border-radius: 7px;
    }

    body.index-page .service-item h3 {
        font-size: clamp(0.43rem, 2.5vw, 0.62rem);
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.index-page .thought-leadership-container {
        margin: 28px auto;
        padding: 28px 0;
    }

    body.index-page .thought-leadership-container > .section-inner {
        padding-top: 28px;
        padding-bottom: 28px;
        border-radius: 12px;
    }

    body.index-page .insights-heading {
        font-size: clamp(1.2rem, 5.8vw, 1.7rem);
    }

    body.index-page .insights-subtext {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    body.index-page .insights-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body.index-page .insight-card,
    body.index-page .insight-item {
        padding: 10px 7px;
        border-radius: 10px;
    }

    body.index-page .insight-card i,
    body.index-page .insight-item i {
        font-size: 1.35rem;
        margin-bottom: 8px;
    }

    body.index-page .insight-card h3,
    body.index-page .insight-item h3 {
        font-size: clamp(0.52rem, 2.4vw, 0.72rem);
        line-height: 1.18;
        margin-bottom: 6px;
    }

    body.index-page .insight-card p,
    body.index-page .insight-item p {
        font-size: clamp(0.48rem, 2.2vw, 0.65rem);
        line-height: 1.35;
        max-width: 100%;
    }

    body.index-page .text-layout {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 24px;
    }

    body.index-page .text-layout .wow-box,
    body.index-page .text-layout .sub-wow-box {
        width: 50%;
        min-height: 145px;
        padding: 10px;
        border-radius: 9px;
    }

    body.index-page .wow-text {
        top: 42px;
        font-size: clamp(0.62rem, 3.1vw, 0.9rem);
        padding: 0.45rem 0.55rem;
        border-radius: 8px;
    }

    body.index-page .sub-wow-text {
        top: 22px;
        font-size: clamp(0.58rem, 3vw, 0.82rem);
        padding: 8px;
        border-radius: 7px;
    }

    body.index-page .trust-section {
        max-width: 96%;
        padding: 1rem;
    }

    body.index-page .trust-section h3 {
        font-size: 1rem;
    }

    body.index-page .trust-section p {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    body.index-page .trust-section .bold-text {
    display: block;

    width: 100%;
    max-width: 100%;
    margin: 12px auto 0;
    padding: 7px 6px;

    font-size: clamp(0.36rem, 1.75vw, 0.68rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.2px;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;

    text-align: center;
}

    body.index-page .game-changer-section,
    body.index-page .growth-section {
        padding: 28px 10px;
        border-radius: 10px;
    }

    body.index-page .game-changer-wrapper,
    body.index-page .growth-section,
    body.index-page .index-industry-highlight {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }

    body.index-page .game-changer-image,
    body.index-page .growth-image {
        min-height: 150px;
    }

    body.index-page .game-changer-content h3,
    body.index-page .growth-content h3 {
        font-size: clamp(0.9rem, 4vw, 1.15rem);
        margin-bottom: 10px;
    }

    body.index-page .game-changer-content p,
    body.index-page .growth-content p {
        font-size: clamp(0.58rem, 2.7vw, 0.75rem);
        line-height: 1.4;
        margin-bottom: 8px;
    }

    body.index-page .resource-insights-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    body.index-page .resource-insights-grid .insight-item {
        padding: 8px 5px;
    }

    body.index-page .resource-insights-grid .insight-item i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.index-page .resource-insights-grid .insight-item h3 {
        font-size: clamp(0.42rem, 2vw, 0.58rem);
        line-height: 1.15;
    }

    body.index-page .resource-insights-grid .insight-item p {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.3;
    }

    body.index-page .index-contact,
    body.index-page .index-security {
        padding: 28px 0;
    }

    body.index-page .index-contact > .section-inner {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    body.index-page .index-contact-title,
    body.index-page .index-security-title {
        font-size: clamp(0.95rem, 5vw, 1.3rem);
        padding: 8px 12px;
    }

    body.index-page .index-contact-image {
        max-width: 88%;
    }

    body.index-page .index-contact-methods {
        gap: 6px;
    }

    body.index-page .index-contact-method {
        font-size: clamp(0.62rem, 3.1vw, 0.9rem);
        padding: 6px 8px;
    }

    body.index-page .index-security-copy p {
        font-size: clamp(0.78rem, 3.6vw, 1rem);
        line-height: 1.45;
    }

    body.index-page .index-security-copy p:last-child {
        margin-bottom: 36px;
    }

    body.index-page .index-compliance-icons {
        flex-wrap: nowrap;
        gap: 8px;
    }

    body.index-page .index-compliance-item {
        width: 50%;
        padding: 12px 8px;
    }

    body.index-page .index-compliance-item h3 {
        font-size: clamp(0.68rem, 3.2vw, 0.9rem);
    }

    body.index-page .index-compliance-item p {
        font-size: clamp(0.58rem, 2.7vw, 0.72rem);
        line-height: 1.35;
    }

    body.index-page .industries-intro {
        padding: 28px 0;
    }

    body.index-page .industries-intro > .section-inner {
        padding-top: 28px;
        padding-bottom: 28px;
        border-radius: 10px;
    }

    body.index-page .industries-intro h2 {
        font-size: clamp(1rem, 5vw, 1.35rem);
    }

    body.index-page .industries-intro p {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.index-page .index-industry-highlight {
        padding: 26px 0;
    }

    body.index-page .index-industry-content h3 {
        font-size: clamp(0.9rem, 4vw, 1.15rem);
        margin-bottom: 10px;
    }

    body.index-page .index-industry-content p {
        font-size: clamp(0.58rem, 2.8vw, 0.75rem);
        line-height: 1.4;
        margin-bottom: 8px;
    }

    body.index-page .index-industry-image {
        min-height: 160px;
        object-fit: cover;
    }

    body.index-page .industries-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.index-page .industry {
        padding: 10px 6px;
        border-radius: 8px;
    }

    body.index-page .industry h3 {
        font-size: clamp(0.45rem, 2.3vw, 0.62rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 5px;
    }

    body.index-page .industry p {
        font-size: clamp(0.42rem, 2vw, 0.55rem);
        line-height: 1.28;
    }

    body.index-page .industry-image {
        padding: 6px;
        border-radius: 8px;
    }

    body.index-page .industry-image img {
        min-height: 110px;
        border-radius: 6px;
    }

    body.index-page .industry-brand-feature {
        grid-column: span 2;
    }

    body.index-page .cta-section {
        padding: 38px 0;
    }

    body.index-page .cta-section h2 {
        font-size: clamp(1.1rem, 5vw, 1.45rem);
    }

    body.index-page .cta-section p {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
    }

    body.index-page .cta-section .cta-btn {
        font-size: 0.78rem;
        padding: 9px 14px;
    }

    body.index-page #backToTop {
        width: 40px;
        height: 40px;
        right: 16px;
        bottom: 18px;
        font-size: 16px;
    }
}


/* =====================================================
   INDEX PAGE — TITLE COLOR FIX

   Purpose:
   - Restores these major section titles to company white.
   - Prevents the vivid green from taking over headings.
   - Keeps the sections clean, professional, and consistent.
===================================================== */

/* Secure, Fast & Reliable Communication */
body.index-page .index-contact-title,

/* Your Security is Our Priority */
body.index-page .index-security-title,

/* Industries We Serve */
body.index-page .index-industries-title {
    color: var(--color-white) !important;
}


/* =====================================================
   INDEX PAGE — FINAL CTA PARAGRAPH ALIGNMENT FIX

   Purpose:
   - Keeps the final CTA title centered.
   - Aligns the paragraph left inside a centered text box.
   - Helps prevent awkward one-word endings / widows.
===================================================== */

body.index-page .cta-section p {
    max-width: 760px;
    margin: 0 auto 25px;

    color: var(--color-pale-blue);
    font-size: 1.2rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}



/* =====================================================
   INDEX PAGE — RESOURCE INSIGHTS FIXED GRID

   Purpose:
   - Keeps the first three boxes on the top row.
   - Keeps the fourth box below on the left.
   - Places one wide image on the right of the fourth box.
   - Image takes the space of two missing boxes.
   - All boxes and image stay fixed, balanced, and professional.
   - No hover movement, no shifting, no crooked layout.
===================================================== */


/* =====================================================
   MAIN GRID STRUCTURE

   Desktop layout:
   Row 1: Box 1 | Box 2 | Box 3
   Row 2: Box 4 | Image | Image
===================================================== */

body.index-page .resource-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;

    width: 100%;
    margin-top: 50px;
    text-align: center;
}


/* =====================================================
   REGULAR RESOURCE BOXES

   Purpose:
   - Keeps all text boxes the same fixed height.
   - Keeps content centered inside each box.
   - Stops boxes from moving on hover.
===================================================== */

body.index-page .resource-insights-grid .insight-item {
    height: 260px;
    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.86);
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);

    text-align: center;
    overflow: hidden;

    /* No moving animation */
    transition: box-shadow 0.3s ease;
}


/* =====================================================
   REMOVE CARD MOVEMENT

   Purpose:
   - Keeps the boxes fixed in place.
   - Allows a soft shadow change only.
===================================================== */

body.index-page .resource-insights-grid .insight-item:hover,
body.index-page .resource-insights-grid .insight-item:focus-within {
    transform: none !important;
    box-shadow: var(--shadow-medium);
}


/* =====================================================
   CARD ICONS
===================================================== */

body.index-page .resource-insights-grid .insight-item i {
    font-size: 2.5rem;
    color: var(--color-blue);
    margin-bottom: 15px;
    flex-shrink: 0;
}


/* =====================================================
   CARD TITLES
===================================================== */

body.index-page .resource-insights-grid .insight-item h3 {
    font-size: 1rem;
    color: #003366;
    line-height: 1.25;
    font-weight: 900;

    max-width: 280px;
    margin: 0 auto 10px;

    text-align: center;
    text-wrap: balance;
}


/* =====================================================
   CARD PARAGRAPHS

   Purpose:
   - Paragraphs stay left-aligned inside a centered box.
   - Helps prevent awkward widows.
===================================================== */

body.index-page .resource-insights-grid .insight-item p {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;

    max-width: 280px;
    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   FOURTH BOX POSITION

   Add this class to the fourth box in HTML:
   class="insight-item resource-feature-anchor"

   Purpose:
   - Forces the fourth box to sit under the first box.
===================================================== */

body.index-page .resource-insights-grid .resource-feature-anchor {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}


/* =====================================================
   WIDE IMAGE FEATURE

   Add this image box after the fourth card in HTML:
   class="insight-image-feature resource-brand-feature"

   Purpose:
   - Image sits to the right of the fourth box.
   - Image takes the space of two boxes.
   - Image height matches the box height.
===================================================== */

body.index-page .resource-insights-grid .resource-brand-feature {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    height: 260px;
    min-height: 260px;

    padding: 16px;
    border-radius: 15px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    /* No moving animation */
    transition: box-shadow 0.3s ease;
}


/* =====================================================
   IMAGE INSIDE THE WIDE FEATURE BOX

   Purpose:
   - Image fills the full two-box space.
   - Image stays inside the frame.
   - No movement or zooming.
===================================================== */

body.index-page .resource-insights-grid .resource-brand-feature img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 12px;
    display: block;

    /* No moving animation */
    transition: none;
}


/* =====================================================
   REMOVE IMAGE MOVEMENT ON HOVER
===================================================== */

body.index-page .resource-insights-grid .resource-brand-feature:hover img,
body.index-page .resource-insights-grid .resource-brand-feature:focus-within img {
    transform: none !important;
}


/* =====================================================
   TABLET VIEW

   Same layout:
   Box 1 | Box 2 | Box 3
   Box 4 | Image | Image
===================================================== */

@media (max-width: 1024px) {
    body.index-page .resource-insights-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.index-page .resource-insights-grid .insight-item,
    body.index-page .resource-insights-grid .resource-brand-feature {
        height: 210px;
        min-height: 210px;
    }

    body.index-page .resource-insights-grid .insight-item {
        padding: 18px;
        border-radius: 13px;
    }

    body.index-page .resource-insights-grid .insight-item i {
        font-size: 2rem;
        margin-bottom: 12px;
    }

    body.index-page .resource-insights-grid .insight-item h3 {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    body.index-page .resource-insights-grid .insight-item p {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    body.index-page .resource-insights-grid .resource-brand-feature {
        padding: 10px;
        border-radius: 13px;
    }

    body.index-page .resource-insights-grid .resource-brand-feature img {
        border-radius: 10px;
    }
}


/* =====================================================
   MOBILE VIEW

   Same layout, only smaller:
   Box 1 | Box 2 | Box 3
   Box 4 | Image | Image
===================================================== */

@media (max-width: 700px) {
    body.index-page .resource-insights-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.index-page .resource-insights-grid .insight-item,
    body.index-page .resource-insights-grid .resource-brand-feature {
        height: 125px;
        min-height: 125px;
        border-radius: 9px;
    }

    body.index-page .resource-insights-grid .insight-item {
        padding: 8px 5px;
    }

    body.index-page .resource-insights-grid .insight-item i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.index-page .resource-insights-grid .insight-item h3 {
        font-size: clamp(0.42rem, 2vw, 0.58rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.index-page .resource-insights-grid .insight-item p {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.3;
    }

    body.index-page .resource-insights-grid .resource-brand-feature {
        padding: 6px;
    }

    body.index-page .resource-insights-grid .resource-brand-feature img {
        border-radius: 7px;
    }
}


/* =====================================================
   INDEX PAGE — RESOURCE INSIGHTS FIXED GRID END
===================================================== */



/* =====================================================
   GLOBAL CARD TITLE — ONE HORIZONTAL LINE DEFAULT

   Purpose:
   - Keeps card/box h3 titles on one horizontal line.
   - Prevents titles from wrapping into two lines.
   - Keeps boxes clean, balanced, and professional.
   - Applies to current and future boxes using these card styles.
===================================================== */

body.index-page .insight-item h3,
body.index-page .resource-insights-grid .insight-item h3,
body.index-page .industry h3,
body.index-page .service-item h3,
body.index-page .funding-info-card h3,
body.index-page .funding-step h3 {
    /* Keeps heading on one line */
    white-space: nowrap;

    /* Prevents overflow from breaking the box */
    overflow: hidden;

    /* Adds ... only if the text is too long */
    text-overflow: ellipsis;

    /* Keeps title centered */
    max-width: 100%;
    text-align: center;

    /* Slightly flexible size so longer headings fit better */
    font-size: clamp(0.82rem, 1.15vw, 1rem);
}



/* =====================================================
   HOME HERO — FUNDING BROKER NOTICE

   Purpose:
   - Keeps the hero focused on WWA as an accounting company.
   - Presents the DAC / BankBreezy funding notice beautifully.
   - Makes the disclosure feel premium instead of plain legal text.
===================================================== */

body.index-page .hero-main-text {
    max-width: 820px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.65;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}

body.index-page .hero-funding-notice {
    position: relative;
    top: 80px;

    max-width: 680px;
    margin: 26px auto 0;
    padding: 12px 14px 13px;

    background:
        linear-gradient(
            145deg,
            rgba(202, 240, 248, 0.12),
            rgba(3, 4, 94, 0.44)
        );

    border: 1px solid rgba(202, 240, 248, 0.22);
    border-left: 4px solid var(--color-gold);
    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(3, 4, 94, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(10px);

    text-align: left;
}

body.index-page .hero-notice-badge {
    width: fit-content;
    margin: 0 0 9px;
    padding: 7px 11px;

    background: rgba(255, 204, 0, 0.96);
    color: var(--color-navy);

    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.65px;
    text-transform: uppercase;

    box-shadow: 0 7px 16px rgba(255, 204, 0, 0.22);
}

body.index-page .hero-notice-badge i {
    font-size: 0.78rem;
}

body.index-page .hero-disclaimer {
    max-width: 700px;
    margin: 0;

    color: rgba(224, 251, 252, 0.94);
    font-size: 0.82rem;
    line-height: 1.52;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HOME HERO — FUNDING BROKER NOTICE RESPONSIVE
===================================================== */

@media (max-width: 1024px) {
    body.index-page .hero-main-text {
        font-size: 1rem;
        line-height: 1.55;
    }

    body.index-page .hero-funding-notice {
        max-width: 700px;
        margin-top: 16px;
        padding: 13px 14px 14px;
        border-radius: 13px;
    }

    body.index-page .hero-notice-badge {
        padding: 6px 10px;
        font-size: 0.62rem;
        margin-bottom: 8px;
    }

    body.index-page .hero-disclaimer {
        font-size: 0.76rem;
        line-height: 1.48;
    }
}

@media (max-width: 700px) {
    body.index-page .hero-main-text {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.index-page .hero-funding-notice {
        max-width: 100%;
        margin-top: 14px;
        padding: 11px 11px 12px;

        border-left-width: 3px;
        border-radius: 11px;
    }

    body.index-page .hero-notice-badge {
        padding: 5px 8px;
        margin-bottom: 7px;

        font-size: clamp(0.46rem, 1.9vw, 0.58rem);
        letter-spacing: 0.45px;
    }

    body.index-page .hero-notice-badge i {
        font-size: 0.68rem;
    }

    body.index-page .hero-disclaimer {
        font-size: clamp(0.58rem, 2.45vw, 0.72rem);
        line-height: 1.38;
    }
}


/* =====================================================
   INDEX.HTML END _ HOME PAGE
===================================================== */



/* =====================================================
   ABOUT.HTML START

   Purpose:
   - Styles the About page only.
   - Keeps the same professional structure as index.html.
   - Header and footer remain global and unchanged.
   - Titles stay centered.
   - Paragraphs stay left-aligned inside centered text boxes.
   - Desktop, tablet, and mobile keep the same visual layout,
     scaled down cleanly by device size.
===================================================== */

body.about-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

/* =====================================================
   ABOUT PAGE — HERO SECTION

   Image:
   public_html/assets/images/about/about-hero-background.jpg
===================================================== */

body.about-page .about-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.35),
            rgba(3, 4, 94, 0.70)
        ),
        url("../images/about/about-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

/* Glass hero text box */
body.about-page .about-hero-content {
    width: min(100%, 780px);
    margin: 0 auto;
    padding: 46px 36px;

    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-medium);

    text-align: center;
}

/* Hero title */
body.about-page .about-hero-content h1 {
    color: var(--color-gold);
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 1.05;
    font-weight: 900;

    margin: 0 auto 18px;

    text-align: center;
    text-wrap: balance;
    text-shadow: 2px 3px 12px rgba(0, 0, 0, 0.45);
}

/* Hero paragraph */
body.about-page .about-hero-content p {
    max-width: 620px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: clamp(1.15rem, 2.5vw, 1.6rem);
    font-weight: 600;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.about-page .about-hero-content .highlight {
    color: var(--color-gold);
    font-weight: 900;
}

/* =====================================================
   ABOUT PAGE — SHARED SECTION STRUCTURE
===================================================== */

body.about-page section {
    scroll-margin-top: var(--header-height);
}

body.about-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.about-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .section-header p {
    max-width: 820px;
    margin: 0 auto;

    color: #000000;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.about-page .section-copy {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

body.about-page .section-copy p {
    color: #000000;
    font-size: 1.05rem;
    line-height: 1.75;

    margin-bottom: 16px;

    text-align: left;
    text-wrap: pretty;
}

/* =====================================================
   ABOUT PAGE — MISSION AND VISION SECTION
===================================================== */

body.about-page .mission-vision-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-pale-blue), var(--color-light-blue));
    text-align: center;
}

/* Mission/Vision rows */
body.about-page .mission-vision-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;

    margin-bottom: 70px;
    padding: 32px;

    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.about-page .mission-vision-row:last-child {
    margin-bottom: 0;
}

/* Text side */
body.about-page .mv-text {
    flex: 1 1 55%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.about-page .mv-text h3 {
    color: var(--color-navy);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.2;

    margin: 0 auto 10px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .mv-text .tagline {
    color: var(--color-blue);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.4px;

    margin: 0 auto 22px;

    text-align: center;
    text-wrap: balance;
}

/* Image side */
body.about-page .mv-image {
    flex: 1 1 45%;

    display: flex;
    align-items: stretch;
    justify-content: center;

    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

body.about-page .mv-image img {
    width: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: 18px;
}

/* Mission highlight note */
body.about-page .mission-extension {
    margin: 22px auto;
    padding: 20px;

    background: rgba(144, 224, 239, 0.55);
    border-left: 6px solid var(--color-blue);
    border-radius: 12px;

    box-shadow: var(--shadow-soft);
}

body.about-page .mission-extension p {
    margin-bottom: 0;
}

/* Pull quote */
body.about-page .pull-quote {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 18px 22px;

    color: var(--color-navy);
    background: rgba(255, 204, 0, 0.16);
    border-left: 6px solid var(--color-gold);
    border-radius: 12px;

    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.6;
    font-style: italic;

    text-align: left;
    text-wrap: pretty;
}

/* =====================================================
   ABOUT PAGE — OUR STORY SECTION
===================================================== */

body.about-page .company-history-section {
    padding: 85px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.about-page .history-content {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;

    padding: 34px;

    background: rgba(255, 255, 255, 0.52);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.about-page .history-image {
    flex: 1 1 42%;

    display: flex;
    align-items: stretch;
    justify-content: center;

    overflow: hidden;
    border-radius: 18px;
}

body.about-page .history-image img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

body.about-page .history-text {
    flex: 1 1 58%;
}

/* =====================================================
   ABOUT PAGE — OUR GROWTH SECTION
===================================================== */

body.about-page .company-growth-section {
    padding: 85px 0;
    background: linear-gradient(135deg, var(--color-pale-blue), #ffffff);
    text-align: center;
}

body.about-page .growth-content-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;

    padding: 34px;

    background: rgba(255, 255, 255, 0.70);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.about-page .growth-image-wrap {
    flex: 1 1 42%;

    display: flex;
    align-items: stretch;
    justify-content: center;

    overflow: hidden;
    border-radius: 18px;
}

body.about-page .growth-image-wrap img {
    width: 100%;
    min-height: 360px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

body.about-page .growth-text {
    flex: 1 1 58%;
}

/* =====================================================
   ABOUT PAGE — QUOTE SECTION
===================================================== */

body.about-page .about-quote-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-pale-blue), var(--color-light-blue));
    text-align: center;
}

body.about-page .about-quote-card {
    position: relative;

    max-width: 940px;
    margin: 0 auto;
    padding: 46px 42px;

    background: var(--color-white);
    border-left: 8px solid var(--color-cyan);
    border-radius: 20px;
    box-shadow: var(--shadow-medium);

    text-align: center;
    overflow: hidden;
}

body.about-page .quote-mark {
    position: absolute;
    top: -42px;
    left: 24px;

    color: var(--color-cyan);
    opacity: 0.12;

    font-size: 8rem;
    line-height: 1;
    font-family: Georgia, serif;
}

body.about-page .about-quote-card h2 {
    position: relative;
    z-index: 2;

    max-width: 820px;
    margin: 0 auto 22px;

    color: #2b2d42;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.about-page .about-quote-card h2 span {
    color: var(--color-cyan);
    font-weight: 900;
}

body.about-page .about-quote-card p {
    max-width: 820px;
    margin: 0 auto;

    color: #2b2d42;
    font-size: 1.1rem;
    font-weight: 800;

    text-align: right;
}

/* =====================================================
   ABOUT PAGE — EXPERTISE SECTION
===================================================== */

body.about-page .expertise-section {
    padding: 90px 0;
    background: linear-gradient(135deg, #f0faff, #ffffff);
    text-align: center;
}

body.about-page .expertise-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;

    margin-bottom: 70px;
    padding: 34px;

    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(3, 4, 94, 0.08);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.about-page .expertise-block:last-child {
    margin-bottom: 0;
}

body.about-page .expertise-reverse {
    flex-direction: row-reverse;
}

body.about-page .expertise-text {
    flex: 1 1 55%;
}

body.about-page .expertise-text h3 {
    color: #023047;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 900;
    line-height: 1.25;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .expertise-text p {
    font-size: 1.1rem;
    line-height: 1.75;
}

body.about-page .expertise-image {
    flex: 1 1 45%;

    display: flex;
    align-items: stretch;
    justify-content: center;

    overflow: hidden;
    border-radius: 20px;
}

body.about-page .expertise-image img {
    width: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    transition: transform 0.35s ease;
}

body.about-page .expertise-block:hover .expertise-image img {
    transform: scale(1.04);
}

/* =====================================================
   ABOUT PAGE — WHAT WE OFFER SECTION
===================================================== */

body.about-page .key-services-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.about-page .key-services-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 42px;

    padding: 36px;

    background: rgba(255, 255, 255, 0.66);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    text-align: center;
}

body.about-page .key-services-image {
    flex: 1 1 42%;

    display: flex;
    align-items: stretch;
    justify-content: center;

    overflow: hidden;
    border-radius: 18px;
}

body.about-page .key-services-image img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

body.about-page .key-services-content {
    flex: 1 1 58%;
    text-align: center;
}

body.about-page .key-services-content h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;

    margin: 0 auto 18px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .key-services-content .intro-text,
body.about-page .key-services-content .closing-text {
    max-width: 760px;
    margin: 0 auto 24px;

    color: #000000;
    font-size: 1.08rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.about-page .service-highlight {
    max-width: 760px;
    margin: 0 auto 20px;
    padding: 20px 22px;

    background: rgba(202, 240, 248, 0.72);
    border-left: 6px solid var(--color-blue);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.about-page .service-highlight h3 {
    color: var(--color-navy);
    font-size: 1.25rem;
    font-weight: 900;

    margin: 0 auto 10px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .service-highlight p {
    color: #000000;
    font-size: 1rem;
    line-height: 1.65;

    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}

/* =====================================================
   ABOUT PAGE — TESTIMONIALS SECTION
===================================================== */

body.about-page .testimonials-section {
    padding: 90px 0;
    background: linear-gradient(135deg, var(--color-pale-blue), #ffffff);
    text-align: center;
}

body.about-page .review-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    margin: 0 auto 50px;

    text-align: center;
}

body.about-page .review-item {
    min-width: 0;
    padding: 24px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    text-align: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.about-page .review-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

body.about-page .reviewer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 18px;

    text-align: left;
}

body.about-page .reviewer-image,
body.about-page .user-icon {
    width: 58px;
    height: 58px;

    object-fit: cover;
    border-radius: 50%;

    border: 3px solid var(--color-light-blue);
    box-shadow: var(--shadow-soft);
}

body.about-page .reviewer-info h3 {
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;

    margin: 0 0 4px;

    text-align: left;
    text-wrap: balance;
}

body.about-page .reviewer-info p {
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.35;

    margin: 0;

    text-align: left;
    text-wrap: pretty;
}

body.about-page .review-text {
    color: #000000;
    font-size: 0.98rem;
    line-height: 1.65;

    max-width: 310px;
    margin: 0 auto 16px;

    text-align: left;
    text-wrap: pretty;
}

body.about-page .review-rating {
    color: var(--color-gold);
    font-size: 1.15rem;
    letter-spacing: 2px;
    font-weight: 900;
    text-align: center;
}

/* Review form */
body.about-page .review-form {
    max-width: 760px;
    margin: 0 auto;
    padding: 34px;

    background: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    box-shadow: var(--shadow-medium);

    text-align: center;
}

body.about-page .review-form h3 {
    color: var(--color-navy);
    font-size: 1.8rem;
    font-weight: 900;

    margin: 0 auto 24px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .review-form input,
body.about-page .review-form textarea {
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 16px;

    color: var(--color-navy);
    background: var(--color-pale-blue);

    border: 1px solid rgba(3, 4, 94, 0.16);
    border-radius: 10px;

    outline: none;
    resize: vertical;
}

body.about-page .review-form input:focus,
body.about-page .review-form textarea:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.18);
}

body.about-page .rating-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin: 8px auto 20px;
}

body.about-page .star {
    border: none;
    background: transparent;
    color: var(--color-gold);

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

body.about-page .star:hover,
body.about-page .star:focus,
body.about-page .star.selected {
    color: var(--color-blue);
    transform: scale(1.12);
    outline: none;
}

/* Hidden labels for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}

/* =====================================================
   ABOUT PAGE — FINAL CTA
===================================================== */

body.about-page .about-final-cta {
    padding: 85px 0;
    background: var(--color-blue);
    color: var(--color-pale-blue);
    text-align: center;
}

body.about-page .about-final-cta h2 {
    color: var(--color-pale-blue);
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 900;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.about-page .about-final-cta p {
    max-width: 820px;
    margin: 0 auto 26px;

    color: var(--color-pale-blue);
    font-size: 1.15rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

/* =====================================================
   ABOUT PAGE — TABLET RESPONSIVE

   Rule:
   Same design, smaller spacing and typography.
===================================================== */

@media (max-width: 1024px) {
    body.about-page {
        padding-top: var(--header-height);
    }

    body.about-page .about-hero {
        padding: 62px 0;
    }

    body.about-page .about-hero-content {
        width: min(100%, 700px);
        padding: 38px 28px;
    }

    body.about-page .mission-vision-section,
    body.about-page .company-history-section,
    body.about-page .company-growth-section,
    body.about-page .about-quote-section,
    body.about-page .expertise-section,
    body.about-page .key-services-section,
    body.about-page .testimonials-section,
    body.about-page .about-final-cta {
        padding: 62px 0;
    }

    body.about-page .mission-vision-row,
    body.about-page .history-content,
    body.about-page .growth-content-row,
    body.about-page .expertise-block,
    body.about-page .key-services-grid {
        gap: 24px;
        padding: 24px;
    }

    body.about-page .mv-image img {
        min-height: 330px;
    }

    body.about-page .history-image img {
        min-height: 420px;
    }

    body.about-page .growth-image-wrap img,
    body.about-page .expertise-image img {
        min-height: 280px;
    }

    body.about-page .key-services-image img {
        min-height: 440px;
    }

    body.about-page .section-copy p,
    body.about-page .history-text p,
    body.about-page .growth-text p,
    body.about-page .expertise-text p,
    body.about-page .key-services-content .intro-text,
    body.about-page .key-services-content .closing-text,
    body.about-page .service-highlight p {
        font-size: 0.96rem;
        line-height: 1.62;
    }

    body.about-page .review-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    body.about-page .review-item {
        padding: 18px;
    }

    body.about-page .reviewer-info {
        gap: 10px;
    }

    body.about-page .reviewer-image,
    body.about-page .user-icon {
        width: 48px;
        height: 48px;
    }

    body.about-page .reviewer-info h3 {
        font-size: 0.88rem;
    }

    body.about-page .reviewer-info p {
        font-size: 0.76rem;
    }

    body.about-page .review-text {
        font-size: 0.84rem;
        line-height: 1.5;
    }
}

/* =====================================================
   ABOUT PAGE — MOBILE RESPONSIVE

   Rule:
   Same desktop-style layout, scaled down.
===================================================== */

@media (max-width: 700px) {
    body.about-page .about-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.about-page .about-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 28px 16px;
        border-radius: 18px;
    }

    body.about-page .about-hero-content h1 {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
        margin-bottom: 12px;
    }

    body.about-page .about-hero-content p {
        font-size: clamp(0.82rem, 3.6vw, 1.05rem);
        line-height: 1.45;
    }

    body.about-page .mission-vision-section,
    body.about-page .company-history-section,
    body.about-page .company-growth-section,
    body.about-page .about-quote-section,
    body.about-page .expertise-section,
    body.about-page .key-services-section,
    body.about-page .testimonials-section,
    body.about-page .about-final-cta {
        padding: 38px 0;
    }

    body.about-page .section-header {
        margin-bottom: 24px;
    }

    body.about-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    body.about-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.about-page .mission-vision-row,
    body.about-page .history-content,
    body.about-page .growth-content-row,
    body.about-page .expertise-block,
    body.about-page .key-services-grid {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;

        padding: 12px;
        border-radius: 14px;
    }

    body.about-page .mv-text,
    body.about-page .mv-image,
    body.about-page .history-image,
    body.about-page .history-text,
    body.about-page .growth-image-wrap,
    body.about-page .growth-text,
    body.about-page .expertise-text,
    body.about-page .expertise-image,
    body.about-page .key-services-image,
    body.about-page .key-services-content {
        flex: 1 1 50%;
        min-width: 0;
    }

    body.about-page .mv-text h3,
    body.about-page .expertise-text h3,
    body.about-page .key-services-content h2 {
        font-size: clamp(0.9rem, 4vw, 1.15rem);
        margin-bottom: 8px;
    }

    body.about-page .mv-text .tagline {
        font-size: clamp(0.58rem, 2.8vw, 0.72rem);
        margin-bottom: 10px;
    }

    body.about-page .section-copy p,
    body.about-page .history-text p,
    body.about-page .growth-text p,
    body.about-page .expertise-text p,
    body.about-page .key-services-content .intro-text,
    body.about-page .key-services-content .closing-text,
    body.about-page .service-highlight p {
        font-size: clamp(0.48rem, 2.15vw, 0.62rem);
        line-height: 1.34;
        margin-bottom: 7px;
    }

    body.about-page .mission-extension,
    body.about-page .service-highlight {
        padding: 8px;
        border-left-width: 4px;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    body.about-page .pull-quote {
        padding: 8px;
        border-left-width: 4px;
        border-radius: 8px;
        font-size: clamp(0.5rem, 2.2vw, 0.64rem);
        line-height: 1.35;
    }

    body.about-page .mv-image img {
        min-height: 180px;
        border-radius: 10px;
    }

    body.about-page .history-image img,
    body.about-page .growth-image-wrap img,
    body.about-page .expertise-image img {
        min-height: 170px;
        border-radius: 10px;
    }

    body.about-page .key-services-image img {
        min-height: 280px;
        border-radius: 10px;
    }

    body.about-page .about-quote-card {
        padding: 24px 18px;
        border-radius: 14px;
    }

    body.about-page .quote-mark {
        top: -28px;
        left: 12px;
        font-size: 5rem;
    }

    body.about-page .about-quote-card h2 {
        font-size: clamp(0.82rem, 3.4vw, 1.1rem);
        line-height: 1.45;
    }

    body.about-page .about-quote-card p {
        font-size: 0.72rem;
    }

    body.about-page .review-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 26px;
    }

    body.about-page .review-item {
        padding: 8px;
        border-radius: 10px;
    }

    body.about-page .reviewer-info {
        gap: 6px;
        margin-bottom: 8px;
    }

    body.about-page .reviewer-image,
    body.about-page .user-icon {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    body.about-page .reviewer-info h3 {
        font-size: clamp(0.45rem, 2.1vw, 0.58rem);
        margin-bottom: 2px;
    }

    body.about-page .reviewer-info p {
        font-size: clamp(0.38rem, 1.8vw, 0.48rem);
        line-height: 1.2;
    }

    body.about-page .review-text {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.28;
        margin-bottom: 8px;
    }

    body.about-page .review-rating {
        font-size: 0.68rem;
        letter-spacing: 0.5px;
    }

    body.about-page .review-form {
        padding: 18px 12px;
        border-radius: 14px;
    }

    body.about-page .review-form h3 {
        font-size: 1.05rem;
        margin-bottom: 14px;
    }

    body.about-page .review-form input,
    body.about-page .review-form textarea {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    body.about-page .star {
        font-size: 1.35rem;
    }

    body.about-page .about-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.about-page .about-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }
}


.form-field-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =====================================================
   ABOUT.HTML END
===================================================== */







/*********DAC ONLY **********/
/* =====================================================
   INDEX PAGE — WWA + DAC PARTNERSHIP GATEWAY

   Purpose:
   - Adds a polished partnership section directly under Our Services.
   - Moves both images higher inside the section.
   - Keeps images visible without text blocking them.
   - Places text clearly below each image inside a clean content panel.
   - Adds back the yellow center partnership line.
   - Keeps desktop, tablet, and mobile visually consistent.
===================================================== */

body.index-page .partnership-gateway {
    padding: 80px 0;
    background:
        linear-gradient(
            rgba(202, 240, 248, 0.72),
            rgba(144, 224, 239, 0.72)
        );
    text-align: center;
}

/* Header text above the partnership panels */
body.index-page .partnership-header {
    max-width: 980px;
    margin: 0 auto 44px;
    text-align: center;
}

body.index-page .partnership-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 auto 16px;
    text-align: center;
    text-wrap: balance;
}

body.index-page .partnership-header p {
    max-width: 850px;
    margin: 0 auto;
    color: #000000;
    font-size: 1.15rem;
    line-height: 1.7;
    text-align: left;
    text-wrap: pretty;
}

/* Main two-image partnership frame */
body.index-page .partnership-panels {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;

    background: var(--color-navy);
    border: 6px solid rgba(202, 240, 248, 0.75);
    border-radius: 30px;
    box-shadow:
        0 18px 45px rgba(3, 4, 94, 0.35),
        inset 0 0 0 1px rgba(255, 204, 0, 0.14);

    overflow: hidden;
}

/* Each partnership side */
body.index-page .partnership-panel {
    position: relative;
    min-height: 300px;

    display: grid;
    grid-template-rows: 1fr auto;

    overflow: hidden;
    text-align: center;
}

/* Clean side-by-side frame */
body.index-page .partnership-panel-wwa,
body.index-page .partnership-panel-dac {
    clip-path: none;
    margin-left: 0;
}

/* Subtle center seam behind the yellow partnership line */
body.index-page .partnership-panel-wwa {
    border-right: 1px solid rgba(202, 240, 248, 0.0);
}

/* =====================================================
   IMAGE AREA

   This is what moves the images upward.
   The image sits in its own top frame.
   Text no longer blocks the image.
===================================================== */

body.index-page .partnership-image-wrap {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 345px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(202, 240, 248, 0.16),
            rgba(3, 4, 94, 0.95)
        );

    overflow: hidden;
}

/* Soft overlay only on the image area, not the text */
body.index-page .partnership-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 4, 94, 0.08),
            rgba(3, 4, 94, 0.24)
        );

    pointer-events: none;
}

/* Images zoomed out so the actual image can be seen */
body.index-page .partnership-image-wrap img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    display: block;
    padding: 16px;

    transition: transform 0.5s ease;
}

/* Gentle hover polish */
body.index-page .partnership-panel:hover .partnership-image-wrap img {
    transform: scale(1.02);
}

/* Remove old full-panel overlay so it does not block image/text */
body.index-page .partnership-panel::before {
    display: none;
}

/* =====================================================
   TEXT AREA

   Text sits below the image clearly.
   Nothing overlays or blocks the image.
===================================================== */

body.index-page .partnership-panel-content {
    position: relative;
    z-index: 3;

    width: 100%;
    min-height: 230px;

    margin: 0 auto;
    padding: 30px 34px 36px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 4, 94, 0.98),
            rgba(0, 119, 182, 0.92)
        );

    text-align: center;
}

/* Balance both text panels evenly */
body.index-page .partnership-panel-wwa .partnership-panel-content,
body.index-page .partnership-panel-dac .partnership-panel-content {
    transform: none;
}

/* Small label */
body.index-page .partnership-panel .section-label {
    display: inline-block;

    margin: 0 auto 12px;
    padding: 8px 14px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

/* Panel headings */
body.index-page .partnership-panel h3 {
    color: var(--color-pale-blue);
    font-size: clamp(1.45rem, 2.6vw, 2.05rem);
    font-weight: 900;
    line-height: 1.18;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

/* Panel paragraphs */
body.index-page .partnership-panel-content p:not(.section-label) {
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.65;

    max-width: 460px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: pretty;
}


/* DAC button — Learn About Funding Options */
body.index-page .partnership-btn {
    margin-top: auto;

    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 8px 18px rgba(0, 255, 0, 0.25);
}

/* Hover color — changes to company gold */
body.index-page .partnership-btn:hover,
body.index-page .partnership-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 10px 22px rgba(255, 204, 0, 0.35);

    transform: translateY(-2px);
    outline: none;
}

/* =====================================================
   CENTER YELLOW PARTNERSHIP LINE

   This brings back the yellow line.
   It stays centered between WWA and DAC.
===================================================== */

body.index-page .partnership-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 8;

    width: 34px;
    transform: translateX(-50%);
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.index-page .partnership-divider span {
    width: 5px;
    height: 112%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--color-gold),
            var(--color-pale-blue),
            var(--color-gold),
            transparent
        );

    border-radius: 999px;
    box-shadow:
        0 0 18px rgba(255, 204, 0, 0.75),
        0 0 30px rgba(202, 240, 248, 0.45);

    transform: rotate(12deg);
}

/* =====================================================
   PARTNERSHIP GATEWAY — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.index-page .partnership-gateway {
        padding: 58px 0;
    }

    body.index-page .partnership-header {
        margin-bottom: 34px;
    }

    body.index-page .partnership-header p {
        font-size: 1rem;
        line-height: 1.6;
    }

    body.index-page .partnership-panel {
        min-height: 470px;
    }

    body.index-page .partnership-image-wrap {
        min-height: 280px;
    }

    body.index-page .partnership-image-wrap img {
        padding: 12px;
    }

    body.index-page .partnership-panel-content {
        min-height: 205px;
        padding: 24px 22px 30px;
    }

    body.index-page .partnership-panel-content p:not(.section-label) {
        font-size: 0.88rem;
        line-height: 1.5;
    }
}

/* =====================================================
   PARTNERSHIP GATEWAY — MOBILE
   Keeps the same two-panel partnership look, scaled down.
===================================================== */

@media (max-width: 700px) {
    body.index-page .partnership-gateway {
        padding: 38px 0;
    }

    body.index-page .partnership-header {
        margin-bottom: 24px;
    }

    body.index-page .partnership-header h2 {
        font-size: clamp(1.25rem, 5vw, 1.65rem);
    }

    body.index-page .partnership-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.index-page .partnership-panels {
        grid-template-columns: 1fr 1fr;
        border-width: 3px;
        border-radius: 16px;
    }

    body.index-page .partnership-panel {
        min-height: 350px;
    }

    body.index-page .partnership-image-wrap {
        min-height: 175px;
    }

    body.index-page .partnership-image-wrap img {
        padding: 7px;
    }

    body.index-page .partnership-panel-content {
        min-height: 175px;
        padding: 14px 9px 18px;
    }

    body.index-page .partnership-panel .section-label {
        padding: 5px 7px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
        letter-spacing: 0.3px;
        margin-bottom: 7px;
    }

    body.index-page .partnership-panel h3 {
        font-size: clamp(0.78rem, 3.4vw, 1.05rem);
        margin-bottom: 8px;
    }

    body.index-page .partnership-panel-content p:not(.section-label) {
        font-size: clamp(0.48rem, 2.2vw, 0.62rem);
        line-height: 1.32;
        margin-bottom: 10px;
    }

    body.index-page .partnership-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }

    body.index-page .partnership-divider {
        width: 18px;
    }

    body.index-page .partnership-divider span {
        width: 3px;
        height: 110%;
        transform: rotate(12deg);
    }
}

/* =====================================================
   INDEX PAGE — WWA + DAC PARTNERSHIP GATEWAY END
===================================================== */



/* =====================================================
   BUSINESS-FUNDING.HTML START

   Purpose:
   - Styles the Business Funding page only.
   - Educates clients about WWA funding broker support.
   - Introduces David Allen Capital and BankBreezy™.
   - Keeps the DAC application buttons at the final CTA.
   - Keeps text left-aligned inside centered containers.
   - Keeps section titles clean, centered, and professional.
   - Keeps desktop, tablet, and mobile visually consistent.

   Required images:
   public_html/assets/images/business-funding/business-funding-hero-background.jpg
   public_html/assets/images/business-funding/business-funding-intro.jpg
   public_html/assets/images/business-funding/business-funding-uses.jpg
   public_html/assets/images/business-funding/business-funding-renewal.jpg
===================================================== */

body.business-funding-page {
    padding-top: var(--header-height);
    background:
        linear-gradient(
            rgba(202, 240, 248, 0.96),
            rgba(144, 224, 239, 0.96)
        );
    color: var(--color-navy);
}


/* =====================================================
   BUSINESS FUNDING PAGE — SHARED STRUCTURE
===================================================== */

body.business-funding-page section {
    scroll-margin-top: var(--header-height);
}

body.business-funding-page .section-inner {
    position: relative;
    z-index: 2;
}

body.business-funding-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.business-funding-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.business-funding-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.business-funding-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — HERO SECTION
===================================================== */

body.business-funding-page .funding-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.74),
            rgba(0, 119, 182, 0.50)
        ),
        url("../images/business-funding/business-funding-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.business-funding-page .funding-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.24),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.10)
        );

    pointer-events: none;
}

body.business-funding-page .funding-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.business-funding-page .funding-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.business-funding-page .funding-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — TRUST STRIP
===================================================== */

body.business-funding-page .funding-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.business-funding-page .funding-trust-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;
    text-align: center;
}

body.business-funding-page .funding-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   BUSINESS FUNDING PAGE — INTRO SECTION
===================================================== */

body.business-funding-page .funding-intro-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );

    text-align: center;
}

body.business-funding-page .funding-intro-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: stretch;
}

body.business-funding-page .funding-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 760px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.business-funding-page .funding-intro-content p:not(.section-label) {
    max-width: 760px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}

body.business-funding-page .funding-intro-image {
    min-height: 430px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.business-funding-page .funding-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 398px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}


/* =====================================================
   BUSINESS FUNDING PAGE — EDUCATION SECTION
===================================================== */

body.business-funding-page .funding-education-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.business-funding-page .funding-info-card {
    min-height: 285px;
    padding: 28px 18px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

body.business-funding-page .funding-info-card:hover,
body.business-funding-page .funding-info-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

body.business-funding-page .funding-info-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.business-funding-page .funding-info-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.86rem, 1.1vw, 1rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.business-funding-page .funding-info-card p {
    max-width: 280px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.94rem;
    line-height: 1.58;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — PROCESS SECTION
===================================================== */

body.business-funding-page .funding-steps-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.business-funding-page .funding-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.business-funding-page .funding-step {
    min-height: 300px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.business-funding-page .funding-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.business-funding-page .funding-step h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.business-funding-page .funding-step p {
    max-width: 330px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — QUALIFICATION SECTION
===================================================== */

body.business-funding-page .funding-qualification-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .qualification-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.business-funding-page .qualification-card {
    min-height: 180px;
    padding: 26px 18px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.business-funding-page .qualification-card strong {
    display: block;

    color: var(--color-gold);
    font-size: clamp(1.15rem, 2.4vw, 2rem);
    font-weight: 900;
    line-height: 1.1;

    margin: 0 auto 8px;

    text-align: center;
}

body.business-funding-page .qualification-card span {
    color: var(--color-pale-blue);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.35;

    text-align: center;
}

body.business-funding-page .funding-qualification-note {
    max-width: 920px;
    margin: 32px auto 0;
    padding: 24px 26px;

    background: rgba(255, 255, 255, 0.92);
    border-left: 7px solid var(--color-gold);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.business-funding-page .funding-qualification-note p {
    max-width: 820px;
    margin: 0 auto;

    color: #000000;
    font-size: 1rem;
    line-height: 1.65;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — FUNDING USES SECTION
===================================================== */

body.business-funding-page .funding-uses-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.business-funding-page .funding-uses-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: stretch;
}

body.business-funding-page .funding-uses-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

body.business-funding-page .funding-uses-grid div {
    min-height: 150px;
    padding: 20px 16px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.business-funding-page .funding-uses-grid i {
    color: var(--color-blue);
    font-size: 2rem;
}

body.business-funding-page .funding-uses-grid span {
    color: var(--color-navy);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.25;

    text-align: center;
}

body.business-funding-page .funding-uses-image {
    min-height: 490px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.92);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.business-funding-page .funding-uses-image img {
    width: 100%;
    height: 100%;
    min-height: 458px;

    object-fit: cover;
    object-position: center;

    border-radius: 16px;
    display: block;
}


/* =====================================================
   BUSINESS FUNDING PAGE — RENEWAL SECTION
===================================================== */

body.business-funding-page .funding-renewal-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-renewal-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.business-funding-page .funding-renewal-image {
    min-height: 460px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.12);
    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.business-funding-page .funding-renewal-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.business-funding-page .funding-renewal-content {
    padding: 38px 32px;

    background: rgba(3, 4, 94, 0.62);
    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-renewal-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.business-funding-page .funding-renewal-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — RESPONSIBLE FUNDING SECTION
===================================================== */

body.business-funding-page .funding-responsible-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-responsible-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.business-funding-page .funding-responsible-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.business-funding-page .funding-responsible-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.business-funding-page .funding-responsible-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.business-funding-page .funding-responsible-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS FUNDING PAGE — FINAL CTA SECTION
===================================================== */

body.business-funding-page .funding-final-cta {
    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.business-funding-page .funding-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.business-funding-page .funding-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.business-funding-page .funding-primary-btn,
body.business-funding-page .funding-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.business-funding-page .funding-primary-btn:hover,
body.business-funding-page .funding-primary-btn:focus,
body.business-funding-page .funding-secondary-btn:hover,
body.business-funding-page .funding-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.business-funding-page .funding-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.business-funding-page .funding-outline-btn:hover,
body.business-funding-page .funding-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   BUSINESS-FUNDING.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.business-funding-page .funding-hero {
        padding: 68px 0;
    }

    body.business-funding-page .funding-hero-content {
        padding: 38px 28px;
    }

    body.business-funding-page .funding-intro-section,
    body.business-funding-page .funding-education-section,
    body.business-funding-page .funding-steps-section,
    body.business-funding-page .funding-qualification-section,
    body.business-funding-page .funding-uses-section,
    body.business-funding-page .funding-renewal-section,
    body.business-funding-page .funding-responsible-section,
    body.business-funding-page .funding-final-cta {
        padding: 62px 0;
    }

    body.business-funding-page .funding-trust-grid,
    body.business-funding-page .qualification-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.business-funding-page .funding-info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.business-funding-page .funding-intro-layout,
    body.business-funding-page .funding-uses-layout,
    body.business-funding-page .funding-renewal-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.business-funding-page .funding-steps,
    body.business-funding-page .funding-responsible-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.business-funding-page .funding-info-card,
    body.business-funding-page .funding-step,
    body.business-funding-page .funding-responsible-card {
        min-height: 230px;
        padding: 22px 14px;
    }

    body.business-funding-page .qualification-card {
        min-height: 145px;
        padding: 20px 10px;
    }

    body.business-funding-page .funding-intro-content,
    body.business-funding-page .funding-renewal-content {
        padding: 28px 22px;
    }

    body.business-funding-page .funding-intro-image,
    body.business-funding-page .funding-uses-image,
    body.business-funding-page .funding-renewal-image {
        min-height: 360px;
        padding: 10px;
    }

    body.business-funding-page .funding-intro-image img,
    body.business-funding-page .funding-uses-image img,
    body.business-funding-page .funding-renewal-image img {
        min-height: 340px;
        border-radius: 12px;
    }

    body.business-funding-page .funding-info-card p,
    body.business-funding-page .funding-step p,
    body.business-funding-page .funding-responsible-card p,
    body.business-funding-page .section-header p {
        font-size: 0.86rem;
        line-height: 1.48;
    }
}


/* =====================================================
   BUSINESS-FUNDING.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.business-funding-page .funding-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.business-funding-page .funding-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.business-funding-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.business-funding-page .funding-hero-content h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
        line-height: 1.08;
    }

    body.business-funding-page .funding-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.business-funding-page .funding-trust-grid,
    body.business-funding-page .qualification-grid,
    body.business-funding-page .funding-info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.business-funding-page .funding-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.business-funding-page .section-header {
        margin-bottom: 24px;
    }

    body.business-funding-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.business-funding-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.business-funding-page .funding-intro-layout,
    body.business-funding-page .funding-uses-layout,
    body.business-funding-page .funding-renewal-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.business-funding-page .funding-steps,
    body.business-funding-page .funding-responsible-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.business-funding-page .funding-intro-content,
    body.business-funding-page .funding-renewal-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.business-funding-page .funding-intro-content h2,
    body.business-funding-page .funding-renewal-content h2 {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
        line-height: 1.14;
    }

    body.business-funding-page .funding-intro-content p:not(.section-label),
    body.business-funding-page .funding-renewal-content p:not(.section-label) {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.business-funding-page .funding-intro-image,
    body.business-funding-page .funding-uses-image,
    body.business-funding-page .funding-renewal-image {
        min-height: 260px;
        padding: 6px;
        border-radius: 12px;
    }

    body.business-funding-page .funding-intro-image img,
    body.business-funding-page .funding-uses-image img,
    body.business-funding-page .funding-renewal-image img {
        min-height: 248px;
        border-radius: 9px;
    }

    body.business-funding-page .funding-info-card,
    body.business-funding-page .funding-step,
    body.business-funding-page .funding-responsible-card {
        min-height: 145px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.business-funding-page .qualification-card {
        min-height: 95px;
        padding: 8px 4px;
        border-radius: 9px;
    }

    body.business-funding-page .funding-info-card i,
    body.business-funding-page .funding-responsible-card i,
    body.business-funding-page .funding-uses-grid i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.business-funding-page .funding-step span {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
        font-size: 0.62rem;
    }

    body.business-funding-page .funding-info-card h3,
    body.business-funding-page .funding-step h3,
    body.business-funding-page .funding-responsible-card h3 {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.business-funding-page .funding-info-card p,
    body.business-funding-page .funding-step p,
    body.business-funding-page .funding-responsible-card p {
        font-size: clamp(0.36rem, 1.7vw, 0.48rem);
        line-height: 1.28;
    }

    body.business-funding-page .qualification-card strong {
        font-size: clamp(0.62rem, 2.6vw, 0.9rem);
    }

    body.business-funding-page .qualification-card span {
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.business-funding-page .funding-qualification-note {
        padding: 14px 10px;
        border-left-width: 4px;
        border-radius: 10px;
        margin-top: 18px;
    }

    body.business-funding-page .funding-qualification-note p {
        font-size: clamp(0.68rem, 2.8vw, 0.82rem);
        line-height: 1.45;
    }

    body.business-funding-page .funding-uses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.business-funding-page .funding-uses-grid div {
        min-height: 76px;
        padding: 8px 4px;
        border-radius: 9px;
        gap: 4px;
    }

    body.business-funding-page .funding-uses-grid span {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        line-height: 1.15;
    }

    body.business-funding-page .funding-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.business-funding-page .funding-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.business-funding-page .funding-final-actions {
        gap: 8px;
        margin-top: 18px;
    }

    body.business-funding-page .funding-final-actions .cta-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }
}



/* =====================================================
   BUSINESS FUNDING PAGE — LEGAL NOTICE SECTION

   Purpose:
   - Clearly explains that WWA is not a lender, funding company,
     bank, DAC, or BankBreezy platform.
   - Protects the wording around the DAC broker referral pathway.
===================================================== */

body.business-funding-page .funding-disclaimer-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.business-funding-page .funding-disclaimer-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.business-funding-page .funding-disclaimer-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.business-funding-page .funding-disclaimer-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BUSINESS-FUNDING.HTML END
===================================================== */






/* =====================================================
   CONTACT.HTML START

   Purpose:
   - Styles the contact page only.
   - Keeps the global WWA header and footer unchanged.
   - Uses centered headings with left-aligned paragraphs.
   - Keeps future card titles on one horizontal line.
   - Adds a video hero with a bright building-grid image behind it.
===================================================== */

body.contact-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}


/* =====================================================
   CONTACT PAGE — HERO SECTION

   Files:
   public_html/assets/videos/contact/contact-hero.mp4
   public_html/assets/images/contact/contact-hero-building-grid.jpg
===================================================== */

body.contact-page .contact-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.20),
            rgba(0, 119, 182, 0.34)
        ),
        url("../images/contact/contact-hero-building-grid.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

/* Bright professional overlay behind the black-background video */
body.contact-page .contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(0, 255, 0, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(255, 204, 0, 0.20),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.60),
            rgba(0, 119, 182, 0.38),
            rgba(202, 240, 248, 0.12)
        );
}

/* Black-background video sits in front of the image */
body.contact-page .contact-hero-video {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /* =====================================================
       FIX: Removed blend mode + heavy filters causing
       color distortion (green/white shift on mobile)
    ===================================================== */
    mix-blend-mode: normal;
    opacity: 1;

    /* Optional light correction (safe for branding) */
    filter: brightness(1) contrast(1) saturate(1);

    pointer-events: none;
}


/* Hero text glass card */
body.contact-page .contact-hero-content {
    position: relative;
    z-index: 4;

    width: min(100%, 940px);
    margin: 0 auto;
    padding: 48px 38px;

    background: rgba(3, 4, 94, 0.62);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

/* Small gold label */
body.contact-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

/* Hero title */
body.contact-page .contact-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 900px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

/* Hero paragraph */
body.contact-page .contact-hero-content p:not(.section-label) {
    max-width: 800px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}

/* Hero buttons */
body.contact-page .contact-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    text-align: center;
}

/* Primary green button */
body.contact-page .contact-primary-btn,
body.contact-page .contact-submit-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.contact-page .contact-primary-btn:hover,
body.contact-page .contact-primary-btn:focus,
body.contact-page .contact-submit-btn:hover,
body.contact-page .contact-submit-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

/* Secondary hero link */
body.contact-page .contact-hero-link {
    color: var(--color-pale-blue);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 5px;

    transition: color 0.3s ease, transform 0.3s ease;
}

body.contact-page .contact-hero-link:hover,
body.contact-page .contact-hero-link:focus {
    color: var(--color-gold);
    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   CONTACT PAGE — SHARED SECTION STRUCTURE
===================================================== */

body.contact-page section {
    scroll-margin-top: var(--header-height);
}

body.contact-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.contact-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.contact-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONTACT PAGE — CONTACT DETAILS GRID

   Layout:
   Row 1: Card | Card | Card
   Row 2: Card | Image | Image
===================================================== */

body.contact-page .contact-details-section {
    padding: 85px 0;
    background:
        linear-gradient(
            rgba(202, 240, 248, 0.94),
            rgba(144, 224, 239, 0.94)
        );
    text-align: center;
}

body.contact-page .contact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Contact cards */
body.contact-page .contact-info-card {
    min-height: 280px;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* No movement on hover, only a shadow polish */
body.contact-page .contact-info-card:hover,
body.contact-page .contact-info-card:focus-within {
    box-shadow: var(--shadow-medium);
}

/* Icon circles */
body.contact-page .contact-icon-box {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

/* Card h3 titles: one horizontal line */
body.contact-page .contact-info-card h3,
body.contact-page .secure-contact-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

/* Card paragraphs */
body.contact-page .contact-info-card p {
    color: #000000;
    font-size: 0.96rem;
    line-height: 1.55;

    max-width: 300px;
    margin: 0 auto 14px;

    text-align: left;
    text-wrap: pretty;
}

/* Card links */
body.contact-page .contact-info-card a,
body.contact-page .contact-info-card span {
    color: var(--color-blue);
    font-weight: 900;
    text-decoration: none;
    text-align: center;
}

body.contact-page .contact-info-card a:hover,
body.contact-page .contact-info-card a:focus {
    color: var(--color-gold);
    outline: none;
}

/* Fourth card sits under first card */
body.contact-page .contact-hours-card {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* Wide image fills the two missing boxes */
body.contact-page .contact-feature-image-card {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.contact-page .contact-feature-image-card img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   CONTACT PAGE — FORM SECTION
===================================================== */

body.contact-page .contact-form-section {
    padding: 90px 0;
    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );
    text-align: center;
}

body.contact-page .contact-form-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 34px;
    align-items: stretch;
}

/* Left content panel */
body.contact-page .contact-form-intro {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.contact-page .contact-form-intro h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    margin: 0 auto 18px;

    text-align: center;
    text-wrap: balance;
}

body.contact-page .contact-form-intro p:not(.section-label) {
    max-width: 640px;
    margin: 0 auto 26px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

/* Mini service grid */
body.contact-page .contact-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.contact-page .contact-mini-grid div {
    min-width: 0;
    padding: 15px 10px;

    background: rgba(202, 240, 248, 0.10);
    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 14px;

    color: var(--color-pale-blue);
    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-align: center;
}

body.contact-page .contact-mini-grid i {
    color: var(--color-gold);
}

/* Form card */
body.contact-page .contact-form-card {
    padding: 38px 32px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    text-align: left;
}

/* Form rows */
body.contact-page .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Form fields */
body.contact-page .form-field {
    margin-bottom: 16px;
}

body.contact-page .form-field label {
    display: block;

    color: var(--color-navy);
    font-weight: 900;
    margin-bottom: 7px;

    text-align: left;
}

/* Inputs */
body.contact-page .form-field input,
body.contact-page .form-field select,
body.contact-page .form-field textarea {
    width: 100%;
    padding: 13px 14px;

    color: var(--color-navy);
    background: var(--color-pale-blue);

    border: 1px solid rgba(3, 4, 94, 0.18);
    border-radius: 10px;

    outline: none;
    resize: vertical;
}

body.contact-page .form-field input:focus,
body.contact-page .form-field select:focus,
body.contact-page .form-field textarea:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.18);
}

/* Submit button */
body.contact-page .contact-submit-btn {
    width: 100%;
    margin-top: 6px;
}


/* =====================================================
   CONTACT PAGE — SECURE CONTACT SECTION
===================================================== */

body.contact-page .secure-contact-section {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.contact-page .secure-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.contact-page .secure-contact-card {
    min-height: 240px;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    color: var(--color-navy);
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.contact-page .secure-contact-card:hover,
body.contact-page .secure-contact-card:focus {
    box-shadow: var(--shadow-medium);
    outline: none;
}

body.contact-page .secure-contact-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.contact-page .secure-contact-card p {
    max-width: 260px;
    margin: 0 auto;

    color: #000000;
    line-height: 1.55;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONTACT PAGE — MAP SECTION
===================================================== */

body.contact-page .contact-map-section {
    padding: 85px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.contact-page .map-frame {
    padding: 14px;

    background: rgba(255, 255, 255, 0.72);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

body.contact-page .map-frame iframe {
    display: block;
    width: 100%;
    border-radius: 16px;
}


/* =====================================================
   CONTACT PAGE — FINAL CTA
===================================================== */

body.contact-page .contact-final-cta {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.contact-page .contact-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.contact-page .contact-final-cta p {
    max-width: 800px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONTACT.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.contact-page .contact-hero {
        padding: 68px 0;
    }

    body.contact-page .contact-hero-content {
        padding: 38px 28px;
    }

    body.contact-page .contact-details-section,
    body.contact-page .contact-form-section,
    body.contact-page .secure-contact-section,
    body.contact-page .contact-map-section,
    body.contact-page .contact-final-cta {
        padding: 62px 0;
    }

    body.contact-page .contact-card-grid,
    body.contact-page .secure-contact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.contact-page .contact-info-card,
    body.contact-page .contact-feature-image-card {
        min-height: 230px;
    }

    body.contact-page .contact-feature-image-card img {
        min-height: 198px;
    }

    body.contact-page .contact-form-layout {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 20px;
    }

    body.contact-page .contact-info-card p,
    body.contact-page .secure-contact-card p,
    body.contact-page .contact-form-intro p:not(.section-label) {
        font-size: 0.86rem;
        line-height: 1.48;
    }
}


/* =====================================================
   CONTACT.HTML — MOBILE
   Same layout, scaled down.
===================================================== */

@media (max-width: 700px) {
    body.contact-page .contact-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.contact-page .contact-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.contact-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.contact-page .contact-hero-content h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
    }

    body.contact-page .contact-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.contact-page .section-header {
        margin-bottom: 24px;
    }

    body.contact-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.contact-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.contact-page .contact-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.contact-page .contact-info-card {
        min-height: 145px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.contact-page .contact-icon-box {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
        font-size: 0.72rem;
    }

    body.contact-page .contact-info-card h3 {
        font-size: clamp(0.42rem, 2vw, 0.58rem);
        margin-bottom: 5px;
    }

    body.contact-page .contact-info-card p,
    body.contact-page .contact-info-card a,
    body.contact-page .contact-info-card span {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.28;
    }

    body.contact-page .contact-feature-image-card {
        grid-column: 2 / 4;
        grid-row: 2 / 3;

        min-height: 145px;
        padding: 6px;
        border-radius: 9px;
    }

    body.contact-page .contact-feature-image-card img {
        min-height: 133px;
        border-radius: 7px;
    }

    body.contact-page .contact-form-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.contact-page .contact-form-intro,
    body.contact-page .contact-form-card {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.contact-page .contact-form-intro h2 {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
    }

    body.contact-page .contact-form-intro p:not(.section-label) {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.contact-page .contact-mini-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    body.contact-page .contact-mini-grid div {
        padding: 8px 4px;
        border-radius: 8px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.contact-page .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.contact-page .form-field {
        margin-bottom: 8px;
    }

    body.contact-page .form-field label {
        font-size: 0.68rem;
        margin-bottom: 4px;
    }

    body.contact-page .form-field input,
    body.contact-page .form-field select,
    body.contact-page .form-field textarea {
        padding: 8px;
        font-size: 0.72rem;
        border-radius: 7px;
    }

    body.contact-page .contact-submit-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }

    body.contact-page .secure-contact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.contact-page .secure-contact-card {
        min-height: 125px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.contact-page .secure-contact-card i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.contact-page .secure-contact-card h3 {
        font-size: clamp(0.42rem, 2vw, 0.58rem);
        margin-bottom: 5px;
    }

    body.contact-page .secure-contact-card p {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.28;
    }

    body.contact-page .map-frame {
        padding: 6px;
        border-radius: 10px;
    }

    body.contact-page .map-frame iframe {
        height: 260px;
        border-radius: 8px;
    }

    body.contact-page .contact-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.contact-page .contact-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.contact-page .contact-final-cta .cta-btn,
    body.contact-page .contact-hero .cta-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }
}




/* =====================================================
   CONTACT PAGE — FORM STATUS / PRIVACY CONSENT

   Purpose:
   - Shows success or error messages after form submission.
   - Keeps the privacy consent checkbox professional.
   - Hides the honeypot field from real visitors.
===================================================== */

body.contact-page .contact-form-status {
    display: none;

    width: 100%;
    margin: 0 auto 20px;
    padding: 14px 16px;

    border-radius: 12px;

    font-weight: 800;
    line-height: 1.5;
    text-align: left;
}

body.contact-page .contact-form-status-success,
body.contact-page .contact-form-status-error {
    display: block;
}

body.contact-page .contact-form-status-success {
    color: var(--color-navy);
    background: rgba(0, 255, 0, 0.16);
    border: 1px solid rgba(0, 255, 0, 0.38);
    border-left: 6px solid var(--color-green);
}

body.contact-page .contact-form-status-error {
    color: var(--color-navy);
    background: rgba(255, 204, 0, 0.18);
    border: 1px solid rgba(255, 204, 0, 0.44);
    border-left: 6px solid var(--color-gold);
}

body.contact-page .form-field-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.contact-page .form-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;

    margin: 16px 0 22px;
    padding: 14px;

    background: rgba(202, 240, 248, 0.45);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 12px;

    text-align: left;
}

body.contact-page .form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--color-blue);
}

body.contact-page .form-consent label {
    color: var(--color-navy);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

body.contact-page .contact-service-area-card {
    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.94),
            rgba(0, 119, 182, 0.90)
        );

    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.contact-page .contact-service-area-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

body.contact-page .contact-service-area-content i {
    color: var(--color-gold);
    font-size: 3rem;
    margin-bottom: 18px;
}

body.contact-page .contact-service-area-content h3 {
    color: var(--color-white);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 900;
    line-height: 1.2;

    margin: 0 auto 18px;

    text-align: center;
    text-wrap: balance;
}

body.contact-page .contact-service-area-content p {
    max-width: 760px;
    margin: 0 auto 14px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

@media (max-width: 700px) {
    body.contact-page .contact-form-status {
        font-size: 0.72rem;
        padding: 10px 12px;
        border-radius: 9px;
    }

    body.contact-page .form-consent {
        gap: 7px;
        padding: 10px;
        border-radius: 9px;
    }

    body.contact-page .form-consent input {
        width: 15px;
        height: 15px;
    }

    body.contact-page .form-consent label {
        font-size: clamp(0.52rem, 2.3vw, 0.66rem);
        line-height: 1.35;
    }

    body.contact-page .contact-service-area-card {
        min-height: 220px;
        padding: 18px 12px;
        border-radius: 14px;
    }

    body.contact-page .contact-service-area-content i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.contact-page .contact-service-area-content h3 {
        font-size: clamp(0.95rem, 4vw, 1.25rem);
        margin-bottom: 10px;
    }

    body.contact-page .contact-service-area-content p {
        font-size: clamp(0.58rem, 2.6vw, 0.74rem);
        line-height: 1.38;
    }
}



/* =====================================================
   CONTACT.HTML END
===================================================== */



/* =====================================================
   BOOKKEEPING.HTML START

   Purpose:
   - Styles the bookkeeping page only.
   - Keeps the global WWA header and footer unchanged.
   - Titles stay centered.
   - Paragraphs stay left-aligned inside centered boxes.
   - Card titles stay on one horizontal line.
   - Desktop, tablet, and mobile keep the same layout,
     scaled down cleanly.
===================================================== */

body.bookkeeping-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}


/* =====================================================
   BOOKKEEPING PAGE — HERO SECTION

   Files:
   public_html/assets/videos/bookkeeping/bookkeeping-hero.mp4
   public_html/assets/images/bookkeeping/bookkeeping-hero-underlay.jpg
===================================================== */

body.bookkeeping-page .bookkeeping-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.50),
            rgba(0, 119, 182, 0.35)
        ),
        url("../images/bookkeeping/bookkeeping-hero-underlay.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

/* Soft premium overlay */
body.bookkeeping-page .bookkeeping-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(0, 255, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.18),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.36),
            rgba(202, 240, 248, 0.10)
        );
}

/* Hero video */
body.bookkeeping-page .bookkeeping-hero-video {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: cover;
    opacity: 0.72;
    filter: contrast(1.12) brightness(1.06) saturate(1.05);

    pointer-events: none;
}

/* Hero content card */
body.bookkeeping-page .bookkeeping-hero-content {
    position: relative;
    z-index: 4;

    width: min(100%, 960px);
    margin: 0 auto;
    padding: 48px 38px;

    background: rgba(3, 4, 94, 0.64);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

/* Small section label */
body.bookkeeping-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

/* Hero title */
body.bookkeeping-page .bookkeeping-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 900px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

/* Hero paragraph */
body.bookkeeping-page .bookkeeping-hero-content p:not(.section-label) {
    max-width: 800px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}

/* Hero action buttons */
body.bookkeeping-page .bookkeeping-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    text-align: center;
}

/* Green primary button */
body.bookkeeping-page .bookkeeping-primary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.bookkeeping-page .bookkeeping-primary-btn:hover,
body.bookkeeping-page .bookkeeping-primary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

/* Secondary hero link */
body.bookkeeping-page .bookkeeping-hero-link {
    color: var(--color-pale-blue);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 5px;

    transition: color 0.3s ease, transform 0.3s ease;
}

body.bookkeeping-page .bookkeeping-hero-link:hover,
body.bookkeeping-page .bookkeeping-hero-link:focus {
    color: var(--color-gold);
    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   BOOKKEEPING PAGE — TRUST STRIP
===================================================== */

body.bookkeeping-page .bookkeeping-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.bookkeeping-page .bookkeeping-trust-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;
    text-align: center;
}

body.bookkeeping-page .bookkeeping-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   BOOKKEEPING PAGE — SHARED SECTION STRUCTURE
===================================================== */

body.bookkeeping-page section {
    scroll-margin-top: var(--header-height);
}

body.bookkeeping-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.bookkeeping-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — WHY SECTION
===================================================== */

body.bookkeeping-page .bookkeeping-why-section {
    padding: 90px 0;
    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );
    text-align: center;
}

body.bookkeeping-page .bookkeeping-why-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-why-image {
    min-height: 420px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.90);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.bookkeeping-page .bookkeeping-why-image img {
    width: 100%;
    height: 100%;
    min-height: 388px;

    object-fit: cover;
    object-position: center;

    border-radius: 16px;
    display: block;
}

body.bookkeeping-page .bookkeeping-why-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-why-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    /* Keeps the title block centered inside the section */
    max-width: 760px;
    margin: 0 auto 18px;

    /* Aligns the title text left inside the centered block */
    text-align: left;
    text-wrap: balance;
}

body.bookkeeping-page .bookkeeping-why-content p:not(.section-label) {
    max-width: 720px;
    margin: 0 auto 16px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — SEARCH CARDS
===================================================== */

body.bookkeeping-page .bookkeeping-search-section,
body.bookkeeping-page .bookkeeping-readiness-section,
body.bookkeeping-page .bookkeeping-benefits-section,
body.bookkeeping-page .bookkeeping-services-section,
body.bookkeeping-page .bookkeeping-results-section {
    padding: 85px 0;
    text-align: center;
}

body.bookkeeping-page .bookkeeping-search-section,
body.bookkeeping-page .bookkeeping-benefits-section,
body.bookkeeping-page .bookkeeping-results-section {
    background: var(--color-pale-blue);
}

body.bookkeeping-page .bookkeeping-readiness-section,
body.bookkeeping-page .bookkeeping-services-section {
    background: var(--color-light-blue);
}

body.bookkeeping-page .bookkeeping-search-grid,
body.bookkeeping-page .bookkeeping-benefits-grid,
body.bookkeeping-page .bookkeeping-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-search-card,
body.bookkeeping-page .bookkeeping-benefit-card,
body.bookkeeping-page .bookkeeping-result-card,
body.bookkeeping-page .bookkeeping-service-card,
body.bookkeeping-page .bookkeeping-ready-card {
    min-width: 0;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.bookkeeping-page .bookkeeping-search-card i,
body.bookkeeping-page .bookkeeping-benefit-card i,
body.bookkeeping-page .bookkeeping-result-card i,
body.bookkeeping-page .bookkeeping-ready-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

/* Card titles: one horizontal line */
body.bookkeeping-page .bookkeeping-search-card h3,
body.bookkeeping-page .bookkeeping-benefit-card h3,
body.bookkeeping-page .bookkeeping-result-card h3,
body.bookkeeping-page .bookkeeping-service-card h3,
body.bookkeeping-page .bookkeeping-ready-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.9rem, 1.25vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-search-card p,
body.bookkeeping-page .bookkeeping-benefit-card p,
body.bookkeeping-page .bookkeeping-result-card p,
body.bookkeeping-page .bookkeeping-service-card p,
body.bookkeeping-page .bookkeeping-ready-card p {
    max-width: 300px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — READINESS GRID

   Row 1:
   Card | Card | Card

   Row 2:
   Card | Image | Image
===================================================== */

body.bookkeeping-page .bookkeeping-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-ready-card {
    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.bookkeeping-page .bookkeeping-ready-anchor {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

body.bookkeeping-page .bookkeeping-ready-image {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    min-height: 260px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.bookkeeping-page .bookkeeping-ready-image img {
    width: 100%;
    height: 100%;
    min-height: 228px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   BOOKKEEPING PAGE — COMPREHENSIVE SERVICES
===================================================== */

body.bookkeeping-page .bookkeeping-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-service-card {
    min-height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =====================================================
   BOOKKEEPING PAGE — RESULTS CARDS
===================================================== */

body.bookkeeping-page .bookkeeping-result-card h4 {
    color: var(--color-blue);
    font-size: 1rem;
    font-weight: 900;

    margin: 0 auto 12px;

    text-align: center;
    text-wrap: balance;
}


/* =====================================================
   BOOKKEEPING PAGE — QUOTE SECTION
===================================================== */

body.bookkeeping-page .bookkeeping-quote-section {
    padding: 80px 0;
    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );
    text-align: center;
}

body.bookkeeping-page .bookkeeping-quote-section blockquote {
    max-width: 920px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1.55;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — FINAL CTA
===================================================== */

body.bookkeeping-page .bookkeeping-final-cta {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-page .bookkeeping-final-cta p {
    max-width: 820px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.bookkeeping-page .bookkeeping-hero {
        padding: 68px 0;
    }

    body.bookkeeping-page .bookkeeping-hero-content {
        padding: 38px 28px;
    }

    body.bookkeeping-page .bookkeeping-search-section,
    body.bookkeeping-page .bookkeeping-readiness-section,
    body.bookkeeping-page .bookkeeping-benefits-section,
    body.bookkeeping-page .bookkeeping-services-section,
    body.bookkeeping-page .bookkeeping-results-section,
    body.bookkeeping-page .bookkeeping-final-cta {
        padding: 62px 0;
    }

    body.bookkeeping-page .bookkeeping-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.bookkeeping-page .bookkeeping-why-layout {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 20px;
    }

    body.bookkeeping-page .bookkeeping-search-grid,
    body.bookkeeping-page .bookkeeping-benefits-grid,
    body.bookkeeping-page .bookkeeping-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.bookkeeping-page .bookkeeping-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.bookkeeping-page .bookkeeping-services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    body.bookkeeping-page .bookkeeping-search-card,
    body.bookkeeping-page .bookkeeping-benefit-card,
    body.bookkeeping-page .bookkeeping-result-card,
    body.bookkeeping-page .bookkeeping-service-card,
    body.bookkeeping-page .bookkeeping-ready-card {
        padding: 20px 12px;
    }

    body.bookkeeping-page .bookkeeping-ready-card,
    body.bookkeeping-page .bookkeeping-ready-image {
        min-height: 220px;
    }

    body.bookkeeping-page .bookkeeping-ready-image img {
        min-height: 188px;
    }

    body.bookkeeping-page .bookkeeping-search-card p,
    body.bookkeeping-page .bookkeeping-benefit-card p,
    body.bookkeeping-page .bookkeeping-result-card p,
    body.bookkeeping-page .bookkeeping-service-card p,
    body.bookkeeping-page .bookkeeping-ready-card p {
        font-size: 0.82rem;
        line-height: 1.45;
    }
}


/* =====================================================
   BOOKKEEPING.HTML — MOBILE
   Same layout, scaled down.
===================================================== */

@media (max-width: 700px) {
    body.bookkeeping-page .bookkeeping-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.bookkeeping-page .bookkeeping-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.bookkeeping-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.bookkeeping-page .bookkeeping-hero-content h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
    }

    body.bookkeeping-page .bookkeeping-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.bookkeeping-page .bookkeeping-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.bookkeeping-page .bookkeeping-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.bookkeeping-page .section-header {
        margin-bottom: 24px;
    }

    body.bookkeeping-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.bookkeeping-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.bookkeeping-page .bookkeeping-why-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.bookkeeping-page .bookkeeping-why-image {
        min-height: 210px;
        padding: 6px;
        border-radius: 12px;
    }

    body.bookkeeping-page .bookkeeping-why-image img {
        min-height: 198px;
        border-radius: 9px;
    }

    body.bookkeeping-page .bookkeeping-why-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.bookkeeping-page .bookkeeping-why-content h2 {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
    }

    body.bookkeeping-page .bookkeeping-why-content p:not(.section-label) {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.bookkeeping-page .bookkeeping-search-grid,
    body.bookkeeping-page .bookkeeping-benefits-grid,
    body.bookkeeping-page .bookkeeping-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.bookkeeping-page .bookkeeping-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.bookkeeping-page .bookkeeping-services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    body.bookkeeping-page .bookkeeping-search-card,
    body.bookkeeping-page .bookkeeping-benefit-card,
    body.bookkeeping-page .bookkeeping-result-card,
    body.bookkeeping-page .bookkeeping-service-card,
    body.bookkeeping-page .bookkeeping-ready-card {
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.bookkeeping-page .bookkeeping-search-card i,
    body.bookkeeping-page .bookkeeping-benefit-card i,
    body.bookkeeping-page .bookkeeping-result-card i,
    body.bookkeeping-page .bookkeeping-ready-card i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.bookkeeping-page .bookkeeping-search-card h3,
    body.bookkeeping-page .bookkeeping-benefit-card h3,
    body.bookkeeping-page .bookkeeping-result-card h3,
    body.bookkeeping-page .bookkeeping-service-card h3,
    body.bookkeeping-page .bookkeeping-ready-card h3 {
        font-size: clamp(0.42rem, 2vw, 0.58rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.bookkeeping-page .bookkeeping-search-card p,
    body.bookkeeping-page .bookkeeping-benefit-card p,
    body.bookkeeping-page .bookkeeping-result-card p,
    body.bookkeeping-page .bookkeeping-service-card p,
    body.bookkeeping-page .bookkeeping-ready-card p {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.3;
    }

    body.bookkeeping-page .bookkeeping-ready-card,
    body.bookkeeping-page .bookkeeping-ready-image {
        min-height: 130px;
        border-radius: 9px;
    }

    body.bookkeeping-page .bookkeeping-ready-image {
        padding: 6px;
    }

    body.bookkeeping-page .bookkeeping-ready-image img {
        min-height: 118px;
        border-radius: 7px;
    }

    body.bookkeeping-page .bookkeeping-quote-section blockquote {
        font-size: clamp(0.9rem, 4vw, 1.2rem);
        line-height: 1.4;
    }

    body.bookkeeping-page .bookkeeping-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.bookkeeping-page .bookkeeping-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.bookkeeping-page .bookkeeping-final-cta .cta-btn,
    body.bookkeeping-page .bookkeeping-hero .cta-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }
}


/* =====================================================
   BOOKKEEPING PAGE — RESTORED VISUAL SHOWCASE

   Purpose:
   - Restores the original slideshow idea in a cleaner way.
   - Uses three polished image cards instead of broken slides.
   - Keeps titles centered and paragraphs left aligned.
===================================================== */

body.bookkeeping-page .bookkeeping-visual-showcase {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-visual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-visual-card {
    position: relative;
    min-height: 360px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    background: var(--color-navy);
}

body.bookkeeping-page .bookkeeping-visual-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
}

body.bookkeeping-page .bookkeeping-visual-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            to top,
            rgba(3, 4, 94, 0.94),
            rgba(0, 119, 182, 0.42),
            rgba(202, 240, 248, 0.12)
        );
}

body.bookkeeping-page .bookkeeping-visual-card div {
    position: relative;
    z-index: 3;
    height: 100%;
    padding: 30px 24px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-visual-card h3 {
    color: var(--color-white);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-weight: 900;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-visual-card p {
    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    max-width: 300px;
    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — CORE FEATURE BOXES

   Purpose:
   - Restores Achieve Financial Success,
     Professional Bookkeeping, and Dedicated Support.
===================================================== */

body.bookkeeping-page .bookkeeping-core-section {
    padding: 85px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-core-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-core-card {
    padding: 24px;

    background: rgba(255, 255, 255, 0.88);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.bookkeeping-page .bookkeeping-core-card img {
    width: 100%;
    height: 230px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    margin-bottom: 18px;
}

body.bookkeeping-page .bookkeeping-core-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    font-weight: 900;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-core-card p {
    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    max-width: 300px;
    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — WHAT WE DO BEAUTIFULLY
===================================================== */

body.bookkeeping-page .bookkeeping-do-section {
    padding: 85px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-do-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.bookkeeping-page .bookkeeping-do-card {
    min-height: 280px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-do-card i {
    color: var(--color-gold);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.bookkeeping-page .bookkeeping-do-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    font-weight: 900;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-do-card p {
    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    max-width: 300px;
    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING PAGE — SERVICE DEEP DIVE
===================================================== */

body.bookkeeping-page .bookkeeping-deep-dive-section {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-page .bookkeeping-deep-dive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-page .bookkeeping-detail-card {
    min-height: 280px;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.90);
    border-left: 6px solid var(--color-blue);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-detail-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    font-weight: 900;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-page .bookkeeping-detail-card p {
    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    max-width: 330px;
    margin: 0 auto;

    text-align: left;
    text-wrap: pretty;
}

/* Final card stays in the first slot of the final row */
body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-year-end-card {
    grid-column: 1 / 2;
}

/* One image fills the final two grid slots */
body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-detail-feature-image {
    grid-column: 2 / 4 !important;

    width: 100%;
    min-width: 0;
    min-height: 280px;
    height: 100%;

    padding: 0;
    margin: 0;

    background: transparent;
    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

/* Image fills the full two-slot frame */
body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-detail-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 280px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}





/* =====================================================
   BOOKKEEPING PAGE — VISUAL ART SECTION
===================================================== */

body.bookkeeping-page .bookkeeping-art-section {
    padding: 85px 0;
    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );
    text-align: center;
}

body.bookkeeping-page .bookkeeping-art-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.bookkeeping-page .bookkeeping-art-card {
    min-height: 280px;
    padding: 14px;

    background: rgba(255, 255, 255, 0.86);
    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

body.bookkeeping-page .bookkeeping-art-card img {
    width: 100%;
    height: 100%;
    min-height: 252px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   BOOKKEEPING RESTORED SECTIONS — TABLET

   Purpose:
   - Keeps the desktop layout style.
   - Scales cards, text, spacing, and images down for tablet.
   - Prevents deep-dive boxes from staying too tall.
===================================================== */

@media (max-width: 1024px) {
    body.bookkeeping-page .bookkeeping-visual-grid,
    body.bookkeeping-page .bookkeeping-core-grid,
    body.bookkeeping-page .bookkeeping-do-grid,
    body.bookkeeping-page .bookkeeping-deep-dive-grid,
    body.bookkeeping-page .bookkeeping-art-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.bookkeeping-page .bookkeeping-visual-card {
        min-height: 250px;
        border-radius: 13px;
    }

    body.bookkeeping-page .bookkeeping-core-card,
    body.bookkeeping-page .bookkeeping-do-card,
    body.bookkeeping-page .bookkeeping-detail-card {
        min-height: 210px;
        padding: 16px 10px;
        border-radius: 13px;
    }

    body.bookkeeping-page .bookkeeping-detail-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 7px;
    }

    body.bookkeeping-page .bookkeeping-detail-card p {
        max-width: 100%;
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
    }

    body.bookkeeping-page .bookkeeping-core-card img {
        height: 150px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    body.bookkeeping-page .bookkeeping-do-card {
        min-height: 205px;
    }

    body.bookkeeping-page .bookkeeping-do-card i {
        font-size: 1.65rem;
        margin-bottom: 10px;
    }

    body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-year-end-card {
        grid-column: 1 / 2;
    }

    body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-detail-feature-image {
        grid-column: 2 / 4 !important;

        min-height: 210px;
        height: 100%;

        padding: 10px;

        background:
            linear-gradient(
                rgba(3, 4, 94, 0.08),
                rgba(0, 180, 216, 0.08)
            ),
            rgba(202, 240, 248, 0.92);

        border-radius: 13px;
        box-shadow: var(--shadow-medium);
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-detail-feature-image img {
        width: 100%;
        height: 100%;
        min-height: 190px;

        object-fit: contain !important;
        object-position: center center;

        border-radius: 10px;
        display: block;
    }

    body.bookkeeping-page .bookkeeping-art-card {
        min-height: 200px;
        padding: 10px;
        border-radius: 13px;
    }

    body.bookkeeping-page .bookkeeping-art-card img {
        min-height: 180px;
        border-radius: 10px;
    }
}


/* =====================================================
   BOOKKEEPING RESTORED SECTIONS — MOBILE

   Purpose:
   - Keeps the same three-column desktop-style layout.
   - Scales everything down instead of letting boxes stay tall.
   - Keeps the two-slot image visible without heavy zoom/cropping.
===================================================== */

@media (max-width: 700px) {
    body.bookkeeping-page .bookkeeping-visual-grid,
    body.bookkeeping-page .bookkeeping-core-grid,
    body.bookkeeping-page .bookkeeping-do-grid,
    body.bookkeeping-page .bookkeeping-deep-dive-grid,
    body.bookkeeping-page .bookkeeping-art-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.bookkeeping-page .bookkeeping-visual-card {
        min-height: 130px;
        border-radius: 9px;
    }

    body.bookkeeping-page .bookkeeping-visual-card div {
        padding: 8px 5px;
    }

    body.bookkeeping-page .bookkeeping-core-card,
    body.bookkeeping-page .bookkeeping-do-card,
    body.bookkeeping-page .bookkeeping-detail-card {
        min-height: 145px;
        padding: 7px 5px;
        border-radius: 9px;
    }

    body.bookkeeping-page .bookkeeping-visual-card h3,
    body.bookkeeping-page .bookkeeping-core-card h3,
    body.bookkeeping-page .bookkeeping-do-card h3,
    body.bookkeeping-page .bookkeeping-detail-card h3 {
        font-size: clamp(0.36rem, 1.75vw, 0.52rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.bookkeeping-page .bookkeeping-visual-card p,
    body.bookkeeping-page .bookkeeping-core-card p,
    body.bookkeeping-page .bookkeeping-do-card p,
    body.bookkeeping-page .bookkeeping-detail-card p {
        max-width: 100%;

        font-size: clamp(0.32rem, 1.55vw, 0.46rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.bookkeeping-page .bookkeeping-core-card img {
        height: 78px;
        border-radius: 7px;
        margin-bottom: 6px;
    }

    body.bookkeeping-page .bookkeeping-do-card {
        min-height: 130px;
    }

    body.bookkeeping-page .bookkeeping-do-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-year-end-card {
        grid-column: 1 / 2;
    }

    body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-detail-feature-image {
        grid-column: 2 / 4 !important;

        min-height: 145px;
        height: 100%;

        padding: 6px;

        background:
            linear-gradient(
                rgba(3, 4, 94, 0.08),
                rgba(0, 180, 216, 0.08)
            ),
            rgba(202, 240, 248, 0.92);

        border-radius: 9px;
        box-shadow: var(--shadow-medium);
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.bookkeeping-page .bookkeeping-deep-dive-grid .bookkeeping-detail-feature-image img {
        width: 100%;
        height: 100%;
        min-height: 133px;

        object-fit: contain !important;
        object-position: center center;

        border-radius: 7px;
        display: block;
    }

    body.bookkeeping-page .bookkeeping-art-card {
        min-height: 120px;
        padding: 6px;
        border-radius: 9px;
    }

    body.bookkeeping-page .bookkeeping-art-card img {
        min-height: 108px;
        border-radius: 7px;
    }
}


/* =====================================================
   BOOKKEEPING.HTML END
===================================================== */






/* =====================================================
   CONTACT PAGE — EXPERIENCE SECTION

   Purpose:
   - Adds a premium process section to the contact page.
   - Keeps visitors moving through the page before final action.
   - Titles stay centered.
   - Paragraphs align left inside centered boxes.
   - Card titles stay on one horizontal line.
===================================================== */

body.contact-page .contact-experience-section {
    padding: 85px 0;
    background:
        linear-gradient(
            135deg,
            var(--color-light-blue),
            var(--color-pale-blue)
        );
    text-align: center;
}

body.contact-page .contact-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.contact-page .contact-experience-card {
    min-height: 260px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.contact-page .contact-experience-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.contact-page .contact-experience-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.contact-page .contact-experience-card p {
    max-width: 300px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONTACT PAGE — FINAL CTA BUTTON AREA

   Purpose:
   - Keeps action buttons only at the bottom.
   - Supports the rule that clients should move through the page.
   - Uses vivid green first, gold on hover.
===================================================== */

body.contact-page .contact-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.contact-page .contact-secondary-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.contact-page .contact-secondary-btn:hover,
body.contact-page .contact-secondary-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   CONTACT PAGE — TABLET UPDATE
===================================================== */

@media (max-width: 1024px) {
    body.contact-page .contact-experience-section {
        padding: 62px 0;
    }

    body.contact-page .contact-experience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.contact-page .contact-experience-card {
        min-height: 230px;
        padding: 22px 14px;
    }

    body.contact-page .contact-experience-card span {
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
    }

    body.contact-page .contact-experience-card p {
        font-size: 0.86rem;
        line-height: 1.48;
    }
}


/* =====================================================
   CONTACT PAGE — MOBILE UPDATE

   Same layout, scaled down:
   Card | Card | Card
===================================================== */

@media (max-width: 700px) {
    body.contact-page .contact-experience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.contact-page .contact-experience-card {
        min-height: 145px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.contact-page .contact-experience-card span {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;

        font-size: 0.62rem;
    }

    body.contact-page .contact-experience-card h3 {
        font-size: clamp(0.42rem, 2vw, 0.58rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.contact-page .contact-experience-card p {
        font-size: clamp(0.4rem, 1.9vw, 0.52rem);
        line-height: 1.28;
    }

    body.contact-page .contact-final-actions {
        gap: 8px;
        margin-top: 18px;
    }

    body.contact-page .contact-final-actions .cta-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }
}

/* =====================================================
   CONTACT PAGE — EXPERIENCE SECTION END
===================================================== */



/* =====================================================
   BOOKKEEPING-REQUEST.HTML START

   Purpose:
   - Styles the bookkeeping request page only.
   - Keeps the WWA global header and footer unchanged.
   - Uses a strong video hero with image underlay.
   - Removes early action buttons so clients move through the page.
   - Keeps titles centered.
   - Keeps paragraph text left-aligned inside centered boxes.
   - Keeps card titles on one horizontal line.
   - Avoids public service pricing because bookkeeping is not one-size-fits-all.
   - Keeps desktop, tablet, and mobile visually consistent.
===================================================== */

body.bookkeeping-request-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — HERO SECTION

   Required files:
   public_html/assets/videos/bookkeeping/bookkeeping-request-hero.mp4
   public_html/assets/images/bookkeeping/bookkeeping-request-hero-underlay.jpg
===================================================== */

body.bookkeeping-request-page .bookkeeping-request-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.54),
            rgba(0, 119, 182, 0.38)
        ),
      /*  url("../images/bookkeeping/bookkeeping-request-hero-underlay0.jpg"); */

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

/* Premium glow overlay over the underlay image */
body.bookkeeping-request-page .bookkeeping-request-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(0, 255, 0, 0.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 74%,
            rgba(255, 204, 0, 0.18),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.40),
            rgba(202, 240, 248, 0.12)
        );

    pointer-events: none;
}

/* Hero video sits above the background image */
body.bookkeeping-request-page .bookkeeping-request-hero-video {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: cover;
    opacity: 0.68;

    filter: contrast(1.15) brightness(1.08) saturate(1.05);

    pointer-events: none;
}

/* Hero content card */
body.bookkeeping-request-page .bookkeeping-request-hero-content {
    position: relative;
    z-index: 4;

    width: min(100%, 960px);
    margin: 0 auto;
    padding: 48px 38px;

    background: rgba(3, 4, 94, 0.66);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

/* Small gold label */
body.bookkeeping-request-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

/* Hero title */
body.bookkeeping-request-page .bookkeeping-request-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 900px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

/* Hero paragraph */
body.bookkeeping-request-page .bookkeeping-request-hero-content p:not(.section-label) {
    max-width: 800px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}

/* Keeps early hero buttons hidden if they exist in the HTML */
body.bookkeeping-request-page .bookkeeping-request-hero-actions {
    display: none;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — TRUST STRIP
===================================================== */

body.bookkeeping-request-page .bookkeeping-request-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-request-page .bookkeeping-request-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.bookkeeping-request-page .bookkeeping-request-trust-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;
    text-align: center;
}

body.bookkeeping-request-page .bookkeeping-request-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — SHARED SECTION STRUCTURE
===================================================== */

body.bookkeeping-request-page section {
    scroll-margin-top: var(--header-height);
}

body.bookkeeping-request-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.bookkeeping-request-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-request-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — WHY CHOOSE WWA SECTION
===================================================== */

body.bookkeeping-request-page .request-why-section {
    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );

    text-align: center;
}

body.bookkeeping-request-page .request-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-request-page .request-why-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-request-page .request-why-card:hover,
body.bookkeeping-request-page .request-why-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.bookkeeping-request-page .request-why-card i {
    color: var(--color-blue);
    font-size: 2.5rem;
    margin-bottom: 16px;
}

body.bookkeeping-request-page .request-why-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-request-page .request-why-card p {
    max-width: 300px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — SERVICES SECTION
===================================================== */

body.bookkeeping-request-page .request-services-section {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-request-page .request-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.bookkeeping-request-page .request-service-box {
    min-height: 150px;
    padding: 24px 16px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-request-page .request-service-box:hover,
body.bookkeeping-request-page .request-service-box:focus-within {
    box-shadow: var(--shadow-medium);
}

body.bookkeeping-request-page .request-service-box h3 {
    color: var(--color-white);
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — PROCESS SECTION
===================================================== */

body.bookkeeping-request-page .request-process-section {
    padding: 85px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.bookkeeping-request-page .request-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-request-page .request-process-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-request-page .request-process-card:hover,
body.bookkeeping-request-page .request-process-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.bookkeeping-request-page .request-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.bookkeeping-request-page .request-process-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-request-page .request-process-card p {
    max-width: 300px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — SERVICE PLANNING SECTION

   Purpose:
   - Replaces public pricing with custom-fit planning.
   - No costs are disclosed because support is not one size fits all.
   - Uses one image to fill two missing grid spaces:
     Row 1: Card | Card | Card
     Row 2: Card | Card | Card
     Row 3: Card | Image | Image

   Required file:
   public_html/assets/images/bookkeeping/bookkeeping-backup.jpg

   Locked HTML classes:
   .request-service-planning-section
   .service-planning-note-card
   .request-service-planning-grid
   .request-planning-grid
   .request-planning-card
   .request-planning-anchor
   .request-planning-image
===================================================== */

body.bookkeeping-request-page .request-service-planning-section {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-request-page .request-service-planning-section .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.bookkeeping-request-page .request-service-planning-section .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-request-page .request-service-planning-section .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.bookkeeping-request-page .service-planning-note-card {
    max-width: 980px;
    margin: 0 auto 34px;
    padding: 28px 26px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    text-align: center;
}

body.bookkeeping-request-page .service-planning-note-card p {
    max-width: 860px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.bookkeeping-request-page .request-service-planning-grid,
body.bookkeeping-request-page .request-planning-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-request-page .request-service-planning-grid .request-planning-card,
body.bookkeeping-request-page .request-planning-grid .request-planning-card {
    min-height: 280px;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-request-page .request-service-planning-grid .request-planning-card:hover,
body.bookkeeping-request-page .request-service-planning-grid .request-planning-card:focus-within,
body.bookkeeping-request-page .request-planning-grid .request-planning-card:hover,
body.bookkeeping-request-page .request-planning-grid .request-planning-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.bookkeeping-request-page .request-service-planning-grid .request-planning-card h3,
body.bookkeeping-request-page .request-planning-grid .request-planning-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.88rem, 1.15vw, 1.05rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-request-page .request-service-planning-grid .request-planning-card p,
body.bookkeeping-request-page .request-planning-grid .request-planning-card p {
    max-width: 310px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — SERVICE PLANNING IMAGE
   Corrected:
   - Targets the actual locked grid class: .request-service-planning-grid
   - Also supports .request-planning-grid if both classes are used in HTML
   - Image fills the two empty grid slots:
     Row 1: Card | Card | Card
     Row 2: Card | Card | Card
     Row 3: Card | Image | Image
===================================================== */

body.bookkeeping-request-page .request-service-planning-grid > .request-planning-anchor,
body.bookkeeping-request-page .request-planning-grid > .request-planning-anchor {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image,
body.bookkeeping-request-page .request-planning-grid > .request-planning-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    width: 100%;
    min-width: 0;
    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: stretch;
    justify-content: center;

    align-self: stretch;
}

body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image img,
body.bookkeeping-request-page .request-planning-grid > .request-planning-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — REQUEST FORM SECTION

   This is the final action section.
   The submit button lives here so visitors move through the page first.

   Background image:
   music2.jpg should be renamed to:
   bookkeeping-request-form-background.jpg

   Save image here:
   public_html/assets/images/bookkeeping/bookkeeping-request-form-background.jpg
===================================================== */

body.bookkeeping-request-page .request-form-section {
    position: relative;
    isolation: isolate;

    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.88),
            rgba(0, 119, 182, 0.72)
        ),
        url("../images/bookkeeping/bookkeeping-request-form-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;

    color: var(--color-pale-blue);
    text-align: center;

    overflow: hidden;
}

/* Premium glow overlay above the background image */
body.bookkeeping-request-page .request-form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(0, 255, 0, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 84% 78%,
            rgba(255, 204, 0, 0.22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.60),
            rgba(0, 119, 182, 0.36),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

/* Keeps the actual form content above the background */
body.bookkeeping-request-page .request-form-section .section-inner {
    position: relative;
    z-index: 2;
}

body.bookkeeping-request-page .request-form-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 34px;
    align-items: stretch;
}

body.bookkeeping-request-page .request-form-intro {
    padding: 38px 32px;

    background: rgba(3, 4, 94, 0.72);
    border: 1px solid rgba(202, 240, 248, 0.24);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    backdrop-filter: blur(14px);

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-request-page .request-form-intro h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    margin: 0 auto 18px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-request-page .request-form-intro p:not(.section-label) {
    max-width: 640px;
    margin: 0 auto 26px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

/* Mini highlight boxes beside the form */
body.bookkeeping-request-page .request-form-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.bookkeeping-request-page .request-form-highlights div {
    min-width: 0;
    padding: 15px 10px;

    background: rgba(202, 240, 248, 0.10);
    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 14px;

    color: var(--color-pale-blue);
    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-align: center;
}

body.bookkeeping-request-page .request-form-highlights i {
    color: var(--color-gold);
}

/* Form card */
body.bookkeeping-request-page .request-form-card {
    padding: 38px 32px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    backdrop-filter: blur(10px);

    text-align: left;
}

/* Form rows */
body.bookkeeping-request-page .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Form fields */
body.bookkeeping-request-page .form-field {
    margin-bottom: 16px;
}

body.bookkeeping-request-page .form-field label {
    display: block;

    color: var(--color-navy);
    font-weight: 900;
    margin-bottom: 7px;

    text-align: left;
}

body.bookkeeping-request-page .form-field input,
body.bookkeeping-request-page .form-field select,
body.bookkeeping-request-page .form-field textarea {
    width: 100%;
    padding: 13px 14px;

    color: var(--color-navy);
    background: var(--color-pale-blue);

    border: 1px solid rgba(3, 4, 94, 0.18);
    border-radius: 10px;

    outline: none;
    resize: vertical;
}

body.bookkeeping-request-page .form-field input:focus,
body.bookkeeping-request-page .form-field select:focus,
body.bookkeeping-request-page .form-field textarea:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.18);
}

/* Final form submit button */
body.bookkeeping-request-page .request-submit-btn,
body.bookkeeping-request-page .bookkeeping-request-primary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.bookkeeping-request-page .request-submit-btn {
    width: 100%;
    margin-top: 6px;
}

body.bookkeeping-request-page .request-submit-btn:hover,
body.bookkeeping-request-page .request-submit-btn:focus,
body.bookkeeping-request-page .bookkeeping-request-primary-btn:hover,
body.bookkeeping-request-page .bookkeeping-request-primary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}


/* =====================================================
   BOOKKEEPING REQUEST PAGE — OPTIONAL FINAL CTA

   Use only if the HTML keeps a final CTA after the form.
===================================================== */

body.bookkeeping-request-page .request-final-cta {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-request-page .request-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-request-page .request-final-cta p {
    max-width: 820px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING-REQUEST.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.bookkeeping-request-page .bookkeeping-request-hero {
        padding: 68px 0;
    }

    body.bookkeeping-request-page .bookkeeping-request-hero-content {
        padding: 38px 28px;
    }

    body.bookkeeping-request-page .request-why-section,
    body.bookkeeping-request-page .request-services-section,
    body.bookkeeping-request-page .request-process-section,
    body.bookkeeping-request-page .request-service-planning-section,
    body.bookkeeping-request-page .request-form-section,
    body.bookkeeping-request-page .request-final-cta {
        padding: 62px 0;
    }

    body.bookkeeping-request-page .bookkeeping-request-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.bookkeeping-request-page .request-why-grid,
    body.bookkeeping-request-page .request-process-grid,
    body.bookkeeping-request-page .request-service-planning-grid,
    body.bookkeeping-request-page .request-planning-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.bookkeeping-request-page .request-services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    body.bookkeeping-request-page .request-why-card,
    body.bookkeeping-request-page .request-process-card,
    body.bookkeeping-request-page .request-service-planning-grid .request-planning-card,
    body.bookkeeping-request-page .request-planning-grid .request-planning-card {
        min-height: 230px;
        padding: 22px 14px;
    }

    body.bookkeeping-request-page .request-service-box {
        min-height: 125px;
        padding: 18px 10px;
    }

    body.bookkeeping-request-page .request-why-card p,
    body.bookkeeping-request-page .request-process-card p,
    body.bookkeeping-request-page .request-service-planning-grid .request-planning-card p,
    body.bookkeeping-request-page .request-planning-grid .request-planning-card p,
    body.bookkeeping-request-page .request-form-intro p:not(.section-label) {
        font-size: 0.86rem;
        line-height: 1.48;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-anchor,
    body.bookkeeping-request-page .request-planning-grid > .request-planning-anchor {
        grid-column: 1 / 2;
        grid-row: auto;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image,
    body.bookkeeping-request-page .request-planning-grid > .request-planning-image {
        grid-column: 2 / 4;
        grid-row: auto;

        min-height: 230px;
        padding: 10px;
        border-radius: 13px;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image img,
    body.bookkeeping-request-page .request-planning-grid > .request-planning-image img {
        min-height: 210px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.55);
    }

    body.bookkeeping-request-page .request-form-layout {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 20px;
    }
}


/* =====================================================
   BOOKKEEPING-REQUEST.HTML — MOBILE

   Keeps the same layout style, scaled down:
   - Trust strip stays four across.
   - Service grid stays four across.
   - Process cards stay three across.
   - Planning image still fills two spaces.
===================================================== */

@media (max-width: 700px) {
    body.bookkeeping-request-page .bookkeeping-request-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.bookkeeping-request-page .bookkeeping-request-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.bookkeeping-request-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.bookkeeping-request-page .bookkeeping-request-hero-content h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
    }

    body.bookkeeping-request-page .bookkeeping-request-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.bookkeeping-request-page .bookkeeping-request-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.bookkeeping-request-page .bookkeeping-request-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.bookkeeping-request-page .section-header {
        margin-bottom: 24px;
    }

    body.bookkeeping-request-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.bookkeeping-request-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.bookkeeping-request-page .request-why-grid,
    body.bookkeeping-request-page .request-process-grid,
    body.bookkeeping-request-page .request-service-planning-grid,
    body.bookkeeping-request-page .request-planning-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.bookkeeping-request-page .request-services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    body.bookkeeping-request-page .request-why-card,
    body.bookkeeping-request-page .request-process-card,
    body.bookkeeping-request-page .request-service-planning-grid .request-planning-card,
    body.bookkeeping-request-page .request-planning-grid .request-planning-card {
        min-height: 145px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.bookkeeping-request-page .request-service-box {
        min-height: 95px;
        padding: 8px 4px;
        border-radius: 9px;
    }

    body.bookkeeping-request-page .request-why-card i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.bookkeeping-request-page .request-process-card span {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
        font-size: 0.62rem;
    }

    body.bookkeeping-request-page .request-why-card h3,
    body.bookkeeping-request-page .request-process-card h3,
    body.bookkeeping-request-page .request-service-planning-grid .request-planning-card h3,
    body.bookkeeping-request-page .request-planning-grid .request-planning-card h3,
    body.bookkeeping-request-page .request-service-box h3 {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.bookkeeping-request-page .request-service-box h3 {
        margin-bottom: 0;
    }

    body.bookkeeping-request-page .request-why-card p,
    body.bookkeeping-request-page .request-process-card p,
    body.bookkeeping-request-page .request-service-planning-grid .request-planning-card p,
    body.bookkeeping-request-page .request-planning-grid .request-planning-card p {
        font-size: clamp(0.36rem, 1.7vw, 0.48rem);
        line-height: 1.28;
    }

    body.bookkeeping-request-page .service-planning-note-card {
        padding: 16px 12px;
        border-radius: 12px;
        border-left-width: 4px;
        margin-bottom: 20px;
    }

    body.bookkeeping-request-page .service-planning-note-card p {
        font-size: clamp(0.68rem, 2.8vw, 0.82rem);
        line-height: 1.45;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-anchor,
    body.bookkeeping-request-page .request-planning-grid > .request-planning-anchor {
        grid-column: 1 / 2;
        grid-row: auto;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image,
    body.bookkeeping-request-page .request-planning-grid > .request-planning-image {
        grid-column: 2 / 4;
        grid-row: auto;

        min-height: 145px;
        padding: 6px;
        border-radius: 9px;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image img,
    body.bookkeeping-request-page .request-planning-grid > .request-planning-image img {
        min-height: 133px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
        background: rgba(255, 255, 255, 0.55);
    }

    body.bookkeeping-request-page .request-form-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.bookkeeping-request-page .request-form-intro,
    body.bookkeeping-request-page .request-form-card {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.bookkeeping-request-page .request-form-intro h2 {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
    }

    body.bookkeeping-request-page .request-form-intro p:not(.section-label) {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.bookkeeping-request-page .request-form-highlights {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    body.bookkeeping-request-page .request-form-highlights div {
        padding: 8px 4px;
        border-radius: 8px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.bookkeeping-request-page .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.bookkeeping-request-page .form-field {
        margin-bottom: 8px;
    }

    body.bookkeeping-request-page .form-field label {
        font-size: 0.68rem;
        margin-bottom: 4px;
    }

    body.bookkeeping-request-page .form-field input,
    body.bookkeeping-request-page .form-field select,
    body.bookkeeping-request-page .form-field textarea {
        padding: 8px;
        font-size: 0.72rem;
        border-radius: 7px;
    }

    body.bookkeeping-request-page .request-submit-btn,
    body.bookkeeping-request-page .bookkeeping-request-primary-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }

    body.bookkeeping-request-page .request-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.bookkeeping-request-page .request-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }
}



/* =====================================================
   FINAL FIX — BOOKKEEPING REQUEST SERVICE PLANNING IMAGE
   This forces the image wrapper to fill the two missing grid slots.
===================================================== */

body.bookkeeping-request-page .request-service-planning-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

body.bookkeeping-request-page .request-service-planning-grid > .request-planning-anchor {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
}

body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image {
    grid-column: 2 / 4 !important;
    grid-row: 3 / 4 !important;

    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 280px !important;

    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.10),
            rgba(0, 119, 182, 0.10)
        ),
        url("../images/bookkeeping/bookkeeping-backup.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    box-shadow: var(--shadow-medium) !important;
}

body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
    opacity: 0 !important;
}



@media (max-width: 1024px) {
    body.bookkeeping-request-page .request-service-planning-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-anchor {
        grid-column: 1 / 2 !important;
        grid-row: auto !important;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image {
        grid-column: 2 / 4 !important;
        grid-row: auto !important;

        min-height: 230px !important;

        background-size: contain !important;
        background-position: center center !important;
        background-color: rgba(202, 240, 248, 0.92) !important;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image img {
        min-height: 230px !important;
    }
}

@media (max-width: 700px) {
    body.bookkeeping-request-page .request-service-planning-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-anchor {
        grid-column: 1 / 2 !important;
        grid-row: auto !important;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image {
        grid-column: 2 / 4 !important;
        grid-row: auto !important;

        min-height: 145px !important;
        border-radius: 9px !important;

        background-size: contain !important;
        background-position: center center !important;
        background-color: rgba(202, 240, 248, 0.92) !important;
    }

    body.bookkeeping-request-page .request-service-planning-grid > .request-planning-image img {
        min-height: 145px !important;
    }
}




/* =====================================================
   BOOKKEEPING REQUEST FORM RESPONSE — FINAL VISIBILITY FIX
===================================================== */

body.bookkeeping-request-page .request-form-card,
body.bookkeeping-request-page .form-response,
body.bookkeeping-request-page .form-success-message,
body.bookkeeping-request-page .form-error-message {
    position: relative !important;
    z-index: 20 !important;
}

body.bookkeeping-request-page .form-response {
    display: block !important;
    width: 100% !important;
    margin-top: 22px !important;
    isolation: isolate !important;
}

body.bookkeeping-request-page .form-success-message,
body.bookkeeping-request-page .form-error-message {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;

    width: 100% !important;
    padding: 18px 20px !important;

    border-radius: 12px !important;

    opacity: 1 !important;
    visibility: visible !important;

    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;

    box-shadow: 0 8px 22px rgba(3, 4, 94, 0.14) !important;
}

body.bookkeeping-request-page .form-success-message {
    background: #ffffff !important;
    border: 2px solid #047857 !important;
    border-left: 8px solid #047857 !important;
}

body.bookkeeping-request-page .form-error-message {
    background: #ffffff !important;
    border: 2px solid #b91c1c !important;
    border-left: 8px solid #b91c1c !important;
}

body.bookkeeping-request-page .form-success-message p,
body.bookkeeping-request-page .form-error-message p {
    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.65 !important;

    text-align: left !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

body.bookkeeping-request-page .form-success-message p {
    color: #03045e !important;
}

body.bookkeeping-request-page .form-error-message p {
    color: #7f1d1d !important;
}

body.bookkeeping-request-page .form-success-message i {
    color: #047857 !important;
    opacity: 1 !important;
    font-size: 1.4rem !important;
    margin-top: 3px !important;
}

body.bookkeeping-request-page .form-error-message i {
    color: #b91c1c !important;
    opacity: 1 !important;
    font-size: 1.4rem !important;
    margin-top: 3px !important;
}




/* =====================================================
   MEET-OUR-TEAM.HTML START

   Purpose:
   - Styles the Meet Our Team page only.
   - Keeps the global WWA header and footer unchanged.
   - Creates a polished founder profile experience.
   - Keeps titles centered where required.
   - Keeps paragraph text left-aligned inside centered containers.
   - Keeps card titles on one horizontal line.
   - Keeps action buttons in the final section only.
   - Preserves the important owner content from the original file.
===================================================== */

body.meet-team-page {
    padding-top: var(--header-height);
    background:
        linear-gradient(
            rgba(202, 240, 248, 0.94),
            rgba(144, 224, 239, 0.94)
        );
    color: var(--color-navy);
}


/* =====================================================
   MEET OUR TEAM — HERO SECTION

   Optional background image:
   public_html/assets/images/team/meet-team-hero-background.jpg
===================================================== */

body.meet-team-page .meet-team-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.68),
            rgba(0, 119, 182, 0.44)
        ),
        url("../images/team/Kenisha_Wilson_Founder.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.meet-team-page .meet-team-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.22),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.36),
            rgba(202, 240, 248, 0.10)
        );

    pointer-events: none;
}

/* Hero content card */
body.meet-team-page .meet-team-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 960px);
    margin: 0 auto;
    padding: 48px 38px;

    background: rgba(3, 4, 94, 0.66);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

/* Shared gold label */
body.meet-team-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

/* Hero title: centered block, left-aligned text */
body.meet-team-page .meet-team-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 900px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

/* Hero paragraph: centered block, left-aligned text */
body.meet-team-page .meet-team-hero-content p:not(.section-label) {
    max-width: 800px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   MEET OUR TEAM — TRUST STRIP
===================================================== */

body.meet-team-page .team-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .team-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.meet-team-page .team-trust-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;
    text-align: center;
}

body.meet-team-page .team-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   MEET OUR TEAM — SHARED SECTION STRUCTURE
===================================================== */

body.meet-team-page section {
    scroll-margin-top: var(--header-height);
}

body.meet-team-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.meet-team-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.meet-team-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   OWNER PROFILE SECTION
===================================================== */

body.meet-team-page .owner-page-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );

    text-align: center;
}

body.meet-team-page .owner-profile-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
        "photo content"
        "photo bottom";
    gap: 34px;
    align-items: stretch;
}

/* Photo frame */
body.meet-team-page .owner-photo-container {
    grid-area: photo;
    position: relative;

    min-height: 620px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.92);
    border-radius: 28px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: stretch;
    justify-content: center;
}

body.meet-team-page .owner-photo-container::before {
    content: "";
    position: absolute;
    inset: 10% 8%;
    z-index: 1;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 204, 0, 0.36),
            transparent 36%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(0, 255, 0, 0.18),
            transparent 36%
        );

    filter: blur(32px);
    pointer-events: none;
}

body.meet-team-page .owner-photo-container img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
    min-height: 588px;

    object-fit: cover;
    object-position: center top;

    border-radius: 22px;
    display: block;
}

/* Caption overlay on image */
body.meet-team-page .owner-photo-caption {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 3;

    padding: 18px 20px;

    background: rgba(3, 4, 94, 0.74);
    border: 1px solid rgba(202, 240, 248, 0.24);
    border-radius: 18px;

    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-medium);

    text-align: center;
}

body.meet-team-page .owner-photo-caption span,
body.meet-team-page .owner-photo-caption strong {
    display: block;
    color: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .owner-photo-caption span {
    color: var(--color-gold);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.78rem;
}

body.meet-team-page .owner-photo-caption strong {
    margin-top: 5px;
    font-size: 1.05rem;
}

/* Bio top card */
body.meet-team-page .owner-info-content {
    grid-area: content;

    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

/* Owner title: centered block, left-aligned text */
body.meet-team-page .owner-title {
    color: var(--color-white);
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;

    max-width: 760px;
    margin: 0 auto 10px;

    text-align: left;
    text-wrap: balance;
}

body.meet-team-page .owner-highlight {
    color: var(--color-gold);
}

body.meet-team-page .owner-subtitle {
    max-width: 760px;
    margin: 0 auto 24px;

    color: var(--color-green);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.4;

    text-align: left;
}

body.meet-team-page .owner-summary {
    max-width: 760px;
    margin: 0 auto 16px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}

/* Bottom biography panel */
body.meet-team-page .owner-info-content-bottom {
    grid-area: bottom;

    padding: 28px 32px;

    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.meet-team-page .owner-info-content-bottom .owner-summary {
    color: #000000;
}


/* =====================================================
   CORE COMPETENCIES SECTION

   Layout:
   Row 1: Card | Card | Card
   Row 2: Card | Image | Image
===================================================== */

body.meet-team-page .team-competencies-section {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .competency-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.meet-team-page .competency-card {
    min-height: 280px;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.meet-team-page .competency-card:hover,
body.meet-team-page .competency-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.meet-team-page .competency-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.meet-team-page .competency-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.72rem, 0.96vw, 0.95rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.meet-team-page .competency-card p {
    max-width: 310px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.meet-team-page .competency-anchor {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

body.meet-team-page .competency-feature-image {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.meet-team-page .competency-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   RECOGNITION SECTION
===================================================== */

body.meet-team-page .team-recognition-section {
    padding: 85px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.meet-team-page .recognition-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.meet-team-page .recognition-panel {
    min-height: 280px;
    padding: 28px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .bio-section-heading {
    display: inline-block;

    color: var(--color-gold);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 16px;
    padding-bottom: 7px;

    border-bottom: 2px solid var(--color-gold);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.meet-team-page .owner-details-list {
    max-width: 320px;
    margin: 0 auto;
    padding-left: 20px;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
}

body.meet-team-page .owner-details-list li {
    margin-bottom: 10px;
}

body.meet-team-page .award-badge {
    display: block;

    max-width: 320px;
    margin: 0 auto 14px;
    padding: 12px 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 12px;

    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.35;

    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.22);
    text-align: center;
}


/* =====================================================
   CLIENT IMPACT SECTION
===================================================== */

body.meet-team-page .team-impact-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    text-align: center;
}

body.meet-team-page .team-impact-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: stretch;
}

body.meet-team-page .impact-copy {
    padding: 38px 32px;

    background: rgba(3, 4, 94, 0.62);
    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .impact-copy h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 760px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.meet-team-page .impact-copy p {
    max-width: 700px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.meet-team-page .testimonial-box {
    max-width: 700px;
    margin: 26px auto 18px;
    padding: 24px 26px;

    color: var(--color-navy);
    background: var(--color-pale-blue);
    border-left: 6px solid var(--color-gold);
    border-radius: 16px;

    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.65;

    text-align: left;
    box-shadow: var(--shadow-soft);
}

body.meet-team-page .signature-quote {
    max-width: 700px;
    margin: 0 auto;
    padding-left: 16px;

    color: var(--color-green);
    border-left: 4px solid var(--color-gold);

    font-size: 1.08rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1.6;

    text-align: left;
}

body.meet-team-page .impact-card-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

body.meet-team-page .impact-card {
    min-height: 170px;
    padding: 24px 22px;

    background: rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.meet-team-page .impact-card i {
    color: var(--color-blue);
    font-size: 2rem;
    margin-bottom: 12px;
}

body.meet-team-page .impact-card h3 {
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 8px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.meet-team-page .impact-card p {
    max-width: 300px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.94rem;
    line-height: 1.55;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   PERSONAL INSIGHTS SECTION
===================================================== */

body.meet-team-page .team-personal-section {
    padding: 85px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .personal-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.meet-team-page .personal-insight-card {
    min-height: 250px;
    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.90);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.meet-team-page .personal-insight-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.meet-team-page .personal-insight-card h3 {
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.meet-team-page .personal-insight-card p {
    max-width: 300px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   FINAL CTA SECTION
===================================================== */

body.meet-team-page .meet-team-final-cta {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.meet-team-page .meet-team-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.meet-team-page .meet-team-final-cta p {
    max-width: 820px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.meet-team-page .meet-team-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

/* Primary button: vivid green until hover */
body.meet-team-page .meet-team-primary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.meet-team-page .meet-team-primary-btn:hover,
body.meet-team-page .meet-team-primary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

/* Secondary button */
body.meet-team-page .meet-team-secondary-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.meet-team-page .meet-team-secondary-btn:hover,
body.meet-team-page .meet-team-secondary-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}

/* Founder social links stay in the final section */
body.meet-team-page .owner-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;

    margin: 34px auto 0;
    text-align: center;
}

body.meet-team-page .owner-social-link {
    width: 46px;
    height: 46px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1.25rem;
    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

body.meet-team-page .owner-social-link:hover,
body.meet-team-page .owner-social-link:focus {
    color: var(--color-navy);
    background: var(--color-green);

    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 255, 0, 0.24);
    outline: none;
}


/* =====================================================
   MEET-OUR-TEAM.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.meet-team-page .meet-team-hero {
        padding: 68px 0;
    }

    body.meet-team-page .meet-team-hero-content {
        padding: 38px 28px;
    }

    body.meet-team-page .owner-page-section,
    body.meet-team-page .team-competencies-section,
    body.meet-team-page .team-recognition-section,
    body.meet-team-page .team-impact-section,
    body.meet-team-page .team-personal-section,
    body.meet-team-page .meet-team-final-cta {
        padding: 62px 0;
    }

    body.meet-team-page .team-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.meet-team-page .owner-profile-grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 20px;
    }

    body.meet-team-page .owner-photo-container {
        min-height: 520px;
        border-radius: 22px;
    }

    body.meet-team-page .owner-photo-container img {
        min-height: 488px;
        border-radius: 16px;
    }

    body.meet-team-page .owner-info-content,
    body.meet-team-page .owner-info-content-bottom {
        padding: 28px 22px;
    }

    body.meet-team-page .competency-grid,
    body.meet-team-page .recognition-layout,
    body.meet-team-page .personal-insight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.meet-team-page .competency-card,
    body.meet-team-page .recognition-panel,
    body.meet-team-page .personal-insight-card {
        min-height: 230px;
        padding: 22px 14px;
    }

    body.meet-team-page .competency-feature-image {
        min-height: 230px;
        padding: 10px;
    }

    body.meet-team-page .competency-feature-image img {
        min-height: 210px;
        border-radius: 10px;
    }

    body.meet-team-page .team-impact-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.meet-team-page .owner-summary,
    body.meet-team-page .section-header p,
    body.meet-team-page .competency-card p,
    body.meet-team-page .personal-insight-card p,
    body.meet-team-page .impact-card p {
        font-size: 0.86rem;
        line-height: 1.48;
    }
}


/* =====================================================
   MEET-OUR-TEAM.HTML — MOBILE

   Keeps the desktop-style layouts, scaled smaller:
   - Trust strip stays four across.
   - Competency grid stays three across.
   - Image still takes two spaces.
===================================================== */

@media (max-width: 700px) {
    body.meet-team-page .meet-team-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.meet-team-page .meet-team-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.meet-team-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.meet-team-page .meet-team-hero-content h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
        line-height: 1.08;
    }

    body.meet-team-page .meet-team-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.meet-team-page .team-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.meet-team-page .team-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.meet-team-page .section-header {
        margin-bottom: 24px;
    }

    body.meet-team-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.meet-team-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.meet-team-page .owner-profile-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo content"
            "bottom bottom";
        gap: 8px;
    }

    body.meet-team-page .owner-photo-container {
        min-height: 300px;
        padding: 6px;
        border-radius: 12px;
    }

    body.meet-team-page .owner-photo-container img {
        min-height: 288px;
        border-radius: 9px;
    }

    body.meet-team-page .owner-photo-caption {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 8px 6px;
        border-radius: 9px;
    }

    body.meet-team-page .owner-photo-caption span {
        font-size: 0.42rem;
    }

    body.meet-team-page .owner-photo-caption strong {
        font-size: 0.55rem;
    }

    body.meet-team-page .owner-info-content,
    body.meet-team-page .owner-info-content-bottom {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.meet-team-page .owner-title {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
    }

    body.meet-team-page .owner-subtitle {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        margin-bottom: 10px;
    }

    body.meet-team-page .owner-summary {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.meet-team-page .competency-grid,
    body.meet-team-page .recognition-layout,
    body.meet-team-page .personal-insight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.meet-team-page .competency-card,
    body.meet-team-page .recognition-panel,
    body.meet-team-page .personal-insight-card {
        min-height: 145px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.meet-team-page .competency-card i,
    body.meet-team-page .personal-insight-card i,
    body.meet-team-page .impact-card i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.meet-team-page .competency-card h3,
    body.meet-team-page .personal-insight-card h3,
    body.meet-team-page .impact-card h3 {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.meet-team-page .competency-card p,
    body.meet-team-page .personal-insight-card p,
    body.meet-team-page .impact-card p {
        font-size: clamp(0.36rem, 1.7vw, 0.48rem);
        line-height: 1.28;
    }

    body.meet-team-page .competency-feature-image {
        min-height: 145px;
        padding: 6px;
        border-radius: 9px;
    }

    body.meet-team-page .competency-feature-image img {
        min-height: 133px;
        border-radius: 7px;
    }

    body.meet-team-page .bio-section-heading {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        margin-bottom: 6px;
    }

    body.meet-team-page .owner-details-list {
        padding-left: 12px;
        font-size: clamp(0.36rem, 1.7vw, 0.48rem);
        line-height: 1.25;
    }

    body.meet-team-page .owner-details-list li {
        margin-bottom: 4px;
    }

    body.meet-team-page .award-badge {
        font-size: clamp(0.36rem, 1.7vw, 0.48rem);
        padding: 7px 6px;
        border-radius: 7px;
        margin-bottom: 6px;
    }

    body.meet-team-page .team-impact-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.meet-team-page .impact-copy {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.meet-team-page .impact-copy h2 {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
    }

    body.meet-team-page .impact-copy p,
    body.meet-team-page .testimonial-box,
    body.meet-team-page .signature-quote {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.meet-team-page .testimonial-box {
        padding: 10px 8px;
        border-left-width: 3px;
        border-radius: 8px;
    }

    body.meet-team-page .signature-quote {
        padding-left: 8px;
        border-left-width: 3px;
    }

    body.meet-team-page .impact-card-stack {
        gap: 7px;
    }

    body.meet-team-page .impact-card {
        min-height: 118px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.meet-team-page .meet-team-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.meet-team-page .meet-team-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.meet-team-page .meet-team-final-actions {
        gap: 8px;
        margin-top: 18px;
    }

    body.meet-team-page .meet-team-final-actions .cta-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }

    body.meet-team-page .owner-cta-row {
        gap: 10px;
        margin-top: 20px;
    }

    body.meet-team-page .owner-social-link {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
}

/* =====================================================
   MEET-OUR-TEAM.HTML END
===================================================== */


/* =====================================================
   SERVICES.HTML START

   Purpose:
   - Styles the services.html page only.
   - Creates an elegant, professional, eye-catching service page.
   - Educates clients about WWA bookkeeping, QuickBooks, clean-up,
     tax-ready records, financial reporting, and funding broker support.
   - Keeps page-body action buttons at the final CTA section only.
   - Keeps section blocks centered.
   - Keeps paragraph text left-aligned inside centered containers.
   - Keeps card titles on one horizontal line.
   - Keeps desktop, tablet, and mobile visually consistent.

   Recommended images:
   public_html/assets/images/services/services-hero-background.jpg
   public_html/assets/images/services/services-intro-feature.jpg
   public_html/assets/images/services/services-bookkeeping.jpg
   public_html/assets/images/services/services-quickbooks-training.jpg
   public_html/assets/images/services/services-bookkeeping-cleanup.jpg
   public_html/assets/images/services/services-tax-preparation.jpg
   public_html/assets/images/services/services-financial-reporting.jpg
   public_html/assets/images/services/services-funding-broker.jpg
   public_html/assets/images/services/services-bookkeeping-detail.jpg
   public_html/assets/images/services/services-quickbooks-detail.jpg
   public_html/assets/images/services/services-cleanup-detail.jpg
   public_html/assets/images/services/services-process-feature.jpg
   public_html/assets/images/services/services-business-funding-feature.jpg
   public_html/assets/images/services/client-alicia.jpg
   public_html/assets/images/services/client-david.jpg
   public_html/assets/images/services/client-mia.jpg
===================================================== */

body.services-page {
    padding-top: var(--header-height);
    background:
        linear-gradient(
            rgba(202, 240, 248, 0.96),
            rgba(144, 224, 239, 0.96)
        );
    color: var(--color-navy);
}


/* =====================================================
   SERVICES PAGE — SHARED STRUCTURE
===================================================== */

body.services-page section {
    scroll-margin-top: var(--header-height);
}

body.services-page .section-inner {
    position: relative;
    z-index: 2;
}

body.services-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.services-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.services-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.services-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — HERO SECTION
===================================================== */

body.services-page .services-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.72),
            rgba(0, 119, 182, 0.48)
        ),
        url("../images/services/services-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.services-page .services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 16% 22%,
            rgba(0, 255, 0, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(255, 204, 0, 0.24),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.36),
            rgba(202, 240, 248, 0.10)
        );

    pointer-events: none;
}

body.services-page .services-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.services-page .services-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.services-page .services-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — TRUST STRIP
===================================================== */

body.services-page .services-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.services-page .services-trust-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;
    text-align: center;
}

body.services-page .services-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   SERVICES PAGE — INTRO SECTION
===================================================== */

body.services-page .services-intro-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );

    text-align: center;
}

body.services-page .services-intro-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: stretch;
}

body.services-page .services-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 760px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.services-page .services-intro-content p:not(.section-label) {
    max-width: 760px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .services-intro-image {
    min-height: 430px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.services-page .services-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 398px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}


/* =====================================================
   SERVICES PAGE — OVERVIEW SECTION
===================================================== */

body.services-page .services-overview-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.services-page .service-overview-card {
    min-height: 460px;
    padding: 18px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    text-align: center;
    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

body.services-page .service-overview-card:hover,
body.services-page .service-overview-card:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
}

body.services-page .service-image-wrap {
    width: 100%;
    height: 230px;
    margin: 0 auto 18px;

    border-radius: 16px;
    overflow: hidden;

    background: var(--color-light-blue);
}

body.services-page .service-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transition: transform 0.45s ease;
}

body.services-page .service-overview-card:hover .service-image-wrap img {
    transform: scale(1.06);
}

body.services-page .service-overview-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .service-overview-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.98rem;
    line-height: 1.62;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — SERVICE EDUCATION SECTION
===================================================== */

body.services-page .service-education-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-light-blue),
            var(--color-pale-blue)
        );

    text-align: center;
}

body.services-page .service-education-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.services-page .service-education-card {
    min-height: 300px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.services-page .service-education-card i {
    color: var(--color-gold);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.services-page .service-education-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .service-education-card p {
    max-width: 330px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — SERVICE DETAIL SECTIONS
===================================================== */

body.services-page .service-detail-section {
    padding: 90px 0;
    text-align: center;
}

body.services-page .service-detail-bookkeeping,
body.services-page .service-detail-cleanup {
    background: var(--color-pale-blue);
}

body.services-page .service-detail-quickbooks {
    background: var(--color-light-blue);
}

body.services-page .service-detail-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: stretch;
}

body.services-page .service-detail-layout-reverse {
    grid-template-columns: 0.95fr 1.05fr;
}

body.services-page .service-detail-copy {
    padding: 38px 32px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.services-page .service-detail-copy h2 {
    color: var(--color-navy);
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 760px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.services-page .service-detail-copy p:not(.section-label) {
    max-width: 760px;
    margin: 0 auto 18px;

    color: #000000;
    font-size: 1.04rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .service-detail-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    max-width: 760px;
    margin: 24px auto 0;
}

body.services-page .service-detail-points div {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 14px;

    background: var(--color-pale-blue);
    border-left: 5px solid var(--color-gold);
    border-radius: 12px;

    color: var(--color-navy);
    font-weight: 900;

    text-align: left;
}

body.services-page .service-detail-points i {
    color: var(--color-blue);
    flex: 0 0 auto;
}

body.services-page .service-detail-image {
    min-height: 430px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.92);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.services-page .service-detail-image img {
    width: 100%;
    height: 100%;
    min-height: 398px;

    object-fit: cover;
    object-position: center;

    border-radius: 16px;
    display: block;
}


/* =====================================================
   SERVICES PAGE — TAX + REPORTING SECTION
===================================================== */

body.services-page .tax-reporting-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.services-page .tax-reporting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.services-page .tax-reporting-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.services-page .tax-reporting-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.services-page .tax-reporting-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .tax-reporting-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — PROCESS SECTION

   Layout:
   Row 1: Card | Card | Card
   Row 2: Card | Image | Image
===================================================== */

body.services-page .services-process-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.services-page .services-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.services-page .services-process-card {
    min-height: 280px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.services-page .services-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.services-page .services-process-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .services-process-card p {
    max-width: 330px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .services-process-anchor {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

body.services-page .services-process-image {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    min-height: 280px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.92);
    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.services-page .services-process-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   SERVICES PAGE — FUNDING BROKER SECTION
===================================================== */

body.services-page .services-funding-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-funding-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.services-page .services-funding-image {
    min-height: 520px;
    padding: 16px;

    background: rgba(202, 240, 248, 0.12);
    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.services-page .services-funding-image img {
    width: 100%;
    height: 100%;
    min-height: 488px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.services-page .services-funding-content {
    padding: 38px 32px;

    background: rgba(3, 4, 94, 0.62);
    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-funding-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.services-page .services-funding-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .funding-readiness-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    max-width: 780px;
    margin: 28px auto 0;
}

body.services-page .funding-readiness-list div {
    min-width: 0;
    padding: 15px 12px;

    background: rgba(202, 240, 248, 0.10);
    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 14px;

    color: var(--color-pale-blue);
    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    text-align: center;
}

body.services-page .funding-readiness-list i {
    color: var(--color-gold);
}


/* =====================================================
   SERVICES PAGE — FUNDING EDUCATION SECTION
===================================================== */

body.services-page .funding-education-services-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.services-page .funding-education-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.services-page .funding-education-card {
    min-height: 290px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.services-page .funding-education-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.services-page .funding-education-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .funding-education-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — VALUE SECTION
===================================================== */

body.services-page .services-value-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.services-page .services-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.services-page .services-value-card {
    min-height: 280px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.services-page .services-value-card i {
    color: var(--color-gold);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.services-page .services-value-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .services-value-card p {
    max-width: 330px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — TESTIMONIALS SECTION
===================================================== */

body.services-page .services-testimonials-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.services-page .services-testimonial-card {
    min-height: 360px;
    padding: 30px 24px;

    border-radius: 20px;
    box-shadow: var(--shadow-medium);

    color: var(--color-white);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.services-page .services-testimonial-card.gold-theme {
    background:
        linear-gradient(
            145deg,
            rgba(61, 61, 61, 0.98),
            rgba(46, 46, 46, 0.98)
        );
    border: 2px solid var(--color-gold);
}

body.services-page .services-testimonial-card.navy-theme {
    background:
        linear-gradient(
            145deg,
            rgba(26, 34, 56, 0.98),
            rgba(13, 21, 36, 0.98)
        );
    border: 2px solid var(--color-blue);
}

body.services-page .services-testimonial-card.emerald-theme {
    background:
        linear-gradient(
            145deg,
            rgba(18, 60, 45, 0.98),
            rgba(6, 27, 18, 0.98)
        );
    border: 2px solid var(--color-green);
}

body.services-page .testimonial-img {
    width: 92px;
    height: 92px;
    margin: 0 auto 20px;

    border-radius: 50%;
    overflow: hidden;

    border: 3px solid var(--color-gold);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.38);
}

body.services-page .testimonial-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}

body.services-page .services-testimonial-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.25;

    max-width: 100%;
    margin: 0 auto 14px;

    text-align: center;
    text-wrap: balance;
}

body.services-page .services-testimonial-card p {
    max-width: 330px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .services-testimonial-card span {
    display: block;

    color: var(--color-gold);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.35;

    text-align: center;
}


/* =====================================================
   SERVICES PAGE — SECURE COMMUNICATION SECTION
===================================================== */

body.services-page .services-secure-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-secure-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: stretch;
}

body.services-page .services-secure-content {
    padding: 38px 32px;

    background: rgba(3, 4, 94, 0.62);
    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    text-align: center;
}

body.services-page .services-secure-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 760px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.services-page .services-secure-content p:not(.section-label) {
    max-width: 760px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .services-secure-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

body.services-page .services-secure-grid div {
    min-height: 160px;
    padding: 24px 22px;

    background: rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.services-page .services-secure-grid i {
    color: var(--color-blue);
    font-size: 2rem;
    margin-bottom: 12px;
}

body.services-page .services-secure-grid h3 {
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 8px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .services-secure-grid p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.94rem;
    line-height: 1.55;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — FAQ SECTION
===================================================== */

body.services-page .services-faq-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

body.services-page .services-faq-card {
    min-height: 220px;
    padding: 28px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    text-align: center;
}

body.services-page .services-faq-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.services-page .services-faq-card p {
    max-width: 520px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.98rem;
    line-height: 1.62;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SERVICES PAGE — FINAL CTA SECTION

   This is the main action area.
===================================================== */

body.services-page .services-final-cta {
    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.services-page .services-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.services-page .services-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.services-page .services-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

/* Primary final button */
body.services-page .services-primary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.services-page .services-primary-btn:hover,
body.services-page .services-primary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

/* Secondary final button */
body.services-page .services-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.services-page .services-secondary-btn:hover,
body.services-page .services-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

/* Outline final button */
body.services-page .services-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.services-page .services-outline-btn:hover,
body.services-page .services-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   SERVICES.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.services-page .services-hero {
        padding: 68px 0;
    }

    body.services-page .services-hero-content {
        padding: 38px 28px;
    }

    body.services-page .services-intro-section,
    body.services-page .services-overview-section,
    body.services-page .service-education-section,
    body.services-page .service-detail-section,
    body.services-page .tax-reporting-section,
    body.services-page .services-process-section,
    body.services-page .services-funding-section,
    body.services-page .funding-education-services-section,
    body.services-page .services-value-section,
    body.services-page .services-testimonials-section,
    body.services-page .services-secure-section,
    body.services-page .services-faq-section,
    body.services-page .services-final-cta {
        padding: 62px 0;
    }

    body.services-page .services-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.services-page .services-intro-layout,
    body.services-page .service-detail-layout,
    body.services-page .service-detail-layout-reverse,
    body.services-page .services-funding-layout,
    body.services-page .services-secure-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.services-page .services-overview-grid,
    body.services-page .service-education-grid,
    body.services-page .tax-reporting-grid,
    body.services-page .services-process-grid,
    body.services-page .funding-education-grid,
    body.services-page .services-value-grid,
    body.services-page .services-testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.services-page .services-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    body.services-page .service-overview-card {
        min-height: 390px;
        padding: 14px;
    }

    body.services-page .service-image-wrap {
        height: 185px;
    }

    body.services-page .service-education-card,
    body.services-page .tax-reporting-card,
    body.services-page .services-process-card,
    body.services-page .funding-education-card,
    body.services-page .services-value-card {
        min-height: 230px;
        padding: 22px 14px;
    }

    body.services-page .services-testimonial-card {
        min-height: 320px;
        padding: 22px 14px;
    }

    body.services-page .services-intro-content,
    body.services-page .service-detail-copy,
    body.services-page .services-funding-content,
    body.services-page .services-secure-content {
        padding: 28px 22px;
    }

    body.services-page .services-intro-image,
    body.services-page .service-detail-image,
    body.services-page .services-funding-image {
        min-height: 360px;
        padding: 10px;
    }

    body.services-page .services-intro-image img,
    body.services-page .service-detail-image img,
    body.services-page .services-funding-image img {
        min-height: 340px;
        border-radius: 12px;
    }

    body.services-page .services-process-image {
        min-height: 230px;
        padding: 10px;
    }

    body.services-page .services-process-image img {
        min-height: 210px;
        border-radius: 10px;
    }

    body.services-page .service-overview-card p,
    body.services-page .service-education-card p,
    body.services-page .tax-reporting-card p,
    body.services-page .services-process-card p,
    body.services-page .funding-education-card p,
    body.services-page .services-value-card p,
    body.services-page .services-testimonial-card p,
    body.services-page .services-secure-grid p,
    body.services-page .services-faq-card p,
    body.services-page .section-header p {
        font-size: 0.86rem;
        line-height: 1.48;
    }
}


/* =====================================================
   SERVICES.HTML — MOBILE

   Keeps the same general page shape, scaled down:
   - Trust strip stays four across.
   - Service overview stays three across.
   - Education grids stay three across.
   - Process image keeps the two-box image rule.
===================================================== */

@media (max-width: 700px) {
    body.services-page .services-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.services-page .services-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.services-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.services-page .services-hero-content h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
        line-height: 1.08;
    }

    body.services-page .services-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.services-page .services-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.services-page .services-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.42rem, 1.9vw, 0.55rem);
    }

    body.services-page .section-header {
        margin-bottom: 24px;
    }

    body.services-page .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.services-page .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.services-page .services-intro-layout,
    body.services-page .service-detail-layout,
    body.services-page .service-detail-layout-reverse,
    body.services-page .services-funding-layout,
    body.services-page .services-secure-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.services-page .services-overview-grid,
    body.services-page .service-education-grid,
    body.services-page .tax-reporting-grid,
    body.services-page .services-process-grid,
    body.services-page .funding-education-grid,
    body.services-page .services-value-grid,
    body.services-page .services-testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.services-page .services-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.services-page .services-intro-content,
    body.services-page .service-detail-copy,
    body.services-page .services-funding-content,
    body.services-page .services-secure-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.services-page .services-intro-content h2,
    body.services-page .service-detail-copy h2,
    body.services-page .services-funding-content h2,
    body.services-page .services-secure-content h2 {
        font-size: clamp(1rem, 4.5vw, 1.35rem);
        line-height: 1.14;
    }

    body.services-page .services-intro-content p:not(.section-label),
    body.services-page .service-detail-copy p:not(.section-label),
    body.services-page .services-funding-content p:not(.section-label),
    body.services-page .services-secure-content p:not(.section-label) {
        font-size: clamp(0.58rem, 2.5vw, 0.74rem);
        line-height: 1.38;
    }

    body.services-page .services-intro-image,
    body.services-page .service-detail-image,
    body.services-page .services-funding-image {
        min-height: 260px;
        padding: 6px;
        border-radius: 12px;
    }

    body.services-page .services-intro-image img,
    body.services-page .service-detail-image img,
    body.services-page .services-funding-image img {
        min-height: 248px;
        border-radius: 9px;
    }

    body.services-page .service-overview-card,
    body.services-page .service-education-card,
    body.services-page .tax-reporting-card,
    body.services-page .services-process-card,
    body.services-page .funding-education-card,
    body.services-page .services-value-card,
    body.services-page .services-testimonial-card {
        min-height: 155px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.services-page .service-image-wrap {
        height: 82px;
        margin-bottom: 7px;
        border-radius: 7px;
    }

    body.services-page .service-overview-card h3,
    body.services-page .service-education-card h3,
    body.services-page .tax-reporting-card h3,
    body.services-page .services-process-card h3,
    body.services-page .funding-education-card h3,
    body.services-page .services-value-card h3,
    body.services-page .services-secure-grid h3,
    body.services-page .services-faq-card h3 {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.services-page .service-education-card i,
    body.services-page .tax-reporting-card i,
    body.services-page .funding-education-card i,
    body.services-page .services-value-card i,
    body.services-page .services-secure-grid i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    body.services-page .services-process-card span {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
        font-size: 0.62rem;
    }

    body.services-page .service-overview-card p,
    body.services-page .service-education-card p,
    body.services-page .tax-reporting-card p,
    body.services-page .services-process-card p,
    body.services-page .funding-education-card p,
    body.services-page .services-value-card p,
    body.services-page .services-testimonial-card p,
    body.services-page .services-secure-grid p,
    body.services-page .services-faq-card p {
        font-size: clamp(0.36rem, 1.7vw, 0.48rem);
        line-height: 1.28;
    }

    body.services-page .service-detail-points {
        gap: 5px;
        margin-top: 10px;
    }

    body.services-page .service-detail-points div {
        padding: 7px 6px;
        border-left-width: 3px;
        border-radius: 7px;
        font-size: clamp(0.38rem, 1.8vw, 0.5rem);
        gap: 4px;
    }

    body.services-page .services-process-image {
        min-height: 155px;
        padding: 6px;
        border-radius: 9px;
    }

    body.services-page .services-process-image img {
        min-height: 143px;
        border-radius: 7px;
    }

    body.services-page .funding-readiness-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 12px;
    }

    body.services-page .funding-readiness-list div {
        padding: 8px 4px;
        border-radius: 8px;
        gap: 4px;
        font-size: clamp(0.38rem, 1.8vw, 0.5rem);
    }

    body.services-page .testimonial-img {
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
        border-width: 2px;
    }

    body.services-page .services-testimonial-card h3 {
        font-size: clamp(0.38rem, 1.8vw, 0.52rem);
        line-height: 1.15;
        margin-bottom: 5px;
    }

    body.services-page .services-testimonial-card span {
        font-size: clamp(0.34rem, 1.6vw, 0.46rem);
    }

    body.services-page .services-secure-grid {
        gap: 7px;
    }

    body.services-page .services-secure-grid div {
        min-height: 118px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.services-page .services-faq-card {
        min-height: 140px;
        padding: 10px 8px;
        border-left-width: 4px;
        border-radius: 9px;
    }

    body.services-page .services-final-cta h2 {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
    }

    body.services-page .services-final-cta p {
        font-size: clamp(0.72rem, 3vw, 0.9rem);
        line-height: 1.45;
    }

    body.services-page .services-final-actions {
        gap: 8px;
        margin-top: 18px;
    }

    body.services-page .services-final-actions .cta-btn {
        font-size: 0.72rem;
        padding: 9px 12px;
    }
}

/* =====================================================
   SERVICES.HTML END
===================================================== */


















/* ===================== ALWAYS AT THE BOTTOM OF THE CSS PAGE ================================
   GLOBAL HEADER NAVIGATION — DROPDOWN + ACTIVE PAGE FIX

   Purpose:
   - Makes dropdown menus smooth, small, sleek, and professional.
   - Removes the hard-to-select gap between the main nav button and dropdown.
   - Allows users to hover the parent button and move smoothly into the dropdown.
   - Allows dropdowns to open on hover, keyboard focus, and mobile click.
   - Highlights the current selected page automatically.
   - Highlights the parent menu when a dropdown page is active.
   - Keeps styling consistent across all existing and future pages.
===================================================== */


/* =====================================================
   GLOBAL NAVIGATION START
===================================================== */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.nav-row {
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 15px;

    margin: 0;
    padding: 0;
}

.nav-row li,
.has-dropdown {
    position: relative;
}

.main-nav a {
    color: var(--color-pale-blue);
    text-decoration: none;
    font-weight: 700;

    padding: 8px 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
    color: var(--color-cyan);
    outline: none;
}

.main-nav .nav-cta {
    color: var(--color-navy);
    background: var(--color-green);

    padding: 9px 12px;
    border-radius: 6px;
}

.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus {
    color: var(--color-navy);
    background: var(--color-gold);
}


/* =====================================================
   DESKTOP DROPDOWN WINDOW

   Small, sleek, readable, and not too wide.
===================================================== */

.site-header .main-nav .dropdown-sub-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 2000;

    display: none;

    width: max-content;
    min-width: 165px;
    max-width: 230px;

    padding: 8px;
    margin: 0;

    list-style: none;

    background:
        linear-gradient(
            145deg,
            rgba(224, 251, 252, 0.98),
            rgba(194, 223, 227, 0.98)
        );

    border: 1px solid rgba(37, 50, 55, 0.12);
    border-radius: 14px;

    box-shadow:
        0 16px 34px rgba(37, 50, 55, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.42);

    transform: translateX(-50%);

    overflow: visible;
}

/* Invisible bridge between desktop parent link and dropdown */
.site-header .main-nav .has-dropdown::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1999;

    width: 190px;
    height: 12px;

    transform: translateX(-50%);
    background: transparent;
    pointer-events: auto;
}

.site-header .main-nav .has-dropdown:hover > .dropdown-sub-nav,
.site-header .main-nav .has-dropdown:focus-within > .dropdown-sub-nav {
    display: block;
}

/* Dropdown arrow */
.site-header .main-nav .has-dropdown > a::after {
    content: "▾";

    display: inline-block;
    margin-left: 7px;

    font-size: 0.75rem;
    line-height: 1;

    transition: transform 0.25s ease;
}

/* Dropdown arrow rotates when submenu is open */
.site-header .main-nav .has-dropdown:hover > a::after,
.site-header .main-nav .has-dropdown:focus-within > a::after,
.site-header .main-nav .has-dropdown.is-open > a::after,
.site-header .main-nav .has-dropdown.is-submenu-open > a::after {
    transform: rotate(180deg);
}


/* Parent menu highlight when submenu is open */
.site-header .main-nav .nav-row > li > a:hover,
.site-header .main-nav .nav-row > li > a:focus,
.site-header .main-nav .nav-row > li > a[aria-current="page"],
.site-header .main-nav .nav-row > li.is-current-parent > a,
.site-header .main-nav .has-dropdown:hover > a,
.site-header .main-nav .has-dropdown:focus-within > a,
.site-header .main-nav .has-dropdown.is-open > a,
.site-header .main-nav .has-dropdown.is-submenu-open > a {
    background-color: var(--color-gold);
    color: var(--color-navy);

    box-shadow: 0 8px 18px rgba(255, 204, 0, 0.28);
    outline: none;
}

.site-header .main-nav .dropdown-sub-nav li {
    width: 100%;
    margin: 0;
    padding: 0;

    white-space: nowrap;
}

.site-header .main-nav .dropdown-sub-nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 10px 14px;

    color: var(--color-navy);
    background: transparent;

    border-radius: 10px;

    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.site-header .main-nav .dropdown-sub-nav a:hover,
.site-header .main-nav .dropdown-sub-nav a:focus,
.site-header .main-nav .dropdown-sub-nav a[aria-current="page"] {
    background-color: var(--color-gold);
    color: var(--color-navy);

    box-shadow: 0 8px 18px rgba(255, 204, 0, 0.22);
    transform: translateY(-1px);

    outline: none;
}


/* =====================================================
   BURGER BUTTON
   JavaScript toggles .is-open on .main-nav.
===================================================== */

.nav-toggle {
    display: none;

    width: 48px;
    height: 48px;

    border: 2px solid var(--color-gold);
    border-radius: 14px;

    background: rgba(202, 240, 248, 0.08);
    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.nav-toggle:hover,
.nav-toggle:focus {
    background: rgba(255, 204, 0, 0.12);
    border-color: var(--color-green);

    transform: translateY(-2px);
    outline: none;
}

.nav-toggle-line {
    width: 25px;
    height: 3px;

    background: var(--color-gold);
    border-radius: 999px;

    display: block;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background-color 0.3s ease;
}

/* Burger turns into X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background: var(--color-green);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background: var(--color-green);
}


/* =====================================================
   MOBILE / TABLET BACKDROP
===================================================== */

body.nav-open::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 998;

    background: rgba(3, 4, 94, 0.45);
    backdrop-filter: blur(4px);
}


/* =====================================================
   TABLET / MOBILE BURGER MENU

   Objective:
   - Dropdown stays inside the burger panel.
   - Dropdown window is smaller, centered, and professional.
   - Dropdown buttons are centered and compact.
   - Supports both .is-open and .is-submenu-open so dropdowns
     work with either JavaScript version.
===================================================== */

@media (max-width: 1024px) {
    .site-header {
        z-index: 1000;
    }

    .header-container {
        position: relative;
    }

    .nav-toggle {
        display: flex;

        position: relative;
        z-index: 1003;

        flex-shrink: 0;
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 14px);
        right: 20px;
        left: auto;
        z-index: 1002;

        width: min(430px, calc(100vw - 32px));
        max-height: calc(100vh - var(--header-height) - 32px);

        overflow-y: auto;
        overflow-x: hidden;

        display: block;
        padding: 18px;

        background:
            linear-gradient(
                145deg,
                rgba(3, 4, 94, 0.98),
                rgba(0, 119, 182, 0.96)
            ),
            var(--color-navy);

        border: 1px solid rgba(202, 240, 248, 0.22);
        border-radius: 22px;

        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-12px) scale(0.98);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0) scale(1);
    }

    .nav-row {
        width: 100%;

        list-style: none;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;

        gap: 10px;

        margin: 0;
        padding: 0;
    }

    .nav-row li,
    .has-dropdown {
        width: 100%;
        position: relative;
    }

    .main-nav a {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 13px 15px;
        border-radius: 14px;

        color: var(--color-pale-blue);
        background: rgba(255, 255, 255, 0.055);

        border: 1px solid rgba(202, 240, 248, 0.12);

        text-align: center;
        text-decoration: none;

        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: 0.2px;

        transition:
            color 0.3s ease,
            background-color 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease,
            box-shadow 0.3s ease;
    }

    .main-nav a:hover,
    .main-nav a:focus {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);

        transform: none;
        outline: none;
    }

    .main-nav .nav-cta {
        color: var(--color-navy);
        background: var(--color-green);

        border-color: var(--color-green);
        box-shadow: 0 8px 20px rgba(0, 255, 0, 0.18);
    }

    .main-nav .nav-cta:hover,
    .main-nav .nav-cta:focus {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);
    }

    .site-header .main-nav .has-dropdown::after {
        display: none;
    }

    .site-header .main-nav .has-dropdown > a::after {
        content: "▾";

        display: inline-block;
        margin-left: 10px;

        font-size: 0.9rem;
        line-height: 1;

        transition: transform 0.3s ease;
    }

    .site-header .main-nav .has-dropdown.is-open > a::after,
    .site-header .main-nav .has-dropdown.is-submenu-open > a::after {
        transform: rotate(180deg);
    }

    .site-header .main-nav .has-dropdown.is-open > a,
    .site-header .main-nav .has-dropdown.is-submenu-open > a {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);

        box-shadow: 0 8px 18px rgba(255, 204, 0, 0.28);
    }

    .site-header .main-nav .has-dropdown .dropdown-sub-nav {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 1;

        transform: none;

        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;

        width: min(68%, 255px);
        min-width: 0;
        max-width: 255px;

        max-height: 0;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        margin: 0 auto;
        padding: 0;

        list-style: none;

        background:
            linear-gradient(
                145deg,
                rgba(224, 251, 252, 0.98),
                rgba(194, 223, 227, 0.98)
            );

        border: 1px solid rgba(255, 204, 0, 0.30);
        border-radius: 13px;

        box-shadow:
            0 12px 24px rgba(3, 4, 94, 0.20),
            inset 0 0 0 1px rgba(255, 255, 255, 0.34);

        transition:
            max-height 0.35s ease,
            opacity 0.3s ease,
            visibility 0.3s ease,
            padding 0.25s ease,
            margin-top 0.25s ease;
    }

    .site-header .main-nav .has-dropdown .dropdown-sub-nav::before {
        display: none;
    }

    .site-header .main-nav .has-dropdown.is-open > .dropdown-sub-nav,
    .site-header .main-nav .has-dropdown.is-submenu-open > .dropdown-sub-nav {
        max-height: 420px;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        margin-top: 6px;
        padding: 5px;
    }

    .site-header .main-nav .dropdown-sub-nav li {
        width: 100%;

        margin: 0;
        padding: 0;

        white-space: normal;
        overflow: hidden;
    }

    .site-header .main-nav .dropdown-sub-nav li a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: auto;

        padding: 7px 8px;

        color: var(--color-navy);
        background: rgba(255, 255, 255, 0.50);

        border: 1px solid rgba(3, 4, 94, 0.08);
        border-radius: 8px;

        font-size: clamp(0.58rem, 1.35vw, 0.72rem);
        font-weight: 900;
        line-height: 1.15;

        text-align: center;
        text-decoration: none;
        white-space: normal;

        box-shadow: none;
        transform: none;
    }

    .site-header .main-nav .dropdown-sub-nav li a:hover,
    .site-header .main-nav .dropdown-sub-nav li a:focus,
    .site-header .main-nav .dropdown-sub-nav li a[aria-current="page"] {
        color: var(--color-navy);
        background: var(--color-gold);
        border-color: var(--color-gold);

        transform: none;
        outline: none;
    }
}


/* =====================================================
   SMALL MOBILE BURGER MENU
===================================================== */

@media (max-width: 640px) {
    .main-nav {
        top: calc(100% + 10px);
        right: 16px;

        width: calc(100vw - 32px);

        padding: 16px;
        border-radius: 20px;
    }

    .main-nav a {
        padding: 12px 13px;
        font-size: 0.88rem;
    }

    .site-header .main-nav .has-dropdown .dropdown-sub-nav {
        width: min(66%, 230px);
        max-width: 230px;

        gap: 4px;
        border-radius: 10px;
    }

    .site-header .main-nav .has-dropdown.is-open > .dropdown-sub-nav,
    .site-header .main-nav .has-dropdown.is-submenu-open > .dropdown-sub-nav {
        max-height: 300px;

        padding: 5px;
        margin-top: 6px;
    }

    .site-header .main-nav .dropdown-sub-nav li a {
        padding: 6px 7px;

        border-radius: 8px;

        font-size: 0.66rem;
        line-height: 1.15;
    }
}

/* =====================================================
   GLOBAL NAVIGATION END
===================================================== */




/* =====================================================
   INDUSTRIES.HTML START

   Purpose:
   - Styles the Industries page only.
   - Keeps text left-aligned inside centered containers.
   - Keeps all card titles on one horizontal line.
   - Keeps buttons in the final CTA so visitors go through
     the full page first.
   - Keeps desktop, tablet, and mobile visually consistent.
   - Uses one image to fill two missing grid slots where needed.

   Required images:
   public_html/assets/images/industries/industries-hero-background.jpg
   public_html/assets/images/industries/industries-intro-feature.jpg
   public_html/assets/images/industries/auto-industry.jpg
   public_html/assets/images/industries/construction-industry.jpg
   public_html/assets/images/industries/education-industry.jpg
   public_html/assets/images/industries/entertainment-industry.jpg
   public_html/assets/images/industries/healthcare-industry.jpg
   public_html/assets/images/industries/mechanic-industry.jpg
   public_html/assets/images/industries/retail-industry.jpg
   public_html/assets/images/industries/restaurant-industry.jpg
   public_html/assets/images/industries/trucking-industry.jpg
   public_html/assets/images/industries/technology-industry.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.industries-page {
    padding-top: var(--header-height);
    background:
        linear-gradient(
            rgba(202, 240, 248, 0.96),
            rgba(144, 224, 239, 0.96)
        );
    color: var(--color-navy);
}


/* =====================================================
   INDUSTRIES PAGE — SHARED STRUCTURE
===================================================== */

body.industries-page section {
    scroll-margin-top: var(--header-height);
}

body.industries-page .section-inner {
    position: relative;
    z-index: 2;
}

body.industries-page .section-label {
    display: inline-block;

    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.industries-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.industries-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.industries-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   INDUSTRIES PAGE — HERO SECTION
===================================================== */

body.industries-page .industries-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/industries-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.industries-page .industries-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.industries-page .industries-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.industries-page .industries-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.industries-page .industries-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   INDUSTRIES PAGE — TRUST STRIP
===================================================== */

body.industries-page .industries-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.industries-page .industries-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.industries-page .industries-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.industries-page .industries-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   INDUSTRIES PAGE — INTRO SECTION
===================================================== */

body.industries-page .industries-intro-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-pale-blue),
            var(--color-light-blue)
        );

    text-align: center;
}

body.industries-page .industries-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.industries-page .industries-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.industries-page .industries-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.industries-page .industries-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.industries-page .industries-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.industries-page .industries-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   INDUSTRIES PAGE — INDUSTRY EXPERTISE GRID
===================================================== */

body.industries-page .industries-overview-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.industries-page .industries-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.industries-page .industry-card {
    min-width: 0;
    min-height: 390px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    text-align: center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

body.industries-page .industry-card:hover,
body.industries-page .industry-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

body.industries-page .industry-card a {
    width: 100%;
    height: 100%;

    color: inherit;
    text-decoration: none;

    display: flex;
    flex-direction: column;

    text-align: center;
}

body.industries-page .industry-card img {
    width: 100%;
    height: 190px;

    object-fit: cover;
    object-position: center;

    display: block;

    transition: transform 0.4s ease;
}

body.industries-page .industry-card:hover img,
body.industries-page .industry-card:focus-within img {
    transform: scale(1.04);
}

body.industries-page .industry-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 18px auto 10px;
    padding: 0 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.industries-page .industry-card p {
    max-width: 240px;
    margin: 0 auto;
    padding: 0 12px 20px;

    color: #000000;
    font-size: 0.88rem;
    line-height: 1.52;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   INDUSTRIES PAGE — BENEFITS SECTION

   Layout:
   Row 1: Card | Card | Card
   Row 2: Card | Image | Image
===================================================== */

body.industries-page .industry-benefits-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.industries-page .industry-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.industries-page .industry-benefit-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.industries-page .industry-benefit-card:hover,
body.industries-page .industry-benefit-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.industries-page .industry-benefit-card i {
    color: var(--color-blue);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

body.industries-page .industry-benefit-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.industries-page .industry-benefit-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

/* Fourth card stays in the first slot of the second row */
body.industries-page .industry-benefit-anchor {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* One image fills the two missing grid slots */
body.industries-page .industry-benefit-image {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.industries-page .industry-benefit-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   INDUSTRIES PAGE — PROCESS SECTION
===================================================== */

body.industries-page .industry-process-section {
    padding: 90px 0;
    background: var(--color-pale-blue);
    text-align: center;
}

body.industries-page .industry-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.industries-page .industry-process-card {
    min-height: 300px;
    padding: 30px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 18px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.industries-page .industry-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.industries-page .industry-process-card h3 {
    color: var(--color-white);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.industries-page .industry-process-card p {
    max-width: 330px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   INDUSTRIES PAGE — TESTIMONIALS
===================================================== */

body.industries-page .industry-testimonials-section {
    padding: 90px 0;
    background: var(--color-light-blue);
    text-align: center;
}

body.industries-page .industry-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.industries-page .industry-testimonial-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.industries-page .industry-testimonial-card p {
    max-width: 330px;
    margin: 0 auto 18px;

    color: #000000;
    font-size: 0.98rem;
    line-height: 1.65;
    font-style: italic;

    text-align: left;
    text-wrap: pretty;
}

body.industries-page .industry-testimonial-card h3 {
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 900;

    margin: 0 auto 4px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.industries-page .industry-testimonial-card span {
    color: var(--color-blue);
    font-size: 0.9rem;
    font-weight: 800;

    text-align: center;
}


/* =====================================================
   INDUSTRIES PAGE — ELEGANT INDUSTRY FAQ SECTION

   Used on:
   industries.html

   HTML classes:
   .industry-faq-section
   .industry-faq-list
   .industry-faq-item
===================================================== */

body.industries-page .industry-faq-section {
    position: relative;
    padding: 100px 0;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 204, 0, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(0, 180, 216, 0.22),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 1),
            rgba(0, 119, 182, 0.96)
        );

    color: var(--color-pale-blue);
    text-align: center;
    overflow: hidden;
}

body.industries-page .industry-faq-section::before {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 1;

    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 34px;

    pointer-events: none;
}

body.industries-page .industry-faq-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
    opacity: 0.38;

    pointer-events: none;
}

body.industries-page .industry-faq-section .section-inner {
    position: relative;
    z-index: 2;
}

body.industries-page .industry-faq-section .section-header {
    max-width: 940px;
    margin: 0 auto 46px;
    text-align: center;
}

body.industries-page .industry-faq-section .section-header h2 {
    color: var(--color-white);
    font-size: clamp(2.15rem, 4.4vw, 3.35rem);
    font-weight: 900;
    line-height: 1.1;

    margin: 0 auto 18px;

    text-align: center;
    text-wrap: balance;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

body.industries-page .industry-faq-section .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.75;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}

body.industries-page .industry-faq-list {
    max-width: 1020px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;

    counter-reset: industryFaq;
    text-align: left;
}

body.industries-page .industry-faq-item {
    counter-increment: industryFaq;

    position: relative;
    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(224, 247, 250, 0.94)
        );

    border: 1px solid rgba(202, 240, 248, 0.28);
    border-radius: 22px;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

body.industries-page .industry-faq-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;

    width: 8px;

    background:
        linear-gradient(
            180deg,
            var(--color-gold),
            var(--color-blue),
            var(--color-green)
        );
}

body.industries-page .industry-faq-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 204, 0, 0.75),
            rgba(202, 240, 248, 0.35),
            transparent
        );
}

body.industries-page .industry-faq-item:hover,
body.industries-page .industry-faq-item:focus-within {
    transform: translateY(-3px);

    border-color: rgba(255, 204, 0, 0.45);

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 204, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.70);
}

body.industries-page .industry-faq-item summary {
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;

    padding: 24px 24px 24px 26px;

    color: var(--color-navy);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.32;

    cursor: pointer;
    list-style: none;

    text-align: left;
    text-wrap: pretty;
}

body.industries-page .industry-faq-item summary::-webkit-details-marker {
    display: none;
}

body.industries-page .industry-faq-item summary::before {
    content: counter(industryFaq, decimal-leading-zero);

    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    color: var(--color-navy);
    background:
        linear-gradient(
            145deg,
            var(--color-gold),
            rgba(255, 230, 105, 0.95)
        );

    border-radius: 14px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.5px;

    box-shadow:
        0 10px 22px rgba(255, 204, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

body.industries-page .industry-faq-item summary::after {
    content: "+";

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-white);
    background:
        linear-gradient(
            145deg,
            var(--color-navy),
            var(--color-blue)
        );

    border-radius: 50%;

    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;

    box-shadow:
        0 10px 20px rgba(3, 4, 94, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

body.industries-page .industry-faq-item[open] summary::after {
    content: "–";

    color: var(--color-navy);
    background:
        linear-gradient(
            145deg,
            var(--color-gold),
            rgba(255, 230, 105, 0.95)
        );
}

body.industries-page .industry-faq-item summary:focus {
    outline: 3px solid rgba(255, 204, 0, 0.55);
    outline-offset: -4px;
}

body.industries-page .industry-faq-item p {
    max-width: 900px;
    margin: 0;
    padding: 0 28px 26px 86px;

    color: #000000;
    font-size: 0.98rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}

body.industries-page .industry-faq-item[open] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1),
            rgba(202, 240, 248, 0.96)
        );

    border-color: rgba(255, 204, 0, 0.48);
}

body.industries-page .industry-faq-item[open] summary {
    padding-bottom: 18px;
}


/* =====================================================
   INDUSTRIES PAGE — FAQ TABLET
===================================================== */

@media (max-width: 1024px) {
    body.industries-page .industry-faq-section {
        padding: 70px 0;
    }

    body.industries-page .industry-faq-section::before {
        inset: 16px;
        border-radius: 24px;
    }

    body.industries-page .industry-faq-section .section-header {
        margin-bottom: 34px;
    }

    body.industries-page .industry-faq-section .section-header h2 {
        font-size: clamp(1.65rem, 4vw, 2.35rem);
    }

    body.industries-page .industry-faq-section .section-header p {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    body.industries-page .industry-faq-list {
        gap: 14px;
    }

    body.industries-page .industry-faq-item {
        border-radius: 18px;
    }

    body.industries-page .industry-faq-item summary {
        grid-template-columns: auto 1fr auto;
        gap: 12px;

        padding: 20px 18px 20px 20px;

        font-size: 0.92rem;
        line-height: 1.3;
    }

    body.industries-page .industry-faq-item summary::before {
        width: 38px;
        height: 38px;

        border-radius: 12px;
        font-size: 0.74rem;
    }

    body.industries-page .industry-faq-item summary::after {
        width: 30px;
        height: 30px;

        font-size: 1.1rem;
    }

    body.industries-page .industry-faq-item p {
        padding: 0 20px 22px 70px;

        font-size: 0.86rem;
        line-height: 1.52;
    }
}


/* =====================================================
   INDUSTRIES PAGE — FAQ MOBILE
===================================================== */

@media (max-width: 700px) {
    body.industries-page .industry-faq-section {
        padding: 48px 0;
    }

    body.industries-page .industry-faq-section::before {
        inset: 10px;
        border-radius: 18px;
    }

    body.industries-page .industry-faq-section .section-header {
        margin-bottom: 26px;
    }

    body.industries-page .industry-faq-section .section-header h2 {
        font-size: clamp(1.18rem, 5vw, 1.6rem);
        line-height: 1.14;
    }

    body.industries-page .industry-faq-section .section-header p {
        font-size: clamp(0.72rem, 3vw, 0.86rem);
        line-height: 1.44;
    }

    body.industries-page .industry-faq-list {
        gap: 11px;
    }

    body.industries-page .industry-faq-item {
        border-radius: 14px;
    }

    body.industries-page .industry-faq-item::before {
        width: 5px;
    }

    body.industries-page .industry-faq-item summary {
        grid-template-columns: auto 1fr auto;
        gap: 9px;

        padding: 15px 12px 15px 13px;

        font-size: clamp(0.72rem, 3.1vw, 0.88rem);
        line-height: 1.28;
    }

    body.industries-page .industry-faq-item summary::before {
        width: 30px;
        height: 30px;

        border-radius: 9px;
        font-size: 0.58rem;
    }

    body.industries-page .industry-faq-item summary::after {
        width: 24px;
        height: 24px;

        font-size: 0.95rem;
    }

    body.industries-page .industry-faq-item p {
        padding: 0 14px 16px 52px;

        font-size: clamp(0.68rem, 2.8vw, 0.82rem);
        line-height: 1.44;
    }
}


/* =====================================================
   INDUSTRIES PAGE — FINAL CTA
===================================================== */

body.industries-page .industries-final-cta {
    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.industries-page .industries-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.industries-page .industries-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.industries-page .industries-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

/* Primary and secondary buttons use company vivid green */
body.industries-page .industries-primary-btn,
body.industries-page .industries-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.industries-page .industries-primary-btn:hover,
body.industries-page .industries-primary-btn:focus,
body.industries-page .industries-secondary-btn:hover,
body.industries-page .industries-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

/* Funding button as elegant outline */
body.industries-page .industries-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.industries-page .industries-outline-btn:hover,
body.industries-page .industries-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   INDUSTRIES PAGE — BACK TO TOP
===================================================== */

body.industries-page #backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: var(--color-blue);
    color: var(--color-pale-blue);

    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 119, 182, 0.8);

    display: none;
    align-items: center;
    justify-content: center;

    font-size: 20px;

    transition: background-color 0.3s ease, transform 0.3s ease;
}

body.industries-page #backToTop.is-visible {
    display: flex;
}

body.industries-page #backToTop:hover,
body.industries-page #backToTop:focus {
    background: var(--color-gold);
    color: var(--color-navy);
    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   INDUSTRIES.HTML — TABLET

   Rule:
   - Same desktop layout, scaled down.
   - No stacking unless necessary.
   - Cards, images, and text shrink together.
===================================================== */

@media (max-width: 1024px) {
    body.industries-page .industries-hero {
        padding: 68px 0;
    }

    body.industries-page .industries-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.industries-page .industries-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.industries-page .industries-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.industries-page .industries-intro-section,
    body.industries-page .industries-overview-section,
    body.industries-page .industry-benefits-section,
    body.industries-page .industry-process-section,
    body.industries-page .industry-testimonials-section,
    body.industries-page .industry-faq-section,
    body.industries-page .industries-final-cta {
        padding: 62px 0;
    }

    body.industries-page .section-header {
        margin-bottom: 30px;
    }

    body.industries-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.industries-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.industries-page .industries-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.industries-page .industries-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.industries-page .industries-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.industries-page .industries-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.industries-page .industries-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.industries-page .industries-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.industries-page .industries-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.industries-page .industries-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.industries-page .industries-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }

    body.industries-page .industry-card {
        min-height: 260px;
        border-radius: 12px;
    }

    body.industries-page .industry-card img {
        height: 120px;
    }

    body.industries-page .industry-card h3 {
        font-size: clamp(0.58rem, 1.35vw, 0.76rem);
        margin: 12px auto 6px;
        padding: 0 6px;
    }

    body.industries-page .industry-card p {
        font-size: clamp(0.5rem, 1.25vw, 0.66rem);
        line-height: 1.32;
        padding: 0 7px 12px;
        max-width: 100%;
    }

    body.industries-page .industry-benefits-grid,
    body.industries-page .industry-process-grid,
    body.industries-page .industry-testimonial-grid,
    body.industries-page .industry-faq-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.industries-page .industry-benefit-card,
    body.industries-page .industry-process-card,
    body.industries-page .industry-testimonial-card,
    body.industries-page .industry-faq-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.industries-page .industry-benefit-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.industries-page .industry-benefit-card h3,
    body.industries-page .industry-process-card h3,
    body.industries-page .industry-testimonial-card h3,
    body.industries-page .industry-faq-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.industries-page .industry-benefit-card p,
    body.industries-page .industry-process-card p,
    body.industries-page .industry-testimonial-card p,
    body.industries-page .industry-faq-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.industries-page .industry-process-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.industries-page .industry-testimonial-card span {
        font-size: 0.68rem;
    }

    body.industries-page .industry-benefit-image {
        grid-column: 2 / 4;
        grid-row: 2 / 3;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.industries-page .industry-benefit-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.industries-page .industries-final-cta h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.industries-page .industries-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   INDUSTRIES.HTML — MOBILE

   Rule:
   - Same visual structure as desktop, scaled down.
   - Keeps cards in rows instead of becoming oversized.
   - Keeps titles on one horizontal line.
===================================================== */

@media (max-width: 700px) {
    body.industries-page .industries-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.industries-page .industries-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.industries-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.industries-page .industries-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.industries-page .industries-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.industries-page .industries-intro-section,
    body.industries-page .industries-overview-section,
    body.industries-page .industry-benefits-section,
    body.industries-page .industry-process-section,
    body.industries-page .industry-testimonials-section,
    body.industries-page .industry-faq-section,
    body.industries-page .industries-final-cta {
        padding: 38px 0;
    }

    body.industries-page .section-header {
        margin-bottom: 22px;
    }

    body.industries-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.industries-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.industries-page .industries-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.industries-page .industries-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.industries-page .industries-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.industries-page .industries-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.industries-page .industries-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.industries-page .industries-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.industries-page .industries-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.industries-page .industries-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.industries-page .industries-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }

    body.industries-page .industry-card {
        min-height: 145px;
        border-radius: 8px;
    }

    body.industries-page .industry-card img {
        height: 60px;
    }

    body.industries-page .industry-card h3 {
        font-size: clamp(0.34rem, 1.8vw, 0.48rem);
        line-height: 1.12;

        margin: 7px auto 4px;
        padding: 0 3px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.industries-page .industry-card p {
        font-size: clamp(0.3rem, 1.45vw, 0.4rem);
        line-height: 1.22;

        max-width: 100%;
        padding: 0 4px 7px;

        text-align: left;
        text-wrap: pretty;
    }

    body.industries-page .industry-benefits-grid,
    body.industries-page .industry-process-grid,
    body.industries-page .industry-testimonial-grid,
    body.industries-page .industry-faq-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.industries-page .industry-benefit-card,
    body.industries-page .industry-process-card,
    body.industries-page .industry-testimonial-card,
    body.industries-page .industry-faq-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.industries-page .industry-benefit-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.industries-page .industry-benefit-card h3,
    body.industries-page .industry-process-card h3,
    body.industries-page .industry-testimonial-card h3,
    body.industries-page .industry-faq-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.industries-page .industry-benefit-card p,
    body.industries-page .industry-process-card p,
    body.industries-page .industry-testimonial-card p,
    body.industries-page .industry-faq-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.industries-page .industry-process-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.industries-page .industry-testimonial-card {
        border-left-width: 4px;
    }

    body.industries-page .industry-testimonial-card span {
        font-size: clamp(0.3rem, 1.45vw, 0.4rem);
        line-height: 1.15;
    }

    body.industries-page .industry-benefit-anchor {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    body.industries-page .industry-benefit-image {
        grid-column: 2 / 4;
        grid-row: 2 / 3;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.industries-page .industry-benefit-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.industries-page .industries-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
    }

    body.industries-page .industries-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.industries-page .industries-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.industries-page .industries-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }

    body.industries-page #backToTop {
        width: 40px;
        height: 40px;
        right: 16px;
        bottom: 18px;
        font-size: 16px;
    }
}

/* =====================================================
   INDUSTRIES.HTML END
===================================================== */


/* =====================================================
   CONSTRUCTION.HTML START

   Required images:
   public_html/assets/images/industries/construction-hero-background.jpg
   public_html/assets/images/industries/construction-page-background.jpg
   public_html/assets/images/industries/construction-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.construction-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.construction-page section {
    scroll-margin-top: var(--header-height);
}

body.construction-page .section-inner {
    position: relative;
    z-index: 2;
}

body.construction-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.construction-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.construction-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.construction-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONSTRUCTION PAGE — HERO
===================================================== */

body.construction-page .construction-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/construction-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.construction-page .construction-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.construction-page .construction-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.construction-page .construction-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.construction-page .construction-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONSTRUCTION PAGE — TRUST STRIP
===================================================== */

body.construction-page .construction-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.construction-page .construction-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.construction-page .construction-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.construction-page .construction-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   CONSTRUCTION PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.construction-page .construction-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/construction-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.construction-page .construction-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   CONSTRUCTION PAGE — INTRO
===================================================== */

body.construction-page .construction-intro-section,
body.construction-page .construction-services-section,
body.construction-page .construction-challenges-section,
body.construction-page .construction-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.construction-page .construction-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.construction-page .construction-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.construction-page .construction-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.construction-page .construction-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.construction-page .construction-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.construction-page .construction-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONSTRUCTION PAGE — SERVICES GRID
===================================================== */

body.construction-page .construction-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.construction-page .construction-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.construction-page .construction-service-card:hover,
body.construction-page .construction-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.construction-page .construction-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.construction-page .construction-service-card h3,
body.construction-page .construction-challenge-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.construction-page .construction-service-card p,
body.construction-page .construction-challenge-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.construction-page .construction-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.construction-page .construction-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.construction-page .construction-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   CONSTRUCTION PAGE — CHALLENGES
===================================================== */

body.construction-page .construction-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.construction-page .construction-challenge-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.construction-page .construction-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}


/* =====================================================
   CONSTRUCTION PAGE — FUNDING NOTE
===================================================== */

body.construction-page .construction-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.construction-page .construction-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.construction-page .construction-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CONSTRUCTION PAGE — FINAL CTA
===================================================== */

body.construction-page .construction-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.construction-page .construction-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.construction-page .construction-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.construction-page .construction-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.construction-page .construction-primary-btn,
body.construction-page .construction-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.construction-page .construction-primary-btn:hover,
body.construction-page .construction-primary-btn:focus,
body.construction-page .construction-secondary-btn:hover,
body.construction-page .construction-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.construction-page .construction-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.construction-page .construction-outline-btn:hover,
body.construction-page .construction-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   CONSTRUCTION.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.construction-page .construction-hero {
        padding: 68px 0;
    }

    body.construction-page .construction-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.construction-page .construction-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.construction-page .construction-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.construction-page .construction-intro-section,
    body.construction-page .construction-services-section,
    body.construction-page .construction-challenges-section,
    body.construction-page .construction-funding-note-section,
    body.construction-page .construction-final-cta {
        padding: 62px 0;
    }

    body.construction-page .section-header {
        margin-bottom: 30px;
    }

    body.construction-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.construction-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.construction-page .construction-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.construction-page .construction-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.construction-page .construction-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.construction-page .construction-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.construction-page .construction-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.construction-page .construction-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.construction-page .construction-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.construction-page .construction-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.construction-page .construction-services-grid,
    body.construction-page .construction-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.construction-page .construction-service-card,
    body.construction-page .construction-challenge-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.construction-page .construction-service-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.construction-page .construction-service-card h3,
    body.construction-page .construction-challenge-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.construction-page .construction-service-card p,
    body.construction-page .construction-challenge-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.construction-page .construction-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.construction-page .construction-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.construction-page .construction-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.construction-page .construction-funding-note-card {
        padding: 30px 24px;
    }

    body.construction-page .construction-funding-note-card p:not(.section-label),
    body.construction-page .construction-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   CONSTRUCTION.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.construction-page .construction-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.construction-page .construction-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.construction-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.construction-page .construction-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.construction-page .construction-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.construction-page .construction-intro-section,
    body.construction-page .construction-services-section,
    body.construction-page .construction-challenges-section,
    body.construction-page .construction-funding-note-section,
    body.construction-page .construction-final-cta {
        padding: 38px 0;
    }

    body.construction-page .section-header {
        margin-bottom: 22px;
    }

    body.construction-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.construction-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.construction-page .construction-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.construction-page .construction-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.construction-page .construction-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.construction-page .construction-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.construction-page .construction-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.construction-page .construction-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.construction-page .construction-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.construction-page .construction-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.construction-page .construction-services-grid,
    body.construction-page .construction-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.construction-page .construction-service-card,
    body.construction-page .construction-challenge-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.construction-page .construction-service-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.construction-page .construction-service-card h3,
    body.construction-page .construction-challenge-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.construction-page .construction-service-card p,
    body.construction-page .construction-challenge-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.construction-page .construction-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.construction-page .construction-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.construction-page .construction-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.construction-page .construction-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.construction-page .construction-funding-note-card h2,
    body.construction-page .construction-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.construction-page .construction-funding-note-card p:not(.section-label),
    body.construction-page .construction-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.construction-page .construction-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.construction-page .construction-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   CONSTRUCTION.HTML END
===================================================== */



/* =====================================================
   AUTO.HTML START

   Required images:
   public_html/assets/images/industries/auto-hero-background.jpg
   public_html/assets/images/industries/auto-page-background.jpg
   public_html/assets/images/industries/auto-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.auto-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.auto-page section {
    scroll-margin-top: var(--header-height);
}

body.auto-page .section-inner {
    position: relative;
    z-index: 2;
}

body.auto-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.auto-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.auto-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.auto-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   AUTO PAGE — HERO
===================================================== */

body.auto-page .auto-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/auto-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.auto-page .auto-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.auto-page .auto-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.auto-page .auto-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.auto-page .auto-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   AUTO PAGE — TRUST STRIP
===================================================== */

body.auto-page .auto-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.auto-page .auto-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.auto-page .auto-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.auto-page .auto-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   AUTO PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.auto-page .auto-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/auto-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.auto-page .auto-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   AUTO PAGE — INTRO
===================================================== */

body.auto-page .auto-intro-section,
body.auto-page .auto-services-section,
body.auto-page .auto-challenges-section,
body.auto-page .auto-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.auto-page .auto-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.auto-page .auto-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.auto-page .auto-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.auto-page .auto-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.auto-page .auto-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.auto-page .auto-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   AUTO PAGE — SERVICES GRID
===================================================== */

body.auto-page .auto-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.auto-page .auto-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.auto-page .auto-service-card:hover,
body.auto-page .auto-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.auto-page .auto-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.auto-page .auto-service-card h3,
body.auto-page .auto-challenge-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.auto-page .auto-service-card p,
body.auto-page .auto-challenge-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.auto-page .auto-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.auto-page .auto-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.auto-page .auto-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   AUTO PAGE — CHALLENGES
===================================================== */

body.auto-page .auto-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.auto-page .auto-challenge-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.auto-page .auto-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}


/* =====================================================
   AUTO PAGE — FUNDING NOTE
===================================================== */

body.auto-page .auto-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.auto-page .auto-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.auto-page .auto-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   AUTO PAGE — FINAL CTA
===================================================== */

body.auto-page .auto-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.auto-page .auto-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.auto-page .auto-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.auto-page .auto-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.auto-page .auto-primary-btn,
body.auto-page .auto-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.auto-page .auto-primary-btn:hover,
body.auto-page .auto-primary-btn:focus,
body.auto-page .auto-secondary-btn:hover,
body.auto-page .auto-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.auto-page .auto-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.auto-page .auto-outline-btn:hover,
body.auto-page .auto-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   AUTO.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.auto-page .auto-hero {
        padding: 68px 0;
    }

    body.auto-page .auto-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.auto-page .auto-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.auto-page .auto-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.auto-page .auto-intro-section,
    body.auto-page .auto-services-section,
    body.auto-page .auto-challenges-section,
    body.auto-page .auto-funding-note-section,
    body.auto-page .auto-final-cta {
        padding: 62px 0;
    }

    body.auto-page .section-header {
        margin-bottom: 30px;
    }

    body.auto-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.auto-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.auto-page .auto-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.auto-page .auto-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.auto-page .auto-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.auto-page .auto-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.auto-page .auto-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.auto-page .auto-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.auto-page .auto-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.auto-page .auto-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.auto-page .auto-services-grid,
    body.auto-page .auto-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.auto-page .auto-service-card,
    body.auto-page .auto-challenge-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.auto-page .auto-service-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.auto-page .auto-service-card h3,
    body.auto-page .auto-challenge-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.auto-page .auto-service-card p,
    body.auto-page .auto-challenge-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.auto-page .auto-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.auto-page .auto-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.auto-page .auto-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.auto-page .auto-funding-note-card {
        padding: 30px 24px;
    }

    body.auto-page .auto-funding-note-card p:not(.section-label),
    body.auto-page .auto-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   AUTO.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.auto-page .auto-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.auto-page .auto-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.auto-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.auto-page .auto-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.auto-page .auto-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.auto-page .auto-intro-section,
    body.auto-page .auto-services-section,
    body.auto-page .auto-challenges-section,
    body.auto-page .auto-funding-note-section,
    body.auto-page .auto-final-cta {
        padding: 38px 0;
    }

    body.auto-page .section-header {
        margin-bottom: 22px;
    }

    body.auto-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.auto-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.auto-page .auto-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.auto-page .auto-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.auto-page .auto-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.auto-page .auto-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.auto-page .auto-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.auto-page .auto-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.auto-page .auto-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.auto-page .auto-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.auto-page .auto-services-grid,
    body.auto-page .auto-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.auto-page .auto-service-card,
    body.auto-page .auto-challenge-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.auto-page .auto-service-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.auto-page .auto-service-card h3,
    body.auto-page .auto-challenge-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.auto-page .auto-service-card p,
    body.auto-page .auto-challenge-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.auto-page .auto-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.auto-page .auto-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.auto-page .auto-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.auto-page .auto-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.auto-page .auto-funding-note-card h2,
    body.auto-page .auto-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.auto-page .auto-funding-note-card p:not(.section-label),
    body.auto-page .auto-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.auto-page .auto-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.auto-page .auto-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   AUTO.HTML END
===================================================== */



/* =====================================================
   RESOURCES.HTML START

   Required images:
   public_html/assets/images/resources/resources-hero-background.jpg
   public_html/assets/images/resources/resources-page-background.jpg
   public_html/assets/images/resources/resources-financial-guides.jpg
   public_html/assets/images/resources/resources-tax-strategies.jpg
   public_html/assets/images/resources/resources-industry-solutions.jpg
   public_html/assets/images/resources/resources-advisory-feature.jpg
   public_html/assets/images/resources/resources-technology-feature.jpg
   public_html/assets/images/resources/resources-funding-readiness.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.resources-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.resources-page section {
    scroll-margin-top: var(--header-height);
}

body.resources-page .section-inner {
    position: relative;
    z-index: 2;
}

body.resources-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.resources-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.resources-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.resources-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESOURCES PAGE — HERO
===================================================== */

body.resources-page .resources-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/resources/resources-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.resources-page .resources-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.resources-page .resources-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.resources-page .resources-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.resources-page .resources-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESOURCES PAGE — TRUST STRIP
===================================================== */

body.resources-page .resources-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.resources-page .resources-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.resources-page .resources-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.resources-page .resources-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   RESOURCES PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.resources-page .resources-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/resources/resources-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.resources-page .resources-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   RESOURCES PAGE — INTRO
===================================================== */

body.resources-page .resources-intro-section,
body.resources-page .resources-feature-section,
body.resources-page .resources-education-section,
body.resources-page .resources-process-section,
body.resources-page .resources-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.resources-page .resources-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.resources-page .resources-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.resources-page .resources-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.resources-page .resources-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.resources-page .resources-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.resources-page .resources-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESOURCES PAGE — FEATURE GRID
===================================================== */

body.resources-page .resources-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.resources-page .resource-feature-card {
    min-height: 420px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    text-align: center;
}

body.resources-page .resource-feature-card:hover,
body.resources-page .resource-feature-card:focus-within {
    box-shadow: var(--shadow-medium);
}

/* Keeps resource feature images fully visible instead of cropped */
body.resources-page .resource-feature-card img {
    width: 100%;
    height: 345px;
    box-sizing: border-box;
    padding: 10px;

    object-fit: contain !important;
    object-position: center center;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.06),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.88);

    display: block;
}

body.resources-page .resource-feature-card div {
    padding: 24px 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    flex: 1;
}

body.resources-page .resource-feature-card i {
    color: var(--color-blue);
    font-size: 2rem;
    margin-bottom: 12px;
}

body.resources-page .resource-feature-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.resources-page .resource-feature-card p {
    max-width: 320px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.95rem;
    line-height: 1.58;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESOURCES PAGE — EDUCATION GRID
===================================================== */

body.resources-page .resources-education-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.resources-page .resource-education-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.resources-page .resource-education-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.resources-page .resource-education-card h3,
body.resources-page .resources-process-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.resources-page .resource-education-card p,
body.resources-page .resources-process-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.resources-page .resource-education-anchor {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

body.resources-page .resources-education-image {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.resources-page .resources-education-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   RESOURCES PAGE — PROCESS
===================================================== */

body.resources-page .resources-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.resources-page .resources-process-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.resources-page .resources-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}


/* =====================================================
   RESOURCES PAGE — FUNDING NOTE
===================================================== */

body.resources-page .resources-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.resources-page .resources-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.resources-page .resources-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESOURCES PAGE — FINAL CTA
===================================================== */

body.resources-page .resources-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.resources-page .resources-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.resources-page .resources-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.resources-page .resources-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.resources-page .resources-primary-btn,
body.resources-page .resources-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.resources-page .resources-primary-btn:hover,
body.resources-page .resources-primary-btn:focus,
body.resources-page .resources-secondary-btn:hover,
body.resources-page .resources-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.resources-page .resources-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.resources-page .resources-outline-btn:hover,
body.resources-page .resources-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   RESOURCES.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.resources-page .resources-hero {
        padding: 68px 0;
    }

    body.resources-page .resources-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.resources-page .resources-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.resources-page .resources-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.resources-page .resources-intro-section,
    body.resources-page .resources-feature-section,
    body.resources-page .resources-education-section,
    body.resources-page .resources-process-section,
    body.resources-page .resources-funding-note-section,
    body.resources-page .resources-final-cta {
        padding: 62px 0;
    }

    body.resources-page .section-header {
        margin-bottom: 30px;
    }

    body.resources-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.resources-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.resources-page .resources-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.resources-page .resources-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.resources-page .resources-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.resources-page .resources-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.resources-page .resources-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.resources-page .resources-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.resources-page .resources-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.resources-page .resources-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.resources-page .resources-feature-grid,
    body.resources-page .resources-education-grid,
    body.resources-page .resources-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.resources-page .resource-feature-card {
        min-height: 300px;
        border-radius: 13px;
    }

    body.resources-page .resource-feature-card img {
        height: 120px;
    }

    body.resources-page .resource-feature-card div {
        padding: 16px 10px;
    }

    body.resources-page .resource-feature-card i {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    body.resources-page .resource-feature-card h3,
    body.resources-page .resource-education-card h3,
    body.resources-page .resources-process-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.resources-page .resource-feature-card p,
    body.resources-page .resource-education-card p,
    body.resources-page .resources-process-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.resources-page .resource-education-card,
    body.resources-page .resources-process-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.resources-page .resource-education-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.resources-page .resources-process-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.resources-page .resources-education-image {
        grid-column: 2 / 4;
        grid-row: 2 / 3;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.resources-page .resources-education-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.resources-page .resources-funding-note-card {
        padding: 30px 24px;
    }

    body.resources-page .resources-funding-note-card p:not(.section-label),
    body.resources-page .resources-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   RESOURCES.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.resources-page .resources-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.resources-page .resources-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.resources-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.resources-page .resources-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.resources-page .resources-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.resources-page .resources-intro-section,
    body.resources-page .resources-feature-section,
    body.resources-page .resources-education-section,
    body.resources-page .resources-process-section,
    body.resources-page .resources-funding-note-section,
    body.resources-page .resources-final-cta {
        padding: 38px 0;
    }

    body.resources-page .section-header {
        margin-bottom: 22px;
    }

    body.resources-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.resources-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.resources-page .resources-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.resources-page .resources-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.resources-page .resources-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.resources-page .resources-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.resources-page .resources-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.resources-page .resources-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.resources-page .resources-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.resources-page .resources-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.resources-page .resources-feature-grid,
    body.resources-page .resources-education-grid,
    body.resources-page .resources-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.resources-page .resource-feature-card {
        min-height: 155px;
        border-radius: 9px;
    }

    body.resources-page .resource-feature-card img {
        height: 58px;
    }

    body.resources-page .resource-feature-card div {
        padding: 8px 5px;
    }

    body.resources-page .resource-feature-card i {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    body.resources-page .resource-feature-card h3,
    body.resources-page .resource-education-card h3,
    body.resources-page .resources-process-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.resources-page .resource-feature-card p,
    body.resources-page .resource-education-card p,
    body.resources-page .resources-process-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.resources-page .resource-education-card,
    body.resources-page .resources-process-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.resources-page .resource-education-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.resources-page .resources-process-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.resources-page .resources-education-image {
        grid-column: 2 / 4;
        grid-row: 2 / 3;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.resources-page .resources-education-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.resources-page .resources-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.resources-page .resources-funding-note-card h2,
    body.resources-page .resources-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.resources-page .resources-funding-note-card p:not(.section-label),
    body.resources-page .resources-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.resources-page .resources-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.resources-page .resources-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   RESOURCES.HTML END
===================================================== */



/* =====================================================
   EDUCATION.HTML START

   Required images:
   public_html/assets/images/industries/education-hero-background.jpg
   public_html/assets/images/industries/education-page-background.jpg
   public_html/assets/images/industries/education-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.education-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.education-page section {
    scroll-margin-top: var(--header-height);
}

body.education-page .section-inner {
    position: relative;
    z-index: 2;
}

body.education-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.education-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.education-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.education-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   EDUCATION PAGE — HERO
===================================================== */

body.education-page .education-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/education-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.education-page .education-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.62),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.education-page .education-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.education-page .education-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.education-page .education-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   EDUCATION PAGE — TRUST STRIP
===================================================== */

body.education-page .education-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.education-page .education-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.education-page .education-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.education-page .education-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   EDUCATION PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.education-page .education-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/education-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.education-page .education-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   EDUCATION PAGE — INTRO
===================================================== */

body.education-page .education-intro-section,
body.education-page .education-services-section,
body.education-page .education-challenges-section,
body.education-page .education-organization-section,
body.education-page .education-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.education-page .education-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.education-page .education-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.education-page .education-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.education-page .education-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.education-page .education-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.education-page .education-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   EDUCATION PAGE — SERVICES GRID
===================================================== */

body.education-page .education-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.education-page .education-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.education-page .education-service-card:hover,
body.education-page .education-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.education-page .education-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.education-page .education-service-card h3,
body.education-page .education-challenge-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.education-page .education-service-card p,
body.education-page .education-challenge-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.education-page .education-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.education-page .education-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.education-page .education-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   EDUCATION PAGE — CHALLENGES
===================================================== */

body.education-page .education-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.education-page .education-challenge-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.education-page .education-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}


/* =====================================================
   EDUCATION PAGE — ORGANIZATION + FUNDING NOTE
===================================================== */

body.education-page .education-organization-card,
body.education-page .education-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.education-page .education-organization-card h2,
body.education-page .education-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.education-page .education-organization-card p:not(.section-label),
body.education-page .education-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   EDUCATION PAGE — FINAL CTA
===================================================== */

body.education-page .education-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.education-page .education-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.education-page .education-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.education-page .education-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.education-page .education-primary-btn,
body.education-page .education-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.education-page .education-primary-btn:hover,
body.education-page .education-primary-btn:focus,
body.education-page .education-secondary-btn:hover,
body.education-page .education-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.education-page .education-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.education-page .education-outline-btn:hover,
body.education-page .education-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   EDUCATION.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.education-page .education-hero {
        padding: 68px 0;
    }

    body.education-page .education-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.education-page .education-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.education-page .education-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.education-page .education-intro-section,
    body.education-page .education-services-section,
    body.education-page .education-challenges-section,
    body.education-page .education-organization-section,
    body.education-page .education-funding-note-section,
    body.education-page .education-final-cta {
        padding: 62px 0;
    }

    body.education-page .section-header {
        margin-bottom: 30px;
    }

    body.education-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.education-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.education-page .education-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.education-page .education-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.education-page .education-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.education-page .education-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.education-page .education-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.education-page .education-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.education-page .education-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.education-page .education-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.education-page .education-services-grid,
    body.education-page .education-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.education-page .education-service-card,
    body.education-page .education-challenge-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.education-page .education-service-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.education-page .education-service-card h3,
    body.education-page .education-challenge-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.education-page .education-service-card p,
    body.education-page .education-challenge-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.education-page .education-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.education-page .education-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.education-page .education-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.education-page .education-organization-card,
    body.education-page .education-funding-note-card {
        padding: 30px 24px;
    }

    body.education-page .education-organization-card p:not(.section-label),
    body.education-page .education-funding-note-card p:not(.section-label),
    body.education-page .education-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   EDUCATION.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.education-page .education-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.education-page .education-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.education-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.education-page .education-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.education-page .education-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.education-page .education-intro-section,
    body.education-page .education-services-section,
    body.education-page .education-challenges-section,
    body.education-page .education-organization-section,
    body.education-page .education-funding-note-section,
    body.education-page .education-final-cta {
        padding: 38px 0;
    }

    body.education-page .section-header {
        margin-bottom: 22px;
    }

    body.education-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.education-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.education-page .education-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.education-page .education-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.education-page .education-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.education-page .education-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.education-page .education-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.education-page .education-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.education-page .education-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.education-page .education-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.education-page .education-services-grid,
    body.education-page .education-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.education-page .education-service-card,
    body.education-page .education-challenge-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.education-page .education-service-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.education-page .education-service-card h3,
    body.education-page .education-challenge-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.education-page .education-service-card p,
    body.education-page .education-challenge-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.education-page .education-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.education-page .education-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.education-page .education-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.education-page .education-organization-card,
    body.education-page .education-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.education-page .education-organization-card h2,
    body.education-page .education-funding-note-card h2,
    body.education-page .education-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.education-page .education-organization-card p:not(.section-label),
    body.education-page .education-funding-note-card p:not(.section-label),
    body.education-page .education-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.education-page .education-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.education-page .education-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   EDUCATION.HTML END
===================================================== */


/* =====================================================
   ENTERTAINMENT.HTML START

   Required images:
   public_html/assets/images/industries/entertainment-hero-background.jpg
   public_html/assets/images/industries/entertainment-page-background.jpg
   public_html/assets/images/industries/entertainment-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.entertainment-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.entertainment-page section {
    scroll-margin-top: var(--header-height);
}

body.entertainment-page .section-inner {
    position: relative;
    z-index: 2;
}

body.entertainment-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.entertainment-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.entertainment-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.entertainment-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   ENTERTAINMENT PAGE — HERO
===================================================== */

body.entertainment-page .entertainment-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.50)
        ),
        url("../images/industries/entertainment-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.entertainment-page .entertainment-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 20% 18%,
            rgba(255, 204, 0, 0.26),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 78%,
            rgba(0, 255, 0, 0.16),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.30),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.entertainment-page .entertainment-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 204, 0, 0.08),
            transparent
        );

    mix-blend-mode: screen;
    pointer-events: none;
}

body.entertainment-page .entertainment-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.entertainment-page .entertainment-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.entertainment-page .entertainment-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   ENTERTAINMENT PAGE — TRUST STRIP
===================================================== */

body.entertainment-page .entertainment-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.entertainment-page .entertainment-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.entertainment-page .entertainment-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.entertainment-page .entertainment-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   ENTERTAINMENT PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.entertainment-page .entertainment-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/entertainment-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.entertainment-page .entertainment-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.20),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   ENTERTAINMENT PAGE — INTRO
===================================================== */

body.entertainment-page .entertainment-intro-section,
body.entertainment-page .entertainment-services-section,
body.entertainment-page .entertainment-challenges-section,
body.entertainment-page .entertainment-spotlight-section,
body.entertainment-page .entertainment-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.entertainment-page .entertainment-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.entertainment-page .entertainment-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.entertainment-page .entertainment-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.entertainment-page .entertainment-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.entertainment-page .entertainment-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.entertainment-page .entertainment-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   ENTERTAINMENT PAGE — SERVICES GRID
===================================================== */

body.entertainment-page .entertainment-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.entertainment-page .entertainment-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.entertainment-page .entertainment-service-card:hover,
body.entertainment-page .entertainment-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.entertainment-page .entertainment-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.entertainment-page .entertainment-service-card h3,
body.entertainment-page .entertainment-challenge-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.entertainment-page .entertainment-service-card p,
body.entertainment-page .entertainment-challenge-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.entertainment-page .entertainment-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.entertainment-page .entertainment-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.entertainment-page .entertainment-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   ENTERTAINMENT PAGE — CHALLENGES
===================================================== */

body.entertainment-page .entertainment-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.entertainment-page .entertainment-challenge-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.entertainment-page .entertainment-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}


/* =====================================================
   ENTERTAINMENT PAGE — SPOTLIGHT + FUNDING NOTE
===================================================== */

body.entertainment-page .entertainment-spotlight-card,
body.entertainment-page .entertainment-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.entertainment-page .entertainment-spotlight-card h2,
body.entertainment-page .entertainment-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.entertainment-page .entertainment-spotlight-card p:not(.section-label),
body.entertainment-page .entertainment-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   ENTERTAINMENT PAGE — FINAL CTA
===================================================== */

body.entertainment-page .entertainment-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.entertainment-page .entertainment-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.entertainment-page .entertainment-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.entertainment-page .entertainment-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.entertainment-page .entertainment-primary-btn,
body.entertainment-page .entertainment-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.entertainment-page .entertainment-primary-btn:hover,
body.entertainment-page .entertainment-primary-btn:focus,
body.entertainment-page .entertainment-secondary-btn:hover,
body.entertainment-page .entertainment-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.entertainment-page .entertainment-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.entertainment-page .entertainment-outline-btn:hover,
body.entertainment-page .entertainment-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   ENTERTAINMENT.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.entertainment-page .entertainment-hero {
        padding: 68px 0;
    }

    body.entertainment-page .entertainment-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.entertainment-page .entertainment-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.entertainment-page .entertainment-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.entertainment-page .entertainment-intro-section,
    body.entertainment-page .entertainment-services-section,
    body.entertainment-page .entertainment-challenges-section,
    body.entertainment-page .entertainment-spotlight-section,
    body.entertainment-page .entertainment-funding-note-section,
    body.entertainment-page .entertainment-final-cta {
        padding: 62px 0;
    }

    body.entertainment-page .section-header {
        margin-bottom: 30px;
    }

    body.entertainment-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.entertainment-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.entertainment-page .entertainment-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.entertainment-page .entertainment-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.entertainment-page .entertainment-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.entertainment-page .entertainment-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.entertainment-page .entertainment-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.entertainment-page .entertainment-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.entertainment-page .entertainment-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.entertainment-page .entertainment-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.entertainment-page .entertainment-services-grid,
    body.entertainment-page .entertainment-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.entertainment-page .entertainment-service-card,
    body.entertainment-page .entertainment-challenge-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.entertainment-page .entertainment-service-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.entertainment-page .entertainment-service-card h3,
    body.entertainment-page .entertainment-challenge-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.entertainment-page .entertainment-service-card p,
    body.entertainment-page .entertainment-challenge-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.entertainment-page .entertainment-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.entertainment-page .entertainment-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.entertainment-page .entertainment-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.entertainment-page .entertainment-spotlight-card,
    body.entertainment-page .entertainment-funding-note-card {
        padding: 30px 24px;
    }

    body.entertainment-page .entertainment-spotlight-card p:not(.section-label),
    body.entertainment-page .entertainment-funding-note-card p:not(.section-label),
    body.entertainment-page .entertainment-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   ENTERTAINMENT.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.entertainment-page .entertainment-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.entertainment-page .entertainment-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.entertainment-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.entertainment-page .entertainment-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.entertainment-page .entertainment-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.entertainment-page .entertainment-intro-section,
    body.entertainment-page .entertainment-services-section,
    body.entertainment-page .entertainment-challenges-section,
    body.entertainment-page .entertainment-spotlight-section,
    body.entertainment-page .entertainment-funding-note-section,
    body.entertainment-page .entertainment-final-cta {
        padding: 38px 0;
    }

    body.entertainment-page .section-header {
        margin-bottom: 22px;
    }

    body.entertainment-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.entertainment-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.entertainment-page .entertainment-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.entertainment-page .entertainment-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.entertainment-page .entertainment-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.entertainment-page .entertainment-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.entertainment-page .entertainment-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.entertainment-page .entertainment-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.entertainment-page .entertainment-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.entertainment-page .entertainment-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.entertainment-page .entertainment-services-grid,
    body.entertainment-page .entertainment-challenges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.entertainment-page .entertainment-service-card,
    body.entertainment-page .entertainment-challenge-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.entertainment-page .entertainment-service-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.entertainment-page .entertainment-service-card h3,
    body.entertainment-page .entertainment-challenge-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.entertainment-page .entertainment-service-card p,
    body.entertainment-page .entertainment-challenge-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.entertainment-page .entertainment-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.entertainment-page .entertainment-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.entertainment-page .entertainment-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.entertainment-page .entertainment-spotlight-card,
    body.entertainment-page .entertainment-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.entertainment-page .entertainment-spotlight-card h2,
    body.entertainment-page .entertainment-funding-note-card h2,
    body.entertainment-page .entertainment-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.entertainment-page .entertainment-spotlight-card p:not(.section-label),
    body.entertainment-page .entertainment-funding-note-card p:not(.section-label),
    body.entertainment-page .entertainment-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.entertainment-page .entertainment-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.entertainment-page .entertainment-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   ENTERTAINMENT.HTML END
===================================================== */



/* =====================================================
   HEALTHCARE.HTML START

   Required images:
   public_html/assets/images/industries/healthcare-hero-background.jpg
   public_html/assets/images/industries/healthcare-page-background.jpg
   public_html/assets/images/industries/healthcare-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.healthcare-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.healthcare-page section {
    scroll-margin-top: var(--header-height);
}

body.healthcare-page .section-inner {
    position: relative;
    z-index: 2;
}

body.healthcare-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.healthcare-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.healthcare-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.healthcare-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HEALTHCARE PAGE — HERO
===================================================== */

body.healthcare-page .healthcare-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/healthcare-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.healthcare-page .healthcare-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(0, 255, 0, 0.13),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(255, 204, 0, 0.20),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.64),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.healthcare-page .healthcare-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.healthcare-page .healthcare-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.healthcare-page .healthcare-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HEALTHCARE PAGE — TRUST STRIP
===================================================== */

body.healthcare-page .healthcare-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.healthcare-page .healthcare-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.healthcare-page .healthcare-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.healthcare-page .healthcare-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   HEALTHCARE PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.healthcare-page .healthcare-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/healthcare-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.healthcare-page .healthcare-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   HEALTHCARE PAGE — INTRO
===================================================== */

body.healthcare-page .healthcare-intro-section,
body.healthcare-page .healthcare-services-section,
body.healthcare-page .healthcare-challenges-section,
body.healthcare-page .healthcare-care-section,
body.healthcare-page .healthcare-readiness-section,
body.healthcare-page .healthcare-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.healthcare-page .healthcare-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.healthcare-page .healthcare-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.healthcare-page .healthcare-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.healthcare-page .healthcare-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.healthcare-page .healthcare-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.healthcare-page .healthcare-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HEALTHCARE PAGE — SERVICES GRID
===================================================== */

body.healthcare-page .healthcare-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.healthcare-page .healthcare-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.healthcare-page .healthcare-service-card:hover,
body.healthcare-page .healthcare-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.healthcare-page .healthcare-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.healthcare-page .healthcare-service-card h3,
body.healthcare-page .healthcare-challenge-card h3,
body.healthcare-page .healthcare-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.healthcare-page .healthcare-service-card p,
body.healthcare-page .healthcare-challenge-card p,
body.healthcare-page .healthcare-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.healthcare-page .healthcare-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.healthcare-page .healthcare-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.healthcare-page .healthcare-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   HEALTHCARE PAGE — CHALLENGES + READINESS
===================================================== */

body.healthcare-page .healthcare-challenges-grid,
body.healthcare-page .healthcare-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.healthcare-page .healthcare-challenge-card,
body.healthcare-page .healthcare-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.healthcare-page .healthcare-readiness-card {
    border-left-color: var(--color-blue);
}

body.healthcare-page .healthcare-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.healthcare-page .healthcare-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   HEALTHCARE PAGE — CARE + FUNDING NOTE
===================================================== */

body.healthcare-page .healthcare-care-card,
body.healthcare-page .healthcare-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.healthcare-page .healthcare-care-card h2,
body.healthcare-page .healthcare-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.healthcare-page .healthcare-care-card p:not(.section-label),
body.healthcare-page .healthcare-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HEALTHCARE PAGE — FINAL CTA
===================================================== */

body.healthcare-page .healthcare-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.healthcare-page .healthcare-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.healthcare-page .healthcare-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.healthcare-page .healthcare-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.healthcare-page .healthcare-primary-btn,
body.healthcare-page .healthcare-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.healthcare-page .healthcare-primary-btn:hover,
body.healthcare-page .healthcare-primary-btn:focus,
body.healthcare-page .healthcare-secondary-btn:hover,
body.healthcare-page .healthcare-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.healthcare-page .healthcare-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.healthcare-page .healthcare-outline-btn:hover,
body.healthcare-page .healthcare-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   HEALTHCARE.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.healthcare-page .healthcare-hero {
        padding: 68px 0;
    }

    body.healthcare-page .healthcare-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.healthcare-page .healthcare-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.healthcare-page .healthcare-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.healthcare-page .healthcare-intro-section,
    body.healthcare-page .healthcare-services-section,
    body.healthcare-page .healthcare-challenges-section,
    body.healthcare-page .healthcare-care-section,
    body.healthcare-page .healthcare-readiness-section,
    body.healthcare-page .healthcare-funding-note-section,
    body.healthcare-page .healthcare-final-cta {
        padding: 62px 0;
    }

    body.healthcare-page .section-header {
        margin-bottom: 30px;
    }

    body.healthcare-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.healthcare-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.healthcare-page .healthcare-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.healthcare-page .healthcare-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.healthcare-page .healthcare-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.healthcare-page .healthcare-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.healthcare-page .healthcare-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.healthcare-page .healthcare-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.healthcare-page .healthcare-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.healthcare-page .healthcare-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.healthcare-page .healthcare-services-grid,
    body.healthcare-page .healthcare-challenges-grid,
    body.healthcare-page .healthcare-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.healthcare-page .healthcare-service-card,
    body.healthcare-page .healthcare-challenge-card,
    body.healthcare-page .healthcare-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.healthcare-page .healthcare-service-card i,
    body.healthcare-page .healthcare-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.healthcare-page .healthcare-service-card h3,
    body.healthcare-page .healthcare-challenge-card h3,
    body.healthcare-page .healthcare-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.healthcare-page .healthcare-service-card p,
    body.healthcare-page .healthcare-challenge-card p,
    body.healthcare-page .healthcare-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.healthcare-page .healthcare-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.healthcare-page .healthcare-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.healthcare-page .healthcare-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.healthcare-page .healthcare-care-card,
    body.healthcare-page .healthcare-funding-note-card {
        padding: 30px 24px;
    }

    body.healthcare-page .healthcare-care-card p:not(.section-label),
    body.healthcare-page .healthcare-funding-note-card p:not(.section-label),
    body.healthcare-page .healthcare-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   HEALTHCARE.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.healthcare-page .healthcare-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.healthcare-page .healthcare-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.healthcare-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.healthcare-page .healthcare-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.healthcare-page .healthcare-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.healthcare-page .healthcare-intro-section,
    body.healthcare-page .healthcare-services-section,
    body.healthcare-page .healthcare-challenges-section,
    body.healthcare-page .healthcare-care-section,
    body.healthcare-page .healthcare-readiness-section,
    body.healthcare-page .healthcare-funding-note-section,
    body.healthcare-page .healthcare-final-cta {
        padding: 38px 0;
    }

    body.healthcare-page .section-header {
        margin-bottom: 22px;
    }

    body.healthcare-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.healthcare-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.healthcare-page .healthcare-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.healthcare-page .healthcare-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.healthcare-page .healthcare-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.healthcare-page .healthcare-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.healthcare-page .healthcare-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.healthcare-page .healthcare-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.healthcare-page .healthcare-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.healthcare-page .healthcare-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.healthcare-page .healthcare-services-grid,
    body.healthcare-page .healthcare-challenges-grid,
    body.healthcare-page .healthcare-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.healthcare-page .healthcare-service-card,
    body.healthcare-page .healthcare-challenge-card,
    body.healthcare-page .healthcare-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.healthcare-page .healthcare-service-card i,
    body.healthcare-page .healthcare-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.healthcare-page .healthcare-service-card h3,
    body.healthcare-page .healthcare-challenge-card h3,
    body.healthcare-page .healthcare-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.healthcare-page .healthcare-service-card p,
    body.healthcare-page .healthcare-challenge-card p,
    body.healthcare-page .healthcare-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.healthcare-page .healthcare-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.healthcare-page .healthcare-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.healthcare-page .healthcare-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.healthcare-page .healthcare-care-card,
    body.healthcare-page .healthcare-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.healthcare-page .healthcare-care-card h2,
    body.healthcare-page .healthcare-funding-note-card h2,
    body.healthcare-page .healthcare-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.healthcare-page .healthcare-care-card p:not(.section-label),
    body.healthcare-page .healthcare-funding-note-card p:not(.section-label),
    body.healthcare-page .healthcare-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.healthcare-page .healthcare-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.healthcare-page .healthcare-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   HEALTHCARE.HTML END
===================================================== */


/* =====================================================
   MECHANIC.HTML START

   Required images:
   public_html/assets/images/industries/mechanic-hero-background.jpg
   public_html/assets/images/industries/mechanic-page-background.jpg
   public_html/assets/images/industries/mechanic-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.mechanic-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.mechanic-page section {
    scroll-margin-top: var(--header-height);
}

body.mechanic-page .section-inner {
    position: relative;
    z-index: 2;
}

body.mechanic-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.mechanic-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.mechanic-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.mechanic-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   MECHANIC PAGE — HERO
===================================================== */

body.mechanic-page .mechanic-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/mechanic-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.mechanic-page .mechanic-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.mechanic-page .mechanic-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.mechanic-page .mechanic-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.mechanic-page .mechanic-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   MECHANIC PAGE — TRUST STRIP
===================================================== */

body.mechanic-page .mechanic-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.mechanic-page .mechanic-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.mechanic-page .mechanic-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.mechanic-page .mechanic-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   MECHANIC PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.mechanic-page .mechanic-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/mechanic-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.mechanic-page .mechanic-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   MECHANIC PAGE — INTRO
===================================================== */

body.mechanic-page .mechanic-intro-section,
body.mechanic-page .mechanic-services-section,
body.mechanic-page .mechanic-challenges-section,
body.mechanic-page .mechanic-value-section,
body.mechanic-page .mechanic-readiness-section,
body.mechanic-page .mechanic-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.mechanic-page .mechanic-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.mechanic-page .mechanic-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.mechanic-page .mechanic-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.mechanic-page .mechanic-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.mechanic-page .mechanic-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.mechanic-page .mechanic-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   MECHANIC PAGE — SERVICES GRID
===================================================== */

body.mechanic-page .mechanic-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.mechanic-page .mechanic-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.mechanic-page .mechanic-service-card:hover,
body.mechanic-page .mechanic-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.mechanic-page .mechanic-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.mechanic-page .mechanic-service-card h3,
body.mechanic-page .mechanic-challenge-card h3,
body.mechanic-page .mechanic-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.mechanic-page .mechanic-service-card p,
body.mechanic-page .mechanic-challenge-card p,
body.mechanic-page .mechanic-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.mechanic-page .mechanic-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.mechanic-page .mechanic-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.mechanic-page .mechanic-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   MECHANIC PAGE — CHALLENGES + READINESS
===================================================== */

body.mechanic-page .mechanic-challenges-grid,
body.mechanic-page .mechanic-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.mechanic-page .mechanic-challenge-card,
body.mechanic-page .mechanic-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.mechanic-page .mechanic-readiness-card {
    border-left-color: var(--color-blue);
}

body.mechanic-page .mechanic-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.mechanic-page .mechanic-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   MECHANIC PAGE — VALUE + FUNDING NOTE
===================================================== */

body.mechanic-page .mechanic-value-card,
body.mechanic-page .mechanic-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.mechanic-page .mechanic-value-card h2,
body.mechanic-page .mechanic-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.mechanic-page .mechanic-value-card p:not(.section-label),
body.mechanic-page .mechanic-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   MECHANIC PAGE — FINAL CTA
===================================================== */

body.mechanic-page .mechanic-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.mechanic-page .mechanic-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.mechanic-page .mechanic-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.mechanic-page .mechanic-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.mechanic-page .mechanic-primary-btn,
body.mechanic-page .mechanic-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.mechanic-page .mechanic-primary-btn:hover,
body.mechanic-page .mechanic-primary-btn:focus,
body.mechanic-page .mechanic-secondary-btn:hover,
body.mechanic-page .mechanic-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.mechanic-page .mechanic-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.mechanic-page .mechanic-outline-btn:hover,
body.mechanic-page .mechanic-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   MECHANIC.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.mechanic-page .mechanic-hero {
        padding: 68px 0;
    }

    body.mechanic-page .mechanic-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.mechanic-page .mechanic-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.mechanic-page .mechanic-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.mechanic-page .mechanic-intro-section,
    body.mechanic-page .mechanic-services-section,
    body.mechanic-page .mechanic-challenges-section,
    body.mechanic-page .mechanic-value-section,
    body.mechanic-page .mechanic-readiness-section,
    body.mechanic-page .mechanic-funding-note-section,
    body.mechanic-page .mechanic-final-cta {
        padding: 62px 0;
    }

    body.mechanic-page .section-header {
        margin-bottom: 30px;
    }

    body.mechanic-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.mechanic-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.mechanic-page .mechanic-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.mechanic-page .mechanic-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.mechanic-page .mechanic-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.mechanic-page .mechanic-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.mechanic-page .mechanic-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.mechanic-page .mechanic-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.mechanic-page .mechanic-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.mechanic-page .mechanic-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.mechanic-page .mechanic-services-grid,
    body.mechanic-page .mechanic-challenges-grid,
    body.mechanic-page .mechanic-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.mechanic-page .mechanic-service-card,
    body.mechanic-page .mechanic-challenge-card,
    body.mechanic-page .mechanic-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.mechanic-page .mechanic-service-card i,
    body.mechanic-page .mechanic-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.mechanic-page .mechanic-service-card h3,
    body.mechanic-page .mechanic-challenge-card h3,
    body.mechanic-page .mechanic-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.mechanic-page .mechanic-service-card p,
    body.mechanic-page .mechanic-challenge-card p,
    body.mechanic-page .mechanic-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.mechanic-page .mechanic-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.mechanic-page .mechanic-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.mechanic-page .mechanic-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.mechanic-page .mechanic-value-card,
    body.mechanic-page .mechanic-funding-note-card {
        padding: 30px 24px;
    }

    body.mechanic-page .mechanic-value-card p:not(.section-label),
    body.mechanic-page .mechanic-funding-note-card p:not(.section-label),
    body.mechanic-page .mechanic-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   MECHANIC.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.mechanic-page .mechanic-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.mechanic-page .mechanic-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.mechanic-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.mechanic-page .mechanic-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.mechanic-page .mechanic-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.mechanic-page .mechanic-intro-section,
    body.mechanic-page .mechanic-services-section,
    body.mechanic-page .mechanic-challenges-section,
    body.mechanic-page .mechanic-value-section,
    body.mechanic-page .mechanic-readiness-section,
    body.mechanic-page .mechanic-funding-note-section,
    body.mechanic-page .mechanic-final-cta {
        padding: 38px 0;
    }

    body.mechanic-page .section-header {
        margin-bottom: 22px;
    }

    body.mechanic-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.mechanic-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.mechanic-page .mechanic-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.mechanic-page .mechanic-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.mechanic-page .mechanic-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.mechanic-page .mechanic-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.mechanic-page .mechanic-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.mechanic-page .mechanic-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.mechanic-page .mechanic-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.mechanic-page .mechanic-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.mechanic-page .mechanic-services-grid,
    body.mechanic-page .mechanic-challenges-grid,
    body.mechanic-page .mechanic-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.mechanic-page .mechanic-service-card,
    body.mechanic-page .mechanic-challenge-card,
    body.mechanic-page .mechanic-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.mechanic-page .mechanic-service-card i,
    body.mechanic-page .mechanic-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.mechanic-page .mechanic-service-card h3,
    body.mechanic-page .mechanic-challenge-card h3,
    body.mechanic-page .mechanic-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.mechanic-page .mechanic-service-card p,
    body.mechanic-page .mechanic-challenge-card p,
    body.mechanic-page .mechanic-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.mechanic-page .mechanic-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.mechanic-page .mechanic-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.mechanic-page .mechanic-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.mechanic-page .mechanic-value-card,
    body.mechanic-page .mechanic-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.mechanic-page .mechanic-value-card h2,
    body.mechanic-page .mechanic-funding-note-card h2,
    body.mechanic-page .mechanic-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.mechanic-page .mechanic-value-card p:not(.section-label),
    body.mechanic-page .mechanic-funding-note-card p:not(.section-label),
    body.mechanic-page .mechanic-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.mechanic-page .mechanic-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.mechanic-page .mechanic-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   MECHANIC.HTML END
===================================================== */



/* =====================================================
   RETAIL.HTML START

   Required images:
   public_html/assets/images/industries/retail-hero-background.jpg
   public_html/assets/images/industries/retail-page-background.jpg
   public_html/assets/images/industries/retail-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.retail-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.retail-page section {
    scroll-margin-top: var(--header-height);
}

body.retail-page .section-inner {
    position: relative;
    z-index: 2;
}

body.retail-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.retail-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.retail-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.retail-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RETAIL PAGE — HERO
===================================================== */

body.retail-page .retail-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/retail-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.retail-page .retail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.64),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.retail-page .retail-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.retail-page .retail-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.retail-page .retail-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RETAIL PAGE — TRUST STRIP
===================================================== */

body.retail-page .retail-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.retail-page .retail-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.retail-page .retail-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.retail-page .retail-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   RETAIL PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.retail-page .retail-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/retail-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.retail-page .retail-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   RETAIL PAGE — INTRO
===================================================== */

body.retail-page .retail-intro-section,
body.retail-page .retail-services-section,
body.retail-page .retail-challenges-section,
body.retail-page .retail-value-section,
body.retail-page .retail-readiness-section,
body.retail-page .retail-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.retail-page .retail-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.retail-page .retail-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.retail-page .retail-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.retail-page .retail-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.retail-page .retail-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.retail-page .retail-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RETAIL PAGE — SERVICES GRID
===================================================== */

body.retail-page .retail-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.retail-page .retail-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.retail-page .retail-service-card:hover,
body.retail-page .retail-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.retail-page .retail-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.retail-page .retail-service-card h3,
body.retail-page .retail-challenge-card h3,
body.retail-page .retail-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.retail-page .retail-service-card p,
body.retail-page .retail-challenge-card p,
body.retail-page .retail-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.retail-page .retail-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.retail-page .retail-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.retail-page .retail-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   RETAIL PAGE — CHALLENGES + READINESS
===================================================== */

body.retail-page .retail-challenges-grid,
body.retail-page .retail-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.retail-page .retail-challenge-card,
body.retail-page .retail-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.retail-page .retail-readiness-card {
    border-left-color: var(--color-blue);
}

body.retail-page .retail-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.retail-page .retail-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   RETAIL PAGE — VALUE + FUNDING NOTE
===================================================== */

body.retail-page .retail-value-card,
body.retail-page .retail-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.retail-page .retail-value-card h2,
body.retail-page .retail-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.retail-page .retail-value-card p:not(.section-label),
body.retail-page .retail-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RETAIL PAGE — FINAL CTA
===================================================== */

body.retail-page .retail-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.retail-page .retail-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.retail-page .retail-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.retail-page .retail-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.retail-page .retail-primary-btn,
body.retail-page .retail-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.retail-page .retail-primary-btn:hover,
body.retail-page .retail-primary-btn:focus,
body.retail-page .retail-secondary-btn:hover,
body.retail-page .retail-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.retail-page .retail-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.retail-page .retail-outline-btn:hover,
body.retail-page .retail-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   RETAIL.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.retail-page .retail-hero {
        padding: 68px 0;
    }

    body.retail-page .retail-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.retail-page .retail-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.retail-page .retail-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.retail-page .retail-intro-section,
    body.retail-page .retail-services-section,
    body.retail-page .retail-challenges-section,
    body.retail-page .retail-value-section,
    body.retail-page .retail-readiness-section,
    body.retail-page .retail-funding-note-section,
    body.retail-page .retail-final-cta {
        padding: 62px 0;
    }

    body.retail-page .section-header {
        margin-bottom: 30px;
    }

    body.retail-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.retail-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.retail-page .retail-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.retail-page .retail-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.retail-page .retail-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.retail-page .retail-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.retail-page .retail-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.retail-page .retail-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.retail-page .retail-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.retail-page .retail-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.retail-page .retail-services-grid,
    body.retail-page .retail-challenges-grid,
    body.retail-page .retail-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.retail-page .retail-service-card,
    body.retail-page .retail-challenge-card,
    body.retail-page .retail-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.retail-page .retail-service-card i,
    body.retail-page .retail-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.retail-page .retail-service-card h3,
    body.retail-page .retail-challenge-card h3,
    body.retail-page .retail-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.retail-page .retail-service-card p,
    body.retail-page .retail-challenge-card p,
    body.retail-page .retail-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.retail-page .retail-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.retail-page .retail-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.retail-page .retail-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.retail-page .retail-value-card,
    body.retail-page .retail-funding-note-card {
        padding: 30px 24px;
    }

    body.retail-page .retail-value-card p:not(.section-label),
    body.retail-page .retail-funding-note-card p:not(.section-label),
    body.retail-page .retail-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   RETAIL.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.retail-page .retail-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.retail-page .retail-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.retail-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.retail-page .retail-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.retail-page .retail-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.retail-page .retail-intro-section,
    body.retail-page .retail-services-section,
    body.retail-page .retail-challenges-section,
    body.retail-page .retail-value-section,
    body.retail-page .retail-readiness-section,
    body.retail-page .retail-funding-note-section,
    body.retail-page .retail-final-cta {
        padding: 38px 0;
    }

    body.retail-page .section-header {
        margin-bottom: 22px;
    }

    body.retail-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.retail-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.retail-page .retail-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.retail-page .retail-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.retail-page .retail-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.retail-page .retail-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.retail-page .retail-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.retail-page .retail-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.retail-page .retail-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.retail-page .retail-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.retail-page .retail-services-grid,
    body.retail-page .retail-challenges-grid,
    body.retail-page .retail-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.retail-page .retail-service-card,
    body.retail-page .retail-challenge-card,
    body.retail-page .retail-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.retail-page .retail-service-card i,
    body.retail-page .retail-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.retail-page .retail-service-card h3,
    body.retail-page .retail-challenge-card h3,
    body.retail-page .retail-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.retail-page .retail-service-card p,
    body.retail-page .retail-challenge-card p,
    body.retail-page .retail-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.retail-page .retail-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.retail-page .retail-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.retail-page .retail-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.retail-page .retail-value-card,
    body.retail-page .retail-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.retail-page .retail-value-card h2,
    body.retail-page .retail-funding-note-card h2,
    body.retail-page .retail-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.retail-page .retail-value-card p:not(.section-label),
    body.retail-page .retail-funding-note-card p:not(.section-label),
    body.retail-page .retail-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.retail-page .retail-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.retail-page .retail-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   RETAIL.HTML END
===================================================== */



/* =====================================================
   RESTAURANT.HTML START

   Required images:
   public_html/assets/images/industries/restaurant-hero-background.jpg
   public_html/assets/images/industries/restaurant-page-background.jpg
   public_html/assets/images/industries/restaurant-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.restaurant-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.restaurant-page section {
    scroll-margin-top: var(--header-height);
}

body.restaurant-page .section-inner {
    position: relative;
    z-index: 2;
}

body.restaurant-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.restaurant-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.restaurant-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.restaurant-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESTAURANT PAGE — HERO
===================================================== */

body.restaurant-page .restaurant-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/restaurant-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.restaurant-page .restaurant-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.restaurant-page .restaurant-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.restaurant-page .restaurant-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.restaurant-page .restaurant-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESTAURANT PAGE — TRUST STRIP
===================================================== */

body.restaurant-page .restaurant-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.restaurant-page .restaurant-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.restaurant-page .restaurant-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.restaurant-page .restaurant-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   RESTAURANT PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.restaurant-page .restaurant-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.restaurant-page .restaurant-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   RESTAURANT PAGE — INTRO
===================================================== */

body.restaurant-page .restaurant-intro-section,
body.restaurant-page .restaurant-services-section,
body.restaurant-page .restaurant-challenges-section,
body.restaurant-page .restaurant-value-section,
body.restaurant-page .restaurant-readiness-section,
body.restaurant-page .restaurant-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.restaurant-page .restaurant-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.restaurant-page .restaurant-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.restaurant-page .restaurant-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.restaurant-page .restaurant-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.restaurant-page .restaurant-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.restaurant-page .restaurant-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESTAURANT PAGE — SERVICES GRID
===================================================== */

body.restaurant-page .restaurant-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.restaurant-page .restaurant-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.restaurant-page .restaurant-service-card:hover,
body.restaurant-page .restaurant-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.restaurant-page .restaurant-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.restaurant-page .restaurant-service-card h3,
body.restaurant-page .restaurant-challenge-card h3,
body.restaurant-page .restaurant-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.restaurant-page .restaurant-service-card p,
body.restaurant-page .restaurant-challenge-card p,
body.restaurant-page .restaurant-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.restaurant-page .restaurant-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.restaurant-page .restaurant-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.restaurant-page .restaurant-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   RESTAURANT PAGE — CHALLENGES + READINESS
===================================================== */

body.restaurant-page .restaurant-challenges-grid,
body.restaurant-page .restaurant-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.restaurant-page .restaurant-challenge-card,
body.restaurant-page .restaurant-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.restaurant-page .restaurant-readiness-card {
    border-left-color: var(--color-blue);
}

body.restaurant-page .restaurant-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.restaurant-page .restaurant-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   RESTAURANT PAGE — VALUE + FUNDING NOTE
===================================================== */

body.restaurant-page .restaurant-value-card,
body.restaurant-page .restaurant-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.restaurant-page .restaurant-value-card h2,
body.restaurant-page .restaurant-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.restaurant-page .restaurant-value-card p:not(.section-label),
body.restaurant-page .restaurant-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   RESTAURANT PAGE — FINAL CTA
===================================================== */

body.restaurant-page .restaurant-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.restaurant-page .restaurant-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.restaurant-page .restaurant-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.restaurant-page .restaurant-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.restaurant-page .restaurant-primary-btn,
body.restaurant-page .restaurant-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.restaurant-page .restaurant-primary-btn:hover,
body.restaurant-page .restaurant-primary-btn:focus,
body.restaurant-page .restaurant-secondary-btn:hover,
body.restaurant-page .restaurant-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.restaurant-page .restaurant-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.restaurant-page .restaurant-outline-btn:hover,
body.restaurant-page .restaurant-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   RESTAURANT.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.restaurant-page .restaurant-hero {
        padding: 68px 0;
    }

    body.restaurant-page .restaurant-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.restaurant-page .restaurant-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.restaurant-page .restaurant-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.restaurant-page .restaurant-intro-section,
    body.restaurant-page .restaurant-services-section,
    body.restaurant-page .restaurant-challenges-section,
    body.restaurant-page .restaurant-value-section,
    body.restaurant-page .restaurant-readiness-section,
    body.restaurant-page .restaurant-funding-note-section,
    body.restaurant-page .restaurant-final-cta {
        padding: 62px 0;
    }

    body.restaurant-page .section-header {
        margin-bottom: 30px;
    }

    body.restaurant-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.restaurant-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.restaurant-page .restaurant-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.restaurant-page .restaurant-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.restaurant-page .restaurant-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.restaurant-page .restaurant-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.restaurant-page .restaurant-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.restaurant-page .restaurant-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.restaurant-page .restaurant-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.restaurant-page .restaurant-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.restaurant-page .restaurant-services-grid,
    body.restaurant-page .restaurant-challenges-grid,
    body.restaurant-page .restaurant-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.restaurant-page .restaurant-service-card,
    body.restaurant-page .restaurant-challenge-card,
    body.restaurant-page .restaurant-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.restaurant-page .restaurant-service-card i,
    body.restaurant-page .restaurant-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.restaurant-page .restaurant-service-card h3,
    body.restaurant-page .restaurant-challenge-card h3,
    body.restaurant-page .restaurant-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.restaurant-page .restaurant-service-card p,
    body.restaurant-page .restaurant-challenge-card p,
    body.restaurant-page .restaurant-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.restaurant-page .restaurant-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.restaurant-page .restaurant-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.restaurant-page .restaurant-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.restaurant-page .restaurant-value-card,
    body.restaurant-page .restaurant-funding-note-card {
        padding: 30px 24px;
    }

    body.restaurant-page .restaurant-value-card p:not(.section-label),
    body.restaurant-page .restaurant-funding-note-card p:not(.section-label),
    body.restaurant-page .restaurant-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   RESTAURANT.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.restaurant-page .restaurant-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.restaurant-page .restaurant-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.restaurant-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.restaurant-page .restaurant-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.restaurant-page .restaurant-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.restaurant-page .restaurant-intro-section,
    body.restaurant-page .restaurant-services-section,
    body.restaurant-page .restaurant-challenges-section,
    body.restaurant-page .restaurant-value-section,
    body.restaurant-page .restaurant-readiness-section,
    body.restaurant-page .restaurant-funding-note-section,
    body.restaurant-page .restaurant-final-cta {
        padding: 38px 0;
    }

    body.restaurant-page .section-header {
        margin-bottom: 22px;
    }

    body.restaurant-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.restaurant-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.restaurant-page .restaurant-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.restaurant-page .restaurant-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.restaurant-page .restaurant-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.restaurant-page .restaurant-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.restaurant-page .restaurant-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.restaurant-page .restaurant-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.restaurant-page .restaurant-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.restaurant-page .restaurant-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.restaurant-page .restaurant-services-grid,
    body.restaurant-page .restaurant-challenges-grid,
    body.restaurant-page .restaurant-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.restaurant-page .restaurant-service-card,
    body.restaurant-page .restaurant-challenge-card,
    body.restaurant-page .restaurant-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.restaurant-page .restaurant-service-card i,
    body.restaurant-page .restaurant-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.restaurant-page .restaurant-service-card h3,
    body.restaurant-page .restaurant-challenge-card h3,
    body.restaurant-page .restaurant-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.restaurant-page .restaurant-service-card p,
    body.restaurant-page .restaurant-challenge-card p,
    body.restaurant-page .restaurant-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.restaurant-page .restaurant-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.restaurant-page .restaurant-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.restaurant-page .restaurant-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.restaurant-page .restaurant-value-card,
    body.restaurant-page .restaurant-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.restaurant-page .restaurant-value-card h2,
    body.restaurant-page .restaurant-funding-note-card h2,
    body.restaurant-page .restaurant-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.restaurant-page .restaurant-value-card p:not(.section-label),
    body.restaurant-page .restaurant-funding-note-card p:not(.section-label),
    body.restaurant-page .restaurant-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.restaurant-page .restaurant-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.restaurant-page .restaurant-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   RESTAURANT.HTML END
===================================================== */


/* =====================================================
   TRUCKING.HTML START

   Required images:
   public_html/assets/images/industries/trucking-hero-background.jpg
   public_html/assets/images/industries/trucking-page-background.jpg
   public_html/assets/images/industries/trucking-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.trucking-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.trucking-page section {
    scroll-margin-top: var(--header-height);
}

body.trucking-page .section-inner {
    position: relative;
    z-index: 2;
}

body.trucking-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.trucking-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.trucking-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.trucking-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TRUCKING PAGE — HERO
===================================================== */

body.trucking-page .trucking-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/trucking-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.trucking-page .trucking-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.trucking-page .trucking-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.trucking-page .trucking-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.trucking-page .trucking-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TRUCKING PAGE — TRUST STRIP
===================================================== */

body.trucking-page .trucking-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.trucking-page .trucking-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.trucking-page .trucking-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.trucking-page .trucking-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   TRUCKING PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.trucking-page .trucking-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.trucking-page .trucking-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   TRUCKING PAGE — INTRO
===================================================== */

body.trucking-page .trucking-intro-section,
body.trucking-page .trucking-services-section,
body.trucking-page .trucking-challenges-section,
body.trucking-page .trucking-value-section,
body.trucking-page .trucking-readiness-section,
body.trucking-page .trucking-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.trucking-page .trucking-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.trucking-page .trucking-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.trucking-page .trucking-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.trucking-page .trucking-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.trucking-page .trucking-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.trucking-page .trucking-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TRUCKING PAGE — SERVICES GRID
===================================================== */

body.trucking-page .trucking-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.trucking-page .trucking-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.trucking-page .trucking-service-card:hover,
body.trucking-page .trucking-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.trucking-page .trucking-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.trucking-page .trucking-service-card h3,
body.trucking-page .trucking-challenge-card h3,
body.trucking-page .trucking-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.trucking-page .trucking-service-card p,
body.trucking-page .trucking-challenge-card p,
body.trucking-page .trucking-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.trucking-page .trucking-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.trucking-page .trucking-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.trucking-page .trucking-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   TRUCKING PAGE — CHALLENGES + READINESS
===================================================== */

body.trucking-page .trucking-challenges-grid,
body.trucking-page .trucking-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.trucking-page .trucking-challenge-card,
body.trucking-page .trucking-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.trucking-page .trucking-readiness-card {
    border-left-color: var(--color-blue);
}

body.trucking-page .trucking-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.trucking-page .trucking-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   TRUCKING PAGE — VALUE + FUNDING NOTE
===================================================== */

body.trucking-page .trucking-value-card,
body.trucking-page .trucking-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.trucking-page .trucking-value-card h2,
body.trucking-page .trucking-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.trucking-page .trucking-value-card p:not(.section-label),
body.trucking-page .trucking-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TRUCKING PAGE — FINAL CTA
===================================================== */

body.trucking-page .trucking-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.trucking-page .trucking-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.trucking-page .trucking-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.trucking-page .trucking-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.trucking-page .trucking-primary-btn,
body.trucking-page .trucking-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.trucking-page .trucking-primary-btn:hover,
body.trucking-page .trucking-primary-btn:focus,
body.trucking-page .trucking-secondary-btn:hover,
body.trucking-page .trucking-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.trucking-page .trucking-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.trucking-page .trucking-outline-btn:hover,
body.trucking-page .trucking-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   TRUCKING.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.trucking-page .trucking-hero {
        padding: 68px 0;
    }

    body.trucking-page .trucking-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.trucking-page .trucking-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.trucking-page .trucking-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.trucking-page .trucking-intro-section,
    body.trucking-page .trucking-services-section,
    body.trucking-page .trucking-challenges-section,
    body.trucking-page .trucking-value-section,
    body.trucking-page .trucking-readiness-section,
    body.trucking-page .trucking-funding-note-section,
    body.trucking-page .trucking-final-cta {
        padding: 62px 0;
    }

    body.trucking-page .section-header {
        margin-bottom: 30px;
    }

    body.trucking-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.trucking-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.trucking-page .trucking-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.trucking-page .trucking-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.trucking-page .trucking-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.trucking-page .trucking-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.trucking-page .trucking-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.trucking-page .trucking-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.trucking-page .trucking-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.trucking-page .trucking-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.trucking-page .trucking-services-grid,
    body.trucking-page .trucking-challenges-grid,
    body.trucking-page .trucking-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.trucking-page .trucking-service-card,
    body.trucking-page .trucking-challenge-card,
    body.trucking-page .trucking-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.trucking-page .trucking-service-card i,
    body.trucking-page .trucking-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.trucking-page .trucking-service-card h3,
    body.trucking-page .trucking-challenge-card h3,
    body.trucking-page .trucking-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.trucking-page .trucking-service-card p,
    body.trucking-page .trucking-challenge-card p,
    body.trucking-page .trucking-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.trucking-page .trucking-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.trucking-page .trucking-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.trucking-page .trucking-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.trucking-page .trucking-value-card,
    body.trucking-page .trucking-funding-note-card {
        padding: 30px 24px;
    }

    body.trucking-page .trucking-value-card p:not(.section-label),
    body.trucking-page .trucking-funding-note-card p:not(.section-label),
    body.trucking-page .trucking-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   TRUCKING.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.trucking-page .trucking-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.trucking-page .trucking-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.trucking-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.trucking-page .trucking-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.trucking-page .trucking-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.trucking-page .trucking-intro-section,
    body.trucking-page .trucking-services-section,
    body.trucking-page .trucking-challenges-section,
    body.trucking-page .trucking-value-section,
    body.trucking-page .trucking-readiness-section,
    body.trucking-page .trucking-funding-note-section,
    body.trucking-page .trucking-final-cta {
        padding: 38px 0;
    }

    body.trucking-page .section-header {
        margin-bottom: 22px;
    }

    body.trucking-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.trucking-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.trucking-page .trucking-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.trucking-page .trucking-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.trucking-page .trucking-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.trucking-page .trucking-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.trucking-page .trucking-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.trucking-page .trucking-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.trucking-page .trucking-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.trucking-page .trucking-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.trucking-page .trucking-services-grid,
    body.trucking-page .trucking-challenges-grid,
    body.trucking-page .trucking-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.trucking-page .trucking-service-card,
    body.trucking-page .trucking-challenge-card,
    body.trucking-page .trucking-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.trucking-page .trucking-service-card i,
    body.trucking-page .trucking-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.trucking-page .trucking-service-card h3,
    body.trucking-page .trucking-challenge-card h3,
    body.trucking-page .trucking-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.trucking-page .trucking-service-card p,
    body.trucking-page .trucking-challenge-card p,
    body.trucking-page .trucking-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.trucking-page .trucking-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.trucking-page .trucking-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.trucking-page .trucking-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.trucking-page .trucking-value-card,
    body.trucking-page .trucking-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.trucking-page .trucking-value-card h2,
    body.trucking-page .trucking-funding-note-card h2,
    body.trucking-page .trucking-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.trucking-page .trucking-value-card p:not(.section-label),
    body.trucking-page .trucking-funding-note-card p:not(.section-label),
    body.trucking-page .trucking-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.trucking-page .trucking-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.trucking-page .trucking-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   TRUCKING.HTML END
===================================================== */




/* =====================================================
   BARBERSHOP.HTML START

   Required images:
   public_html/assets/images/industries/barbershop-hero-background.jpg
   public_html/assets/images/industries/barbershop-page-background.jpg
   public_html/assets/images/industries/barbershop-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.barbershop-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.barbershop-page section {
    scroll-margin-top: var(--header-height);
}

body.barbershop-page .section-inner {
    position: relative;
    z-index: 2;
}

body.barbershop-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.barbershop-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.barbershop-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.barbershop-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BARBERSHOP PAGE — HERO
===================================================== */

body.barbershop-page .barbershop-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/barbershop-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.barbershop-page .barbershop-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.barbershop-page .barbershop-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.barbershop-page .barbershop-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.barbershop-page .barbershop-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BARBERSHOP PAGE — TRUST STRIP
===================================================== */

body.barbershop-page .barbershop-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.barbershop-page .barbershop-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.barbershop-page .barbershop-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.barbershop-page .barbershop-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   BARBERSHOP PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.barbershop-page .barbershop-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/barbershop-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.barbershop-page .barbershop-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   BARBERSHOP PAGE — INTRO
===================================================== */

body.barbershop-page .barbershop-intro-section,
body.barbershop-page .barbershop-services-section,
body.barbershop-page .barbershop-challenges-section,
body.barbershop-page .barbershop-value-section,
body.barbershop-page .barbershop-readiness-section,
body.barbershop-page .barbershop-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.barbershop-page .barbershop-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.barbershop-page .barbershop-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.barbershop-page .barbershop-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.barbershop-page .barbershop-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.barbershop-page .barbershop-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.barbershop-page .barbershop-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BARBERSHOP PAGE — SERVICES GRID
===================================================== */

body.barbershop-page .barbershop-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.barbershop-page .barbershop-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.barbershop-page .barbershop-service-card:hover,
body.barbershop-page .barbershop-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.barbershop-page .barbershop-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.barbershop-page .barbershop-service-card h3,
body.barbershop-page .barbershop-challenge-card h3,
body.barbershop-page .barbershop-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.barbershop-page .barbershop-service-card p,
body.barbershop-page .barbershop-challenge-card p,
body.barbershop-page .barbershop-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.barbershop-page .barbershop-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.barbershop-page .barbershop-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.barbershop-page .barbershop-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   BARBERSHOP PAGE — CHALLENGES + READINESS
===================================================== */

body.barbershop-page .barbershop-challenges-grid,
body.barbershop-page .barbershop-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.barbershop-page .barbershop-challenge-card,
body.barbershop-page .barbershop-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.barbershop-page .barbershop-readiness-card {
    border-left-color: var(--color-blue);
}

body.barbershop-page .barbershop-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.barbershop-page .barbershop-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   BARBERSHOP PAGE — VALUE + FUNDING NOTE
===================================================== */

body.barbershop-page .barbershop-value-card,
body.barbershop-page .barbershop-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.barbershop-page .barbershop-value-card h2,
body.barbershop-page .barbershop-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.barbershop-page .barbershop-value-card p:not(.section-label),
body.barbershop-page .barbershop-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BARBERSHOP PAGE — FINAL CTA
===================================================== */

body.barbershop-page .barbershop-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.barbershop-page .barbershop-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.barbershop-page .barbershop-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.barbershop-page .barbershop-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.barbershop-page .barbershop-primary-btn,
body.barbershop-page .barbershop-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.barbershop-page .barbershop-primary-btn:hover,
body.barbershop-page .barbershop-primary-btn:focus,
body.barbershop-page .barbershop-secondary-btn:hover,
body.barbershop-page .barbershop-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.barbershop-page .barbershop-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.barbershop-page .barbershop-outline-btn:hover,
body.barbershop-page .barbershop-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   BARBERSHOP.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.barbershop-page .barbershop-hero {
        padding: 68px 0;
    }

    body.barbershop-page .barbershop-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.barbershop-page .barbershop-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.barbershop-page .barbershop-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.barbershop-page .barbershop-intro-section,
    body.barbershop-page .barbershop-services-section,
    body.barbershop-page .barbershop-challenges-section,
    body.barbershop-page .barbershop-value-section,
    body.barbershop-page .barbershop-readiness-section,
    body.barbershop-page .barbershop-funding-note-section,
    body.barbershop-page .barbershop-final-cta {
        padding: 62px 0;
    }

    body.barbershop-page .section-header {
        margin-bottom: 30px;
    }

    body.barbershop-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.barbershop-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.barbershop-page .barbershop-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.barbershop-page .barbershop-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.barbershop-page .barbershop-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.barbershop-page .barbershop-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.barbershop-page .barbershop-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.barbershop-page .barbershop-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.barbershop-page .barbershop-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.barbershop-page .barbershop-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.barbershop-page .barbershop-services-grid,
    body.barbershop-page .barbershop-challenges-grid,
    body.barbershop-page .barbershop-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.barbershop-page .barbershop-service-card,
    body.barbershop-page .barbershop-challenge-card,
    body.barbershop-page .barbershop-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.barbershop-page .barbershop-service-card i,
    body.barbershop-page .barbershop-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.barbershop-page .barbershop-service-card h3,
    body.barbershop-page .barbershop-challenge-card h3,
    body.barbershop-page .barbershop-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.barbershop-page .barbershop-service-card p,
    body.barbershop-page .barbershop-challenge-card p,
    body.barbershop-page .barbershop-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.barbershop-page .barbershop-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.barbershop-page .barbershop-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.barbershop-page .barbershop-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.barbershop-page .barbershop-value-card,
    body.barbershop-page .barbershop-funding-note-card {
        padding: 30px 24px;
    }

    body.barbershop-page .barbershop-value-card p:not(.section-label),
    body.barbershop-page .barbershop-funding-note-card p:not(.section-label),
    body.barbershop-page .barbershop-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   BARBERSHOP.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.barbershop-page .barbershop-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.barbershop-page .barbershop-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.barbershop-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.barbershop-page .barbershop-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.barbershop-page .barbershop-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.barbershop-page .barbershop-intro-section,
    body.barbershop-page .barbershop-services-section,
    body.barbershop-page .barbershop-challenges-section,
    body.barbershop-page .barbershop-value-section,
    body.barbershop-page .barbershop-readiness-section,
    body.barbershop-page .barbershop-funding-note-section,
    body.barbershop-page .barbershop-final-cta {
        padding: 38px 0;
    }

    body.barbershop-page .section-header {
        margin-bottom: 22px;
    }

    body.barbershop-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.barbershop-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.barbershop-page .barbershop-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.barbershop-page .barbershop-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.barbershop-page .barbershop-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.barbershop-page .barbershop-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.barbershop-page .barbershop-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.barbershop-page .barbershop-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.barbershop-page .barbershop-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.barbershop-page .barbershop-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.barbershop-page .barbershop-services-grid,
    body.barbershop-page .barbershop-challenges-grid,
    body.barbershop-page .barbershop-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.barbershop-page .barbershop-service-card,
    body.barbershop-page .barbershop-challenge-card,
    body.barbershop-page .barbershop-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.barbershop-page .barbershop-service-card i,
    body.barbershop-page .barbershop-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.barbershop-page .barbershop-service-card h3,
    body.barbershop-page .barbershop-challenge-card h3,
    body.barbershop-page .barbershop-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.barbershop-page .barbershop-service-card p,
    body.barbershop-page .barbershop-challenge-card p,
    body.barbershop-page .barbershop-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.barbershop-page .barbershop-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.barbershop-page .barbershop-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.barbershop-page .barbershop-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.barbershop-page .barbershop-value-card,
    body.barbershop-page .barbershop-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.barbershop-page .barbershop-value-card h2,
    body.barbershop-page .barbershop-funding-note-card h2,
    body.barbershop-page .barbershop-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.barbershop-page .barbershop-value-card p:not(.section-label),
    body.barbershop-page .barbershop-funding-note-card p:not(.section-label),
    body.barbershop-page .barbershop-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.barbershop-page .barbershop-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.barbershop-page .barbershop-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   BARBERSHOP.HTML END
===================================================== */



/* =====================================================
   HAIR-SALON.HTML START

   Required images:
   public_html/assets/images/industries/hair-salon-hero-background.jpg
   public_html/assets/images/industries/hair-salon-page-background.jpg
   public_html/assets/images/industries/hair-salon-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.hair-salon-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.hair-salon-page section {
    scroll-margin-top: var(--header-height);
}

body.hair-salon-page .section-inner {
    position: relative;
    z-index: 2;
}

body.hair-salon-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.hair-salon-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.hair-salon-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.hair-salon-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HAIR SALON PAGE — HERO
===================================================== */

body.hair-salon-page .hair-salon-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/hero-hair-salon.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.hair-salon-page .hair-salon-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.hair-salon-page .hair-salon-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.hair-salon-page .hair-salon-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.hair-salon-page .hair-salon-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HAIR SALON PAGE — TRUST STRIP
===================================================== */

body.hair-salon-page .hair-salon-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.hair-salon-page .hair-salon-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.hair-salon-page .hair-salon-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.hair-salon-page .hair-salon-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   HAIR SALON PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.hair-salon-page .hair-salon-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.hair-salon-page .hair-salon-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   HAIR SALON PAGE — INTRO
===================================================== */

body.hair-salon-page .hair-salon-intro-section,
body.hair-salon-page .hair-salon-services-section,
body.hair-salon-page .hair-salon-challenges-section,
body.hair-salon-page .hair-salon-value-section,
body.hair-salon-page .hair-salon-readiness-section,
body.hair-salon-page .hair-salon-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.hair-salon-page .hair-salon-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.hair-salon-page .hair-salon-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.hair-salon-page .hair-salon-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.hair-salon-page .hair-salon-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.hair-salon-page .hair-salon-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.hair-salon-page .hair-salon-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HAIR SALON PAGE — SERVICES GRID
===================================================== */

body.hair-salon-page .hair-salon-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.hair-salon-page .hair-salon-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.hair-salon-page .hair-salon-service-card:hover,
body.hair-salon-page .hair-salon-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.hair-salon-page .hair-salon-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.hair-salon-page .hair-salon-service-card h3,
body.hair-salon-page .hair-salon-challenge-card h3,
body.hair-salon-page .hair-salon-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.hair-salon-page .hair-salon-service-card p,
body.hair-salon-page .hair-salon-challenge-card p,
body.hair-salon-page .hair-salon-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.hair-salon-page .hair-salon-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.hair-salon-page .hair-salon-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.hair-salon-page .hair-salon-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   HAIR SALON PAGE — CHALLENGES + READINESS
===================================================== */

body.hair-salon-page .hair-salon-challenges-grid,
body.hair-salon-page .hair-salon-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.hair-salon-page .hair-salon-challenge-card,
body.hair-salon-page .hair-salon-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.hair-salon-page .hair-salon-readiness-card {
    border-left-color: var(--color-blue);
}

body.hair-salon-page .hair-salon-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.hair-salon-page .hair-salon-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   HAIR SALON PAGE — VALUE + FUNDING NOTE
===================================================== */

body.hair-salon-page .hair-salon-value-card,
body.hair-salon-page .hair-salon-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.hair-salon-page .hair-salon-value-card h2,
body.hair-salon-page .hair-salon-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.hair-salon-page .hair-salon-value-card p:not(.section-label),
body.hair-salon-page .hair-salon-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   HAIR SALON PAGE — FINAL CTA
===================================================== */

body.hair-salon-page .hair-salon-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.hair-salon-page .hair-salon-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.hair-salon-page .hair-salon-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.hair-salon-page .hair-salon-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.hair-salon-page .hair-salon-primary-btn,
body.hair-salon-page .hair-salon-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.hair-salon-page .hair-salon-primary-btn:hover,
body.hair-salon-page .hair-salon-primary-btn:focus,
body.hair-salon-page .hair-salon-secondary-btn:hover,
body.hair-salon-page .hair-salon-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.hair-salon-page .hair-salon-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.hair-salon-page .hair-salon-outline-btn:hover,
body.hair-salon-page .hair-salon-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   HAIR-SALON.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.hair-salon-page .hair-salon-hero {
        padding: 68px 0;
    }

    body.hair-salon-page .hair-salon-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.hair-salon-page .hair-salon-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.hair-salon-page .hair-salon-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.hair-salon-page .hair-salon-intro-section,
    body.hair-salon-page .hair-salon-services-section,
    body.hair-salon-page .hair-salon-challenges-section,
    body.hair-salon-page .hair-salon-value-section,
    body.hair-salon-page .hair-salon-readiness-section,
    body.hair-salon-page .hair-salon-funding-note-section,
    body.hair-salon-page .hair-salon-final-cta {
        padding: 62px 0;
    }

    body.hair-salon-page .section-header {
        margin-bottom: 30px;
    }

    body.hair-salon-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.hair-salon-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.hair-salon-page .hair-salon-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.hair-salon-page .hair-salon-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.hair-salon-page .hair-salon-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.hair-salon-page .hair-salon-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.hair-salon-page .hair-salon-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.hair-salon-page .hair-salon-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.hair-salon-page .hair-salon-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.hair-salon-page .hair-salon-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.hair-salon-page .hair-salon-services-grid,
    body.hair-salon-page .hair-salon-challenges-grid,
    body.hair-salon-page .hair-salon-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.hair-salon-page .hair-salon-service-card,
    body.hair-salon-page .hair-salon-challenge-card,
    body.hair-salon-page .hair-salon-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.hair-salon-page .hair-salon-service-card i,
    body.hair-salon-page .hair-salon-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.hair-salon-page .hair-salon-service-card h3,
    body.hair-salon-page .hair-salon-challenge-card h3,
    body.hair-salon-page .hair-salon-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.hair-salon-page .hair-salon-service-card p,
    body.hair-salon-page .hair-salon-challenge-card p,
    body.hair-salon-page .hair-salon-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.hair-salon-page .hair-salon-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.hair-salon-page .hair-salon-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.hair-salon-page .hair-salon-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.hair-salon-page .hair-salon-value-card,
    body.hair-salon-page .hair-salon-funding-note-card {
        padding: 30px 24px;
    }

    body.hair-salon-page .hair-salon-value-card p:not(.section-label),
    body.hair-salon-page .hair-salon-funding-note-card p:not(.section-label),
    body.hair-salon-page .hair-salon-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   HAIR-SALON.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.hair-salon-page .hair-salon-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.hair-salon-page .hair-salon-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.hair-salon-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.hair-salon-page .hair-salon-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.hair-salon-page .hair-salon-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.hair-salon-page .hair-salon-intro-section,
    body.hair-salon-page .hair-salon-services-section,
    body.hair-salon-page .hair-salon-challenges-section,
    body.hair-salon-page .hair-salon-value-section,
    body.hair-salon-page .hair-salon-readiness-section,
    body.hair-salon-page .hair-salon-funding-note-section,
    body.hair-salon-page .hair-salon-final-cta {
        padding: 38px 0;
    }

    body.hair-salon-page .section-header {
        margin-bottom: 22px;
    }

    body.hair-salon-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.hair-salon-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.hair-salon-page .hair-salon-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.hair-salon-page .hair-salon-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.hair-salon-page .hair-salon-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.hair-salon-page .hair-salon-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.hair-salon-page .hair-salon-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.hair-salon-page .hair-salon-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.hair-salon-page .hair-salon-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.hair-salon-page .hair-salon-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.hair-salon-page .hair-salon-services-grid,
    body.hair-salon-page .hair-salon-challenges-grid,
    body.hair-salon-page .hair-salon-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.hair-salon-page .hair-salon-service-card,
    body.hair-salon-page .hair-salon-challenge-card,
    body.hair-salon-page .hair-salon-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.hair-salon-page .hair-salon-service-card i,
    body.hair-salon-page .hair-salon-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.hair-salon-page .hair-salon-service-card h3,
    body.hair-salon-page .hair-salon-challenge-card h3,
    body.hair-salon-page .hair-salon-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.hair-salon-page .hair-salon-service-card p,
    body.hair-salon-page .hair-salon-challenge-card p,
    body.hair-salon-page .hair-salon-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.hair-salon-page .hair-salon-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.hair-salon-page .hair-salon-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.hair-salon-page .hair-salon-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.hair-salon-page .hair-salon-value-card,
    body.hair-salon-page .hair-salon-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.hair-salon-page .hair-salon-value-card h2,
    body.hair-salon-page .hair-salon-funding-note-card h2,
    body.hair-salon-page .hair-salon-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.hair-salon-page .hair-salon-value-card p:not(.section-label),
    body.hair-salon-page .hair-salon-funding-note-card p:not(.section-label),
    body.hair-salon-page .hair-salon-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.hair-salon-page .hair-salon-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.hair-salon-page .hair-salon-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   HAIR-SALON.HTML END
===================================================== */



/* =====================================================
   TATTOO-SHOP.HTML START

   Required images:
   public_html/assets/images/industries/tattoo-shop-hero-background.jpg
   public_html/assets/images/industries/tattoo-shop-page-background.jpg
   public_html/assets/images/industries/tattoo-shop-intro-feature.jpg

   Industry grid image:
   public_html/assets/images/industries/tattoo-industry.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.tattoo-shop-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.tattoo-shop-page section {
    scroll-margin-top: var(--header-height);
}

body.tattoo-shop-page .section-inner {
    position: relative;
    z-index: 2;
}

body.tattoo-shop-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.tattoo-shop-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.tattoo-shop-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.tattoo-shop-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TATTOO SHOP PAGE — HERO
===================================================== */

body.tattoo-shop-page .tattoo-shop-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/tattoo-shop-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.tattoo-shop-page .tattoo-shop-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.tattoo-shop-page .tattoo-shop-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.tattoo-shop-page .tattoo-shop-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TATTOO SHOP PAGE — TRUST STRIP
===================================================== */

body.tattoo-shop-page .tattoo-shop-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.tattoo-shop-page .tattoo-shop-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   TATTOO SHOP PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.tattoo-shop-page .tattoo-shop-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.tattoo-shop-page .tattoo-shop-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   TATTOO SHOP PAGE — INTRO
===================================================== */

body.tattoo-shop-page .tattoo-shop-intro-section,
body.tattoo-shop-page .tattoo-shop-services-section,
body.tattoo-shop-page .tattoo-shop-challenges-section,
body.tattoo-shop-page .tattoo-shop-value-section,
body.tattoo-shop-page .tattoo-shop-readiness-section,
body.tattoo-shop-page .tattoo-shop-care-section,
body.tattoo-shop-page .tattoo-shop-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.tattoo-shop-page .tattoo-shop-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.tattoo-shop-page .tattoo-shop-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.tattoo-shop-page .tattoo-shop-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.tattoo-shop-page .tattoo-shop-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TATTOO SHOP PAGE — SERVICES GRID
===================================================== */

body.tattoo-shop-page .tattoo-shop-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.tattoo-shop-page .tattoo-shop-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-service-card:hover,
body.tattoo-shop-page .tattoo-shop-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.tattoo-shop-page .tattoo-shop-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.tattoo-shop-page .tattoo-shop-service-card h3,
body.tattoo-shop-page .tattoo-shop-challenge-card h3,
body.tattoo-shop-page .tattoo-shop-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-service-card p,
body.tattoo-shop-page .tattoo-shop-challenge-card p,
body.tattoo-shop-page .tattoo-shop-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.tattoo-shop-page .tattoo-shop-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.tattoo-shop-page .tattoo-shop-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.tattoo-shop-page .tattoo-shop-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   TATTOO SHOP PAGE — CHALLENGES + READINESS
===================================================== */

body.tattoo-shop-page .tattoo-shop-challenges-grid,
body.tattoo-shop-page .tattoo-shop-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.tattoo-shop-page .tattoo-shop-challenge-card,
body.tattoo-shop-page .tattoo-shop-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-readiness-card {
    border-left-color: var(--color-blue);
}

body.tattoo-shop-page .tattoo-shop-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.tattoo-shop-page .tattoo-shop-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   TATTOO SHOP PAGE — VALUE + CARE + FUNDING NOTE
===================================================== */

body.tattoo-shop-page .tattoo-shop-value-card,
body.tattoo-shop-page .tattoo-shop-care-card,
body.tattoo-shop-page .tattoo-shop-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-value-card h2,
body.tattoo-shop-page .tattoo-shop-care-card h2,
body.tattoo-shop-page .tattoo-shop-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.tattoo-shop-page .tattoo-shop-value-card p:not(.section-label),
body.tattoo-shop-page .tattoo-shop-care-card p:not(.section-label),
body.tattoo-shop-page .tattoo-shop-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TATTOO SHOP PAGE — FINAL CTA
===================================================== */

body.tattoo-shop-page .tattoo-shop-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.tattoo-shop-page .tattoo-shop-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.tattoo-shop-page .tattoo-shop-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.tattoo-shop-page .tattoo-shop-primary-btn,
body.tattoo-shop-page .tattoo-shop-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.tattoo-shop-page .tattoo-shop-primary-btn:hover,
body.tattoo-shop-page .tattoo-shop-primary-btn:focus,
body.tattoo-shop-page .tattoo-shop-secondary-btn:hover,
body.tattoo-shop-page .tattoo-shop-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.tattoo-shop-page .tattoo-shop-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.tattoo-shop-page .tattoo-shop-outline-btn:hover,
body.tattoo-shop-page .tattoo-shop-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   TATTOO-SHOP.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.tattoo-shop-page .tattoo-shop-hero {
        padding: 68px 0;
    }

    body.tattoo-shop-page .tattoo-shop-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.tattoo-shop-page .tattoo-shop-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.tattoo-shop-page .tattoo-shop-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.tattoo-shop-page .tattoo-shop-intro-section,
    body.tattoo-shop-page .tattoo-shop-services-section,
    body.tattoo-shop-page .tattoo-shop-challenges-section,
    body.tattoo-shop-page .tattoo-shop-value-section,
    body.tattoo-shop-page .tattoo-shop-readiness-section,
    body.tattoo-shop-page .tattoo-shop-care-section,
    body.tattoo-shop-page .tattoo-shop-funding-note-section,
    body.tattoo-shop-page .tattoo-shop-final-cta {
        padding: 62px 0;
    }

    body.tattoo-shop-page .section-header {
        margin-bottom: 30px;
    }

    body.tattoo-shop-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.tattoo-shop-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.tattoo-shop-page .tattoo-shop-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.tattoo-shop-page .tattoo-shop-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.tattoo-shop-page .tattoo-shop-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.tattoo-shop-page .tattoo-shop-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.tattoo-shop-page .tattoo-shop-services-grid,
    body.tattoo-shop-page .tattoo-shop-challenges-grid,
    body.tattoo-shop-page .tattoo-shop-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card,
    body.tattoo-shop-page .tattoo-shop-challenge-card,
    body.tattoo-shop-page .tattoo-shop-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card i,
    body.tattoo-shop-page .tattoo-shop-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card h3,
    body.tattoo-shop-page .tattoo-shop-challenge-card h3,
    body.tattoo-shop-page .tattoo-shop-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card p,
    body.tattoo-shop-page .tattoo-shop-challenge-card p,
    body.tattoo-shop-page .tattoo-shop-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.tattoo-shop-page .tattoo-shop-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.tattoo-shop-page .tattoo-shop-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.tattoo-shop-page .tattoo-shop-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.tattoo-shop-page .tattoo-shop-value-card,
    body.tattoo-shop-page .tattoo-shop-care-card,
    body.tattoo-shop-page .tattoo-shop-funding-note-card {
        padding: 30px 24px;
    }

    body.tattoo-shop-page .tattoo-shop-value-card p:not(.section-label),
    body.tattoo-shop-page .tattoo-shop-care-card p:not(.section-label),
    body.tattoo-shop-page .tattoo-shop-funding-note-card p:not(.section-label),
    body.tattoo-shop-page .tattoo-shop-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   TATTOO-SHOP.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.tattoo-shop-page .tattoo-shop-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.tattoo-shop-page .tattoo-shop-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.tattoo-shop-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.tattoo-shop-page .tattoo-shop-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.tattoo-shop-page .tattoo-shop-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.tattoo-shop-page .tattoo-shop-intro-section,
    body.tattoo-shop-page .tattoo-shop-services-section,
    body.tattoo-shop-page .tattoo-shop-challenges-section,
    body.tattoo-shop-page .tattoo-shop-value-section,
    body.tattoo-shop-page .tattoo-shop-readiness-section,
    body.tattoo-shop-page .tattoo-shop-care-section,
    body.tattoo-shop-page .tattoo-shop-funding-note-section,
    body.tattoo-shop-page .tattoo-shop-final-cta {
        padding: 38px 0;
    }

    body.tattoo-shop-page .section-header {
        margin-bottom: 22px;
    }

    body.tattoo-shop-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.tattoo-shop-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.tattoo-shop-page .tattoo-shop-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.tattoo-shop-page .tattoo-shop-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.tattoo-shop-page .tattoo-shop-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.tattoo-shop-page .tattoo-shop-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.tattoo-shop-page .tattoo-shop-services-grid,
    body.tattoo-shop-page .tattoo-shop-challenges-grid,
    body.tattoo-shop-page .tattoo-shop-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card,
    body.tattoo-shop-page .tattoo-shop-challenge-card,
    body.tattoo-shop-page .tattoo-shop-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card i,
    body.tattoo-shop-page .tattoo-shop-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.tattoo-shop-page .tattoo-shop-service-card h3,
    body.tattoo-shop-page .tattoo-shop-challenge-card h3,
    body.tattoo-shop-page .tattoo-shop-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.tattoo-shop-page .tattoo-shop-service-card p,
    body.tattoo-shop-page .tattoo-shop-challenge-card p,
    body.tattoo-shop-page .tattoo-shop-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.tattoo-shop-page .tattoo-shop-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.tattoo-shop-page .tattoo-shop-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.tattoo-shop-page .tattoo-shop-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.tattoo-shop-page .tattoo-shop-value-card,
    body.tattoo-shop-page .tattoo-shop-care-card,
    body.tattoo-shop-page .tattoo-shop-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.tattoo-shop-page .tattoo-shop-value-card h2,
    body.tattoo-shop-page .tattoo-shop-care-card h2,
    body.tattoo-shop-page .tattoo-shop-funding-note-card h2,
    body.tattoo-shop-page .tattoo-shop-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.tattoo-shop-page .tattoo-shop-value-card p:not(.section-label),
    body.tattoo-shop-page .tattoo-shop-care-card p:not(.section-label),
    body.tattoo-shop-page .tattoo-shop-funding-note-card p:not(.section-label),
    body.tattoo-shop-page .tattoo-shop-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.tattoo-shop-page .tattoo-shop-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.tattoo-shop-page .tattoo-shop-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   TATTOO-SHOP.HTML END
===================================================== */




/* =====================================================
   SPA-ESTHETICS.HTML START

   Required images:
   public_html/assets/images/industries/spa-esthetics-hero-background.jpg
   public_html/assets/images/industries/spa-esthetics-page-background.jpg
   public_html/assets/images/industries/spa-esthetics-intro-feature.jpg

   Industry grid image:
   public_html/assets/images/industries/spa-esthetics-industry.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.spa-esthetics-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.spa-esthetics-page section {
    scroll-margin-top: var(--header-height);
}

body.spa-esthetics-page .section-inner {
    position: relative;
    z-index: 2;
}

body.spa-esthetics-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.spa-esthetics-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.spa-esthetics-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.spa-esthetics-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SPA & ESTHETICS PAGE — HERO
===================================================== */

body.spa-esthetics-page .spa-esthetics-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/spa-esthetics-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.spa-esthetics-page .spa-esthetics-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.spa-esthetics-page .spa-esthetics-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.spa-esthetics-page .spa-esthetics-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SPA & ESTHETICS PAGE — TRUST STRIP
===================================================== */

body.spa-esthetics-page .spa-esthetics-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.spa-esthetics-page .spa-esthetics-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   SPA & ESTHETICS PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.spa-esthetics-page .spa-esthetics-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.spa-esthetics-page .spa-esthetics-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   SPA & ESTHETICS PAGE — INTRO
===================================================== */

body.spa-esthetics-page .spa-esthetics-intro-section,
body.spa-esthetics-page .spa-esthetics-services-section,
body.spa-esthetics-page .spa-esthetics-challenges-section,
body.spa-esthetics-page .spa-esthetics-value-section,
body.spa-esthetics-page .spa-esthetics-readiness-section,
body.spa-esthetics-page .spa-esthetics-care-section,
body.spa-esthetics-page .spa-esthetics-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.spa-esthetics-page .spa-esthetics-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.spa-esthetics-page .spa-esthetics-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.spa-esthetics-page .spa-esthetics-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.spa-esthetics-page .spa-esthetics-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SPA & ESTHETICS PAGE — SERVICES GRID
===================================================== */

body.spa-esthetics-page .spa-esthetics-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.spa-esthetics-page .spa-esthetics-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-service-card:hover,
body.spa-esthetics-page .spa-esthetics-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.spa-esthetics-page .spa-esthetics-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.spa-esthetics-page .spa-esthetics-service-card h3,
body.spa-esthetics-page .spa-esthetics-challenge-card h3,
body.spa-esthetics-page .spa-esthetics-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-service-card p,
body.spa-esthetics-page .spa-esthetics-challenge-card p,
body.spa-esthetics-page .spa-esthetics-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.spa-esthetics-page .spa-esthetics-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.spa-esthetics-page .spa-esthetics-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.spa-esthetics-page .spa-esthetics-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   SPA & ESTHETICS PAGE — CHALLENGES + READINESS
===================================================== */

body.spa-esthetics-page .spa-esthetics-challenges-grid,
body.spa-esthetics-page .spa-esthetics-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.spa-esthetics-page .spa-esthetics-challenge-card,
body.spa-esthetics-page .spa-esthetics-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-readiness-card {
    border-left-color: var(--color-blue);
}

body.spa-esthetics-page .spa-esthetics-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.spa-esthetics-page .spa-esthetics-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   SPA & ESTHETICS PAGE — VALUE + CARE + FUNDING NOTE
===================================================== */

body.spa-esthetics-page .spa-esthetics-value-card,
body.spa-esthetics-page .spa-esthetics-care-card,
body.spa-esthetics-page .spa-esthetics-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-value-card h2,
body.spa-esthetics-page .spa-esthetics-care-card h2,
body.spa-esthetics-page .spa-esthetics-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.spa-esthetics-page .spa-esthetics-value-card p:not(.section-label),
body.spa-esthetics-page .spa-esthetics-care-card p:not(.section-label),
body.spa-esthetics-page .spa-esthetics-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SPA & ESTHETICS PAGE — FINAL CTA
===================================================== */

body.spa-esthetics-page .spa-esthetics-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.spa-esthetics-page .spa-esthetics-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.spa-esthetics-page .spa-esthetics-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.spa-esthetics-page .spa-esthetics-primary-btn,
body.spa-esthetics-page .spa-esthetics-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.spa-esthetics-page .spa-esthetics-primary-btn:hover,
body.spa-esthetics-page .spa-esthetics-primary-btn:focus,
body.spa-esthetics-page .spa-esthetics-secondary-btn:hover,
body.spa-esthetics-page .spa-esthetics-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.spa-esthetics-page .spa-esthetics-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.spa-esthetics-page .spa-esthetics-outline-btn:hover,
body.spa-esthetics-page .spa-esthetics-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   SPA-ESTHETICS.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.spa-esthetics-page .spa-esthetics-hero {
        padding: 68px 0;
    }

    body.spa-esthetics-page .spa-esthetics-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.spa-esthetics-page .spa-esthetics-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.spa-esthetics-page .spa-esthetics-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.spa-esthetics-page .spa-esthetics-intro-section,
    body.spa-esthetics-page .spa-esthetics-services-section,
    body.spa-esthetics-page .spa-esthetics-challenges-section,
    body.spa-esthetics-page .spa-esthetics-value-section,
    body.spa-esthetics-page .spa-esthetics-readiness-section,
    body.spa-esthetics-page .spa-esthetics-care-section,
    body.spa-esthetics-page .spa-esthetics-funding-note-section,
    body.spa-esthetics-page .spa-esthetics-final-cta {
        padding: 62px 0;
    }

    body.spa-esthetics-page .section-header {
        margin-bottom: 30px;
    }

    body.spa-esthetics-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.spa-esthetics-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.spa-esthetics-page .spa-esthetics-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.spa-esthetics-page .spa-esthetics-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.spa-esthetics-page .spa-esthetics-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.spa-esthetics-page .spa-esthetics-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.spa-esthetics-page .spa-esthetics-services-grid,
    body.spa-esthetics-page .spa-esthetics-challenges-grid,
    body.spa-esthetics-page .spa-esthetics-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card,
    body.spa-esthetics-page .spa-esthetics-challenge-card,
    body.spa-esthetics-page .spa-esthetics-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card i,
    body.spa-esthetics-page .spa-esthetics-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card h3,
    body.spa-esthetics-page .spa-esthetics-challenge-card h3,
    body.spa-esthetics-page .spa-esthetics-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card p,
    body.spa-esthetics-page .spa-esthetics-challenge-card p,
    body.spa-esthetics-page .spa-esthetics-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.spa-esthetics-page .spa-esthetics-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.spa-esthetics-page .spa-esthetics-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.spa-esthetics-page .spa-esthetics-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.spa-esthetics-page .spa-esthetics-value-card,
    body.spa-esthetics-page .spa-esthetics-care-card,
    body.spa-esthetics-page .spa-esthetics-funding-note-card {
        padding: 30px 24px;
    }

    body.spa-esthetics-page .spa-esthetics-value-card p:not(.section-label),
    body.spa-esthetics-page .spa-esthetics-care-card p:not(.section-label),
    body.spa-esthetics-page .spa-esthetics-funding-note-card p:not(.section-label),
    body.spa-esthetics-page .spa-esthetics-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   SPA-ESTHETICS.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.spa-esthetics-page .spa-esthetics-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.spa-esthetics-page .spa-esthetics-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.spa-esthetics-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.spa-esthetics-page .spa-esthetics-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.spa-esthetics-page .spa-esthetics-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.spa-esthetics-page .spa-esthetics-intro-section,
    body.spa-esthetics-page .spa-esthetics-services-section,
    body.spa-esthetics-page .spa-esthetics-challenges-section,
    body.spa-esthetics-page .spa-esthetics-value-section,
    body.spa-esthetics-page .spa-esthetics-readiness-section,
    body.spa-esthetics-page .spa-esthetics-care-section,
    body.spa-esthetics-page .spa-esthetics-funding-note-section,
    body.spa-esthetics-page .spa-esthetics-final-cta {
        padding: 38px 0;
    }

    body.spa-esthetics-page .section-header {
        margin-bottom: 22px;
    }

    body.spa-esthetics-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.spa-esthetics-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.spa-esthetics-page .spa-esthetics-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.spa-esthetics-page .spa-esthetics-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.spa-esthetics-page .spa-esthetics-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.spa-esthetics-page .spa-esthetics-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.spa-esthetics-page .spa-esthetics-services-grid,
    body.spa-esthetics-page .spa-esthetics-challenges-grid,
    body.spa-esthetics-page .spa-esthetics-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card,
    body.spa-esthetics-page .spa-esthetics-challenge-card,
    body.spa-esthetics-page .spa-esthetics-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card i,
    body.spa-esthetics-page .spa-esthetics-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.spa-esthetics-page .spa-esthetics-service-card h3,
    body.spa-esthetics-page .spa-esthetics-challenge-card h3,
    body.spa-esthetics-page .spa-esthetics-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.spa-esthetics-page .spa-esthetics-service-card p,
    body.spa-esthetics-page .spa-esthetics-challenge-card p,
    body.spa-esthetics-page .spa-esthetics-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.spa-esthetics-page .spa-esthetics-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.spa-esthetics-page .spa-esthetics-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.spa-esthetics-page .spa-esthetics-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.spa-esthetics-page .spa-esthetics-value-card,
    body.spa-esthetics-page .spa-esthetics-care-card,
    body.spa-esthetics-page .spa-esthetics-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.spa-esthetics-page .spa-esthetics-value-card h2,
    body.spa-esthetics-page .spa-esthetics-care-card h2,
    body.spa-esthetics-page .spa-esthetics-funding-note-card h2,
    body.spa-esthetics-page .spa-esthetics-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.spa-esthetics-page .spa-esthetics-value-card p:not(.section-label),
    body.spa-esthetics-page .spa-esthetics-care-card p:not(.section-label),
    body.spa-esthetics-page .spa-esthetics-funding-note-card p:not(.section-label),
    body.spa-esthetics-page .spa-esthetics-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.spa-esthetics-page .spa-esthetics-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.spa-esthetics-page .spa-esthetics-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   SPA-ESTHETICS.HTML END
===================================================== */

/* =====================================================
   NAIL-SALON.HTML START

   Required images:
   public_html/assets/images/industries/nail-salon-hero-background.jpg
   public_html/assets/images/industries/nail-salon-page-background.jpg
   public_html/assets/images/industries/nail-salon-intro-feature.jpg

   Industry grid image:
   public_html/assets/images/industries/nail-salon-industry.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.nail-salon-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.nail-salon-page section {
    scroll-margin-top: var(--header-height);
}

body.nail-salon-page .section-inner {
    position: relative;
    z-index: 2;
}

body.nail-salon-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.nail-salon-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.nail-salon-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.nail-salon-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   NAIL SALON PAGE — HERO
===================================================== */

body.nail-salon-page .nail-salon-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/nail-salon-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.nail-salon-page .nail-salon-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.nail-salon-page .nail-salon-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.nail-salon-page .nail-salon-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.nail-salon-page .nail-salon-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   NAIL SALON PAGE — TRUST STRIP
===================================================== */

body.nail-salon-page .nail-salon-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.nail-salon-page .nail-salon-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.nail-salon-page .nail-salon-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.nail-salon-page .nail-salon-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   NAIL SALON PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.nail-salon-page .nail-salon-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.nail-salon-page .nail-salon-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   NAIL SALON PAGE — INTRO
===================================================== */

body.nail-salon-page .nail-salon-intro-section,
body.nail-salon-page .nail-salon-services-section,
body.nail-salon-page .nail-salon-challenges-section,
body.nail-salon-page .nail-salon-value-section,
body.nail-salon-page .nail-salon-readiness-section,
body.nail-salon-page .nail-salon-care-section,
body.nail-salon-page .nail-salon-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.nail-salon-page .nail-salon-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.nail-salon-page .nail-salon-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.nail-salon-page .nail-salon-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.nail-salon-page .nail-salon-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.nail-salon-page .nail-salon-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.nail-salon-page .nail-salon-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   NAIL SALON PAGE — SERVICES GRID
===================================================== */

body.nail-salon-page .nail-salon-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.nail-salon-page .nail-salon-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.nail-salon-page .nail-salon-service-card:hover,
body.nail-salon-page .nail-salon-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.nail-salon-page .nail-salon-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.nail-salon-page .nail-salon-service-card h3,
body.nail-salon-page .nail-salon-challenge-card h3,
body.nail-salon-page .nail-salon-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.nail-salon-page .nail-salon-service-card p,
body.nail-salon-page .nail-salon-challenge-card p,
body.nail-salon-page .nail-salon-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.nail-salon-page .nail-salon-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.nail-salon-page .nail-salon-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.nail-salon-page .nail-salon-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   NAIL SALON PAGE — CHALLENGES + READINESS
===================================================== */

body.nail-salon-page .nail-salon-challenges-grid,
body.nail-salon-page .nail-salon-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.nail-salon-page .nail-salon-challenge-card,
body.nail-salon-page .nail-salon-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.nail-salon-page .nail-salon-readiness-card {
    border-left-color: var(--color-blue);
}

body.nail-salon-page .nail-salon-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.nail-salon-page .nail-salon-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   NAIL SALON PAGE — VALUE + CARE + FUNDING NOTE
===================================================== */

body.nail-salon-page .nail-salon-value-card,
body.nail-salon-page .nail-salon-care-card,
body.nail-salon-page .nail-salon-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.nail-salon-page .nail-salon-value-card h2,
body.nail-salon-page .nail-salon-care-card h2,
body.nail-salon-page .nail-salon-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.nail-salon-page .nail-salon-value-card p:not(.section-label),
body.nail-salon-page .nail-salon-care-card p:not(.section-label),
body.nail-salon-page .nail-salon-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   NAIL SALON PAGE — FINAL CTA
===================================================== */

body.nail-salon-page .nail-salon-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.nail-salon-page .nail-salon-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.nail-salon-page .nail-salon-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.nail-salon-page .nail-salon-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.nail-salon-page .nail-salon-primary-btn,
body.nail-salon-page .nail-salon-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.nail-salon-page .nail-salon-primary-btn:hover,
body.nail-salon-page .nail-salon-primary-btn:focus,
body.nail-salon-page .nail-salon-secondary-btn:hover,
body.nail-salon-page .nail-salon-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.nail-salon-page .nail-salon-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.nail-salon-page .nail-salon-outline-btn:hover,
body.nail-salon-page .nail-salon-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   NAIL-SALON.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.nail-salon-page .nail-salon-hero {
        padding: 68px 0;
    }

    body.nail-salon-page .nail-salon-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.nail-salon-page .nail-salon-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.nail-salon-page .nail-salon-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.nail-salon-page .nail-salon-intro-section,
    body.nail-salon-page .nail-salon-services-section,
    body.nail-salon-page .nail-salon-challenges-section,
    body.nail-salon-page .nail-salon-value-section,
    body.nail-salon-page .nail-salon-readiness-section,
    body.nail-salon-page .nail-salon-care-section,
    body.nail-salon-page .nail-salon-funding-note-section,
    body.nail-salon-page .nail-salon-final-cta {
        padding: 62px 0;
    }

    body.nail-salon-page .section-header {
        margin-bottom: 30px;
    }

    body.nail-salon-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.nail-salon-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.nail-salon-page .nail-salon-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.nail-salon-page .nail-salon-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.nail-salon-page .nail-salon-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.nail-salon-page .nail-salon-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.nail-salon-page .nail-salon-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.nail-salon-page .nail-salon-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.nail-salon-page .nail-salon-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.nail-salon-page .nail-salon-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.nail-salon-page .nail-salon-services-grid,
    body.nail-salon-page .nail-salon-challenges-grid,
    body.nail-salon-page .nail-salon-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.nail-salon-page .nail-salon-service-card,
    body.nail-salon-page .nail-salon-challenge-card,
    body.nail-salon-page .nail-salon-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.nail-salon-page .nail-salon-service-card i,
    body.nail-salon-page .nail-salon-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.nail-salon-page .nail-salon-service-card h3,
    body.nail-salon-page .nail-salon-challenge-card h3,
    body.nail-salon-page .nail-salon-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.nail-salon-page .nail-salon-service-card p,
    body.nail-salon-page .nail-salon-challenge-card p,
    body.nail-salon-page .nail-salon-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.nail-salon-page .nail-salon-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.nail-salon-page .nail-salon-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.nail-salon-page .nail-salon-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.nail-salon-page .nail-salon-value-card,
    body.nail-salon-page .nail-salon-care-card,
    body.nail-salon-page .nail-salon-funding-note-card {
        padding: 30px 24px;
    }

    body.nail-salon-page .nail-salon-value-card p:not(.section-label),
    body.nail-salon-page .nail-salon-care-card p:not(.section-label),
    body.nail-salon-page .nail-salon-funding-note-card p:not(.section-label),
    body.nail-salon-page .nail-salon-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   NAIL-SALON.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.nail-salon-page .nail-salon-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.nail-salon-page .nail-salon-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.nail-salon-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.nail-salon-page .nail-salon-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.nail-salon-page .nail-salon-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.nail-salon-page .nail-salon-intro-section,
    body.nail-salon-page .nail-salon-services-section,
    body.nail-salon-page .nail-salon-challenges-section,
    body.nail-salon-page .nail-salon-value-section,
    body.nail-salon-page .nail-salon-readiness-section,
    body.nail-salon-page .nail-salon-care-section,
    body.nail-salon-page .nail-salon-funding-note-section,
    body.nail-salon-page .nail-salon-final-cta {
        padding: 38px 0;
    }

    body.nail-salon-page .section-header {
        margin-bottom: 22px;
    }

    body.nail-salon-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.nail-salon-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.nail-salon-page .nail-salon-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.nail-salon-page .nail-salon-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.nail-salon-page .nail-salon-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.nail-salon-page .nail-salon-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.nail-salon-page .nail-salon-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.nail-salon-page .nail-salon-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.nail-salon-page .nail-salon-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.nail-salon-page .nail-salon-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.nail-salon-page .nail-salon-services-grid,
    body.nail-salon-page .nail-salon-challenges-grid,
    body.nail-salon-page .nail-salon-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.nail-salon-page .nail-salon-service-card,
    body.nail-salon-page .nail-salon-challenge-card,
    body.nail-salon-page .nail-salon-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.nail-salon-page .nail-salon-service-card i,
    body.nail-salon-page .nail-salon-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.nail-salon-page .nail-salon-service-card h3,
    body.nail-salon-page .nail-salon-challenge-card h3,
    body.nail-salon-page .nail-salon-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.nail-salon-page .nail-salon-service-card p,
    body.nail-salon-page .nail-salon-challenge-card p,
    body.nail-salon-page .nail-salon-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.nail-salon-page .nail-salon-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.nail-salon-page .nail-salon-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.nail-salon-page .nail-salon-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.nail-salon-page .nail-salon-value-card,
    body.nail-salon-page .nail-salon-care-card,
    body.nail-salon-page .nail-salon-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.nail-salon-page .nail-salon-value-card h2,
    body.nail-salon-page .nail-salon-care-card h2,
    body.nail-salon-page .nail-salon-funding-note-card h2,
    body.nail-salon-page .nail-salon-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.nail-salon-page .nail-salon-value-card p:not(.section-label),
    body.nail-salon-page .nail-salon-care-card p:not(.section-label),
    body.nail-salon-page .nail-salon-funding-note-card p:not(.section-label),
    body.nail-salon-page .nail-salon-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.nail-salon-page .nail-salon-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.nail-salon-page .nail-salon-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   NAIL-SALON.HTML END
===================================================== */




/* =====================================================
   TECHNOLOGY.HTML START

   Required images:
   public_html/assets/images/industries/technology-hero-background.jpg
   public_html/assets/images/industries/technology-page-background.jpg
   public_html/assets/images/industries/technology-intro-feature.jpg

   Industry grid image:
   public_html/assets/images/industries/technology-industry.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.technology-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.technology-page section {
    scroll-margin-top: var(--header-height);
}

body.technology-page .section-inner {
    position: relative;
    z-index: 2;
}

body.technology-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.technology-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.technology-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.technology-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TECHNOLOGY PAGE — HERO
===================================================== */

body.technology-page .technology-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.52)
        ),
        url("../images/industries/technology-industry.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.technology-page .technology-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.66),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.technology-page .technology-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.68);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.technology-page .technology-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.technology-page .technology-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TECHNOLOGY PAGE — TRUST STRIP
===================================================== */

body.technology-page .technology-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.technology-page .technology-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.technology-page .technology-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.technology-page .technology-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   TECHNOLOGY PAGE — FULL CONTENT BACKGROUND
===================================================== */

body.technology-page .technology-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/industries/background-page.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.technology-page .technology-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   TECHNOLOGY PAGE — INTRO
===================================================== */

body.technology-page .technology-intro-section,
body.technology-page .technology-services-section,
body.technology-page .technology-challenges-section,
body.technology-page .technology-value-section,
body.technology-page .technology-readiness-section,
body.technology-page .technology-care-section,
body.technology-page .technology-funding-note-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.technology-page .technology-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.technology-page .technology-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.technology-page .technology-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.technology-page .technology-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.technology-page .technology-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.technology-page .technology-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TECHNOLOGY PAGE — SERVICES GRID
===================================================== */

body.technology-page .technology-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.technology-page .technology-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.technology-page .technology-service-card:hover,
body.technology-page .technology-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.technology-page .technology-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.technology-page .technology-service-card h3,
body.technology-page .technology-challenge-card h3,
body.technology-page .technology-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.technology-page .technology-service-card p,
body.technology-page .technology-challenge-card p,
body.technology-page .technology-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.technology-page .technology-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.technology-page .technology-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.technology-page .technology-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   TECHNOLOGY PAGE — CHALLENGES + READINESS
===================================================== */

body.technology-page .technology-challenges-grid,
body.technology-page .technology-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.technology-page .technology-challenge-card,
body.technology-page .technology-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.technology-page .technology-readiness-card {
    border-left-color: var(--color-blue);
}

body.technology-page .technology-challenge-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.technology-page .technology-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   TECHNOLOGY PAGE — VALUE + CARE + FUNDING NOTE
===================================================== */

body.technology-page .technology-value-card,
body.technology-page .technology-care-card,
body.technology-page .technology-funding-note-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.technology-page .technology-value-card h2,
body.technology-page .technology-care-card h2,
body.technology-page .technology-funding-note-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.technology-page .technology-value-card p:not(.section-label),
body.technology-page .technology-care-card p:not(.section-label),
body.technology-page .technology-funding-note-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TECHNOLOGY PAGE — FINAL CTA
===================================================== */

body.technology-page .technology-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.technology-page .technology-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.technology-page .technology-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.technology-page .technology-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.technology-page .technology-primary-btn,
body.technology-page .technology-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.technology-page .technology-primary-btn:hover,
body.technology-page .technology-primary-btn:focus,
body.technology-page .technology-secondary-btn:hover,
body.technology-page .technology-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.technology-page .technology-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.technology-page .technology-outline-btn:hover,
body.technology-page .technology-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   TECHNOLOGY.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.technology-page .technology-hero {
        padding: 68px 0;
    }

    body.technology-page .technology-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.technology-page .technology-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.technology-page .technology-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.technology-page .technology-intro-section,
    body.technology-page .technology-services-section,
    body.technology-page .technology-challenges-section,
    body.technology-page .technology-value-section,
    body.technology-page .technology-readiness-section,
    body.technology-page .technology-care-section,
    body.technology-page .technology-funding-note-section,
    body.technology-page .technology-final-cta {
        padding: 62px 0;
    }

    body.technology-page .section-header {
        margin-bottom: 30px;
    }

    body.technology-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.technology-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.technology-page .technology-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.technology-page .technology-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.technology-page .technology-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.technology-page .technology-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.technology-page .technology-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.technology-page .technology-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.technology-page .technology-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.technology-page .technology-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.technology-page .technology-services-grid,
    body.technology-page .technology-challenges-grid,
    body.technology-page .technology-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.technology-page .technology-service-card,
    body.technology-page .technology-challenge-card,
    body.technology-page .technology-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.technology-page .technology-service-card i,
    body.technology-page .technology-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.technology-page .technology-service-card h3,
    body.technology-page .technology-challenge-card h3,
    body.technology-page .technology-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.technology-page .technology-service-card p,
    body.technology-page .technology-challenge-card p,
    body.technology-page .technology-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.technology-page .technology-challenge-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.technology-page .technology-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.technology-page .technology-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.technology-page .technology-value-card,
    body.technology-page .technology-care-card,
    body.technology-page .technology-funding-note-card {
        padding: 30px 24px;
    }

    body.technology-page .technology-value-card p:not(.section-label),
    body.technology-page .technology-care-card p:not(.section-label),
    body.technology-page .technology-funding-note-card p:not(.section-label),
    body.technology-page .technology-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   TECHNOLOGY.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.technology-page .technology-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.technology-page .technology-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.technology-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.technology-page .technology-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.technology-page .technology-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.technology-page .technology-intro-section,
    body.technology-page .technology-services-section,
    body.technology-page .technology-challenges-section,
    body.technology-page .technology-value-section,
    body.technology-page .technology-readiness-section,
    body.technology-page .technology-care-section,
    body.technology-page .technology-funding-note-section,
    body.technology-page .technology-final-cta {
        padding: 38px 0;
    }

    body.technology-page .section-header {
        margin-bottom: 22px;
    }

    body.technology-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.technology-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.technology-page .technology-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.technology-page .technology-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.technology-page .technology-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.technology-page .technology-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.technology-page .technology-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.technology-page .technology-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.technology-page .technology-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.technology-page .technology-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.technology-page .technology-services-grid,
    body.technology-page .technology-challenges-grid,
    body.technology-page .technology-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.technology-page .technology-service-card,
    body.technology-page .technology-challenge-card,
    body.technology-page .technology-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.technology-page .technology-service-card i,
    body.technology-page .technology-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.technology-page .technology-service-card h3,
    body.technology-page .technology-challenge-card h3,
    body.technology-page .technology-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.technology-page .technology-service-card p,
    body.technology-page .technology-challenge-card p,
    body.technology-page .technology-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.technology-page .technology-challenge-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.technology-page .technology-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.technology-page .technology-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.technology-page .technology-value-card,
    body.technology-page .technology-care-card,
    body.technology-page .technology-funding-note-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.technology-page .technology-value-card h2,
    body.technology-page .technology-care-card h2,
    body.technology-page .technology-funding-note-card h2,
    body.technology-page .technology-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.technology-page .technology-value-card p:not(.section-label),
    body.technology-page .technology-care-card p:not(.section-label),
    body.technology-page .technology-funding-note-card p:not(.section-label),
    body.technology-page .technology-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.technology-page .technology-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.technology-page .technology-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   TECHNOLOGY.HTML END
===================================================== */



/* =====================================================
   SERVICE2.HTML START
   QUICKBOOKS SETUP & TRAINING

   Required images:
   public_html/assets/images/services/quickbooks-training.jpg
   public_html/assets/images/services/quickbooks-training-hero-background.jpg
   public_html/assets/images/services/quickbooks-training-page-background.jpg
   public_html/assets/images/services/quickbooks-training-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.quickbooks-training-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.quickbooks-training-page section {
    scroll-margin-top: var(--header-height);
}

body.quickbooks-training-page .section-inner {
    position: relative;
    z-index: 2;
}

body.quickbooks-training-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.quickbooks-training-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.quickbooks-training-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.quickbooks-training-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — HERO
===================================================== */

body.quickbooks-training-page .quickbooks-training-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.80),
            rgba(0, 119, 182, 0.54)
        ),
        url("../images/services/services-cleanup-detail.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.quickbooks-training-page .quickbooks-training-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 16% 22%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.68),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.quickbooks-training-page .quickbooks-training-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.70);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.quickbooks-training-page .quickbooks-training-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — TRUST STRIP
===================================================== */

body.quickbooks-training-page .quickbooks-training-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.quickbooks-training-page .quickbooks-training-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — FULL CONTENT BACKGROUND
===================================================== */

body.quickbooks-training-page .quickbooks-training-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/services/quickbooks-training-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.quickbooks-training-page .quickbooks-training-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — INTRO + SECTIONS
===================================================== */

body.quickbooks-training-page .quickbooks-training-intro-section,
body.quickbooks-training-page .quickbooks-training-services-section,
body.quickbooks-training-page .quickbooks-training-process-section,
body.quickbooks-training-page .quickbooks-training-value-section,
body.quickbooks-training-page .quickbooks-training-topics-section,
body.quickbooks-training-page .quickbooks-training-care-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.quickbooks-training-page .quickbooks-training-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.quickbooks-training-page .quickbooks-training-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.quickbooks-training-page .quickbooks-training-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.quickbooks-training-page .quickbooks-training-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — SERVICES GRID
===================================================== */

body.quickbooks-training-page .quickbooks-training-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.quickbooks-training-page .quickbooks-training-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-service-card:hover,
body.quickbooks-training-page .quickbooks-training-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.quickbooks-training-page .quickbooks-training-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.quickbooks-training-page .quickbooks-training-service-card h3,
body.quickbooks-training-page .quickbooks-training-process-card h3,
body.quickbooks-training-page .quickbooks-training-topic-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-service-card p,
body.quickbooks-training-page .quickbooks-training-process-card p,
body.quickbooks-training-page .quickbooks-training-topic-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.quickbooks-training-page .quickbooks-training-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.quickbooks-training-page .quickbooks-training-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.quickbooks-training-page .quickbooks-training-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — PROCESS + TOPICS
===================================================== */

body.quickbooks-training-page .quickbooks-training-process-grid,
body.quickbooks-training-page .quickbooks-training-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.quickbooks-training-page .quickbooks-training-process-card,
body.quickbooks-training-page .quickbooks-training-topic-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-topic-card {
    border-left-color: var(--color-blue);
}

body.quickbooks-training-page .quickbooks-training-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.quickbooks-training-page .quickbooks-training-topic-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — VALUE + CARE
===================================================== */

body.quickbooks-training-page .quickbooks-training-value-card,
body.quickbooks-training-page .quickbooks-training-care-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-value-card h2,
body.quickbooks-training-page .quickbooks-training-care-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.quickbooks-training-page .quickbooks-training-value-card p:not(.section-label),
body.quickbooks-training-page .quickbooks-training-care-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   QUICKBOOKS SETUP & TRAINING — FINAL CTA
===================================================== */

body.quickbooks-training-page .quickbooks-training-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.quickbooks-training-page .quickbooks-training-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.quickbooks-training-page .quickbooks-training-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.quickbooks-training-page .quickbooks-training-primary-btn,
body.quickbooks-training-page .quickbooks-training-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.quickbooks-training-page .quickbooks-training-primary-btn:hover,
body.quickbooks-training-page .quickbooks-training-primary-btn:focus,
body.quickbooks-training-page .quickbooks-training-secondary-btn:hover,
body.quickbooks-training-page .quickbooks-training-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.quickbooks-training-page .quickbooks-training-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.quickbooks-training-page .quickbooks-training-outline-btn:hover,
body.quickbooks-training-page .quickbooks-training-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   SERVICE2.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.quickbooks-training-page .quickbooks-training-hero {
        padding: 68px 0;
    }

    body.quickbooks-training-page .quickbooks-training-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.quickbooks-training-page .quickbooks-training-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.quickbooks-training-page .quickbooks-training-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.quickbooks-training-page .quickbooks-training-intro-section,
    body.quickbooks-training-page .quickbooks-training-services-section,
    body.quickbooks-training-page .quickbooks-training-process-section,
    body.quickbooks-training-page .quickbooks-training-value-section,
    body.quickbooks-training-page .quickbooks-training-topics-section,
    body.quickbooks-training-page .quickbooks-training-care-section,
    body.quickbooks-training-page .quickbooks-training-final-cta {
        padding: 62px 0;
    }

    body.quickbooks-training-page .section-header {
        margin-bottom: 30px;
    }

    body.quickbooks-training-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.quickbooks-training-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.quickbooks-training-page .quickbooks-training-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.quickbooks-training-page .quickbooks-training-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.quickbooks-training-page .quickbooks-training-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.quickbooks-training-page .quickbooks-training-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.quickbooks-training-page .quickbooks-training-services-grid,
    body.quickbooks-training-page .quickbooks-training-process-grid,
    body.quickbooks-training-page .quickbooks-training-topics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card,
    body.quickbooks-training-page .quickbooks-training-process-card,
    body.quickbooks-training-page .quickbooks-training-topic-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card i,
    body.quickbooks-training-page .quickbooks-training-topic-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card h3,
    body.quickbooks-training-page .quickbooks-training-process-card h3,
    body.quickbooks-training-page .quickbooks-training-topic-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card p,
    body.quickbooks-training-page .quickbooks-training-process-card p,
    body.quickbooks-training-page .quickbooks-training-topic-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.quickbooks-training-page .quickbooks-training-process-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.quickbooks-training-page .quickbooks-training-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.quickbooks-training-page .quickbooks-training-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.quickbooks-training-page .quickbooks-training-value-card,
    body.quickbooks-training-page .quickbooks-training-care-card {
        padding: 30px 24px;
    }

    body.quickbooks-training-page .quickbooks-training-value-card p:not(.section-label),
    body.quickbooks-training-page .quickbooks-training-care-card p:not(.section-label),
    body.quickbooks-training-page .quickbooks-training-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   SERVICE2.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.quickbooks-training-page .quickbooks-training-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.quickbooks-training-page .quickbooks-training-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.quickbooks-training-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.quickbooks-training-page .quickbooks-training-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.quickbooks-training-page .quickbooks-training-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.quickbooks-training-page .quickbooks-training-intro-section,
    body.quickbooks-training-page .quickbooks-training-services-section,
    body.quickbooks-training-page .quickbooks-training-process-section,
    body.quickbooks-training-page .quickbooks-training-value-section,
    body.quickbooks-training-page .quickbooks-training-topics-section,
    body.quickbooks-training-page .quickbooks-training-care-section,
    body.quickbooks-training-page .quickbooks-training-final-cta {
        padding: 38px 0;
    }

    body.quickbooks-training-page .section-header {
        margin-bottom: 22px;
    }

    body.quickbooks-training-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.quickbooks-training-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.quickbooks-training-page .quickbooks-training-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.quickbooks-training-page .quickbooks-training-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.quickbooks-training-page .quickbooks-training-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.quickbooks-training-page .quickbooks-training-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.quickbooks-training-page .quickbooks-training-services-grid,
    body.quickbooks-training-page .quickbooks-training-process-grid,
    body.quickbooks-training-page .quickbooks-training-topics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card,
    body.quickbooks-training-page .quickbooks-training-process-card,
    body.quickbooks-training-page .quickbooks-training-topic-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card i,
    body.quickbooks-training-page .quickbooks-training-topic-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.quickbooks-training-page .quickbooks-training-service-card h3,
    body.quickbooks-training-page .quickbooks-training-process-card h3,
    body.quickbooks-training-page .quickbooks-training-topic-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.quickbooks-training-page .quickbooks-training-service-card p,
    body.quickbooks-training-page .quickbooks-training-process-card p,
    body.quickbooks-training-page .quickbooks-training-topic-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.quickbooks-training-page .quickbooks-training-process-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.quickbooks-training-page .quickbooks-training-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.quickbooks-training-page .quickbooks-training-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.quickbooks-training-page .quickbooks-training-value-card,
    body.quickbooks-training-page .quickbooks-training-care-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.quickbooks-training-page .quickbooks-training-value-card h2,
    body.quickbooks-training-page .quickbooks-training-care-card h2,
    body.quickbooks-training-page .quickbooks-training-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.quickbooks-training-page .quickbooks-training-value-card p:not(.section-label),
    body.quickbooks-training-page .quickbooks-training-care-card p:not(.section-label),
    body.quickbooks-training-page .quickbooks-training-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.quickbooks-training-page .quickbooks-training-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.quickbooks-training-page .quickbooks-training-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   SERVICE2.HTML END
===================================================== */



/* =====================================================
   SERVICE3.HTML START
   BOOKKEEPING CLEAN-UP

   Required images:
   public_html/assets/images/services/bookkeeping-cleanup.jpg
   public_html/assets/images/services/bookkeeping-cleanup-hero-background.jpg
   public_html/assets/images/services/bookkeeping-cleanup-page-background.jpg
   public_html/assets/images/services/bookkeeping-cleanup-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.bookkeeping-cleanup-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.bookkeeping-cleanup-page section {
    scroll-margin-top: var(--header-height);
}

body.bookkeeping-cleanup-page .section-inner {
    position: relative;
    z-index: 2;
}

body.bookkeeping-cleanup-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.bookkeeping-cleanup-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.bookkeeping-cleanup-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-cleanup-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — HERO
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.82),
            rgba(0, 119, 182, 0.55)
        ),
        url("../images/services/bookkeeping-cleanup-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 16% 22%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.70),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.70);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — TRUST STRIP
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — FULL CONTENT BACKGROUND
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/services/bookkeeping-cleanup-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — INTRO + SECTIONS
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-section,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-section,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-section,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-signs-section,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-section,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — SERVICES GRID
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card:hover,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card h3,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card h3,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card p,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card p,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — PROCESS + SIGNS
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-grid,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-signs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card {
    border-left-color: var(--color-blue);
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — VALUE + CARE
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card h2,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card p:not(.section-label),
body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   BOOKKEEPING CLEAN-UP — FINAL CTA
===================================================== */

body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-primary-btn,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-primary-btn:hover,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-primary-btn:focus,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-secondary-btn:hover,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.bookkeeping-cleanup-page .bookkeeping-cleanup-outline-btn:hover,
body.bookkeeping-cleanup-page .bookkeeping-cleanup-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   SERVICE3.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero {
        padding: 68px 0;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-signs-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta {
        padding: 62px 0;
    }

    body.bookkeeping-cleanup-page .section-header {
        margin-bottom: 30px;
    }

    body.bookkeeping-cleanup-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.bookkeeping-cleanup-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-grid,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-grid,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-signs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card i,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card h3,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card h3,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card p,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card p,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card {
        padding: 30px 24px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card p:not(.section-label),
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card p:not(.section-label),
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   SERVICE3.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.bookkeeping-cleanup-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-signs-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-section,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta {
        padding: 38px 0;
    }

    body.bookkeeping-cleanup-page .section-header {
        margin-bottom: 22px;
    }

    body.bookkeeping-cleanup-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.bookkeeping-cleanup-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-grid,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-grid,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-signs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card i,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card h3,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card h3,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-service-card p,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card p,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-sign-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-process-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card h2,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card h2,
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-value-card p:not(.section-label),
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-care-card p:not(.section-label),
    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.bookkeeping-cleanup-page .bookkeeping-cleanup-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   SERVICE3.HTML END
===================================================== */


/* =====================================================
   SERVICE4.HTML START
   TAX PREPARATION

   Required images:
   public_html/assets/images/services/tax-preparation.jpg
   public_html/assets/images/services/tax-preparation-hero-background.jpg
   public_html/assets/images/services/tax-preparation-page-background.jpg
   public_html/assets/images/services/tax-preparation-intro-feature.jpg

   Shared image:
   public_html/assets/images/home/industries-brand-feature.jpg
===================================================== */

body.tax-preparation-page {
    padding-top: var(--header-height);
    background: var(--color-light-blue);
    color: var(--color-navy);
}

body.tax-preparation-page section {
    scroll-margin-top: var(--header-height);
}

body.tax-preparation-page .section-inner {
    position: relative;
    z-index: 2;
}

body.tax-preparation-page .section-label {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 8px 15px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: center;
}

body.tax-preparation-page .section-header {
    max-width: var(--text-width);
    margin: 0 auto 42px;
    text-align: center;
}

body.tax-preparation-page .section-header h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.tax-preparation-page .section-header p {
    max-width: 850px;
    margin: 0 auto;

    color: #000000;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TAX PREPARATION — HERO
===================================================== */

body.tax-preparation-page .tax-preparation-hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 0;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.82),
            rgba(0, 119, 182, 0.55)
        ),
        url("../images/services/tax-preparation-hero-background.jpg");

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

    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

body.tax-preparation-page .tax-preparation-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 16% 22%,
            rgba(255, 204, 0, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(0, 255, 0, 0.14),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(3, 4, 94, 0.70),
            rgba(0, 119, 182, 0.34),
            rgba(202, 240, 248, 0.08)
        );

    pointer-events: none;
}

body.tax-preparation-page .tax-preparation-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 50px 40px;

    background: rgba(3, 4, 94, 0.70);
    border: 1px solid rgba(202, 240, 248, 0.32);
    border-radius: 28px;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
    text-align: center;
}

body.tax-preparation-page .tax-preparation-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.4vw, 4.7rem);
    font-weight: 900;
    line-height: 1.05;

    max-width: 920px;
    margin: 0 auto 20px;

    text-align: left;
    text-wrap: balance;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

body.tax-preparation-page .tax-preparation-hero-content p:not(.section-label) {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 600;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TAX PREPARATION — TRUST STRIP
===================================================== */

body.tax-preparation-page .tax-preparation-trust-strip {
    padding: 24px 0;
    background: var(--color-navy);
    color: var(--color-pale-blue);
    text-align: center;
}

body.tax-preparation-page .tax-preparation-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.tax-preparation-page .tax-preparation-trust-grid div {
    min-width: 0;
    padding: 14px 10px;

    background: rgba(202, 240, 248, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.16);
    border-radius: 14px;

    font-weight: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-align: center;
}

body.tax-preparation-page .tax-preparation-trust-grid i {
    color: var(--color-gold);
}


/* =====================================================
   TAX PREPARATION — FULL CONTENT BACKGROUND
===================================================== */

body.tax-preparation-page .tax-preparation-content-background {
    position: relative;

    background:
        linear-gradient(
            rgba(202, 240, 248, 0.88),
            rgba(144, 224, 239, 0.90)
        ),
        url("../images/services/tax-preparation-page-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

body.tax-preparation-page .tax-preparation-content-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 204, 0, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(0, 180, 216, 0.18),
            transparent 34%
        );

    pointer-events: none;
}


/* =====================================================
   TAX PREPARATION — INTRO + SECTIONS
===================================================== */

body.tax-preparation-page .tax-preparation-intro-section,
body.tax-preparation-page .tax-preparation-services-section,
body.tax-preparation-page .tax-preparation-process-section,
body.tax-preparation-page .tax-preparation-readiness-section,
body.tax-preparation-page .tax-preparation-value-section,
body.tax-preparation-page .tax-preparation-care-section {
    position: relative;
    z-index: 2;
    padding: 90px 0;
    text-align: center;
}

body.tax-preparation-page .tax-preparation-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: stretch;
}

body.tax-preparation-page .tax-preparation-intro-image {
    min-height: 460px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.tax-preparation-page .tax-preparation-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 428px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
    display: block;
}

body.tax-preparation-page .tax-preparation-intro-content {
    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.tax-preparation-page .tax-preparation-intro-content h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 780px;
    margin: 0 auto 18px;

    text-align: left;
    text-wrap: balance;
}

body.tax-preparation-page .tax-preparation-intro-content p:not(.section-label) {
    max-width: 780px;
    margin: 0 auto 18px;

    color: var(--color-pale-blue);
    font-size: 1.05rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TAX PREPARATION — SERVICES GRID
===================================================== */

body.tax-preparation-page .tax-preparation-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.tax-preparation-page .tax-preparation-service-card {
    min-height: 280px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

body.tax-preparation-page .tax-preparation-service-card:hover,
body.tax-preparation-page .tax-preparation-service-card:focus-within {
    box-shadow: var(--shadow-medium);
}

body.tax-preparation-page .tax-preparation-service-card i {
    color: var(--color-blue);
    font-size: 2.35rem;
    margin-bottom: 16px;
}

body.tax-preparation-page .tax-preparation-service-card h3,
body.tax-preparation-page .tax-preparation-process-card h3,
body.tax-preparation-page .tax-preparation-readiness-card h3 {
    color: var(--color-navy);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 900;
    line-height: 1.2;

    max-width: 100%;
    margin: 0 auto 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: center;
}

body.tax-preparation-page .tax-preparation-service-card p,
body.tax-preparation-page .tax-preparation-process-card p,
body.tax-preparation-page .tax-preparation-readiness-card p {
    max-width: 330px;
    margin: 0 auto;

    color: #000000;
    font-size: 0.96rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}

body.tax-preparation-page .tax-preparation-final-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

body.tax-preparation-page .tax-preparation-services-image {
    grid-column: 2 / 4;
    grid-row: 3 / 4;

    min-height: 280px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(3, 4, 94, 0.08),
            rgba(0, 180, 216, 0.08)
        ),
        rgba(202, 240, 248, 0.92);

    border-radius: 18px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.tax-preparation-page .tax-preparation-services-image img {
    width: 100%;
    height: 100%;
    min-height: 248px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
    display: block;
}


/* =====================================================
   TAX PREPARATION — PROCESS + READINESS
===================================================== */

body.tax-preparation-page .tax-preparation-process-grid,
body.tax-preparation-page .tax-preparation-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.tax-preparation-page .tax-preparation-process-card,
body.tax-preparation-page .tax-preparation-readiness-card {
    min-height: 300px;
    padding: 30px 24px;

    background: rgba(255, 255, 255, 0.94);
    border-left: 7px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

body.tax-preparation-page .tax-preparation-readiness-card {
    border-left-color: var(--color-blue);
}

body.tax-preparation-page .tax-preparation-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.24);
}

body.tax-preparation-page .tax-preparation-readiness-card i {
    color: var(--color-blue);
    font-size: 2.25rem;
    margin-bottom: 16px;
}


/* =====================================================
   TAX PREPARATION — VALUE + CARE
===================================================== */

body.tax-preparation-page .tax-preparation-value-card,
body.tax-preparation-page .tax-preparation-care-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-medium);

    color: var(--color-pale-blue);
    text-align: center;
}

body.tax-preparation-page .tax-preparation-value-card h2,
body.tax-preparation-page .tax-preparation-care-card h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.14;

    max-width: 850px;
    margin: 0 auto 20px;

    text-align: center;
    text-wrap: balance;
}

body.tax-preparation-page .tax-preparation-value-card p:not(.section-label),
body.tax-preparation-page .tax-preparation-care-card p:not(.section-label) {
    max-width: 850px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.02rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TAX PREPARATION — FINAL CTA
===================================================== */

body.tax-preparation-page .tax-preparation-final-cta {
    position: relative;
    z-index: 2;

    padding: 95px 0;

    background:
        linear-gradient(
            135deg,
            var(--color-navy),
            var(--color-blue)
        );

    color: var(--color-pale-blue);
    text-align: center;
}

body.tax-preparation-page .tax-preparation-final-cta h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;

    max-width: 920px;
    margin: 0 auto 16px;

    text-align: center;
    text-wrap: balance;
}

body.tax-preparation-page .tax-preparation-final-cta p {
    max-width: 860px;
    margin: 0 auto 28px;

    color: var(--color-pale-blue);
    font-size: 1.12rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.tax-preparation-page .tax-preparation-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 26px;
    text-align: center;
}

body.tax-preparation-page .tax-preparation-primary-btn,
body.tax-preparation-page .tax-preparation-secondary-btn {
    background-color: var(--color-green);
    color: var(--color-navy);

    border: 2px solid var(--color-green);
    box-shadow: 0 10px 24px rgba(0, 255, 0, 0.24);
}

body.tax-preparation-page .tax-preparation-primary-btn:hover,
body.tax-preparation-page .tax-preparation-primary-btn:focus,
body.tax-preparation-page .tax-preparation-secondary-btn:hover,
body.tax-preparation-page .tax-preparation-secondary-btn:focus {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);
    outline: none;
}

body.tax-preparation-page .tax-preparation-outline-btn {
    background-color: transparent;
    color: var(--color-pale-blue);

    border: 2px solid var(--color-pale-blue);
    box-shadow: none;
}

body.tax-preparation-page .tax-preparation-outline-btn:hover,
body.tax-preparation-page .tax-preparation-outline-btn:focus {
    background-color: var(--color-gold);
    color: var(--color-navy);

    border-color: var(--color-gold);
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.32);

    transform: translateY(-2px);
    outline: none;
}


/* =====================================================
   SERVICE4.HTML — TABLET
===================================================== */

@media (max-width: 1024px) {
    body.tax-preparation-page .tax-preparation-hero {
        padding: 68px 0;
    }

    body.tax-preparation-page .tax-preparation-hero-content {
        width: min(100%, calc(100% - 32px));
        padding: 38px 28px;
        border-radius: 22px;
    }

    body.tax-preparation-page .tax-preparation-hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 3.35rem);
    }

    body.tax-preparation-page .tax-preparation-hero-content p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.58;
    }

    body.tax-preparation-page .tax-preparation-intro-section,
    body.tax-preparation-page .tax-preparation-services-section,
    body.tax-preparation-page .tax-preparation-process-section,
    body.tax-preparation-page .tax-preparation-readiness-section,
    body.tax-preparation-page .tax-preparation-value-section,
    body.tax-preparation-page .tax-preparation-care-section,
    body.tax-preparation-page .tax-preparation-final-cta {
        padding: 62px 0;
    }

    body.tax-preparation-page .section-header {
        margin-bottom: 30px;
    }

    body.tax-preparation-page .section-header h2 {
        font-size: clamp(1.55rem, 4vw, 2.25rem);
    }

    body.tax-preparation-page .section-header p {
        font-size: 0.9rem;
        line-height: 1.48;
    }

    body.tax-preparation-page .tax-preparation-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.tax-preparation-page .tax-preparation-trust-grid div {
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 7px;
    }

    body.tax-preparation-page .tax-preparation-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.tax-preparation-page .tax-preparation-intro-content {
        padding: 26px 20px;
        border-radius: 18px;
    }

    body.tax-preparation-page .tax-preparation-intro-content h2 {
        font-size: clamp(1.25rem, 3.6vw, 1.9rem);
        line-height: 1.14;
    }

    body.tax-preparation-page .tax-preparation-intro-content p:not(.section-label) {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    body.tax-preparation-page .tax-preparation-intro-image {
        min-height: 340px;
        padding: 10px;
        border-radius: 18px;
    }

    body.tax-preparation-page .tax-preparation-intro-image img {
        min-height: 320px;
        border-radius: 12px;
    }

    body.tax-preparation-page .tax-preparation-services-grid,
    body.tax-preparation-page .tax-preparation-process-grid,
    body.tax-preparation-page .tax-preparation-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    body.tax-preparation-page .tax-preparation-service-card,
    body.tax-preparation-page .tax-preparation-process-card,
    body.tax-preparation-page .tax-preparation-readiness-card {
        min-height: 215px;
        padding: 20px 12px;
        border-radius: 13px;
    }

    body.tax-preparation-page .tax-preparation-service-card i,
    body.tax-preparation-page .tax-preparation-readiness-card i {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    body.tax-preparation-page .tax-preparation-service-card h3,
    body.tax-preparation-page .tax-preparation-process-card h3,
    body.tax-preparation-page .tax-preparation-readiness-card h3 {
        font-size: clamp(0.62rem, 1.25vw, 0.82rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    body.tax-preparation-page .tax-preparation-service-card p,
    body.tax-preparation-page .tax-preparation-process-card p,
    body.tax-preparation-page .tax-preparation-readiness-card p {
        font-size: clamp(0.58rem, 1.15vw, 0.74rem);
        line-height: 1.34;
        max-width: 100%;
    }

    body.tax-preparation-page .tax-preparation-process-card span {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    body.tax-preparation-page .tax-preparation-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 215px;
        padding: 10px;
        border-radius: 13px;
    }

    body.tax-preparation-page .tax-preparation-services-image img {
        min-height: 195px;
        object-fit: contain;
        object-position: center center;
        border-radius: 10px;
    }

    body.tax-preparation-page .tax-preparation-value-card,
    body.tax-preparation-page .tax-preparation-care-card {
        padding: 30px 24px;
    }

    body.tax-preparation-page .tax-preparation-value-card p:not(.section-label),
    body.tax-preparation-page .tax-preparation-care-card p:not(.section-label),
    body.tax-preparation-page .tax-preparation-final-cta p {
        font-size: 0.9rem;
        line-height: 1.48;
    }
}


/* =====================================================
   SERVICE4.HTML — MOBILE
===================================================== */

@media (max-width: 700px) {
    body.tax-preparation-page .tax-preparation-hero {
        min-height: calc(100vh - var(--header-height));
        padding: 42px 0;
    }

    body.tax-preparation-page .tax-preparation-hero-content {
        width: min(100%, calc(100% - 24px));
        padding: 26px 16px;
        border-radius: 18px;
    }

    body.tax-preparation-page .section-label {
        font-size: clamp(0.48rem, 2vw, 0.62rem);
        padding: 6px 9px;
    }

    body.tax-preparation-page .tax-preparation-hero-content h1 {
        font-size: clamp(1.35rem, 6.3vw, 2.05rem);
        line-height: 1.08;
    }

    body.tax-preparation-page .tax-preparation-hero-content p:not(.section-label) {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        line-height: 1.45;
    }

    body.tax-preparation-page .tax-preparation-intro-section,
    body.tax-preparation-page .tax-preparation-services-section,
    body.tax-preparation-page .tax-preparation-process-section,
    body.tax-preparation-page .tax-preparation-readiness-section,
    body.tax-preparation-page .tax-preparation-value-section,
    body.tax-preparation-page .tax-preparation-care-section,
    body.tax-preparation-page .tax-preparation-final-cta {
        padding: 38px 0;
    }

    body.tax-preparation-page .section-header {
        margin-bottom: 22px;
    }

    body.tax-preparation-page .section-header h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.tax-preparation-page .section-header p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.tax-preparation-page .tax-preparation-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.tax-preparation-page .tax-preparation-trust-grid div {
        padding: 9px 4px;
        gap: 4px;
        border-radius: 9px;
        font-size: clamp(0.38rem, 1.9vw, 0.52rem);
    }

    body.tax-preparation-page .tax-preparation-intro-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.tax-preparation-page .tax-preparation-intro-content {
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.tax-preparation-page .tax-preparation-intro-content h2 {
        font-size: clamp(0.92rem, 4.4vw, 1.25rem);
        line-height: 1.14;
        margin-bottom: 10px;
    }

    body.tax-preparation-page .tax-preparation-intro-content p:not(.section-label) {
        font-size: clamp(0.52rem, 2.4vw, 0.68rem);
        line-height: 1.34;
        margin-bottom: 8px;
    }

    body.tax-preparation-page .tax-preparation-intro-image {
        min-height: 240px;
        padding: 6px;
        border-radius: 12px;
    }

    body.tax-preparation-page .tax-preparation-intro-image img {
        min-height: 228px;
        border-radius: 9px;
    }

    body.tax-preparation-page .tax-preparation-services-grid,
    body.tax-preparation-page .tax-preparation-process-grid,
    body.tax-preparation-page .tax-preparation-readiness-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    body.tax-preparation-page .tax-preparation-service-card,
    body.tax-preparation-page .tax-preparation-process-card,
    body.tax-preparation-page .tax-preparation-readiness-card {
        min-height: 140px;
        padding: 8px 5px;
        border-radius: 9px;
    }

    body.tax-preparation-page .tax-preparation-service-card i,
    body.tax-preparation-page .tax-preparation-readiness-card i {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    body.tax-preparation-page .tax-preparation-service-card h3,
    body.tax-preparation-page .tax-preparation-process-card h3,
    body.tax-preparation-page .tax-preparation-readiness-card h3 {
        font-size: clamp(0.34rem, 1.75vw, 0.5rem);
        line-height: 1.12;
        margin-bottom: 4px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.tax-preparation-page .tax-preparation-service-card p,
    body.tax-preparation-page .tax-preparation-process-card p,
    body.tax-preparation-page .tax-preparation-readiness-card p {
        max-width: 100%;

        font-size: clamp(0.31rem, 1.5vw, 0.44rem);
        line-height: 1.22;

        text-align: left;
        text-wrap: pretty;
    }

    body.tax-preparation-page .tax-preparation-process-card span {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
        font-size: 0.55rem;
    }

    body.tax-preparation-page .tax-preparation-services-image {
        grid-column: 2 / 4;
        grid-row: 3 / 4;

        min-height: 140px;
        padding: 6px;
        border-radius: 9px;
    }

    body.tax-preparation-page .tax-preparation-services-image img {
        min-height: 128px;

        object-fit: contain;
        object-position: center center;

        border-radius: 7px;
    }

    body.tax-preparation-page .tax-preparation-value-card,
    body.tax-preparation-page .tax-preparation-care-card {
        padding: 22px 16px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    body.tax-preparation-page .tax-preparation-value-card h2,
    body.tax-preparation-page .tax-preparation-care-card h2,
    body.tax-preparation-page .tax-preparation-final-cta h2 {
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1.15;
    }

    body.tax-preparation-page .tax-preparation-value-card p:not(.section-label),
    body.tax-preparation-page .tax-preparation-care-card p:not(.section-label),
    body.tax-preparation-page .tax-preparation-final-cta p {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
        line-height: 1.42;
    }

    body.tax-preparation-page .tax-preparation-final-actions {
        gap: 7px;
        margin-top: 18px;
    }

    body.tax-preparation-page .tax-preparation-final-actions .cta-btn {
        font-size: 0.58rem;
        padding: 7px 8px;
        border-radius: 6px;
    }
}

/* =====================================================
   SERVICE4.HTML END
===================================================== */



/* =====================================================
   CAREERS.HTML START

   Page Function:
   - Styles the full careers page only.
   - Keeps the global header and footer unchanged.
   - Adds a polished page background like the rest of the site.
   - Supports the hero image, running announcement, centered hero title,
     left-aligned readable paragraphs, sleek cards, and responsive layout.
===================================================== */


/* =====================================================
   CAREERS PAGE BACKGROUND

   Function:
   - Gives the careers page a polished full-page background.
   - Prevents the page from looking flat or plain.
   - Keeps the design consistent with the professional WWA website style.
===================================================== */

body.careers-page {
    background:
        radial-gradient(
            circle at 8% 16%,
            rgba(202, 240, 248, 0.60),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 32%,
            rgba(0, 119, 182, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(255, 204, 0, 0.10),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1),
            rgba(202, 240, 248, 0.36),
            rgba(255, 255, 255, 1)
        );
}

body.careers-page main {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            rgba(202, 240, 248, 0.28),
            rgba(255, 255, 255, 0.20)
        );
}

body.careers-page main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(rgba(3, 4, 94, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 4, 94, 0.035) 1px, transparent 1px);

    background-size: 44px 44px;
    pointer-events: none;
}

body.careers-page main > section {
    position: relative;
    z-index: 1;
}


/* =====================================================
   CAREERS HERO SECTION

   Function:
   - Displays the top careers image background.
   - Centers the full hero content.
   - Keeps the main title centered.
   - Keeps hero paragraphs left-aligned inside a centered overlay.
   - Makes the overlay clearer so more of the image shows through.
   - Adds enough top spacing so the announcement is visible below
     the fixed header.
===================================================== */

body.careers-page .careers-hero {
    position: relative;
    min-height: 820px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: calc(var(--header-height) + 230px) 0 120px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 204, 0, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 14% 26%,
            rgba(202, 240, 248, 0.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(0, 180, 216, 0.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.20),
            rgba(0, 119, 182, 0.16)
        ),
        url("../images/careers/careers-hero.jpg");

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

    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

body.careers-page .careers-hero::before {
    content: "";
    position: absolute;
    inset: 34px;
    z-index: 1;

    border: 1px solid rgba(202, 240, 248, 0.20);
    border-radius: 34px;

    pointer-events: none;
}

body.careers-page .careers-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;
    z-index: 1;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(255, 204, 0, 0.14),
            rgba(255, 204, 0, 0.035) 42%,
            transparent 70%
        );

    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(2px);

    pointer-events: none;
}


/* =====================================================
   CAREERS RUNNING ANNOUNCEMENT

   Function:
   - Adds a moving announcement at the top of the hero image.
   - Keeps the announcement clearly below the fixed header.
   - Gives the careers page movement and visual interest.
   - Pauses the announcement when hovered.
   - Works best when the HTML contains:
     .careers-announcement-bar
     .careers-announcement-track

   Important:
   - The top value below controls how far down the announcement
     sits inside the hero image area.
   - Increase the number to move it lower.
   - Decrease the number to move it closer to the header.
===================================================== */

body.careers-page .careers-announcement-bar {
    position: absolute;
    top: calc(var(--header-height) + 78px);
    left: 50%;
    z-index: 20;

    width: min(92%, 1180px);
    transform: translateX(-50%);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.74),
            rgba(0, 119, 182, 0.44)
        );

    border: 1px solid rgba(202, 240, 248, 0.48);
    border-radius: 999px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.careers-page .careers-announcement-track {
    display: flex;
    align-items: center;
    gap: 42px;

    width: max-content;
    padding: 12px 24px;

    animation: careersAnnouncementMove 34s linear infinite;
}

body.careers-page .careers-announcement-track span {
    position: relative;

    color: var(--color-white);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.25px;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body.careers-page .careers-announcement-track span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;

    width: 7px;
    height: 7px;

    background: var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.55);
}

body.careers-page .careers-announcement-bar:hover .careers-announcement-track {
    animation-play-state: paused;
}

@keyframes careersAnnouncementMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =====================================================
   CAREERS HERO CONTENT BOX

   Function:
   - Places the hero text in a centered glass-style overlay.
   - Makes the overlay lighter and clearer so more of the background
     image remains visible.
   - Keeps all text lined up inside the same centered content area.
===================================================== */

body.careers-page .careers-hero .section-inner {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
}

body.careers-page .careers-hero-content {
    position: relative;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 54px 52px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.34),
            rgba(0, 119, 182, 0.14)
        );

    border: 1px solid rgba(202, 240, 248, 0.24);
    border-radius: 30px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    text-align: center;
}

body.careers-page .careers-hero-content .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;
    padding: 9px 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-align: center;
}

body.careers-page .careers-hero-content h1 {
    max-width: 860px;
    margin: 0 auto 26px;

    color: var(--color-white);
    font-size: clamp(2.65rem, 5.7vw, 5.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -2.2px;

    text-align: center;
    text-wrap: balance;
}

body.careers-page .careers-hero-content p {
    max-width: 760px;
    margin: 0 auto 16px;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.78;

    text-align: left;
    text-wrap: pretty;
}

body.careers-page .careers-hero-content p:last-of-type {
    margin-bottom: 0;
}


/* =====================================================
   CAREERS HERO BUTTONS

   Function:
   - Centers the hero call-to-action buttons.
   - Keeps the primary button strong.
   - Creates a clean secondary button for exploring future roles.
===================================================== */

body.careers-page .careers-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 34px;
}

body.careers-page .careers-hero-secondary-btn {
    color: var(--color-pale-blue);
    background: transparent;
    border: 2px solid rgba(202, 240, 248, 0.72);
}

body.careers-page .careers-hero-secondary-btn:hover,
body.careers-page .careers-hero-secondary-btn:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}


/* =====================================================
   CAREERS STATUS SECTION

   Function:
   - Shows the current hiring status clearly.
   - Protects the company by stating that no active openings
     are posted unless WWA announces them.
===================================================== */

body.careers-page .careers-status-section {
    padding: 84px 0;
    background: transparent;
}

body.careers-page .careers-status-card {
    max-width: 940px;
    margin: 0 auto;
    padding: 44px;

    background:
        linear-gradient(
            145deg,
            rgba(202, 240, 248, 0.88),
            rgba(255, 255, 255, 0.96)
        );

    border: 1px solid rgba(3, 4, 94, 0.12);
    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.careers-page .careers-status-card h2 {
    max-width: 780px;
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.careers-page .careers-status-card p {
    max-width: 820px;
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.careers-page .careers-status-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   CAREERS SHARED SECTION HEADERS

   Function:
   - Keeps section titles centered.
   - Keeps the paragraph block centered on the page.
   - Keeps paragraph text left-aligned for readability.
   - Helps reduce awkward single-word endings.
===================================================== */

body.careers-page .careers-opportunities-section .section-header,
body.careers-page .careers-values-section .section-header {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

body.careers-page .careers-opportunities-section .section-header h2,
body.careers-page .careers-values-section .section-header h2 {
    text-align: center;
    text-wrap: balance;
}

body.careers-page .careers-opportunities-section .section-header p,
body.careers-page .careers-values-section .section-header p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CAREERS OPPORTUNITIES SECTION

   Function:
   - Displays possible future areas of career interest.
   - Uses clean cards to show potential support areas.
===================================================== */

body.careers-page .careers-opportunities-section {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.76),
            rgba(202, 240, 248, 0.46)
        );
}

body.careers-page .careers-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;

    margin-top: 44px;
}

body.careers-page .careers-info-card {
    min-height: 300px;
    padding: 30px 22px;

    background: var(--color-white);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

body.careers-page .careers-info-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: var(--shadow-medium);
}

body.careers-page .careers-icon-box {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 16px;

    font-size: 1.35rem;
}

body.careers-page .careers-info-card h3 {
    margin: 0 0 14px;

    color: var(--color-navy);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.25;

    text-align: left;
    text-wrap: balance;
}

body.careers-page .careers-info-card p {
    margin: 0;

    color: var(--color-dark-gray);
    font-size: 0.94rem;
    line-height: 1.65;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CAREERS VALUES SECTION

   Function:
   - Shows the qualities WWA looks for in future support.
   - Uses strong dark cards to contrast with lighter sections.
===================================================== */

body.careers-page .careers-values-section {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 255, 255, 0.78)
        );
}

body.careers-page .careers-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-top: 44px;
}

body.careers-page .careers-value-card {
    min-height: 250px;
    padding: 28px 20px;

    color: var(--color-pale-blue);
    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.careers-page .careers-value-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-size: 0.82rem;
    font-weight: 900;
}

body.careers-page .careers-value-card h3 {
    margin: 0 0 12px;

    color: var(--color-white);
    font-size: 1.16rem;
    font-weight: 900;

    text-align: left;
    text-wrap: balance;
}

body.careers-page .careers-value-card p {
    margin: 0;

    color: var(--color-pale-blue);
    font-size: 0.92rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   CAREERS INTEREST SECTION

   Function:
   - Gives visitors instructions for submitting future career interest.
   - Keeps career interest safe by warning not to send sensitive records.
===================================================== */

body.careers-page .careers-interest-section {
    padding: 92px 0;

    background:
        linear-gradient(
            135deg,
            rgba(202, 240, 248, 0.86),
            rgba(255, 255, 255, 0.98)
        );
}

body.careers-page .careers-interest-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    gap: 38px;
    align-items: stretch;
}

body.careers-page .careers-interest-content,
body.careers-page .careers-interest-card {
    padding: 38px;

    background: var(--color-white);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.careers-page .careers-interest-content h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.careers-page .careers-interest-content p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.careers-page .careers-interest-content p:last-child {
    margin-bottom: 0;
}

body.careers-page .careers-interest-card h3 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: 1.35rem;
    font-weight: 900;

    text-align: left;
}

body.careers-page .careers-interest-card ul {
    display: grid;
    gap: 10px;

    margin: 0 0 28px;
    padding-left: 20px;

    color: var(--color-dark-gray);
}

body.careers-page .careers-interest-card li {
    line-height: 1.5;
    font-weight: 700;
}

body.careers-page .careers-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    text-align: center;
}

body.careers-page .careers-secondary-btn {
    color: var(--color-pale-blue);
    background: transparent;
    border: 2px solid var(--color-pale-blue);
}

body.careers-page .careers-secondary-btn:hover,
body.careers-page .careers-secondary-btn:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}


/* =====================================================
   CAREERS NOTICE SECTION

   Function:
   - Adds protective career notice language.
   - Helps clarify that career inquiries do not guarantee work,
     interviews, employment, or contractor placement.
===================================================== */

body.careers-page .careers-notice-section {
    padding: 72px 0;
    background: transparent;
}

body.careers-page .careers-notice-card {
    max-width: 960px;
    margin: 0 auto;
    padding: 36px 40px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.careers-page .careers-notice-card h2 {
    margin: 0 0 16px;

    color: var(--color-navy);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 900;

    text-align: left;
    text-wrap: balance;
}

body.careers-page .careers-notice-card p {
    margin: 0 0 14px;

    color: var(--color-dark-gray);
    font-size: 0.95rem;
    line-height: 1.7;

    text-align: left;
    text-wrap: pretty;
}

body.careers-page .careers-notice-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   CAREERS FINAL CTA SECTION

   Function:
   - Creates the final attention-grabbing call-to-action section.
   - Keeps the title centered.
   - Keeps the paragraph block centered but text left-aligned.
   - Supports the title: Professional Growth Starts with Us.
===================================================== */

body.careers-page .careers-final-cta {
    padding: 100px 0;

    color: var(--color-white);
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 204, 0, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(202, 240, 248, 0.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    text-align: center;
}

body.careers-page .careers-final-cta .section-inner {
    max-width: 980px;
}

body.careers-page .careers-final-cta h2 {
    max-width: 820px;
    margin: 0 auto 18px;

    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;

    text-align: center;
    text-wrap: balance;
}

body.careers-page .careers-final-cta p {
    max-width: 760px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.careers-page .careers-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 30px;
}


/* =====================================================
   CAREERS HERO SECTION — TABLET

   Function:
   - Adjusts hero spacing, announcement size, and overlay size
     for tablet screens.
   - Keeps the announcement below the header on tablets.
===================================================== */

@media (max-width: 1024px) {
    body.careers-page .careers-hero {
        min-height: 760px;
        padding: calc(var(--header-height) + 205px) 0 92px;
    }

    body.careers-page .careers-hero::before {
        inset: 22px;
        border-radius: 26px;
    }

    body.careers-page .careers-announcement-bar {
        top: calc(var(--header-height) + 64px);
        width: min(92%, 900px);
    }

    body.careers-page .careers-announcement-track {
        gap: 36px;
        padding: 11px 20px;
        animation-duration: 30s;
    }

    body.careers-page .careers-announcement-track span {
        font-size: 0.78rem;
    }

    body.careers-page .careers-hero-content {
        width: min(100%, 900px);
        padding: 46px 38px;
        border-radius: 26px;
    }

    body.careers-page .careers-hero-content h1 {
        font-size: clamp(2.25rem, 6vw, 4.25rem);
    }

    body.careers-page .careers-hero-content p {
        max-width: 710px;
        font-size: 1rem;
        line-height: 1.68;
    }
}


/* =====================================================
   CAREERS PAGE — TABLET GRID

   Function:
   - Changes four-card layouts into two-card layouts on tablets.
   - Keeps the career interest section readable.
===================================================== */

@media (max-width: 1024px) {
    body.careers-page .careers-card-grid,
    body.careers-page .careers-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.careers-page .careers-interest-layout {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   CAREERS HERO SECTION — MOBILE

   Function:
   - Optimizes hero layout for phones.
   - Keeps announcement visible below the mobile header.
   - Keeps paragraphs readable and left-aligned.
===================================================== */

@media (max-width: 700px) {
    body.careers-page .careers-hero {
        min-height: 720px;
        padding: calc(var(--header-height) + 172px) 0 58px;
    }

    body.careers-page .careers-hero::before {
        inset: 12px;
        border-radius: 18px;
    }

    body.careers-page .careers-hero::after {
        width: 360px;
        height: 360px;
        bottom: -120px;
    }

    body.careers-page .careers-announcement-bar {
        top: calc(var(--header-height) + 44px);
        width: calc(100% - 28px);
        border-radius: 18px;
    }

    body.careers-page .careers-announcement-track {
        gap: 30px;
        padding: 10px 16px;
        animation-duration: 26s;
    }

    body.careers-page .careers-announcement-track span {
        font-size: 0.68rem;
        letter-spacing: 0.15px;
    }

    body.careers-page .careers-hero-content {
        width: 100%;
        padding: 28px 18px;

        border-radius: 20px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body.careers-page .careers-hero-content .section-label {
        margin-bottom: 14px;
        padding: 7px 13px;

        font-size: 0.62rem;
        letter-spacing: 1.2px;
    }

    body.careers-page .careers-hero-content h1 {
        margin-bottom: 18px;

        font-size: clamp(1.72rem, 8.7vw, 2.75rem);
        line-height: 1.02;
        letter-spacing: -0.9px;
    }

    body.careers-page .careers-hero-content p {
        max-width: 100%;
        margin-bottom: 12px;

        font-size: clamp(0.76rem, 3.35vw, 0.9rem);
        line-height: 1.55;

        text-align: left;
    }

    body.careers-page .careers-hero-actions {
        gap: 10px;
        margin-top: 24px;
    }

    body.careers-page .careers-hero-actions .cta-btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.76rem;
    }
}


/* =====================================================
   CAREERS PAGE — MOBILE CONTENT

   Function:
   - Adjusts all content sections for phone screens.
   - Keeps cards comfortable and readable.
   - Keeps final CTA paragraph left-aligned inside centered block.
===================================================== */

@media (max-width: 700px) {
    body.careers-page .careers-status-section,
    body.careers-page .careers-opportunities-section,
    body.careers-page .careers-values-section,
    body.careers-page .careers-interest-section,
    body.careers-page .careers-notice-section {
        padding: 52px 0;
    }

    body.careers-page .careers-status-card,
    body.careers-page .careers-interest-content,
    body.careers-page .careers-interest-card,
    body.careers-page .careers-notice-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    body.careers-page .careers-status-card h2,
    body.careers-page .careers-interest-content h2,
    body.careers-page .careers-notice-card h2 {
        font-size: clamp(1.22rem, 6vw, 1.8rem);
    }

    body.careers-page .careers-status-card p,
    body.careers-page .careers-interest-content p,
    body.careers-page .careers-notice-card p {
        font-size: clamp(0.72rem, 3.2vw, 0.86rem);
        line-height: 1.55;
    }

    body.careers-page .careers-opportunities-section .section-header p,
    body.careers-page .careers-values-section .section-header p,
    body.careers-page .careers-final-cta p {
        max-width: 100%;
        text-align: left;
        text-wrap: pretty;
    }

    body.careers-page .careers-card-grid,
    body.careers-page .careers-values-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    body.careers-page .careers-info-card,
    body.careers-page .careers-value-card {
        min-height: auto;
        padding: 20px 16px;
        border-radius: 15px;
    }

    body.careers-page .careers-icon-box {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;

        border-radius: 12px;
        font-size: 1rem;
    }

    body.careers-page .careers-info-card h3,
    body.careers-page .careers-value-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    body.careers-page .careers-info-card p,
    body.careers-page .careers-value-card p {
        font-size: 0.78rem;
        line-height: 1.48;
    }

    body.careers-page .careers-interest-card li {
        font-size: 0.78rem;
    }

    body.careers-page .careers-final-cta {
        padding: 64px 0;
    }

    body.careers-page .careers-final-cta h2 {
        font-size: clamp(1.35rem, 7vw, 2rem);
    }

    body.careers-page .careers-final-cta p {
        font-size: clamp(0.74rem, 3.3vw, 0.9rem);
        line-height: 1.55;
    }

    body.careers-page .careers-final-actions {
        gap: 10px;
        margin-top: 22px;
    }

    body.careers-page .careers-final-actions .cta-btn,
    body.careers-page .careers-primary-btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}


/* =====================================================
   CAREERS.HTML END
===================================================== */




/* =====================================================
   PRIVACY-POLICY.HTML START

   Page Function:
   - Styles the WWA privacy policy page only.
   - Keeps global header and footer unchanged.
   - Uses centered hero titles and centered content structure.
   - Keeps important paragraphs left-aligned inside centered blocks.
   - Creates a serious, polished, privacy-first client education page.
===================================================== */


/* =====================================================
   PRIVACY PAGE BACKGROUND

   Function:
   - Adds a clean, polished page background.
   - Keeps the privacy page visually consistent with WWA.
   - Gives the page depth without making it distracting.
===================================================== */

body.privacy-policy-page {
    background:
        radial-gradient(
            circle at 8% 16%,
            rgba(202, 240, 248, 0.56),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(0, 119, 182, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 16% 86%,
            rgba(255, 204, 0, 0.10),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1),
            rgba(202, 240, 248, 0.34),
            rgba(255, 255, 255, 1)
        );
}

body.privacy-policy-page main {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            rgba(202, 240, 248, 0.24),
            rgba(255, 255, 255, 0.20)
        );
}

body.privacy-policy-page main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(rgba(3, 4, 94, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 4, 94, 0.032) 1px, transparent 1px);

    background-size: 44px 44px;
    pointer-events: none;
}

body.privacy-policy-page main > section {
    position: relative;
    z-index: 1;
}


/* =====================================================
   PRIVACY HERO SECTION

   Function:
   - Creates the main first impression for the privacy page.
   - Centers the hero content as a group.
   - Keeps the hero title centered.
   - Keeps paragraphs left-aligned inside the centered overlay.
   - Uses an optional background image:
     assets/images/privacy/privacy-hero.jpg
===================================================== */

body.privacy-policy-page .privacy-hero {
    position: relative;
    min-height: 820px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: calc(var(--header-height) + 230px) 0 120px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 204, 0, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 24%,
            rgba(202, 240, 248, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(0, 180, 216, 0.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.72),
            rgba(0, 119, 182, 0.46)
        ),
        url("../images/privacy/privacy-hero.jpg");

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

    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

body.privacy-policy-page .privacy-hero::before {
    content: "";
    position: absolute;
    inset: 34px;
    z-index: 1;

    border: 1px solid rgba(202, 240, 248, 0.22);
    border-radius: 34px;

    pointer-events: none;
}

body.privacy-policy-page .privacy-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;
    z-index: 1;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(255, 204, 0, 0.16),
            rgba(255, 204, 0, 0.035) 42%,
            transparent 70%
        );

    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(2px);

    pointer-events: none;
}


/* =====================================================
   PRIVACY RUNNING ANNOUNCEMENT

   Function:
   - Places a clear running announcement inside the hero image.
   - Keeps the announcement below the fixed header.
   - Gives the page a strong privacy-first message immediately.
===================================================== */

body.privacy-policy-page .privacy-announcement-bar {
    position: absolute;
    top: calc(var(--header-height) + 78px);
    left: 50%;
    z-index: 20;

    width: min(92%, 1180px);
    transform: translateX(-50%);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.46)
        );

    border: 1px solid rgba(202, 240, 248, 0.48);
    border-radius: 999px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.privacy-policy-page .privacy-announcement-track {
    display: flex;
    align-items: center;
    gap: 42px;

    width: max-content;
    padding: 12px 24px;

    animation: privacyAnnouncementMove 38s linear infinite;
}

body.privacy-policy-page .privacy-announcement-track span {
    position: relative;

    color: var(--color-white);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.25px;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body.privacy-policy-page .privacy-announcement-track span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;

    width: 7px;
    height: 7px;

    background: var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.55);
}

body.privacy-policy-page .privacy-announcement-bar:hover .privacy-announcement-track {
    animation-play-state: paused;
}

@keyframes privacyAnnouncementMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =====================================================
   PRIVACY HERO CONTENT BOX

   Function:
   - Places the hero text in a centered glass-style overlay.
   - Keeps the page polished and serious.
   - Keeps paragraph text readable and left-aligned.
===================================================== */

body.privacy-policy-page .privacy-hero .section-inner {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
}

body.privacy-policy-page .privacy-hero-content {
    position: relative;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 54px 52px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.54),
            rgba(0, 119, 182, 0.26)
        );

    border: 1px solid rgba(202, 240, 248, 0.26);
    border-radius: 30px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    text-align: center;
}

body.privacy-policy-page .privacy-hero-content .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;
    padding: 9px 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-align: center;
}

body.privacy-policy-page .privacy-hero-content h1 {
    max-width: 880px;
    margin: 0 auto 26px;

    color: var(--color-white);
    font-size: clamp(2.65rem, 5.7vw, 5.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -2.2px;

    text-align: center;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-hero-content p {
    max-width: 760px;
    margin: 0 auto 16px;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.78;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-hero-content p:last-of-type {
    margin-bottom: 0;
}

body.privacy-policy-page .privacy-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 34px;
}

body.privacy-policy-page .privacy-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.privacy-policy-page .privacy-secondary-btn {
    color: var(--color-pale-blue);
    background: transparent;
    border: 2px solid rgba(202, 240, 248, 0.74);
}

body.privacy-policy-page .privacy-secondary-btn:hover,
body.privacy-policy-page .privacy-secondary-btn:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}


/* =====================================================
   SHARED PRIVACY SECTION HEADERS

   Function:
   - Centers section titles.
   - Centers paragraph blocks.
   - Keeps paragraph text left-aligned for clean reading.
===================================================== */

body.privacy-policy-page .section-header {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

body.privacy-policy-page .section-header h2 {
    text-align: center;
    text-wrap: balance;
}

body.privacy-policy-page .section-header p {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   PRIVACY POSITION SECTION

   Function:
   - States WWA's privacy-first position.
   - Explains that WWA does not collect sensitive financial
     documents through the public website.
===================================================== */

body.privacy-policy-page .privacy-position-section {
    padding: 84px 0;
    background: transparent;
}

body.privacy-policy-page .privacy-position-card {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px;

    background:
        linear-gradient(
            145deg,
            rgba(202, 240, 248, 0.88),
            rgba(255, 255, 255, 0.96)
        );

    border: 1px solid rgba(3, 4, 94, 0.12);
    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-position-card h2 {
    max-width: 820px;
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-position-card p {
    max-width: 850px;
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-position-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   PRIVACY BILLBOARD SECTION

   Function:
   - Uses the billboard analogy to help clients understand privacy.
   - Creates an engaging educational section.
===================================================== */

body.privacy-policy-page .privacy-billboard-section {
    padding: 92px 0;

    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.76),
            rgba(202, 240, 248, 0.44)
        );
}

body.privacy-policy-page .privacy-billboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
    gap: 34px;
    align-items: stretch;
}

body.privacy-policy-page .privacy-billboard-content,
body.privacy-policy-page .privacy-billboard-card {
    padding: 42px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-billboard-content h2 {
    margin: 0 0 20px;

    color: var(--color-navy);
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    font-weight: 900;
    line-height: 1.08;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-billboard-content p,
body.privacy-policy-page .privacy-billboard-card p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-billboard-content p:last-child,
body.privacy-policy-page .privacy-billboard-card p:last-child {
    margin-bottom: 0;
}

body.privacy-policy-page .privacy-billboard-card {
    color: var(--color-pale-blue);
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 204, 0, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.20);
}

body.privacy-policy-page .privacy-billboard-card h3 {
    margin: 0 0 16px;

    color: var(--color-white);
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.16;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-billboard-card p {
    color: var(--color-pale-blue);
}


/* =====================================================
   PRIVACY RISK SECTION

   Function:
   - Educates visitors on why standard texting is not the
     strongest privacy option.
===================================================== */

body.privacy-policy-page .privacy-risk-section {
    padding: 92px 0;
    background: rgba(255, 255, 255, 0.82);
}

body.privacy-policy-page .privacy-risk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;

    margin-top: 44px;
}

body.privacy-policy-page .privacy-risk-card {
    min-height: 320px;
    padding: 30px 22px;

    background: var(--color-white);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

body.privacy-policy-page .privacy-risk-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: var(--shadow-medium);
}

body.privacy-policy-page .privacy-risk-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 16px;

    font-size: 1.35rem;
}

body.privacy-policy-page .privacy-risk-card h3 {
    margin: 0 0 14px;

    color: var(--color-navy);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.25;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-risk-card p {
    margin: 0;

    color: var(--color-dark-gray);
    font-size: 0.94rem;
    line-height: 1.65;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   PRIVACY SECURE SECTION

   Function:
   - Encourages stronger private communication habits.
   - Creates a split layout with explanation and practical steps.
===================================================== */

body.privacy-policy-page .privacy-secure-section {
    padding: 92px 0;

    background:
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.90)
        );

    color: var(--color-white);
}

body.privacy-policy-page .privacy-secure-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    gap: 34px;
    align-items: stretch;
}

body.privacy-policy-page .privacy-secure-card,
body.privacy-policy-page .privacy-secure-steps {
    padding: 42px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.06)
        );

    border: 1px solid rgba(202, 240, 248, 0.22);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-secure-card h2 {
    margin: 0 0 20px;

    color: var(--color-white);
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    font-weight: 900;
    line-height: 1.08;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-secure-card p,
body.privacy-policy-page .privacy-secure-steps li {
    color: var(--color-pale-blue);
    font-size: 1rem;
    line-height: 1.72;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-secure-card p {
    margin: 0 0 16px;
}

body.privacy-policy-page .privacy-secure-card p:last-child {
    margin-bottom: 0;
}

body.privacy-policy-page .privacy-secure-steps h3 {
    margin: 0 0 18px;

    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 900;

    text-align: left;
}

body.privacy-policy-page .privacy-secure-steps ol {
    display: grid;
    gap: 12px;

    margin: 0;
    padding-left: 22px;
}


/* =====================================================
   WWA DATA HANDLING SECTION

   Function:
   - Explains how WWA limits website collection.
   - Shows privacy practices in clean numbered cards.
===================================================== */

body.privacy-policy-page .privacy-wwa-section {
    padding: 92px 0;
    background: rgba(255, 255, 255, 0.88);
}

body.privacy-policy-page .privacy-wwa-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-top: 44px;
}

body.privacy-policy-page .privacy-wwa-card {
    min-height: 280px;
    padding: 28px 20px;

    color: var(--color-pale-blue);
    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-wwa-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-size: 0.82rem;
    font-weight: 900;
}

body.privacy-policy-page .privacy-wwa-card h3 {
    margin: 0 0 12px;

    color: var(--color-white);
    font-size: 1.16rem;
    font-weight: 900;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-wwa-card p {
    margin: 0;

    color: var(--color-pale-blue);
    font-size: 0.92rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   PRIVACY DETAIL SECTIONS

   Function:
   - Handles the formal policy explanation blocks.
   - Keeps the policy readable and not overly legal-looking.
===================================================== */

body.privacy-policy-page .privacy-policy-detail-section {
    padding: 76px 0;
    background: transparent;
}

body.privacy-policy-page .privacy-policy-detail-section-alt {
    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.66),
            rgba(202, 240, 248, 0.38)
        );
}

body.privacy-policy-page .privacy-detail-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 44px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-detail-card h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-detail-card p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-detail-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   FUNDING PRIVACY NOTICE SECTION

   Function:
   - Protects WWA by clarifying funding document handling.
   - Explains that funding applications are handled on the
     applicable third-party provider's platform.
===================================================== */

body.privacy-policy-page .privacy-funding-section {
    padding: 84px 0;
    background: rgba(255, 255, 255, 0.82);
}

body.privacy-policy-page .privacy-funding-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 44px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.90)
        );

    border: 1px solid rgba(202, 240, 248, 0.20);
    border-left: 8px solid var(--color-gold);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    text-align: left;
}

body.privacy-policy-page .privacy-funding-card h2 {
    margin: 0 0 18px;

    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-funding-card p {
    margin: 0 0 16px;

    color: var(--color-pale-blue);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-funding-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   CLIENT RESPONSIBILITY SECTION

   Function:
   - Teaches clients how to think before sending information.
   - Uses a practical checklist.
===================================================== */

body.privacy-policy-page .privacy-client-section {
    padding: 92px 0;

    background:
        linear-gradient(
            135deg,
            rgba(202, 240, 248, 0.86),
            rgba(255, 255, 255, 0.98)
        );
}

body.privacy-policy-page .privacy-client-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.78fr);
    gap: 36px;
    align-items: stretch;
}

body.privacy-policy-page .privacy-client-content,
body.privacy-policy-page .privacy-client-checklist {
    padding: 40px;

    background: var(--color-white);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-client-content h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-client-content p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-client-content p:last-child {
    margin-bottom: 0;
}

body.privacy-policy-page .privacy-client-checklist h3 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: 1.35rem;
    font-weight: 900;

    text-align: left;
}

body.privacy-policy-page .privacy-client-checklist ul {
    display: grid;
    gap: 12px;

    margin: 0;
    padding-left: 20px;

    color: var(--color-dark-gray);
}

body.privacy-policy-page .privacy-client-checklist li {
    line-height: 1.6;
    font-weight: 700;
    text-wrap: pretty;
}


/* =====================================================
   PRIVACY LIMITATION SECTION

   Function:
   - Explains that no digital method provides absolute security.
   - Keeps the page responsible and professional.
===================================================== */

body.privacy-policy-page .privacy-limit-section {
    padding: 76px 0;
    background: transparent;
}

body.privacy-policy-page .privacy-limit-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 44px;

    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.privacy-policy-page .privacy-limit-card h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-limit-card p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-limit-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   PRIVACY FINAL CTA SECTION

   Function:
   - Ends the page with a strong privacy message.
   - Keeps title centered.
   - Keeps paragraph left-aligned inside centered block.
===================================================== */

body.privacy-policy-page .privacy-final-cta {
    padding: 104px 0;

    color: var(--color-white);
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 204, 0, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(202, 240, 248, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    text-align: center;
}

body.privacy-policy-page .privacy-final-cta .section-inner {
    max-width: 980px;
}

body.privacy-policy-page .privacy-final-cta .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;
    padding: 9px 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-align: center;
}

body.privacy-policy-page .privacy-final-cta h2 {
    max-width: 820px;
    margin: 0 auto 18px;

    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;

    text-align: center;
    text-wrap: balance;
}

body.privacy-policy-page .privacy-final-cta p {
    max-width: 760px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.privacy-policy-page .privacy-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 30px;
}


/* =====================================================
   PRIVACY PAGE — TABLET

   Function:
   - Adjusts layout and spacing for tablet screens.
   - Keeps hero announcement below the header.
===================================================== */

@media (max-width: 1024px) {
    body.privacy-policy-page .privacy-hero {
        min-height: 760px;
        padding: calc(var(--header-height) + 205px) 0 92px;
    }

    body.privacy-policy-page .privacy-hero::before {
        inset: 22px;
        border-radius: 26px;
    }

    body.privacy-policy-page .privacy-announcement-bar {
        top: calc(var(--header-height) + 64px);
        width: min(92%, 900px);
    }

    body.privacy-policy-page .privacy-announcement-track {
        gap: 36px;
        padding: 11px 20px;
        animation-duration: 32s;
    }

    body.privacy-policy-page .privacy-announcement-track span {
        font-size: 0.78rem;
    }

    body.privacy-policy-page .privacy-hero-content {
        width: min(100%, 900px);
        padding: 46px 38px;
        border-radius: 26px;
    }

    body.privacy-policy-page .privacy-hero-content h1 {
        font-size: clamp(2.25rem, 6vw, 4.25rem);
    }

    body.privacy-policy-page .privacy-hero-content p {
        max-width: 710px;
        font-size: 1rem;
        line-height: 1.68;
    }

    body.privacy-policy-page .privacy-billboard-layout,
    body.privacy-policy-page .privacy-secure-layout,
    body.privacy-policy-page .privacy-client-layout {
        grid-template-columns: 1fr;
    }

    body.privacy-policy-page .privacy-risk-grid,
    body.privacy-policy-page .privacy-wwa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =====================================================
   PRIVACY PAGE — MOBILE

   Function:
   - Optimizes the privacy page for phones.
   - Keeps the running announcement visible.
   - Keeps all paragraphs readable and left-aligned.
===================================================== */

@media (max-width: 700px) {
    body.privacy-policy-page .privacy-hero {
        min-height: 740px;
        padding: calc(var(--header-height) + 172px) 0 58px;
    }

    body.privacy-policy-page .privacy-hero::before {
        inset: 12px;
        border-radius: 18px;
    }

    body.privacy-policy-page .privacy-hero::after {
        width: 360px;
        height: 360px;
        bottom: -120px;
    }

    body.privacy-policy-page .privacy-announcement-bar {
        top: calc(var(--header-height) + 44px);
        width: calc(100% - 28px);
        border-radius: 18px;
    }

    body.privacy-policy-page .privacy-announcement-track {
        gap: 30px;
        padding: 10px 16px;
        animation-duration: 28s;
    }

    body.privacy-policy-page .privacy-announcement-track span {
        font-size: 0.68rem;
        letter-spacing: 0.15px;
    }

    body.privacy-policy-page .privacy-hero-content {
        width: 100%;
        padding: 28px 18px;

        border-radius: 20px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body.privacy-policy-page .privacy-hero-content .section-label,
    body.privacy-policy-page .privacy-final-cta .section-label {
        margin-bottom: 14px;
        padding: 7px 13px;

        font-size: 0.62rem;
        letter-spacing: 1.2px;
    }

    body.privacy-policy-page .privacy-hero-content h1 {
        margin-bottom: 18px;

        font-size: clamp(1.72rem, 8.7vw, 2.75rem);
        line-height: 1.02;
        letter-spacing: -0.9px;
    }

    body.privacy-policy-page .privacy-hero-content p {
        max-width: 100%;
        margin-bottom: 12px;

        font-size: clamp(0.76rem, 3.35vw, 0.9rem);
        line-height: 1.55;

        text-align: left;
    }

    body.privacy-policy-page .privacy-hero-actions,
    body.privacy-policy-page .privacy-final-actions {
        gap: 10px;
        margin-top: 24px;
    }

    body.privacy-policy-page .privacy-hero-actions .cta-btn,
    body.privacy-policy-page .privacy-final-actions .cta-btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.76rem;
    }

    body.privacy-policy-page .privacy-position-section,
    body.privacy-policy-page .privacy-billboard-section,
    body.privacy-policy-page .privacy-risk-section,
    body.privacy-policy-page .privacy-secure-section,
    body.privacy-policy-page .privacy-wwa-section,
    body.privacy-policy-page .privacy-policy-detail-section,
    body.privacy-policy-page .privacy-funding-section,
    body.privacy-policy-page .privacy-client-section,
    body.privacy-policy-page .privacy-limit-section {
        padding: 52px 0;
    }

    body.privacy-policy-page .privacy-position-card,
    body.privacy-policy-page .privacy-billboard-content,
    body.privacy-policy-page .privacy-billboard-card,
    body.privacy-policy-page .privacy-secure-card,
    body.privacy-policy-page .privacy-secure-steps,
    body.privacy-policy-page .privacy-detail-card,
    body.privacy-policy-page .privacy-funding-card,
    body.privacy-policy-page .privacy-client-content,
    body.privacy-policy-page .privacy-client-checklist,
    body.privacy-policy-page .privacy-limit-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    body.privacy-policy-page .privacy-position-card h2,
    body.privacy-policy-page .privacy-billboard-content h2,
    body.privacy-policy-page .privacy-secure-card h2,
    body.privacy-policy-page .privacy-detail-card h2,
    body.privacy-policy-page .privacy-funding-card h2,
    body.privacy-policy-page .privacy-client-content h2,
    body.privacy-policy-page .privacy-limit-card h2,
    body.privacy-policy-page .privacy-final-cta h2 {
        font-size: clamp(1.25rem, 6vw, 1.85rem);
        line-height: 1.16;
    }

    body.privacy-policy-page .section-header p,
    body.privacy-policy-page .privacy-position-card p,
    body.privacy-policy-page .privacy-billboard-content p,
    body.privacy-policy-page .privacy-billboard-card p,
    body.privacy-policy-page .privacy-secure-card p,
    body.privacy-policy-page .privacy-secure-steps li,
    body.privacy-policy-page .privacy-detail-card p,
    body.privacy-policy-page .privacy-funding-card p,
    body.privacy-policy-page .privacy-client-content p,
    body.privacy-policy-page .privacy-client-checklist li,
    body.privacy-policy-page .privacy-limit-card p,
    body.privacy-policy-page .privacy-final-cta p {
        font-size: clamp(0.72rem, 3.2vw, 0.86rem);
        line-height: 1.55;

        text-align: left;
        text-wrap: pretty;
    }

    body.privacy-policy-page .privacy-risk-grid,
    body.privacy-policy-page .privacy-wwa-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    body.privacy-policy-page .privacy-risk-card,
    body.privacy-policy-page .privacy-wwa-card {
        min-height: auto;
        padding: 20px 16px;
        border-radius: 15px;
    }

    body.privacy-policy-page .privacy-risk-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;

        border-radius: 12px;
        font-size: 1rem;
    }

    body.privacy-policy-page .privacy-risk-card h3,
    body.privacy-policy-page .privacy-wwa-card h3,
    body.privacy-policy-page .privacy-client-checklist h3,
    body.privacy-policy-page .privacy-secure-steps h3,
    body.privacy-policy-page .privacy-billboard-card h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    body.privacy-policy-page .privacy-final-cta {
        padding: 64px 0;
    }
}

/* =====================================================
   PRIVACY-POLICY.HTML END
===================================================== */



/* =====================================================
   TERMS.HTML START

   Page Function:
   - Styles the WWA Terms of Service page only.
   - Keeps global header and footer unchanged.
   - Uses centered hero titles and centered content structure.
   - Keeps important paragraphs left-aligned inside centered blocks.
   - Presents WWA as serious, protected, professional, and no-nonsense.
===================================================== */


/* =====================================================
   TERMS PAGE BACKGROUND

   Function:
   - Adds a polished full-page background.
   - Keeps the page visually consistent with other WWA pages.
===================================================== */

body.terms-page {
    background:
        radial-gradient(
            circle at 8% 16%,
            rgba(202, 240, 248, 0.56),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(0, 119, 182, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 16% 86%,
            rgba(255, 204, 0, 0.10),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1),
            rgba(202, 240, 248, 0.34),
            rgba(255, 255, 255, 1)
        );
}

body.terms-page main {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            rgba(202, 240, 248, 0.24),
            rgba(255, 255, 255, 0.20)
        );
}

body.terms-page main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(rgba(3, 4, 94, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 4, 94, 0.032) 1px, transparent 1px);

    background-size: 44px 44px;
    pointer-events: none;
}

body.terms-page main > section {
    position: relative;
    z-index: 1;
}


/* =====================================================
   TERMS HERO SECTION

   Function:
   - Creates a serious first impression for the Terms page.
   - Centers the hero content as a group.
   - Keeps the hero title centered.
   - Keeps paragraphs left-aligned inside the centered overlay.
   - Uses an optional image:
     assets/images/terms/terms-hero.jpg
===================================================== */

body.terms-page .terms-hero {
    position: relative;
    min-height: 820px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: calc(var(--header-height) + 230px) 0 120px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 204, 0, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 24%,
            rgba(202, 240, 248, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(0, 180, 216, 0.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.50)
        ),
        url("../images/terms/terms-hero.jpg");

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

    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

body.terms-page .terms-hero::before {
    content: "";
    position: absolute;
    inset: 34px;
    z-index: 1;

    border: 1px solid rgba(202, 240, 248, 0.22);
    border-radius: 34px;

    pointer-events: none;
}

body.terms-page .terms-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;
    z-index: 1;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(255, 204, 0, 0.16),
            rgba(255, 204, 0, 0.035) 42%,
            transparent 70%
        );

    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(2px);

    pointer-events: none;
}


/* =====================================================
   TERMS RUNNING ANNOUNCEMENT

   Function:
   - Adds a visible running announcement inside the hero image.
   - Keeps the announcement below the fixed header.
   - Reinforces responsible use of the website.
===================================================== */

body.terms-page .terms-announcement-bar {
    position: absolute;
    top: calc(var(--header-height) + 78px);
    left: 50%;
    z-index: 20;

    width: min(92%, 1180px);
    transform: translateX(-50%);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.48)
        );

    border: 1px solid rgba(202, 240, 248, 0.48);
    border-radius: 999px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.terms-page .terms-announcement-track {
    display: flex;
    align-items: center;
    gap: 42px;

    width: max-content;
    padding: 12px 24px;

    animation: termsAnnouncementMove 38s linear infinite;
}

body.terms-page .terms-announcement-track span {
    position: relative;

    color: var(--color-white);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.25px;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body.terms-page .terms-announcement-track span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;

    width: 7px;
    height: 7px;

    background: var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.55);
}

body.terms-page .terms-announcement-bar:hover .terms-announcement-track {
    animation-play-state: paused;
}

@keyframes termsAnnouncementMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =====================================================
   TERMS HERO CONTENT BOX

   Function:
   - Places the hero text in a centered glass-style overlay.
   - Keeps the page polished, firm, and professional.
===================================================== */

body.terms-page .terms-hero .section-inner {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
}

body.terms-page .terms-hero-content {
    position: relative;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 54px 52px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.58),
            rgba(0, 119, 182, 0.28)
        );

    border: 1px solid rgba(202, 240, 248, 0.26);
    border-radius: 30px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    text-align: center;
}

body.terms-page .terms-hero-content .section-label,
body.terms-page .terms-final-cta .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;
    padding: 9px 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-align: center;
}

body.terms-page .terms-hero-content h1 {
    max-width: 880px;
    margin: 0 auto 26px;

    color: var(--color-white);
    font-size: clamp(2.65rem, 5.7vw, 5.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -2.2px;

    text-align: center;
    text-wrap: balance;
}

body.terms-page .terms-hero-content p {
    max-width: 760px;
    margin: 0 auto 16px;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.78;

    text-align: left;
    text-wrap: pretty;
}

body.terms-page .terms-hero-content p:last-of-type {
    margin-bottom: 0;
}

body.terms-page .terms-hero-actions,
body.terms-page .terms-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 34px;
}

body.terms-page .terms-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.terms-page .terms-secondary-btn {
    color: var(--color-pale-blue);
    background: transparent;
    border: 2px solid rgba(202, 240, 248, 0.74);
}

body.terms-page .terms-secondary-btn:hover,
body.terms-page .terms-secondary-btn:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}


/* =====================================================
   SHARED TERMS SECTION HEADERS

   Function:
   - Centers section titles.
   - Centers paragraph blocks.
   - Keeps paragraph text left-aligned for clean reading.
===================================================== */

body.terms-page .section-header {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

body.terms-page .section-header h2 {
    text-align: center;
    text-wrap: balance;
}

body.terms-page .section-header p {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TERMS POSITION SECTION

   Function:
   - Firmly states that WWA protects its business.
   - Sets the tone for responsible website use.
===================================================== */

body.terms-page .terms-position-section {
    padding: 84px 0;
    background: transparent;
}

body.terms-page .terms-position-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 44px;

    background:
        linear-gradient(
            145deg,
            rgba(202, 240, 248, 0.88),
            rgba(255, 255, 255, 0.96)
        );

    border: 1px solid rgba(3, 4, 94, 0.12);
    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.terms-page .terms-position-card h2 {
    max-width: 860px;
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-position-card p {
    max-width: 880px;
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.terms-page .terms-position-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   MAIN TERMS POLICY SECTION

   Function:
   - Displays the core terms in numbered cards.
   - Keeps important legal boundaries easy to scan.
===================================================== */

body.terms-page .terms-policy-section {
    padding: 92px 0;

    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.76),
            rgba(202, 240, 248, 0.44)
        );
}

body.terms-page .terms-policy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-top: 44px;
}

body.terms-page .terms-policy-card,
body.terms-page .terms-protection-card {
    min-height: 315px;
    padding: 28px 20px;

    color: var(--color-pale-blue);
    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.terms-page .terms-policy-card span,
body.terms-page .terms-protection-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-size: 0.82rem;
    font-weight: 900;
}

body.terms-page .terms-policy-card h3,
body.terms-page .terms-protection-card h3 {
    margin: 0 0 12px;

    color: var(--color-white);
    font-size: 1.13rem;
    font-weight: 900;
    line-height: 1.25;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-policy-card p,
body.terms-page .terms-protection-card p {
    margin: 0;

    color: var(--color-pale-blue);
    font-size: 0.91rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TERMS SPLIT LAYOUT SECTIONS

   Function:
   - Styles split content sections across the terms page.
   - Used for responsible use, payments, and security sections.
===================================================== */

body.terms-page .terms-use-section,
body.terms-page .terms-payment-section,
body.terms-page .terms-security-section {
    padding: 92px 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(202, 240, 248, 0.48)
        );
}

body.terms-page .terms-use-layout,
body.terms-page .terms-payment-layout,
body.terms-page .terms-security-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.80fr);
    gap: 36px;
    align-items: stretch;
}

body.terms-page .terms-use-content,
body.terms-page .terms-use-card,
body.terms-page .terms-payment-content,
body.terms-page .terms-payment-card,
body.terms-page .terms-security-content,
body.terms-page .terms-security-card {
    padding: 40px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.terms-page .terms-use-content h2,
body.terms-page .terms-payment-content h2,
body.terms-page .terms-security-content h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-use-content p,
body.terms-page .terms-payment-content p,
body.terms-page .terms-payment-card p,
body.terms-page .terms-security-content p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.terms-page .terms-use-content p:last-child,
body.terms-page .terms-payment-content p:last-child,
body.terms-page .terms-payment-card p:last-child,
body.terms-page .terms-security-content p:last-child {
    margin-bottom: 0;
}

body.terms-page .terms-use-card,
body.terms-page .terms-security-card,
body.terms-page .terms-payment-card {
    color: var(--color-pale-blue);
    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.20);
}

body.terms-page .terms-use-card h3,
body.terms-page .terms-payment-card h3,
body.terms-page .terms-security-card h3 {
    margin: 0 0 18px;

    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 900;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-use-card ul,
body.terms-page .terms-security-card ul {
    display: grid;
    gap: 12px;

    margin: 0;
    padding-left: 20px;

    color: var(--color-pale-blue);
}

body.terms-page .terms-use-card li,
body.terms-page .terms-security-card li {
    line-height: 1.58;
    font-weight: 700;
    text-wrap: pretty;
}


/* =====================================================
   SENSITIVE DOCUMENT SECTION

   Function:
   - Strongly warns users not to send sensitive information
     through public website forms or unsecured channels.
===================================================== */

body.terms-page .terms-document-section {
    padding: 84px 0;
    background: rgba(255, 255, 255, 0.84);
}

body.terms-page .terms-document-card {
    max-width: 1040px;
    margin: 0 auto;
    padding: 44px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.90)
        );

    border: 1px solid rgba(202, 240, 248, 0.20);
    border-left: 8px solid var(--color-gold);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    text-align: left;
}

body.terms-page .terms-document-card h2 {
    margin: 0 0 18px;

    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-document-card p {
    margin: 0 0 16px;

    color: var(--color-pale-blue);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.terms-page .terms-document-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   PROFESSIONAL SERVICES SECTION

   Function:
   - Explains limits of general website content.
   - Uses card layout for accounting, legal, investment, and
     client cooperation boundaries.
===================================================== */

body.terms-page .terms-service-section {
    padding: 92px 0;
    background: rgba(255, 255, 255, 0.88);
}

body.terms-page .terms-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;

    margin-top: 44px;
}

body.terms-page .terms-service-card {
    min-height: 320px;
    padding: 30px 22px;

    background: var(--color-white);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

body.terms-page .terms-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: var(--shadow-medium);
}

body.terms-page .terms-service-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 16px;

    font-size: 1.35rem;
}

body.terms-page .terms-service-card h3 {
    margin: 0 0 14px;

    color: var(--color-navy);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.25;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-service-card p {
    margin: 0;

    color: var(--color-dark-gray);
    font-size: 0.94rem;
    line-height: 1.65;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   FUNDING DISCLAIMER SECTION

   Function:
   - Protects WWA by clarifying it is not a lender, bank,
     funding platform, or official DAC representative.
===================================================== */

body.terms-page .terms-funding-section {
    padding: 84px 0;
    background: rgba(255, 255, 255, 0.82);
}

body.terms-page .terms-funding-card {
    max-width: 1040px;
    margin: 0 auto;
    padding: 44px;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 204, 0, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.90)
        );

    border: 1px solid rgba(202, 240, 248, 0.20);
    border-left: 8px solid var(--color-gold);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);

    text-align: left;
}

body.terms-page .terms-funding-card h2 {
    margin: 0 0 18px;

    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-funding-card p {
    margin: 0 0 16px;

    color: var(--color-pale-blue);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.terms-page .terms-funding-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   SINGLE CARD TERMS SECTIONS

   Function:
   - Handles intellectual property, third-party links,
     changes, and contact sections.
===================================================== */

body.terms-page .terms-ip-section,
body.terms-page .terms-third-party-section,
body.terms-page .terms-change-section,
body.terms-page .terms-contact-section {
    padding: 76px 0;
    background: transparent;
}

body.terms-page .terms-third-party-section {
    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.62),
            rgba(202, 240, 248, 0.36)
        );
}

body.terms-page .terms-ip-card,
body.terms-page .terms-third-party-card,
body.terms-page .terms-change-card,
body.terms-page .terms-contact-card {
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 44px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.terms-page .terms-ip-card h2,
body.terms-page .terms-third-party-card h2,
body.terms-page .terms-change-card h2,
body.terms-page .terms-contact-card h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.terms-page .terms-ip-card p,
body.terms-page .terms-third-party-card p,
body.terms-page .terms-change-card p,
body.terms-page .terms-contact-card p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.terms-page .terms-ip-card p:last-child,
body.terms-page .terms-third-party-card p:last-child,
body.terms-page .terms-change-card p:last-child,
body.terms-page .terms-contact-card p:last-child {
    margin-bottom: 0;
}

body.terms-page .terms-contact-card a {
    color: var(--color-blue);
    font-weight: 900;
    text-decoration: none;
}

body.terms-page .terms-contact-card a:hover,
body.terms-page .terms-contact-card a:focus {
    color: var(--color-navy);
    text-decoration: underline;
}


/* =====================================================
   PROTECTION / INDEMNITY SECTION

   Function:
   - Presents company protection terms in strong numbered cards.
===================================================== */

body.terms-page .terms-protection-section {
    padding: 92px 0;

    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.76),
            rgba(202, 240, 248, 0.44)
        );
}

body.terms-page .terms-protection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-top: 44px;
}


/* =====================================================
   FINAL CTA SECTION

   Function:
   - Ends the page with a strong but professional company
     protection message.
===================================================== */

body.terms-page .terms-final-cta {
    padding: 104px 0;

    color: var(--color-white);
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 204, 0, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(202, 240, 248, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    text-align: center;
}

body.terms-page .terms-final-cta .section-inner {
    max-width: 980px;
}

body.terms-page .terms-final-cta h2 {
    max-width: 820px;
    margin: 0 auto 18px;

    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;

    text-align: center;
    text-wrap: balance;
}

body.terms-page .terms-final-cta p {
    max-width: 760px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   TERMS PAGE — TABLET

   Function:
   - Adjusts layout and spacing for tablet screens.
   - Keeps hero announcement below the header.
===================================================== */

@media (max-width: 1024px) {
    body.terms-page .terms-hero {
        min-height: 760px;
        padding: calc(var(--header-height) + 205px) 0 92px;
    }

    body.terms-page .terms-hero::before {
        inset: 22px;
        border-radius: 26px;
    }

    body.terms-page .terms-announcement-bar {
        top: calc(var(--header-height) + 64px);
        width: min(92%, 900px);
    }

    body.terms-page .terms-announcement-track {
        gap: 36px;
        padding: 11px 20px;
        animation-duration: 32s;
    }

    body.terms-page .terms-announcement-track span {
        font-size: 0.78rem;
    }

    body.terms-page .terms-hero-content {
        width: min(100%, 900px);
        padding: 46px 38px;
        border-radius: 26px;
    }

    body.terms-page .terms-hero-content h1 {
        font-size: clamp(2.25rem, 6vw, 4.25rem);
    }

    body.terms-page .terms-hero-content p {
        max-width: 710px;
        font-size: 1rem;
        line-height: 1.68;
    }

    body.terms-page .terms-policy-grid,
    body.terms-page .terms-service-grid,
    body.terms-page .terms-protection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.terms-page .terms-use-layout,
    body.terms-page .terms-payment-layout,
    body.terms-page .terms-security-layout {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   TERMS PAGE — MOBILE

   Function:
   - Optimizes the terms page for phones.
   - Keeps the running announcement visible.
   - Keeps all paragraphs readable and left-aligned.
===================================================== */

@media (max-width: 700px) {
    body.terms-page .terms-hero {
        min-height: 740px;
        padding: calc(var(--header-height) + 172px) 0 58px;
    }

    body.terms-page .terms-hero::before {
        inset: 12px;
        border-radius: 18px;
    }

    body.terms-page .terms-hero::after {
        width: 360px;
        height: 360px;
        bottom: -120px;
    }

    body.terms-page .terms-announcement-bar {
        top: calc(var(--header-height) + 44px);
        width: calc(100% - 28px);
        border-radius: 18px;
    }

    body.terms-page .terms-announcement-track {
        gap: 30px;
        padding: 10px 16px;
        animation-duration: 28s;
    }

    body.terms-page .terms-announcement-track span {
        font-size: 0.68rem;
        letter-spacing: 0.15px;
    }

    body.terms-page .terms-hero-content {
        width: 100%;
        padding: 28px 18px;

        border-radius: 20px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body.terms-page .terms-hero-content .section-label,
    body.terms-page .terms-final-cta .section-label {
        margin-bottom: 14px;
        padding: 7px 13px;

        font-size: 0.62rem;
        letter-spacing: 1.2px;
    }

    body.terms-page .terms-hero-content h1 {
        margin-bottom: 18px;

        font-size: clamp(1.72rem, 8.7vw, 2.75rem);
        line-height: 1.02;
        letter-spacing: -0.9px;
    }

    body.terms-page .terms-hero-content p {
        max-width: 100%;
        margin-bottom: 12px;

        font-size: clamp(0.76rem, 3.35vw, 0.9rem);
        line-height: 1.55;

        text-align: left;
    }

    body.terms-page .terms-hero-actions,
    body.terms-page .terms-final-actions {
        gap: 10px;
        margin-top: 24px;
    }

    body.terms-page .terms-hero-actions .cta-btn,
    body.terms-page .terms-final-actions .cta-btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.76rem;
    }

    body.terms-page .terms-position-section,
    body.terms-page .terms-policy-section,
    body.terms-page .terms-use-section,
    body.terms-page .terms-document-section,
    body.terms-page .terms-service-section,
    body.terms-page .terms-funding-section,
    body.terms-page .terms-payment-section,
    body.terms-page .terms-ip-section,
    body.terms-page .terms-third-party-section,
    body.terms-page .terms-protection-section,
    body.terms-page .terms-security-section,
    body.terms-page .terms-change-section,
    body.terms-page .terms-contact-section {
        padding: 52px 0;
    }

    body.terms-page .terms-position-card,
    body.terms-page .terms-use-content,
    body.terms-page .terms-use-card,
    body.terms-page .terms-document-card,
    body.terms-page .terms-funding-card,
    body.terms-page .terms-payment-content,
    body.terms-page .terms-payment-card,
    body.terms-page .terms-ip-card,
    body.terms-page .terms-third-party-card,
    body.terms-page .terms-security-content,
    body.terms-page .terms-security-card,
    body.terms-page .terms-change-card,
    body.terms-page .terms-contact-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    body.terms-page .terms-position-card h2,
    body.terms-page .terms-use-content h2,
    body.terms-page .terms-document-card h2,
    body.terms-page .terms-payment-content h2,
    body.terms-page .terms-ip-card h2,
    body.terms-page .terms-third-party-card h2,
    body.terms-page .terms-funding-card h2,
    body.terms-page .terms-security-content h2,
    body.terms-page .terms-change-card h2,
    body.terms-page .terms-contact-card h2,
    body.terms-page .terms-final-cta h2 {
        font-size: clamp(1.25rem, 6vw, 1.85rem);
        line-height: 1.16;
    }

    body.terms-page .section-header p,
    body.terms-page .terms-position-card p,
    body.terms-page .terms-use-content p,
    body.terms-page .terms-use-card li,
    body.terms-page .terms-document-card p,
    body.terms-page .terms-payment-content p,
    body.terms-page .terms-payment-card p,
    body.terms-page .terms-ip-card p,
    body.terms-page .terms-third-party-card p,
    body.terms-page .terms-funding-card p,
    body.terms-page .terms-security-content p,
    body.terms-page .terms-security-card li,
    body.terms-page .terms-change-card p,
    body.terms-page .terms-contact-card p,
    body.terms-page .terms-final-cta p {
        font-size: clamp(0.72rem, 3.2vw, 0.86rem);
        line-height: 1.55;

        text-align: left;
        text-wrap: pretty;
    }

    body.terms-page .terms-policy-grid,
    body.terms-page .terms-service-grid,
    body.terms-page .terms-protection-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    body.terms-page .terms-policy-card,
    body.terms-page .terms-service-card,
    body.terms-page .terms-protection-card {
        min-height: auto;
        padding: 20px 16px;
        border-radius: 15px;
    }

    body.terms-page .terms-service-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;

        border-radius: 12px;
        font-size: 1rem;
    }

    body.terms-page .terms-policy-card h3,
    body.terms-page .terms-service-card h3,
    body.terms-page .terms-protection-card h3,
    body.terms-page .terms-use-card h3,
    body.terms-page .terms-payment-card h3,
    body.terms-page .terms-security-card h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    body.terms-page .terms-final-cta {
        padding: 64px 0;
    }
}

/* =====================================================
   TERMS.HTML END
===================================================== */




/* =====================================================
   SITEMAP.HTML START

   Page Function:
   - Styles the WWA sitemap page only.
   - Keeps global header and footer unchanged.
   - Presents the sitemap as a polished website command center.
   - Uses centered hero titles and centered content structure.
   - Keeps important paragraphs left-aligned inside centered blocks.
===================================================== */


/* =====================================================
   SITEMAP PAGE BACKGROUND

   Function:
   - Adds a polished full-page background.
   - Keeps the page consistent with other WWA pages.
===================================================== */

body.sitemap-page {
    background:
        radial-gradient(
            circle at 8% 16%,
            rgba(202, 240, 248, 0.56),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(0, 119, 182, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 16% 86%,
            rgba(255, 204, 0, 0.10),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1),
            rgba(202, 240, 248, 0.34),
            rgba(255, 255, 255, 1)
        );
}

body.sitemap-page main {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            rgba(202, 240, 248, 0.24),
            rgba(255, 255, 255, 0.20)
        );
}

body.sitemap-page main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(rgba(3, 4, 94, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 4, 94, 0.032) 1px, transparent 1px);

    background-size: 44px 44px;
    pointer-events: none;
}

body.sitemap-page main > section {
    position: relative;
    z-index: 1;
}


/* =====================================================
   SITEMAP HERO SECTION

   Function:
   - Creates the main first impression for the sitemap page.
   - Centers the hero content as a group.
   - Keeps the hero title centered.
   - Keeps paragraphs left-aligned inside the centered overlay.
   - Uses an optional image:
     assets/images/sitemap/sitemap-hero.jpg
===================================================== */

body.sitemap-page .sitemap-hero {
    position: relative;
    min-height: 820px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: calc(var(--header-height) + 230px) 0 120px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 204, 0, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 24%,
            rgba(202, 240, 248, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(0, 180, 216, 0.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.76),
            rgba(0, 119, 182, 0.48)
        ),
        url("../images/sitemap/sitemap-hero.jpg");

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

    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

body.sitemap-page .sitemap-hero::before {
    content: "";
    position: absolute;
    inset: 34px;
    z-index: 1;

    border: 1px solid rgba(202, 240, 248, 0.22);
    border-radius: 34px;

    pointer-events: none;
}

body.sitemap-page .sitemap-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;
    z-index: 1;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(255, 204, 0, 0.16),
            rgba(255, 204, 0, 0.035) 42%,
            transparent 70%
        );

    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(2px);

    pointer-events: none;
}


/* =====================================================
   SITEMAP RUNNING ANNOUNCEMENT

   Function:
   - Adds a visible running announcement inside the hero image.
   - Keeps the announcement below the fixed header.
   - Reinforces navigation, privacy, and responsible website use.
===================================================== */

body.sitemap-page .sitemap-announcement-bar {
    position: absolute;
    top: calc(var(--header-height) + 78px);
    left: 50%;
    z-index: 20;

    width: min(92%, 1180px);
    transform: translateX(-50%);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.78),
            rgba(0, 119, 182, 0.48)
        );

    border: 1px solid rgba(202, 240, 248, 0.48);
    border-radius: 999px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.sitemap-page .sitemap-announcement-track {
    display: flex;
    align-items: center;
    gap: 42px;

    width: max-content;
    padding: 12px 24px;

    animation: sitemapAnnouncementMove 38s linear infinite;
}

body.sitemap-page .sitemap-announcement-track span {
    position: relative;

    color: var(--color-white);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.25px;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body.sitemap-page .sitemap-announcement-track span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;

    width: 7px;
    height: 7px;

    background: var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.55);
}

body.sitemap-page .sitemap-announcement-bar:hover .sitemap-announcement-track {
    animation-play-state: paused;
}

@keyframes sitemapAnnouncementMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =====================================================
   SITEMAP HERO CONTENT BOX

   Function:
   - Places the hero text in a centered glass-style overlay.
   - Keeps the page sleek, clear, and professional.
===================================================== */

body.sitemap-page .sitemap-hero .section-inner {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
}

body.sitemap-page .sitemap-hero-content {
    position: relative;

    width: min(100%, 980px);
    margin: 0 auto;
    padding: 54px 52px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.56),
            rgba(0, 119, 182, 0.26)
        );

    border: 1px solid rgba(202, 240, 248, 0.26);
    border-radius: 30px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    text-align: center;
}

body.sitemap-page .sitemap-hero-content .section-label,
body.sitemap-page .sitemap-final-cta .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;
    padding: 9px 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-align: center;
}

body.sitemap-page .sitemap-hero-content h1 {
    max-width: 880px;
    margin: 0 auto 26px;

    color: var(--color-white);
    font-size: clamp(2.65rem, 5.7vw, 5.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -2.2px;

    text-align: center;
    text-wrap: balance;
}

body.sitemap-page .sitemap-hero-content p {
    max-width: 760px;
    margin: 0 auto 16px;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.78;

    text-align: left;
    text-wrap: pretty;
}

body.sitemap-page .sitemap-hero-content p:last-of-type {
    margin-bottom: 0;
}

body.sitemap-page .sitemap-hero-actions,
body.sitemap-page .sitemap-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 34px;
}

body.sitemap-page .sitemap-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.sitemap-page .sitemap-secondary-btn {
    color: var(--color-pale-blue);
    background: transparent;
    border: 2px solid rgba(202, 240, 248, 0.74);
}

body.sitemap-page .sitemap-secondary-btn:hover,
body.sitemap-page .sitemap-secondary-btn:focus {
    color: var(--color-navy);
    background: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}


/* =====================================================
   SHARED SITEMAP SECTION HEADERS

   Function:
   - Centers section titles.
   - Centers paragraph blocks.
   - Keeps paragraph text left-aligned for clean reading.
===================================================== */

body.sitemap-page .section-header {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

body.sitemap-page .section-header h2 {
    text-align: center;
    text-wrap: balance;
}

body.sitemap-page .section-header p {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SITEMAP INTRO SECTION

   Function:
   - Opens the sitemap with a clear explanation.
   - Reinforces responsible website use and document handling.
===================================================== */

body.sitemap-page .sitemap-intro-section {
    padding: 84px 0;
    background: transparent;
}

body.sitemap-page .sitemap-intro-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 44px;

    background:
        linear-gradient(
            145deg,
            rgba(202, 240, 248, 0.88),
            rgba(255, 255, 255, 0.96)
        );

    border: 1px solid rgba(3, 4, 94, 0.12);
    border-left: 8px solid var(--color-gold);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.sitemap-page .sitemap-intro-card h2 {
    max-width: 860px;
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
    text-wrap: balance;
}

body.sitemap-page .sitemap-intro-card p {
    max-width: 880px;
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.sitemap-page .sitemap-intro-card p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   QUICK PATH SECTION

   Function:
   - Gives visitors fast access to high-value pages.
   - Makes the sitemap feel like a guided command center.
===================================================== */

body.sitemap-page .sitemap-quick-section {
    padding: 92px 0;

    background:
        linear-gradient(
            180deg,
            rgba(202, 240, 248, 0.76),
            rgba(202, 240, 248, 0.44)
        );
}

body.sitemap-page .sitemap-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;

    margin-top: 44px;
}

body.sitemap-page .sitemap-quick-card {
    min-height: 300px;
    padding: 30px 22px;

    display: block;

    background: var(--color-white);
    border: 1px solid rgba(3, 4, 94, 0.10);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    color: inherit;
    text-align: left;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

body.sitemap-page .sitemap-quick-card:hover,
body.sitemap-page .sitemap-quick-card:focus {
    transform: translateY(-6px);
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: var(--shadow-medium);
    outline: none;
}

body.sitemap-page .sitemap-quick-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 16px;

    font-size: 1.35rem;
}

body.sitemap-page .sitemap-quick-card h3 {
    margin: 0 0 14px;

    color: var(--color-navy);
    font-size: 1.16rem;
    font-weight: 900;
    line-height: 1.25;

    text-align: left;
    text-wrap: balance;
}

body.sitemap-page .sitemap-quick-card p {
    margin: 0;

    color: var(--color-dark-gray);
    font-size: 0.94rem;
    line-height: 1.65;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   FULL DIRECTORY SECTION

   Function:
   - Organizes all important website pages by purpose.
   - Gives visitors a polished map of the site.
===================================================== */

body.sitemap-page .sitemap-directory-section {
    padding: 92px 0;
    background: rgba(255, 255, 255, 0.88);
}

body.sitemap-page .sitemap-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    margin-top: 44px;
}

body.sitemap-page .sitemap-directory-card {
    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.sitemap-page .sitemap-directory-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 24px;
}

body.sitemap-page .sitemap-directory-heading span {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-size: 0.82rem;
    font-weight: 900;
    flex: 0 0 auto;
}

body.sitemap-page .sitemap-directory-heading h3 {
    margin: 0;

    color: var(--color-white);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.15;

    text-align: left;
}

body.sitemap-page .sitemap-directory-card ul {
    display: grid;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

body.sitemap-page .sitemap-directory-card li {
    margin: 0;
    padding: 0;
}

body.sitemap-page .sitemap-directory-card a {
    display: block;

    padding: 16px 16px;

    color: var(--color-pale-blue);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(202, 240, 248, 0.14);
    border-radius: 14px;

    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

body.sitemap-page .sitemap-directory-card a:hover,
body.sitemap-page .sitemap-directory-card a:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 204, 0, 0.55);
    transform: translateX(4px);
    outline: none;
}

body.sitemap-page .sitemap-directory-card a strong {
    display: block;

    margin-bottom: 6px;

    color: var(--color-white);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

body.sitemap-page .sitemap-directory-card a span {
    display: block;

    color: var(--color-pale-blue);
    font-size: 0.88rem;
    line-height: 1.5;
    text-wrap: pretty;
}


/* =====================================================
   PRIVACY REMINDER SECTION

   Function:
   - Reminds visitors not to submit sensitive documents
     through public website forms.
===================================================== */

body.sitemap-page .sitemap-privacy-section {
    padding: 92px 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(202, 240, 248, 0.48)
        );
}

body.sitemap-page .sitemap-privacy-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.80fr);
    gap: 36px;
    align-items: stretch;
}

body.sitemap-page .sitemap-privacy-content,
body.sitemap-page .sitemap-privacy-card {
    padding: 40px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(3, 4, 94, 0.12);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.sitemap-page .sitemap-privacy-content h2 {
    margin: 0 0 18px;

    color: var(--color-navy);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1.14;

    text-align: left;
    text-wrap: balance;
}

body.sitemap-page .sitemap-privacy-content p {
    margin: 0 0 16px;

    color: var(--color-dark-gray);
    font-size: 1rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}

body.sitemap-page .sitemap-privacy-content p:last-child {
    margin-bottom: 0;
}

body.sitemap-page .sitemap-privacy-card {
    color: var(--color-pale-blue);
    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.20);
}

body.sitemap-page .sitemap-privacy-card h3 {
    margin: 0 0 18px;

    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 900;

    text-align: left;
    text-wrap: balance;
}

body.sitemap-page .sitemap-privacy-card ul {
    display: grid;
    gap: 12px;

    margin: 0;
    padding-left: 20px;

    color: var(--color-pale-blue);
}

body.sitemap-page .sitemap-privacy-card li {
    line-height: 1.58;
    font-weight: 700;
    text-wrap: pretty;
}


/* =====================================================
   WEBSITE EXPERIENCE SECTION

   Function:
   - Explains the purpose behind the website experience.
   - Uses numbered cards for clarity and polish.
===================================================== */

body.sitemap-page .sitemap-experience-section {
    padding: 92px 0;
    background: rgba(255, 255, 255, 0.88);
}

body.sitemap-page .sitemap-experience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-top: 44px;
}

body.sitemap-page .sitemap-experience-card {
    min-height: 250px;
    padding: 28px 20px;

    color: var(--color-pale-blue);
    background:
        linear-gradient(
            145deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.88)
        );

    border: 1px solid rgba(202, 240, 248, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);

    text-align: left;
}

body.sitemap-page .sitemap-experience-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    color: var(--color-navy);
    background: var(--color-gold);
    border-radius: 50%;

    font-size: 0.82rem;
    font-weight: 900;
}

body.sitemap-page .sitemap-experience-card h3 {
    margin: 0 0 12px;

    color: var(--color-white);
    font-size: 1.16rem;
    font-weight: 900;

    text-align: left;
    text-wrap: balance;
}

body.sitemap-page .sitemap-experience-card p {
    margin: 0;

    color: var(--color-pale-blue);
    font-size: 0.92rem;
    line-height: 1.6;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SITEMAP FINAL CTA SECTION

   Function:
   - Ends the sitemap with a polished final action area.
   - Keeps the title centered.
   - Keeps the paragraph left-aligned inside centered block.
===================================================== */

body.sitemap-page .sitemap-final-cta {
    padding: 104px 0;

    color: var(--color-white);
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 204, 0, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(202, 240, 248, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(3, 4, 94, 0.96),
            rgba(0, 119, 182, 0.92)
        );

    text-align: center;
}

body.sitemap-page .sitemap-final-cta .section-inner {
    max-width: 980px;
}

body.sitemap-page .sitemap-final-cta h2 {
    max-width: 820px;
    margin: 0 auto 18px;

    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;

    text-align: center;
    text-wrap: balance;
}

body.sitemap-page .sitemap-final-cta p {
    max-width: 760px;
    margin: 0 auto;

    color: var(--color-pale-blue);
    font-size: 1.08rem;
    line-height: 1.75;

    text-align: left;
    text-wrap: pretty;
}


/* =====================================================
   SITEMAP PAGE — TABLET

   Function:
   - Adjusts layout and spacing for tablet screens.
   - Keeps hero announcement below the header.
===================================================== */

@media (max-width: 1024px) {
    body.sitemap-page .sitemap-hero {
        min-height: 760px;
        padding: calc(var(--header-height) + 205px) 0 92px;
    }

    body.sitemap-page .sitemap-hero::before {
        inset: 22px;
        border-radius: 26px;
    }

    body.sitemap-page .sitemap-announcement-bar {
        top: calc(var(--header-height) + 64px);
        width: min(92%, 900px);
    }

    body.sitemap-page .sitemap-announcement-track {
        gap: 36px;
        padding: 11px 20px;
        animation-duration: 32s;
    }

    body.sitemap-page .sitemap-announcement-track span {
        font-size: 0.78rem;
    }

    body.sitemap-page .sitemap-hero-content {
        width: min(100%, 900px);
        padding: 46px 38px;
        border-radius: 26px;
    }

    body.sitemap-page .sitemap-hero-content h1 {
        font-size: clamp(2.25rem, 6vw, 4.25rem);
    }

    body.sitemap-page .sitemap-hero-content p {
        max-width: 710px;
        font-size: 1rem;
        line-height: 1.68;
    }

    body.sitemap-page .sitemap-quick-grid,
    body.sitemap-page .sitemap-experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.sitemap-page .sitemap-directory-grid,
    body.sitemap-page .sitemap-privacy-layout {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   SITEMAP PAGE — MOBILE

   Function:
   - Optimizes the sitemap page for phones.
   - Keeps the running announcement visible.
   - Keeps all paragraphs readable and left-aligned.
===================================================== */

@media (max-width: 700px) {
    body.sitemap-page .sitemap-hero {
        min-height: 740px;
        padding: calc(var(--header-height) + 172px) 0 58px;
    }

    body.sitemap-page .sitemap-hero::before {
        inset: 12px;
        border-radius: 18px;
    }

    body.sitemap-page .sitemap-hero::after {
        width: 360px;
        height: 360px;
        bottom: -120px;
    }

    body.sitemap-page .sitemap-announcement-bar {
        top: calc(var(--header-height) + 44px);
        width: calc(100% - 28px);
        border-radius: 18px;
    }

    body.sitemap-page .sitemap-announcement-track {
        gap: 30px;
        padding: 10px 16px;
        animation-duration: 28s;
    }

    body.sitemap-page .sitemap-announcement-track span {
        font-size: 0.68rem;
        letter-spacing: 0.15px;
    }

    body.sitemap-page .sitemap-hero-content {
        width: 100%;
        padding: 28px 18px;

        border-radius: 20px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body.sitemap-page .sitemap-hero-content .section-label,
    body.sitemap-page .sitemap-final-cta .section-label {
        margin-bottom: 14px;
        padding: 7px 13px;

        font-size: 0.62rem;
        letter-spacing: 1.2px;
    }

    body.sitemap-page .sitemap-hero-content h1 {
        margin-bottom: 18px;

        font-size: clamp(1.72rem, 8.7vw, 2.75rem);
        line-height: 1.02;
        letter-spacing: -0.9px;
    }

    body.sitemap-page .sitemap-hero-content p {
        max-width: 100%;
        margin-bottom: 12px;

        font-size: clamp(0.76rem, 3.35vw, 0.9rem);
        line-height: 1.55;

        text-align: left;
    }

    body.sitemap-page .sitemap-hero-actions,
    body.sitemap-page .sitemap-final-actions {
        gap: 10px;
        margin-top: 24px;
    }

    body.sitemap-page .sitemap-hero-actions .cta-btn,
    body.sitemap-page .sitemap-final-actions .cta-btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.76rem;
    }

    body.sitemap-page .sitemap-intro-section,
    body.sitemap-page .sitemap-quick-section,
    body.sitemap-page .sitemap-directory-section,
    body.sitemap-page .sitemap-privacy-section,
    body.sitemap-page .sitemap-experience-section {
        padding: 52px 0;
    }

    body.sitemap-page .sitemap-intro-card,
    body.sitemap-page .sitemap-directory-card,
    body.sitemap-page .sitemap-privacy-content,
    body.sitemap-page .sitemap-privacy-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    body.sitemap-page .sitemap-intro-card h2,
    body.sitemap-page .sitemap-privacy-content h2,
    body.sitemap-page .sitemap-final-cta h2 {
        font-size: clamp(1.25rem, 6vw, 1.85rem);
        line-height: 1.16;
    }

    body.sitemap-page .section-header p,
    body.sitemap-page .sitemap-intro-card p,
    body.sitemap-page .sitemap-privacy-content p,
    body.sitemap-page .sitemap-privacy-card li,
    body.sitemap-page .sitemap-final-cta p {
        font-size: clamp(0.72rem, 3.2vw, 0.86rem);
        line-height: 1.55;

        text-align: left;
        text-wrap: pretty;
    }

    body.sitemap-page .sitemap-quick-grid,
    body.sitemap-page .sitemap-experience-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    body.sitemap-page .sitemap-quick-card,
    body.sitemap-page .sitemap-experience-card {
        min-height: auto;
        padding: 20px 16px;
        border-radius: 15px;
    }

    body.sitemap-page .sitemap-quick-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;

        border-radius: 12px;
        font-size: 1rem;
    }

    body.sitemap-page .sitemap-quick-card h3,
    body.sitemap-page .sitemap-experience-card h3,
    body.sitemap-page .sitemap-directory-heading h3,
    body.sitemap-page .sitemap-privacy-card h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    body.sitemap-page .sitemap-directory-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
    }

    body.sitemap-page .sitemap-directory-heading {
        gap: 10px;
        margin-bottom: 18px;
    }

    body.sitemap-page .sitemap-directory-heading span,
    body.sitemap-page .sitemap-experience-card span {
        width: 36px;
        height: 36px;
        font-size: 0.72rem;
    }

    body.sitemap-page .sitemap-directory-card a {
        padding: 13px 12px;
        border-radius: 12px;
    }

    body.sitemap-page .sitemap-directory-card a strong {
        font-size: 0.9rem;
    }

    body.sitemap-page .sitemap-directory-card a span {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    body.sitemap-page .sitemap-final-cta {
        padding: 64px 0;
    }
}

/* =====================================================
   SITEMAP.HTML END
===================================================== */