/* ============================================================
   SITE OVERRIDES — ArchScanToBIM
   Loaded AFTER custom.css. Contains:
   1. Brand color override (theme yellow -> brand blue)
   2. Fixes for theme assets not included in this build (missing
      images/plugins) so nothing renders broken or hidden
   3. New components required by the client content spec that
      don't exist in the base theme
   ============================================================ */

/* ---------- 0. SELF-HOSTED HEADING FONT (General Sans) ----------
   Replaces the theme's Space Grotesk (--accent-font) on every h1-h6
   and every component label/heading that references var(--accent-font)
   site-wide. Files live in /fonts, one weight per file, so the browser
   only downloads the weights actually used on a given page. */
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Extralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-ExtralightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ---------- 1. BRAND COLORS ---------- */
:root {
    --primary-color: #10151c; /* deep architectural navy (was #0D0D0D) */
    --secondary-color: #f2f5f8; /* cool slate-grey surface (was #F5F5F5) */
    --bg-color: #ffffff;
    --text-color: #5b6472; /* cool slate body text */
    --accent-color: #0f6fbc; /* brand blue, sampled from logo (was #FED403) */
    --accent-dark: #0b527f; /* hover / depth state for blue */
    --slate-color: #64748b; /* secondary slate accent */
    --white-color: #ffffff;
    --divider-color: #0d101a1a;
    --dark-divider-color: #ffffff14;
    --error-color: rgb(230, 87, 87);
    --accent-font:
        'General Sans', sans-serif; /* was "Space Grotesk" — all h1-h6 and other heading/label elements use this */
}

body {
    color: var(--text-color);
}

.site-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo {
    display: block;
    width: auto;
    object-fit: contain;
}

.site-logo--header {
    height: 52px;
    max-width: min(260px, 58vw);
}

.site-logo--footer {
    height: 46px;
    max-width: 230px;
}

.footer-logo .site-logo {
    width: auto;
}

@media (max-width: 991px) {
    .site-logo--header {
        height: 44px;
        max-width: min(220px, 62vw);
    }

    .site-logo--footer {
        height: 40px;
        max-width: 200px;
    }
}

/* ---------- 2. FIX MISSING THEME ASSETS ---------- */

/* dark-section-bg-image.png is now included — the theme's own
   .dark-section rule in custom.css works as-is, no override needed. */

/* .hero and .main-footer each reference their own separate background
   image (hero-bg-image.jpg / footer-bg-image.jpg) that wasn't part of
   this upload. Reuse the real dark-section texture we do have, so the
   whole site reads as one cohesive dark, textured look. */
.hero {
    background-image: url('../images/dark-section-bg-image.png');
    background-size: cover;
    background-position: center center;
}
.hero::before {
    opacity: 45%;
}

.main-footer {
    background-image: url('../images/dark-section-bg-image.png');
    background-size: cover;
    background-position: center center;
}

/* Nav dropdown arrow used FontAwesome's font glyph (\f107), but the FA
   webfont files weren't part of this upload — draw the chevron in pure
   CSS instead so it always renders regardless of font availability. */
.main-menu ul li.submenu > a:after {
    content: '';
    font-family: inherit;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    margin-bottom: 2px;
    vertical-align: middle;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
}
.main-menu ul li.submenu ul li.submenu > a:after {
    float: right;
    margin-top: 6px;
    transform: rotate(-45deg);
}

/* Buttons: the theme's original .btn-default/.btn-highlighted rules in
   custom.css are used as-is (colors flow through the CSS variables above).
   We only needed to supply the two icon assets it was missing:
   images/arrow-white.svg and images/arrow-primary.svg — now included.
   Placeholder arrows for now; drop your real exported SVGs into those
   exact two filenames and the buttons update automatically, no CSS edits needed. */

/* Mobile nav is now handled by the theme's real jquery.slicknav.js + 
   slicknav.min.css (both wired in) — it clones #menu into .responsive-menu
   and binds the .navbar-toggle button automatically. No custom CSS needed. */

/* ============================================================
   3. NEW COMPONENTS
   ============================================================ */

/* ---- Language toggle removed per client decision (skipped for now) ---- */

/* ---- HERO (custom layout: content left / compare slider right) ---- */
.hero-hometo {
    padding: 165px 0 110px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.hero-hometo .section-title h1 {
    font-size: 54px;
}
.hero-hometo .section-title p {
    font-size: 17px;
    max-width: 560px;
}
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
}
@media (min-width: 1400px) {
    .hero-cta-group {
        padding-bottom: 40px;
    }
}
@media (max-width: 1199px) {
    .hero-cta-group {
        padding-bottom: 40px;
    }
}

/* Compare slider — capped so it stays proportionate at large viewport
   widths instead of stretching the whole hero section too tall */
.compare-slider {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    aspect-ratio: 4 / 3.3;
    border-radius: 10px;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 30px 60px -20px #00000055;
    border: 1px solid var(--dark-divider-color);
}
@media (min-width: 1400px) {
    .compare-slider {
        max-width: 600px;
    }
}
@media (max-width: 1199px) {
    .compare-slider {
        max-width: 100%;
        margin-left: 0;
    }
}
.compare-slider img,
.compare-slider .compare-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.compare-slider .compare-before {
    z-index: 1;
}
.compare-slider .compare-after {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}
.compare-tag {
    position: absolute;
    top: 16px;
    z-index: 3;
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white-color);
    background: #0b0f16cc;
    padding: 6px 12px;
    border-radius: 100px;
    pointer-events: none;
}
.compare-tag.tag-before {
    left: 16px;
}
.compare-tag.tag-after {
    right: 16px;
}
.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    z-index: 4;
    cursor: ew-resize;
    touch-action: none;
}
.compare-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: var(--white-color);
}
.compare-handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 6px 18px #00000040;
    pointer-events: none;
}
.compare-handle-grip svg {
    width: 10px;
    height: 10px;
    color: var(--primary-color);
}
.compare-caption {
    margin-top: 16px;
    font-size: 13px;
    color: var(--slate-color);
    text-align: center;
}
.placeholder-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--slate-color);
    background: var(--secondary-color);
    padding: 4px 10px;
    border-radius: 100px;
    margin-top: 8px;
}

