/* ==========================================================================
   Strobell Africa Public Corporate Website — Corporate Brand Theme

   Palette source of truth: the Strobell Africa Limited logo (navy wordmark and
   Africa mark) and the ERP theme's --sb-brand-* tokens in strobell-theme.css.
   The website, the dashboard and the lab certificate PDF all resolve to the
   same navy and gold so the brand reads as one system across every surface.

   Navy  #1e347f   primary — logo, buttons, links, icon boxes
   Gold  #c8a24a   accent  — used sparingly, and only where navy would be lost
                             against a dark photograph
   ========================================================================== */

:root {
    --color-bg-light: #ffffff;
    --color-bg-subtle: #f8fafc;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;

    --color-text-bright: #0f172a;
    --color-text-main: #1e293b;
    --color-text-muted: #64748b;

    /* Brand — mirrors --sb-brand-navy / --sb-brand-gold in strobell-theme.css */
    --color-brand-navy: #1e347f;
    --color-brand-navy-dark: #16275f;
    --color-brand-navy-light: #4566d3;
    --color-brand-navy-tint: #eaeefb;

    --color-brand-gold: #c8a24a;
    --color-brand-gold-light: #dbc389;
    --color-brand-gold-dark: #896c2a;

    /* Legacy aliases. The "blue" names are still referenced by a handful of
       rules and by lab/report/verify.php, so they stay as pointers rather than
       being renamed across the codebase — one value, two names. */
    --color-brand-blue: var(--color-brand-navy);
    --color-brand-blue-hover: var(--color-brand-navy-dark);
    --color-brand-blue-light: var(--color-brand-navy-tint);
    --color-accent-blue: var(--color-brand-navy-light);

    /* Navy gradient for light backgrounds; gold for dark ones. Navy on a dark
       hero photograph is effectively invisible, which is why .text-gradient
       (only ever used inside white headings over imagery) takes the gold. */
    --color-accent-gradient: linear-gradient(135deg, #1e347f 0%, #16275f 50%, #4566d3 100%);
    --color-gold-gradient: linear-gradient(135deg, #dbc389 0%, #c8a24a 55%, #b99238 100%);
    --color-hero-bg: radial-gradient(circle at 50% 0%, rgba(30, 52, 127, 0.08) 0%, rgba(255, 255, 255, 1) 75%);
}

body.public-body {
    /* Bootstrap ships --bs-primary as #0d6efd, and the public views lean on
       .text-primary / .bg-primary / .border-primary in ~21 places. Without this
       rebinding those utilities render stock Bootstrap blue — a third blue on
       the page, next to the navy and the gold. Scoped to the public body so the
       dashboard's own Bootstrap usage is untouched. */
    --bs-primary: var(--color-brand-navy);
    --bs-primary-rgb: 30, 52, 127;
    --bs-link-color: var(--color-brand-navy);
    --bs-link-color-rgb: 30, 52, 127;
    --bs-link-hover-color: var(--color-brand-navy-dark);
    --bs-link-hover-color-rgb: 22, 39, 95;

    /* .text-warning / .text-info label the trust badges and accreditation chips.
       Left at Bootstrap's defaults they render amber and cyan — two more colours
       that belong to no palette here. Mapped onto the brand pair instead.
       .text-success / .text-danger keep their semantic hues: a green tick and a
       red error are conventions, not branding. */
    --bs-warning: var(--color-brand-gold);
    --bs-warning-rgb: 200, 162, 74;
    --bs-info: var(--color-brand-navy-light);
    --bs-info-rgb: 69, 102, 211;

    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Header & Glassmorphism Navbar */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(30, 52, 127, 0.08);
}

.navbar-brand-logo {
    height: 42px !important;
    width: auto !important;
    max-height: 46px;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.navbar-brand-logo:hover {
    opacity: 0.95;
}

.navbar-nav {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.nav-link-custom {
    color: var(--color-text-main) !important;
    font-size: 0.925rem;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    text-decoration: none;
    transition: color 0.25s ease;
    display: inline-block;
}

.nav-link-custom:hover,
.nav-link-custom.active {
    color: var(--color-brand-blue) !important;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding-top: 150px;
    padding-bottom: 90px;
    background: var(--color-hero-bg);
    overflow: hidden;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: var(--color-brand-blue-light);
    border: 1px solid rgba(30, 52, 127, 0.2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin-bottom: 24px;
}

.hero-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-brand-blue);
    box-shadow: 0 0 8px var(--color-brand-blue);
}

.hero-title {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text-bright);
    margin-bottom: 20px;
}

.text-gradient {
    background: var(--color-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    max-width: 640px;
    margin-bottom: 32px;
}

/* Feature Cards & High-Contrast Icon Boxes */
.glass-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    height: 100%;
}

.glass-card:hover {
    background: var(--color-bg-card);
    border-color: #cbd5e1;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(30, 52, 127, 0.08);
}

/* Bold, Highly-Visible Icon Boxes */
.card-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-brand-blue);
    border: 1px solid var(--color-brand-blue-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    margin-bottom: 20px;
    font-size: 1.5rem;
    box-shadow: 0 6px 16px rgba(30, 52, 127, 0.3);
}

.card-icon-box i,
.card-icon-box svg {
    color: #ffffff !important;
    fill: currentColor;
    font-size: 1.5rem;
}

.service-card-img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

/* Counter / Stats Section */
.stat-card {
    border-left: 3px solid var(--color-brand-gold);
    padding-left: 18px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-brand-blue);
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 6px;
}

