/* ============================================================
   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);
}

/* ---------- 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 container (replaces the old inline-SVG
   icon-box: each card now leads with a photographic thumbnail instead
   of a small icon). Placeholder images are wired up via picsum.photos
   seeds — swap the <img src> for real project photography per
   service when it's available. ---- */
.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 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;
    left: 10px;
    right: 10px;
    height: 1px;
    background: repeating-linear-gradient(to right, #0d101a33 0 8px, transparent 8px 16px);
    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 {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .workflow-track::before {
        display: none;
    }
}

/* ---- 5-Step Workflow (home page redesign): left vertical timeline +
   right visual, used only on index.html. Kept separate from
   .workflow-track/.workflow-step above so services.html keeps its
   original horizontal layout untouched. ---- */
.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;
    /* Both the padding and the circle-marker offset below derive from
       --rail-gutter, so changing this one variable (e.g. in a mobile
       media query) keeps the line and the circles in sync — no more
       updating padding-left in one place and a hardcoded offset in
       another and having them drift apart. */
    --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%;
    /* This card's left edge sits --rail-gutter right of
       .workflow-track-vertical's edge (that's the padding-left above),
       so subtracting it here brings the anchor point back to the
       rail's coordinate frame — then translateX(-50%) centers the
       circle exactly on --rail-x, the same point the line is centered
       on. Because this reads --rail-gutter instead of a hardcoded
       number, the mobile override below can't desync it from the line. */
    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-location-info {
        max-width: 100%;
    }
    .footer-contact-links {
        max-width: 100%;
    }
    .footer-newsletter-form {
        max-width: 100%;
    }
}

/* ---- Footer bottom row: Impressum/Privacy links removed per client request,
   leaving footer-menu (left) and footer-copyright-text (right) as the only
   two items, so the copyright line sits right-aligned via the existing
   justify-content: space-between on .footer-copyright. ---- */
.footer-copyright-text {
    text-align: right;
}
@media (max-width: 767px) {
    .footer-copyright-text {
        text-align: left;
    }
}

/* ---- 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);
}

/* ---- Footer divider was barely visible (8% white opacity) — raise it ---- */
.footer-copyright {
    border-top: 1px solid #ffffff33;
}

/* ---- Responsive ---- */
@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,
.workflow-step:hover .icon-box::before,
.workflow-step-v:hover .icon-box::before,
.tech-specs-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": same dark background treatment as the footer
   (dark-section-bg-image.png + primary-color tint + blur), so the two
   sections read as the same color. Scoped to .workflow.dark-section
   (the class combo used on index.html only) so services.html's reuse
   of the plain .workflow/.workflow-track grid layout is 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 8px, transparent 8px 16px);
}
.workflow.dark-section .icon-box {
    box-shadow: 0 10px 24px -10px #10151c26;
}
.workflow-visual-note {
    color: var(--white-color);
    opacity: 0.75;
}

/* ---- 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 {
    width: 24px;
    height: 24px;
}

/* ---- 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;
}