/* ---- Trust & Technical Scale Bar ---- */
.trust-bar {
    background: var(--secondary-color);
    border-bottom: 1px solid #0d101a0f;
    position: relative;
    z-index: 2;
}
.trust-bar-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.trust-bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 20px;
    border-left: 1px solid #0d101a14;
}
.trust-bar-item:first-child {
    border-left: none;
    padding-left: 0;
}
.trust-bar-item .icon-box {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-bar-item .icon-box svg {
    width: 22px;
    height: 22px;
}
.trust-bar-item h4 {
    font-family: var(--accent-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
    line-height: 1.25em;
}
.trust-bar-item p {
    font-size: 13px;
    line-height: 1.4em;
    color: var(--slate-color);
    margin: 0;
}

/* ---- Core Value Proposition ---- */
.value-prop {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}
.value-prop::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/header-banner.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0.06;
    z-index: 0;
}
.value-prop .container {
    position: relative;
    z-index: 1;
}
.value-prop-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 34px 0 0;
}
.value-prop-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.value-prop-item .icon-box {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.value-prop-item .icon-box svg {
    width: 24px;
    height: 24px;
}
.value-prop-item h4 {
    font-family: var(--accent-font);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}
.value-prop-item p {
    font-size: 15px;
    margin: 0;
    line-height: 1.55em;
}

.value-prop-graphic {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--divider-color);
}
.value-prop-graphic img {
    width: 100%;
    display: block;
}
.deviation-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--white-color);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 14px 34px -10px #00000040;
    display: flex;
    align-items: center;
    gap: 10px;
}
.deviation-badge .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2fb86a;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #2fb86a22;
}
.deviation-badge strong {
    display: block;
    font-family: var(--accent-font);
    font-size: 15px;
    color: var(--primary-color);
    line-height: 1.2em;
}
.deviation-badge span {
    font-size: 11.5px;
    color: var(--slate-color);
}

/* ---- Services Preview Grid ---- */
.services-preview {
    padding: 100px 0;
    background: var(--secondary-color);
}
.services-preview .section-title {
    margin-bottom: 56px;
}
.service-card {
    background: var(--white-color);
    border-radius: 10px;
    padding: 40px 32px;
    height: 100%;
    border: 1px solid #0d101a0f;
    transition: all 0.35s ease-in-out;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -20px #10151c1f;
    border-color: transparent;
}
.service-card-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 26px;
}
.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease-in-out;
}
.service-card:hover .service-card-image img {
    transform: scale(1.06);
}
.service-card .icon-box {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}
.service-card .icon-box svg {
    width: 26px;
    height: 26px;
}
.service-card h3 {
    font-size: 21px;
    margin-bottom: 12px;
}
.service-card h3 a {
    color: inherit;
}
.service-card h3 a:hover {
    color: var(--accent-color);
}
.service-card > p {
    font-size: 15px;
    margin-bottom: 22px;
    flex-grow: 0;
}
.service-card-meta {
    border-top: 1px solid #0d101a0f;
    padding-top: 20px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.service-card-meta .meta-row span {
    display: block;
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 3px;
}
.service-card-meta .meta-row p {
    font-size: 13.5px;
    margin: 0;
    color: var(--text-color);
    line-height: 1.45em;
}
.service-card-link {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}
.service-card-link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease-in-out;
}
.service-card:hover .service-card-link {
    color: var(--accent-color);
}
.service-card:hover .service-card-link svg {
    transform: translateX(4px);
}