/* Call to Action Banner */
.cta-banner {
    position: relative;
    background: linear-gradient(135deg, #16275f 0%, #1e347f 100%);
    border-radius: 20px;
    padding: 50px 40px;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(30, 52, 127, 0.25);
}

/* Footer */
.site-footer {
    background-color: #0b1329;
    border-top: 1px solid #1e293b;
    padding-top: 70px;
    padding-bottom: 35px;
    color: #94a3b8;
}

.footer-heading {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-link {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 8px;
}

.footer-link:hover {
    color: #ffffff;
}

/* Custom Signature Blue Buttons */
.btn-strobell-primary {
    background-color: var(--color-brand-blue);
    color: #ffffff !important;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(30, 52, 127, 0.3);
}

.btn-strobell-primary:hover {
    background-color: var(--color-brand-blue-hover);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 52, 127, 0.4);
}

.btn-strobell-outline {
    background-color: transparent;
    color: var(--color-brand-blue) !important;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 8px;
    border: 1.5px solid var(--color-brand-blue);
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-strobell-outline:hover {
    background-color: var(--color-brand-blue-light);
    border-color: var(--color-brand-blue);
    color: var(--color-brand-blue-hover) !important;
}

.bg-subtle {
    background-color: #f8fafc !important;
}

/* ==========================================================================
   Image Slider, Service Cards & Visual Gallery Extensions
   ========================================================================== */

.hero-slider-section {
    position: relative;
    padding-top: 72px; /* Header navbar offset */
}

.hero-carousel-item {
    height: calc(100vh - 72px);
    min-height: 560px;
    max-height: 700px;
    position: relative;
    overflow: hidden;
}

.hero-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 7s ease-out;
}

.carousel-item.active .hero-carousel-img {
    transform: scale(1.08);
}

.hero-carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Left-weighted scrim: keeps the caption readable while letting the photograph carry the
       right-hand side of the frame, plus a top band so the floating navbar stays legible. */
    background:
        linear-gradient(180deg, rgba(9, 16, 36, 0.55) 0%, rgba(9, 16, 36, 0) 22%),
        linear-gradient(90deg, rgba(9, 16, 36, 0.86) 0%, rgba(9, 16, 36, 0.62) 42%, rgba(9, 16, 36, 0.22) 100%);
    display: flex;
    align-items: center;
}

.hero-carousel-caption {
    color: #ffffff;
    max-width: 820px;
}

.hero-carousel-caption .hero-title {
    color: #ffffff !important;
}

.hero-carousel-caption .hero-subtitle {
    color: #e2e8f0 !important;
}

.carousel-indicators-custom {
    bottom: 28px;
}

.carousel-indicators-custom [data-bs-target] {
    width: 36px;
    height: 6px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.45);
    border: none;
    transition: all 0.3s ease;
    margin: 0 4px;
}