/* ---- 5-Step Workflow ---- */
.workflow {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.workflow-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 60px;
}
.workflow-track::before {
    content: '';
    position: absolute;
    top: 30px;
  /* Center of first icon → center of last icon (5 columns, 24px gaps) */
    left: 30px;
    right: calc((100% - 24px * 4) / 5 - 30px);
    height: 1px;
    background: repeating-linear-gradient(to right, #0d101a33 0 3px, transparent 3px 4px);
    z-index: 0;
}
.workflow-step {
    position: relative;
    z-index: 1;
    text-align: left;
}
.workflow-step .icon-box {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.workflow-step .icon-box svg {
    width: 24px;
    height: 24px;
}
.workflow-step .step-number {
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.workflow-step h4 {
    font-size: 16.5px;
    margin-bottom: 8px;
    line-height: 1.3em;
}
.workflow-step p {
    font-size: 13.5px;
    line-height: 1.55em;
    margin: 0;
    color: var(--text-color);
}

@media (max-width: 991px) {
    .workflow-track {
        --workflow-mobile-icon: 52px;
        --workflow-mobile-gap: 20px;
        grid-template-columns: 1fr;
        gap: var(--workflow-mobile-gap);
        margin-top: 40px;
    }
    .workflow-track::before {
        display: none;
    }
    .workflow .section-row {
        margin-bottom: 40px;
    }
    .workflow-step {
        position: relative;
        display: grid;
        grid-template-columns: var(--workflow-mobile-icon) 1fr;
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
    }
    /* Center of icon → center of next icon (continuous tight dashed rail) */
    .workflow-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: calc(var(--workflow-mobile-icon) / 2);
        transform: translateX(-50%);
        top: calc(var(--workflow-mobile-icon) / 2);
        bottom: calc(-1 * var(--workflow-mobile-gap) - var(--workflow-mobile-icon) / 2);
        width: 1px;
        background: repeating-linear-gradient(to bottom, #0d101a33 0 3px, transparent 3px 4px);
        z-index: 1;
        pointer-events: none;
    }
    .workflow.dark-section .workflow-step:not(:last-child)::after {
        background: repeating-linear-gradient(to bottom, #ffffff33 0 3px, transparent 3px 4px);
    }
    .workflow-step .icon-box {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: var(--workflow-mobile-icon);
        height: var(--workflow-mobile-icon);
        margin-bottom: 0;
        align-self: start;
        position: relative;
        z-index: 2;
    }
    .workflow-step .icon-box svg {
        width: 22px;
        height: 22px;
    }
    .workflow-step .step-number {
        grid-column: 2;
        margin-bottom: 2px;
    }
    .workflow-step h4 {
        grid-column: 2;
        font-size: 15px;
        margin-bottom: 4px;
    }
    .workflow-step p {
        grid-column: 2;
        font-size: 13px;
        line-height: 1.5em;
    }
}

@media (max-width: 575px) {
    .workflow-track {
        --workflow-mobile-icon: 48px;
        --workflow-mobile-gap: 16px;
        gap: var(--workflow-mobile-gap);
        margin-top: 32px;
    }
    .workflow-step {
        column-gap: 14px;
    }
    .workflow-step .icon-box svg {
        width: 20px;
        height: 20px;
    }
    .workflow-step h4 {
        font-size: 14.5px;
    }
    .workflow-step p {
        font-size: 12.5px;
    }
}

/* ---- 5-Step Workflow (home page redesign): left vertical timeline +
   right visual. Kept separate from .workflow-track/.workflow-step so
   quality-assurance and other pages keep the horizontal layout. ---- */
.workflow-content-row {
    display: flex;
    align-items: center;
    gap: 64px;
    margin-top: 50px;
}
.workflow-track-vertical {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    --rail-gutter: 34px;
    --rail-x: 6px;
    padding-left: var(--rail-gutter);
}
.workflow-track-vertical::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: var(--rail-x);
    width: 2px;
    transform: translateX(-50%);
    background-image: linear-gradient(var(--accent-color) 60%, transparent 0%);
    background-position: left;
    background-size: 2px 10px;
    background-repeat: repeat-y;
}
.workflow-step-v {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--white-color);
    border: 1px solid rgba(13, 16, 26, 0.06);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 18px;
    transition: all 0.3s ease-in-out;
}
.workflow-track-vertical .workflow-step-v:last-child {
    margin-bottom: 0;
}
.workflow-step-v::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--rail-gutter) + var(--rail-x));
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--white-color);
    border: 2px solid var(--accent-color);
    z-index: 1;
}
.workflow-step-v:hover {
    border-color: transparent;
    box-shadow: 0 20px 40px -20px rgba(16, 21, 28, 0.15);
    transform: translateX(4px);
}
.workflow-step-v .icon-box {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.workflow-step-v .icon-box svg {
    width: 22px;
    height: 22px;
}
.workflow-step-v-body .step-number {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}
.workflow-step-v-body h4 {
    font-size: 16.5px;
    margin-bottom: 6px;
}
.workflow-step-v-body p {
    font-size: 13.5px;
    line-height: 1.55em;
    margin: 0;
    color: var(--text-color);
}

.workflow-visual {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}
.workflow-visual-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--dark-divider-color, rgba(13, 16, 26, 0.1));
    box-shadow: 0 30px 60px -20px rgba(16, 21, 28, 0.2);
    aspect-ratio: 9 / 11;
}
.workflow-visual-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.workflow-visual-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white-color);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 20px 40px -16px rgba(16, 21, 28, 0.25);
    max-width: 230px;
    z-index: 2;
}
.workflow-visual-badge .badge-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.workflow-visual-badge .badge-icon svg {
    width: 16px;
    height: 16px;
}
.workflow-visual-badge strong {
    display: block;
    font-size: 13px;
    color: var(--primary-color);
    line-height: 1.3;
}
.workflow-visual-badge small {
    font-size: 11px;
    color: var(--text-color);
}
.badge-top {
    top: 28px;
    left: -28px;
}
.badge-bottom {
    bottom: 28px;
    right: -28px;
}
.workflow-visual-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
    margin: 20px 0 0;
}

@media (max-width: 991px) {
    .workflow-content-row {
        flex-direction: column;
        gap: 40px;
    }
    .workflow-visual {
        width: 100%;
        max-width: 420px;
    }
    .badge-top,
    .badge-bottom {
        position: absolute;
    }
    .badge-top {
        left: 12px;
    }
    .badge-bottom {
        right: 12px;
    }
}

@media (max-width: 575px) {
    .workflow-track-vertical {
        --rail-gutter: 26px;
    }
    .workflow-step-v {
        flex-direction: column;
        gap: 12px;
        padding: 18px 18px;
    }
    .workflow-visual-badge {
        max-width: 180px;
        padding: 10px 12px;
    }
    .badge-top,
    .badge-bottom {
        left: 8px;
        right: 8px;
    }
}

/* ---- Final CTA: centered layout (no side image, so center the block) ---- */
.cta-box {
    padding: 100px 0;
}
.cta-box-content-centered {
    margin-right: 0;
    text-align: center;
}
.cta-box-btn {
    text-align: center;
}

/* ---- Get Started: NDA note (replaces the two icon items) ---- */
.cta-box-nda-note {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--dark-divider-color);
}
.cta-box-nda-note p {
    font-style: italic;
    font-size: 15px;
    line-height: 1.6em;
    color: var(--white-color);
    opacity: 0.85;
    margin: 0;
}

/* ---- Buttons: solid white label text for stronger contrast on the blue
   background (hover states already swap to white/dark appropriately). ---- */
.btn-default {
    color: var(--white-color);
}

.footer-location-info {
    max-width: calc(21% - 20px);
}
.footer-contact-links {
    max-width: calc(28% - 20px);
}
.footer-newsletter-form {
    max-width: calc(33% - 20px);
}