.carousel-indicators-custom .active {
    width: 54px;
    background-color: var(--color-brand-blue);
}

/* Service Image Cards (Archetype: https://strobell-africa.vercel.app/) */
.service-image-card {
    position: relative;
    height: 440px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    display: block;
}

.service-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-image-card:hover img {
    transform: scale(1.1);
}

.service-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(11, 19, 41, 0.95) 0%, rgba(11, 19, 41, 0.4) 60%, rgba(11, 19, 41, 0.15) 100%);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: background 0.4s ease;
}

.service-image-card:hover .service-image-overlay {
    background: linear-gradient(to top, rgba(30, 52, 127, 0.92) 0%, rgba(30, 52, 127, 0.55) 60%, rgba(11, 19, 41, 0.2) 100%);
}

.service-image-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.service-image-desc {
    color: #e2e8f0;
    font-size: 0.925rem;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-image-link {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Full-Bleed Seamless Image Tile Grid (Exact Match for https://strobell-africa.vercel.app/) */
.service-tile-grid {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.service-tile-card {
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
    display: block;
}

.service-tile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-tile-card:hover img {
    transform: scale(1.1);
}

.service-tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.8) 100%);
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-tile-card:hover .service-tile-overlay {
    background: rgba(30, 52, 127, 0.85); /* Signature Cobalt Blue Overlay on Hover */
}

.service-tile-title {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
}

.service-tile-desc {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    max-width: 520px;
}

.service-tile-action {
    align-self: flex-end;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .service-tile-card {
        height: 380px;
    }
    .service-tile-title {
        font-size: 1.5rem;
    }
    .service-tile-overlay {
        padding: 1.75rem;
    }
}

/* Page Hero Header Banner with Background Image */
.page-hero-banner {
    position: relative;
    padding-top: 150px;
    padding-bottom: 85px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(11, 19, 41, 0.9) 0%, rgba(30, 52, 127, 0.65) 60%, rgba(11, 19, 41, 0.88) 100%);
    backdrop-filter: blur(2px);
}

.page-hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.page-hero-content .hero-title {
    color: #ffffff !important;
}

.page-hero-content .hero-subtitle {
    color: #cbd5e1 !important;
}

/* Full Width Consultation Section with Background Image */
.consultation-section-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 110px 0;
    color: #ffffff;
    overflow: hidden;
}

.consultation-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 19, 41, 0.78);
    backdrop-filter: blur(3px);
}

/* Corporate Client Logos Styling */
/* --------------------------------------------------------------------------
   Client logo marquee. The logos render at full colour at all times — they were
   previously grayscale(100%) at 0.85 opacity until hover, which meant a visitor
   who never moused over them only ever saw washed-out marks.

   The track holds the logo run twice and translates by -50%, so the moment the
   animation completes it is showing frame-identical content to its start and
   the loop has no seam.
   -------------------------------------------------------------------------- */
.client-marquee {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
    /* Feather both edges so cards enter and leave rather than being clipped. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.client-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: client-marquee-scroll 45s linear infinite;
}

/* Let a visitor stop the strip to actually look at a logo. */
.client-marquee:hover .client-marquee-track {
    animation-play-state: paused;
}

@keyframes client-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.client-logo-card {
    flex: 0 0 auto;
    width: 240px;
    /* Spacing lives on the card, not as a flex `gap`. With gap, N cards produce
       only N-1 gaps, so the two halves of the track differ by half a gap and the
       -50% loop lands 12px out of register — a visible jump once per cycle.
       A trailing margin makes every card occupy an identical 264px, so half the
       track is exactly half the cards. */
    margin-right: 24px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px 28px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.client-logo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 52, 127, 0.3);
    box-shadow: 0 14px 28px rgba(30, 52, 127, 0.12);
}

.client-logo-img {
    max-height: 60px;
    max-width: 85%;
    width: auto;
    object-fit: contain;
}

/* A continuously moving strip is a vestibular trigger; hold it still and fall
   back to a scrollable row for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .client-marquee {
        overflow-x: auto;
    }

    .client-marquee-track {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .client-logo-card {
        width: 190px;
        height: 104px;
        padding: 18px 20px;
        margin-right: 16px;
    }
}

/* Corporate Footer High Contrast & Legibility Fixes */
.site-footer {
    background-color: #0b1329 !important;
    color: #e2e8f0 !important;
    padding-top: 60px;
    padding-bottom: 30px;
}