/* ---- Footer: "Rechtliches" (legal) links column ---- */
.footer-legal-links {
    max-width: calc(14% - 20px);
}
.footer-legal-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-legal-links ul li {
    margin-bottom: 12px;
}
.footer-legal-links ul li:last-child {
    margin-bottom: 0;
}
.footer-legal-links ul li a {
    color: var(--white-color);
    opacity: 0.75;
    transition: all 0.3s ease-in-out;
}
.footer-legal-links ul li a:hover {
    color: var(--accent-color);
    opacity: 1;
}
@media (max-width: 575px) {
    .footer-legal-links {
        max-width: 100%;
    }
}

/* ---- Footer responsive ---- */
@media (max-width: 1199px) {
    .footer-location-info,
    .footer-contact-links,
    .footer-newsletter-form,
    .footer-legal-links {
        max-width: 100%;
        width: 100%;
    }

    .footer-links-box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
    }
}

@media (max-width: 991px) {
    .footer-box {
        padding: 60px 0 0;
    }

    .about-footer {
        max-width: 100%;
        margin-bottom: 8px;
    }

    .footer-working-hours {
        margin-top: 20px;
        padding-top: 20px;
    }

    .footer-copyright {
        margin-top: 40px;
        padding: 28px 0 44px;
    }
}

@media (max-width: 767px) {
    .footer-scrolling-ticker {
        padding: 18px 0;
    }

    .scrolling-content span {
        font-size: 18px;
    }

    .footer-box {
        padding: 44px 0 0;
    }

    .footer-links-box {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-links h3 {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .footer-links p,
    .footer-working-hours h3 {
        font-size: 16px;
    }

    .footer-contact-links ul li {
        flex-wrap: wrap;
        align-items: flex-start;
        word-break: break-word;
    }

    .footer-contact-links ul li a {
        word-break: break-word;
    }

    .footer-copyright {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start !important;
        gap: 18px;
        margin-top: 32px;
        padding: 24px 0 88px; /* room for fixed language switcher */
    }

    .footer-menu {
        width: 100%;
    }

    .footer-menu ul {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 20px;
    }

    .footer-copyright-text {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        text-align: left;
        align-self: stretch;
    }

    .footer-copyright-text p {
        font-size: 14px;
        line-height: 1.6;
        word-break: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575px) {
    .scrolling-content span {
        font-size: 16px;
    }

    .scrolling-content span img {
        max-width: 20px;
        margin-right: 10px;
    }

    .footer-working-hours ul li,
    .footer-links p {
        font-size: 15px;
    }
}

/* ---- Footer bottom row: menu left, copyright right (desktop) ---- */
.footer-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    width: 100%;
    border-top: 1px solid #ffffff33;
}

.footer-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.footer-menu ul {
    flex-wrap: wrap;
}

.footer-copyright-text {
    flex: 0 0 auto;
    text-align: right;
    margin-left: auto;
    max-width: 100%;
}

.footer-copyright-text p {
    color: var(--white-color);
    margin: 0;
    line-height: 1.5;
    opacity: 0.92;
    white-space: normal;
}

@media (max-width: 991px) {
    .footer-copyright-text {
        flex: 1 1 100%;
        text-align: left;
        margin-left: 0;
    }
}

/* ---- Scrolling ticker: theme assumed dark text on a light-yellow bar;
   our accent is a mid-tone blue, so switch to white text/icon for contrast ---- */
.scrolling-content span {
    color: var(--white-color);
}
@media (max-width: 991px) {
    .hero-hometo {
        padding: 150px 0 70px;
    }
    .trust-bar-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-bar-item:nth-child(3) {
        border-left: none;
        padding-left: 0;
    }
    .trust-bar-item:nth-child(1),
    .trust-bar-item:nth-child(2) {
        border-bottom: 1px solid #0d101a14;
        padding-bottom: 24px;
        margin-bottom: 2px;
    }
}
@media (max-width: 767px) {
    .hero-hometo .section-title h1 {
        font-size: 34px;
    }
    .trust-bar-list {
        grid-template-columns: 1fr;
    }
    .trust-bar-item {
        border-left: none !important;
        padding-left: 0 !important;
        border-bottom: 1px solid #0d101a14;
    }
    .trust-bar-item:last-child {
        border-bottom: none;
    }
    .value-prop {
        padding: 70px 0;
    }
    .services-preview {
        padding: 70px 0;
    }
    .workflow {
        padding: 70px 0;
    }
    .cta-box {
        padding: 70px 0;
    }
    .service-card {
        padding: 32px 24px;
    }
}

/* ============================================================
   4. LATEST ROUND OF FIXES
   ============================================================ */

/* ---- 7. Bigger section headings site-wide (theme default is 48px;
   raised further per request). Hero h1 handled separately above. ---- */
.section-title h2 {
    font-size: 54px;
}
@media (max-width: 991px) {
    .section-title h2 {
        font-size: 40px;
    }
}
@media (max-width: 767px) {
    .section-title h2 {
        font-size: 30px;
    }
}

/* ---- 1 & 5 & 6. Unified icon-box animation, matching the theme's own
   hover-flip pattern (accent bg -> ::before flips in primary-color on
   hover) used natively on .faq-contact-box / .section-footer-contact.
   We extend the same treatment to every icon-box we've added, and fix
   the icon color to solid white so it's always visible on the accent
   blue (previously some icons were rendering the same blue as their
   background and disappearing). ---- */
.icon-box {
    position: relative;
    overflow: hidden;
    background: var(--accent-color);
}
.icon-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}
.icon-box svg {
    position: relative;
    z-index: 1;
    color: var(--white-color) !important;
    transition: all 0.4s ease-in-out;
}
.trust-bar-item:hover .icon-box::before,
.value-prop-item:hover .icon-box::before,
.service-card:hover .icon-box::before,
.workflow-step:hover .icon-box::before,
.workflow-step-v:hover .icon-box::before,
.tech-specs-item:hover .icon-box::before,
.contact-info-item:hover .icon-box::before {
    transform: rotate(0) scale(1);
}
/* faq-contact-box and section-footer-contact already have their own
   :hover .icon-box::before rule from the base theme — it applies
   automatically since the markup now matches (icon-box + svg). */

/* ---- 2. "How It Works" (home): dark background like footer. Scoped to
   .workflow.dark-section so quality-assurance horizontal layout stays
   untouched. ---- */
.workflow.dark-section {
    position: relative;
    background-image: url('../images/dark-section-bg-image.png');
    background-size: cover;
    background-position: center center;
}
.workflow.dark-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    opacity: 85%;
    z-index: 0;
}
.workflow.dark-section::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 0;
}
.workflow.dark-section .container {
    position: relative;
    z-index: 1;
}
.workflow.dark-section .workflow-track::before {
    background: repeating-linear-gradient(to right, #ffffff33 0 3px, transparent 3px 4px);
}
.workflow.dark-section .workflow-step h4 {
    color: var(--white-color);
}
.workflow.dark-section .workflow-step p {
    color: rgba(255, 255, 255, 0.72);
}
/* Dark workflow icons: blue default → flip animation to white bg + dark icon */
.workflow.dark-section .workflow-step .icon-box {
    background: var(--accent-color);
    box-shadow: 0 10px 24px -10px rgba(15, 111, 188, 0.35);
    transition: box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.workflow.dark-section .workflow-step .icon-box::before {
    background: var(--white-color);
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
}
.workflow.dark-section .workflow-step .icon-box svg {
    color: var(--white-color) !important;
    transition: all 0.4s ease-in-out;
}
.workflow.dark-section .workflow-step:hover .icon-box {
    box-shadow: 0 14px 30px -8px rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
}
.workflow.dark-section .workflow-step:hover .icon-box::before {
    transform: rotate(0) scale(1);
}
.workflow.dark-section .workflow-step:hover .icon-box svg {
    color: var(--primary-color) !important;
}

/* ---- 3. Testimonial company logos (logoipsum-style placeholders) ---- */
.testimonial-company-logo img {
    max-height: 28px;
    width: auto;
    filter: none;
}

/* ---- 4. Blog post images: theme tints images 40% dark on load via
   ::before; our placeholders are already dark/black by design so they
   read correctly even before real photography is dropped in. ---- */
.post-featured-image {
    background: var(--primary-color);
    border-radius: 10px;
    overflow: hidden;
}

/* our-testimonials referenced a missing background asset */
.our-testimonials {
    background-image: none;
}

/* FAQ accordion's expanded-state icon used FontAwesome's private-use
   minus glyph (\f068) — not available without the FA webfont. The
   collapsed-state "+" already uses a plain Unicode character and
   works fine; just fixing the open state to match. */
.faq-accordion .accordion-button:not(.collapsed)::after {
    content: '\2212';
    font-family: inherit;
}

/* Mobile menu panel: the theme defaults this to background: var(--accent-color)
   (solid blue). Two problems: (1) it should be white like every other panel/
   dropdown on the site, and (2) .mega-menu-col-title below is also colored
   var(--accent-color) — same blue text on blue background made every
   "Services" column heading invisible in the mobile accordion. Switching the
   panel to white fixes both, but the theme's a:hover/:focus color (white)
   and open-state arrow color (white) were tuned for the old blue panel, so
   those need to flip too or they disappear against the new white background. */
.slicknav_menu {
    background: var(--white-color);
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover,
.slicknav_nav a:focus {
    background-color: var(--secondary-color);
    color: var(--accent-color);
}
.slicknav_open > a .slicknav_arrow:after {
    color: var(--accent-color);
}

/* Mobile slicknav dropdown arrow (Services / mega-menu toggle on
   mobile) also used a FontAwesome glyph. Same fix as the desktop nav. */
.slicknav_arrow:after {
    content: '';
    font-family: inherit;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--primary-color);
    border-bottom: 1.5px solid var(--primary-color);
    transform: translateY(-65%) rotate(45deg);
    margin-left: 0;
}

/* Two theme-native icon spots had their missing <img> icon swapped for
   an inline SVG (icon-phone-primary.svg wasn't part of this upload).
   The theme's sizing rules targeted "img" specifically, so replicate
   the same sizes for our "svg" replacement. */
.faq-contact-box .icon-box svg {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    transition: all 0.4s ease-in-out;
}
.section-footer-text.section-footer-contact span svg {
    max-width: 14px;
    width: 14px;
    height: 14px;
    color: var(--accent-color) !important;
}
/* Contact page info icons (Central Ingestion Email, Operational Hours,
   Data Sharing, Registered Office): same raw-SVG-in-.icon-box pattern
   as above, also missing a size rule — without one the SVG has no
   intrinsic width/height so it stretches to fill the entire 60px
   .icon-box, making it look oversized. 24px matches the icon size used
   in the other 60px icon-box components site-wide (value-prop-item,
   workflow-step, tech-specs-item). */
.contact-info-item .icon-box svg {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    color: var(--white-color) !important;
}

/* Contact page — icon + text spacing and mobile stack */
.page-contact-us .contact-info-item {
    align-items: flex-start;
    gap: 16px;
    flex-wrap: nowrap;
}
.page-contact-us .contact-info-item .icon-box {
    flex-shrink: 0;
    margin-right: 0;
}
.page-contact-us .contact-info-item-content {
    flex: 1;
    min-width: 0;
    width: auto;
}
@media (max-width: 1199px) {
    .page-contact-us .contact-us-form {
        margin-left: 0;
        margin-top: 40px;
    }
    .page-contact-us .contact-info-list {
        max-width: 100%;
    }
}
@media (max-width: 767px) {
    .page-contact-us {
        padding-bottom: 96px;
    }
    .page-contact-us .contact-info-item {
        gap: 14px;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    .page-contact-us .contact-info-item .icon-box {
        width: 50px;
        height: 50px;
    }
    .page-contact-us .contact-info-item .icon-box svg {
        width: 22px;
        height: 22px;
    }
    .page-contact-us .contact-info-item-content h3 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 6px;
    }
    .page-contact-us .contact-info-item-content p {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 0;
    }
    .page-contact-us .contact-us-form {
        margin-top: 32px;
        padding: 24px 20px;
    }
}

/* ---- 9. Services mega menu — matches the reference layout: 4 columns,
   2 rows, thin divider between rows. Anchored to .header-sticky (which
   the theme already sets position:relative on) rather than the <li>,
   so the panel is wide and centered under the whole header instead of
   being pinned to the narrow "Services" link. Structure is built to be
   populated dynamically: each category is a .mega-menu-col with a
   data-service-group id and a plain nested <ul> of links, so a backend
   can loop through service groups without touching the layout. ---- */
.mega-menu-parent {
    position: static;
}

.main-menu ul.mega-menu {
    position: absolute;
    top: calc(100% + 20px);
    left: 10px;

    width: min(1080px, 92vw);
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: 0 30px 60px -20px #10151c40;
    padding: 44px !important;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 32px;
    row-gap: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
}
.mega-menu-parent.mega-menu-active ul.mega-menu {
    visibility: visible;
    opacity: 1;
    display: grid;
}
.main-menu ul.mega-menu .mega-menu-col {
    margin: 0;
    padding-bottom: 28px;
}
/* Row 2 (columns 5-8 in the 4-col grid) gets a top border, matching
   the divider line seen in the reference between the two service rows. */
.main-menu ul.mega-menu .mega-menu-col:nth-child(n + 5) {
    padding-top: 28px;
    border-top: 1px solid #0d101a14;
}
.mega-menu-col-title {
    display: block;
    font-family: var(--accent-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 18px;
}
.main-menu ul.mega-menu .mega-menu-col ul {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    min-width: 0;
}
.main-menu ul.mega-menu .mega-menu-col ul li {
    margin: 0;
}
.main-menu ul.mega-menu .mega-menu-col ul li a {
    color: var(--primary-color) !important;
    padding: 9px 0 !important;
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4em;
    text-shadow: none;
}
.main-menu ul.mega-menu .mega-menu-col ul li a:hover {
    color: var(--accent-color) !important;
}

@media (max-width: 1611px) {
    .main-menu ul.mega-menu {
        grid-template-columns: repeat(2, 1fr);
        width: min(600px, 92vw);
    }
    .main-menu ul.mega-menu .mega-menu-col:nth-child(n + 5) {
        border-top: none;
        padding-top: 0;
    }
    .main-menu ul.mega-menu .mega-menu-col:nth-child(n + 3) {
        border-top: 1px solid #0d101a14;
        padding-top: 28px;
    }
}
@media (max-width: 1199px) {
    .main-menu ul.mega-menu {
        grid-template-columns: repeat(2, 1fr);
        width: min(600px, 92vw);
    }
    .main-menu ul.mega-menu .mega-menu-col:nth-child(n + 5) {
        border-top: none;
        padding-top: 0;
    }
    .main-menu ul.mega-menu .mega-menu-col:nth-child(n + 3) {
        border-top: 1px solid #0d101a14;
        padding-top: 28px;
    }
}
@media (max-width: 991px) {
    .main-menu ul.mega-menu {
        position: static;
        display: block;
        visibility: visible;
        opacity: 1;
        transform: none;
        width: 100%;
        box-shadow: none;
        padding: 0;
        background: none;
    }
    .mega-menu-col-title {
        color: var(--accent-color);
    }
}
/* ============================================================
   5. SERVICE PAGES (services.html + 3 detail pages)
   ============================================================ */

/* ---- Shared inner-page hero: text left, visual right, breadcrumb ---- */
.service-hero {
    padding: 165px 0 110px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.service-hero .breadcrumb {
    margin-bottom: 18px;
    padding: 0;
    background: none;
}
.service-hero .breadcrumb-item,
.service-hero .breadcrumb-item a {
    color: #ffffff99;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.service-hero .breadcrumb-item.active {
    color: var(--accent-color);
}
.service-hero .breadcrumb-item a:hover {
    color: var(--white-color);
}
.service-hero h1 {
    font-size: 48px;
    color: var(--white-color);
    margin-bottom: 20px;
}
.service-hero p {
    font-size: 17px;
    color: #ffffffb3;
    max-width: 540px;
    margin-bottom: 34px;
}
/* .service-hero is reused two ways: text-left/visual-right (service
   detail pages, About) and a single centered column with no visual
   (Contact). The fixed max-width above is correct for the left variant,
   but with no auto margins the <p> box also sat flush-left within the
   centered column on Contact, off-center under the centered h1/breadcrumb.
   Scoped to .text-center so the left-aligned pages are untouched. */
.service-hero .text-center p {
    margin-left: auto;
    margin-right: auto;
}
.service-hero-visual {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--dark-divider-color);
    box-shadow: 0 30px 60px -20px #00000055;
}
.service-hero-visual img {
    width: 100%;
    display: block;
}
@media (max-width: 991px) {
    .service-hero {
        padding: 150px 0 70px;
    }
    .service-hero h1 {
        font-size: 34px;
    }
}

/* ---- Technical Capabilities & Specifications (bullet variant) ---- */
.tech-specs {
    padding: 100px 0;
}
.tech-specs .section-title {
    max-width: 760px;
    margin-bottom: 50px;
}
.tech-specs-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.tech-specs-item {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 32px 28px;
    transition: all 0.3s ease-in-out;
}
.tech-specs-item:hover {
    background: var(--white-color);
    box-shadow: 0 20px 40px -20px #10151c26;
}
.tech-specs-item .icon-box {
    width: 54px;
    height: 54px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.tech-specs-item .icon-box svg {
    width: 24px;
    height: 24px;
}
.tech-specs-item span {
    display: block;
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    margin-bottom: 8px;
}
.tech-specs-item p {
    font-size: 14.5px;
    line-height: 1.55em;
    margin: 0;
}
@media (max-width: 991px) {
    .tech-specs-list {
        grid-template-columns: 1fr;
    }
}

/* ---- Technical Specifications (table variant — used on PDF to BIM page) ---- */
.tech-specs-table-wrap {
    border: 1px solid #0d101a14;
    border-radius: 10px;
    overflow: hidden;
}
.tech-specs-table {
    width: 100%;
    border-collapse: collapse;
}
.tech-specs-table tr:not(:last-child) td {
    border-bottom: 1px solid #0d101a14;
}
.tech-specs-table td {
    padding: 22px 28px;
    font-size: 14.5px;
    vertical-align: top;
}
.tech-specs-table td:first-child {
    width: 240px;
    font-family: var(--accent-font);
    font-weight: 700;
    color: var(--primary-color);
    background: var(--secondary-color);
}
.tech-specs-table td:last-child {
    color: var(--text-color);
    line-height: 1.6em;
}
@media (max-width: 767px) {
    .tech-specs-table,
    .tech-specs-table tbody,
    .tech-specs-table tr,
    .tech-specs-table td {
        display: block;
        width: 100%;
    }
    .tech-specs-table td:first-child {
        border-bottom: none;
        padding-bottom: 6px;
    }
    .tech-specs-table tr:not(:last-child) {
        border-bottom: 1px solid #0d101a14;
    }
}

/* ---- Core Technical Features: 3 alternating text/image blocks ---- */
.feature-alt-section {
    padding: 100px 0;
}
.feature-alt {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 60px 0;
    border-bottom: 1px solid #0d101a14;
}
.feature-alt:last-child {
    border-bottom: none;
}
.feature-alt-reverse {
    flex-direction: row-reverse;
}
.feature-alt-text {
    flex: 1;
    min-width: 0;
}
.feature-alt-image {
    flex: 1;
    min-width: 0;
}
.feature-alt-image figure {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #0d101a14;
    margin: 0;
}
.feature-alt-image img {
    width: 100%;
    display: block;
}
.feature-alt-text .feature-number {
    font-family: var(--accent-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}
.feature-alt-text h3 {
    font-size: 26px;
    margin-bottom: 16px;
}
.feature-alt-text p {
    font-size: 15.5px;
    line-height: 1.65em;
    margin: 0;
}
@media (max-width: 991px) {
    .feature-alt,
    .feature-alt-reverse {
        flex-direction: column;
        gap: 28px;
    }
}

/* ---- Services hub page (services.html) ---- */
.services-hub-hero {
    padding: 165px 0 110px;
}
.services-hub-hero .section-title {
    max-width: 760px;
}
.services-hub-hero h1 {
    font-size: 48px;
}
@media (max-width: 991px) {
    .services-hub-hero {
        padding: 150px 0 70px;
    }
}
@media (max-width: 767px) {
    .services-hub-hero h1 {
        font-size: 32px;
    }
}

/* Reuse the home page's service-card / trust-bar-item / workflow patterns
   on the hub page for visual consistency — no new rules needed there. */

/* Sub-category strip: quick-reference chips under each hub service card */
.service-card-subitems {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.service-card-subitems span {
    font-size: 12px;
    color: var(--slate-color);
    background: var(--secondary-color);
    padding: 5px 11px;
    border-radius: 100px;
}

/* ---- Blog listing & detail pages ---- */
.blog-listing-page {
    padding-top: 80px;
    padding-bottom: 100px;
}

.blog-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--secondary-color);
    border-radius: 12px;
}

.blog-empty-state h3 {
    margin-bottom: 12px;
}

.blog-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.blog-pagination .pagination {
    gap: 8px;
    margin: 0;
}

.blog-pagination .page-link {
    border-radius: 999px;
    min-width: 42px;
    text-align: center;
    color: var(--primary-color);
    border-color: #0d101a14;
}

.blog-pagination .page-item.active .page-link {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.blog-detail-hero .blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.blog-detail-hero h1.blog-detail-title {
    color: #fff !important;
}

.blog-long-content h2 {
    color: var(--accent-color);
}

/* CKEditor links — override .post-entry p strong (black) on bold links */
.blog-detail-entry .blog-long-content a,
.blog-detail-entry .blog-section-content a,
.blog-detail-entry .blog-detail-intro a {
    color: var(--accent-color);
}

.blog-detail-entry .blog-long-content a strong,
.blog-detail-entry .blog-section-content a strong,
.blog-detail-entry .blog-detail-intro a strong {
    color: var(--accent-color);
    font-size: inherit;
    font-weight: 700;
}

.blog-detail-entry .blog-long-content span[style*="color"] strong,
.blog-detail-entry .blog-section-content span[style*="color"] strong {
    color: inherit;
    font-size: inherit;
}

.blog-detail-entry .blog-section-block h3.blog-section-title {
    color: var(--accent-color);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 16px;
}

.blog-detail-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-detail-date {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.blog-detail-intro {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.7;
}

.blog-detail-intro p:last-child {
    margin-bottom: 0;
}

.blog-detail-page {
    padding-top: 70px;
    padding-bottom: 100px;
}

.blog-detail-featured {
    margin-bottom: 40px;
}

.blog-detail-entry {
    max-width: none;
}

.blog-toc-card {
    background: var(--secondary-color);
    border: 1px solid #0d101a10;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 36px;
}

.blog-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.blog-toc-header h3 {
    margin: 0;
    font-size: 22px;
}

.blog-toc-toggle {
    border: 1px solid #0d101a14;
    background: #fff;
    color: var(--primary-color);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-toc-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-toc-list li + li {
    margin-top: 10px;
}

.blog-toc-list a {
    position: relative;
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    padding-left: 18px;
    transition: color 0.2s ease;
}

.blog-toc-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translateY(-50%);
}

.blog-toc-list a:hover {
    color: var(--accent-color);
}

.blog-toc-list.is-collapsed {
    display: none;
}

.blog-long-content {
    margin-bottom: 28px;
}

.blog-section-block {
    scroll-margin-top: 120px;
    margin-bottom: 42px;
}

.blog-section-cta {
    margin-top: 28px;
    text-align: center;
}

.blog-section-cta--above {
    margin-top: 0;
    margin-bottom: 24px;
}

.blog-section-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0b5f9e 0%, var(--accent-color) 55%, #1a8fd4 100%);
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    text-transform: none;
    box-shadow: 0 8px 22px rgba(15, 111, 188, 0.32);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.blog-section-btn:hover,
.blog-section-btn:focus {
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 111, 188, 0.42);
    background: linear-gradient(180deg, #0a5690 0%, #0d63ad 55%, #1680c4 100%);
}

.blog-detail-cta {
    margin-top: 20px;
}

.blog-tags-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #0d101a10;
}

.blog-tags-label {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    padding: 8px 16px;
    margin-bottom: 16px;
}

.blog-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blog-tag-item {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-tag-item:hover,
.blog-tag-item:focus {
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
}

.blog-detail-cta-inner {
    background: linear-gradient(135deg, #0f6fbc 0%, #1a2b45 100%);
    border-radius: 14px;
    padding: 34px 30px;
    color: #fff;
}

.blog-detail-cta-inner h3 {
    color: #fff;
    margin-bottom: 12px;
}

.blog-detail-cta-inner p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 22px;
}

.blog-sidebar {
    position: sticky;
    top: 110px;
}

.blog-sidebar-card {
    background: #fff;
    border: 1px solid #0d101a10;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 18px 40px -28px #10151c30;
}

.blog-sidebar-card h4 {
    margin-bottom: 18px;
    font-size: 20px;
}

.blog-sidebar-item + .blog-sidebar-item {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #0d101a10;
}

.blog-sidebar-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.blog-sidebar-link:hover .blog-sidebar-title {
    color: var(--accent-color);
}

.blog-sidebar-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.blog-sidebar-date {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--accent-color);
}

.blog-sidebar-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.blog-trending-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.blog-trending-image {
    margin: 0 0 14px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.blog-trending-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.blog-trending-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--primary-color);
    text-align: center;
}

.blog-trending-link:hover .blog-trending-title {
    color: var(--accent-color);
}

.blog-trending-link:hover .blog-trending-image img {
    transform: scale(1.03);
}

.blog-sidebar-cta p {
    margin: 0;
    color: var(--slate-color);
}

.blog-sidebar-services {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-sidebar-services li + li {
    margin-top: 10px;
}

.blog-sidebar-services a {
    color: var(--primary-color);
    font-weight: 600;
}

.blog-sidebar-services a:hover {
    color: var(--accent-color);
}

@media (max-width: 991px) {
    .blog-sidebar {
        position: static;
        margin-top: 20px;
    }

    .blog-detail-page {
        padding-top: 50px;
    }
}

/* ============================================================
   6. PROJECTS PAGE (static case studies)
   ============================================================ */

.projects-page {
    padding: 80px 0 100px;
}

.projects-section + .projects-section {
    margin-top: 70px;
    padding-top: 70px;
    border-top: 1px solid #0d101a14;
}

.projects-section .section-title {
    margin-bottom: 40px;
    text-align: center;
}

.projects-section .section-title h2 {
    font-size: 32px;
    margin: 0;
}

.project-card {
    height: 100%;
    background: var(--white-color);
    border: 1px solid #0d101a14;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

.project-card:hover {
    box-shadow: 0 24px 48px -24px #10151c33;
    transform: translateY(-4px);
}

.project-card-image {
    position: relative;
    overflow: hidden;
}

.project-card-image a {
    display: block;
}

.project-card-image img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    transition: transform 0.6s ease-in-out;
}

.project-card:hover .project-card-image img {
    transform: scale(1.06);
}

.project-card-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    display: inline-block;
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--white-color);
    background: var(--accent-color);
    border-radius: 5px;
    padding: 6px 12px;
}

.project-card-body {
    padding: 26px 24px 28px;
}

.project-card-body h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.project-card-body h3 a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.project-card-body h3 a:hover {
    color: var(--accent-color);
}

.project-card-body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--slate-color);
    margin-bottom: 20px;
}

.project-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--accent-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    transition: gap 0.3s ease;
}

.project-card-link svg {
    width: 16px;
    height: 16px;
}

.project-card:hover .project-card-link {
    gap: 12px;
}

/* ---- Project detail page ---- */
.project-detail-category {
    display: inline-block;
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-color);
    margin-bottom: 14px;
}

.project-detail-page {
    padding: 90px 0 100px;
}

.project-detail-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.project-detail-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--slate-color);
    margin-bottom: 18px;
}

.project-detail-sidebar {
    position: sticky;
    top: 120px;
}

.project-detail-info-box,
.project-detail-cta-box {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 28px 24px;
}

.project-detail-cta-box {
    margin-top: 24px;
    text-align: center;
}

.project-detail-info-box h3,
.project-detail-cta-box h3 {
    font-size: 20px;
    margin-bottom: 18px;
}

.project-detail-info-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-detail-info-box li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid #0d101a14;
}

.project-detail-info-box li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.project-detail-info-box li span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
}

.project-detail-info-box li strong {
    font-size: 15px;
    color: var(--primary-color);
}

.project-detail-cta-box p {
    font-size: 14.5px;
    color: var(--slate-color);
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .projects-section .section-title h2 {
        font-size: 26px;
    }

    .project-detail-sidebar {
        position: static;
        margin-top: 10px;
    }
}