.site-footer .footer-heading {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.site-footer p,
.site-footer .text-muted,
.site-footer .fs-sm,
.site-footer .fs-xs {
    color: #cbd5e1 !important; /* High contrast legible slate-200 */
    font-size: 0.95rem;
    line-height: 1.6;
}

.site-footer .footer-link {
    color: #94a3b8 !important;
    text-decoration: none;
    transition: color 0.25s ease, padding-left 0.25s ease;
    display: inline-block;
    padding: 3px 0;
}

.site-footer .footer-link:hover {
    color: var(--color-brand-gold) !important; /* Brand gold reads on the dark footer */
    padding-left: 4px;
}

.site-footer i.text-primary {
    color: var(--color-brand-gold) !important; /* Brand gold reads on the dark footer */
}

.site-footer .border-top,
.site-footer .border-secondary {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ─── Home Hero: full-viewport image with the navbar floating over it ──────────
   Scoped to .home-hero-page (set via $this->params['bodyClass'] in site/index.php)
   so every other public page keeps the solid white header. */

.home-hero-page .hero-slider-section {
    padding-top: 0;
}

.home-hero-page .hero-carousel-item {
    height: 100vh;
    max-height: none;
    min-height: 620px;
}

/* --------------------------------------------------------------------------
   Overlay navigation. Any page whose first element is a full-bleed banner
   opts in with the `hero-overlay-nav` body class and the bar floats over the
   image instead of sitting on a white strip above it.

   Kept separate from .home-hero-page — that class is only about the 100vh
   carousel — so a page can take the overlay bar without inheriting the
   homepage's hero sizing. Pages with no banner (the certificate verification
   page) simply don't opt in and keep the solid white bar; white links on white
   content would be invisible.
   -------------------------------------------------------------------------- */
.hero-overlay-nav .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
}

/* The outline button sits on a photograph here, so it has to be white rather than the
   brand blue the class normally forces. */
.hero-carousel-caption .btn-strobell-outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.85);
}

.hero-carousel-caption .btn-strobell-outline:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
    color: #ffffff !important;
}

.hero-overlay-nav .site-header .nav-link-custom {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hero-overlay-nav .site-header .nav-link-custom:hover,
.hero-overlay-nav .site-header .nav-link-custom.active {
    color: #ffffff !important;
}

.hero-overlay-nav .site-header .navbar-toggler {
    color: #ffffff !important;
}

/* Once scrolled past the hero the bar returns to the standard solid treatment. */
.hero-overlay-nav .site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
}

.hero-overlay-nav .site-header.scrolled .nav-link-custom {
    color: var(--color-text-main) !important;
}

.hero-overlay-nav .site-header.scrolled .nav-link-custom:hover,
.hero-overlay-nav .site-header.scrolled .nav-link-custom.active {
    color: var(--color-brand-blue) !important;
}

.hero-overlay-nav .site-header.scrolled .navbar-toggler {
    color: var(--color-text-main) !important;
}

/* Logo swaps to the white mark only while the bar is transparent. */
.navbar-logo-light {
    display: none;
}

.hero-overlay-nav .site-header:not(.scrolled) .navbar-logo-dark {
    display: none;
}

.hero-overlay-nav .site-header:not(.scrolled) .navbar-logo-light {
    display: inline-block;
}

@media (max-width: 991.98px) {
    .home-hero-page .hero-carousel-item {
        height: 100svh;
        min-height: 520px;
    }
}

/* ==========================================================================
   Project Portfolio — grid cards, detail banner, gallery and lightbox.
   Everything here is namespaced under .project-* and is only pulled in by the
   projects views, so no existing page is affected.
   ========================================================================== */

/* --- Grid card ----------------------------------------------------------- */
.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(30, 52, 127, 0.35);
    box-shadow: 0 22px 48px -18px rgba(15, 23, 42, 0.28);
}

.project-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-card-hover);
}

.project-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover .project-card-media img {
    transform: scale(1.07);
}

.project-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 55%);
}

.project-card-category {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-brand-blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.project-card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-bottom: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.project-card-status.is-ongoing { color: #b45309; }
.project-card-status.is-complete { color: #15803d; }

.project-card-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.16);
}

.project-card-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text-bright);
    transition: color 0.25s ease;
}

.project-card:hover .project-card-title {
    color: var(--color-brand-blue);
}

.project-card-summary {
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.project-card-meta i {
    margin-right: 5px;
    color: var(--color-brand-blue);
}

.project-card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-brand-blue);
}

.project-card-action i {
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-action i {
    transform: translateX(5px);
}

/* --- Detail banner ------------------------------------------------------- */
.project-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 190px 0 90px;
    color: #ffffff;
}

.project-banner-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(2, 12, 32, 0.92) 0%, rgba(2, 12, 32, 0.74) 45%, rgba(2, 12, 32, 0.42) 100%);
}

.project-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.project-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.66);
}

.project-breadcrumb a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    transition: color 0.2s ease;
}

.project-breadcrumb a:hover { color: #ffffff; }
.project-breadcrumb i { font-size: 0.6rem; opacity: 0.55; }

.project-banner-category {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-banner-title {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.project-banner-summary {
    max-width: 680px;
    margin: 0 0 26px;
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}

.project-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.8);
}

.project-banner-meta i {
    margin-right: 8px;
    color: var(--color-brand-gold);
}

.project-banner-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.project-banner-status.is-ongoing { color: #fcd34d; }
.project-banner-status.is-complete { color: #6ee7a8; }

/* --- Headline figures, overlapping the banner ---------------------------- */
/* Flex rather than grid: a wrapped row of flex items stretches to fill the
   width, so an odd project count (3 stats over 2 columns) can never leave the
   empty cell that auto-fit grid tracks produce. */
.project-highlights {
    display: flex;
    flex-wrap: wrap;
    margin-top: -52px;
    position: relative;
    z-index: 3;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 52px -22px rgba(15, 23, 42, 0.4);
}

.project-highlight {
    flex: 1 1 180px;
    padding: 26px 24px;
    border-left: 1px solid var(--color-border);
    text-align: center;
}

.project-highlight:first-child {
    border-left: 0;
}

.project-highlight-value {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
    background: var(--color-accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project-highlight-label {
    margin-top: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* --- Detail body --------------------------------------------------------- */
.project-section { padding: 72px 0; }
.project-section-alt { background: var(--color-bg-subtle); }

.project-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand-blue);
}

.project-section-title {
    margin: 0 0 22px;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text-bright);
}

.project-prose {
    margin-bottom: 18px;
    font-size: 1.03rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.project-subtitle {
    margin: 34px 0 18px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-bright);
}

.project-scope {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-scope li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-card);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-main);
}

.project-scope i {
    margin-top: 2px;
    color: #16a34a;
}

/* --- Facts sidebar ------------------------------------------------------- */
.project-facts {
    position: sticky;
    top: 100px;
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg-card);
    box-shadow: 0 16px 40px -26px rgba(15, 23, 42, 0.35);
}

.project-facts-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--color-text-bright);
}

.project-facts-list { margin: 0; }

.project-facts-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--color-border);
}

.project-facts-list > div:last-child { border-bottom: 0; }

.project-facts-list dt {
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project-facts-list dd {
    margin: 0;
    text-align: right;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-bright);
}

.project-facts-services { margin-top: 20px; }

.project-facts-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project-facts-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.project-tag {
    padding: 6px 12px;
    border: 1px solid rgba(30, 52, 127, 0.22);
    border-radius: 999px;
    background: var(--color-brand-blue-light);
    color: var(--color-brand-blue);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.project-tag:hover {
    background: var(--color-brand-blue);
    color: #ffffff;
}

/* --- Gallery ------------------------------------------------------------- */
.project-gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.project-gallery-count {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.project-shot {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-bg-card-hover);
}

.project-shot-featured {
    aspect-ratio: 21 / 9;
}

.project-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-shot:hover img,
.project-shot:focus-visible img {
    transform: scale(1.05);
}

.project-shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 16px 14px;
    background: linear-gradient(to top, rgba(2, 12, 32, 0.88) 0%, rgba(2, 12, 32, 0) 100%);
    color: #ffffff;
    font-size: 0.83rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-shot:hover figcaption,
.project-shot:focus-visible figcaption {
    opacity: 1;
    transform: translateY(0);
}

.project-shot-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-brand-blue);
    font-size: 0.8rem;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-shot:hover .project-shot-zoom,
.project-shot:focus-visible .project-shot-zoom {
    opacity: 1;
    transform: scale(1);
}

.project-shot:focus-visible {
    outline: 3px solid var(--color-brand-blue);
    outline-offset: 3px;
}

/* --- Lightbox ------------------------------------------------------------ */
.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: rgba(2, 8, 23, 0.94);
    backdrop-filter: blur(6px);
}

.project-lightbox[hidden] { display: none; }

.project-lightbox-stage {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.project-lightbox-stage img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    border-radius: 10px;
}

.project-lightbox-stage figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
}

.project-lightbox-counter {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}

.project-lightbox-close,
.project-lightbox-nav {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.project-lightbox-close:hover,
.project-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.06);
}

.project-lightbox-close {
    position: absolute;
    top: 22px;
    right: 22px;
}

/* --- Prev / next pager --------------------------------------------------- */
.project-pager { padding: 56px 0 72px; }

.project-pager-link {
    display: block;
    height: 100%;
    padding: 22px 26px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-card);
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.project-pager-link:hover {
    border-color: rgba(30, 52, 127, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -22px rgba(15, 23, 42, 0.32);
}

.project-pager-link.is-next { text-align: right; }

.project-pager-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-blue);
}

.project-pager-link.is-next .project-pager-label { justify-content: flex-end; }

.project-pager-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-bright);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    .project-facts { position: static; }
}

@media (max-width: 767.98px) {
    .project-banner { padding: 150px 0 70px; }
    .project-highlights { margin-top: -36px; }

    /* Stack the figures and turn the vertical dividers into horizontal rules. */
    .project-highlight {
        flex: 1 1 100%;
        padding: 20px 24px;
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }

    .project-highlight:first-child { border-top: 0; }

    .project-section { padding: 52px 0; }
    .project-shot-featured { aspect-ratio: 16 / 10; }
    .project-pager-link.is-next { text-align: left; }
    .project-pager-link.is-next .project-pager-label { justify-content: flex-start; }
    .project-lightbox { padding: 16px; gap: 6px; }
    .project-lightbox-close, .project-lightbox-nav { width: 38px; height: 38px; }
}

/* ==========================================================================
   About section showcase. The photograph previously sat inside a .glass-card
   with p-3 padding and a second white block beneath it for the accreditation,
   which framed the image in white on all four sides. Here the image fills the
   frame edge to edge and the accreditation floats on top of it.
   ========================================================================== */
.about-showcase {
    position: relative;
    margin: 0;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 56px -24px rgba(15, 23, 42, 0.42);
}

.about-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-showcase:hover .about-showcase-img {
    transform: scale(1.04);
}

/* Darkens only the lower third, so the frosted plate reads against the photo
   whichever image is swapped in behind it. */
.about-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(2, 12, 32, 0.55) 0%, rgba(2, 12, 32, 0) 42%);
}

.about-showcase-plate {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, 0.5);
}

.about-showcase-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.about-showcase-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.about-showcase-title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-bright);
}

.about-showcase-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--color-brand-navy);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.about-showcase-chip i {
    color: var(--color-brand-gold);
}

@media (max-width: 991.98px) {
    .about-showcase {
        height: 380px;
    }
}

@media (max-width: 575.98px) {
    /* Taller on phones: the plate wraps to two rows at this width, so the image
       needs the extra height to still read as a photograph rather than a strip
       of sky above a caption. */
    .about-showcase {
        height: 390px;
        border-radius: 16px;
    }

    /* The plate would otherwise squeeze the chip onto two lines at phone widths. */
    .about-showcase-plate {
        left: 12px;
        right: 12px;
        bottom: 12px;
        flex-wrap: wrap;
        gap: 10px;
        padding: 13px 15px;
    }

    .about-showcase-title {
        font-size: 0.86rem;
    }
}