/* =============================================================================
   LANDING PAGE SPECIFIC STYLES (index.css)
   Contains: Core Layout, Hero Section, Statistics (Coming Soon)
   ============================================================================= */

/* =========================
   CORE LAYOUT & RESETS
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================
   HERO SECTION
   ========================= */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    max-height: 960px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: var(--white);
    background-color: #000;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Side Gradient Overlay - lightened and pulled tighter to the left
   edge so roughly two-thirds of the frame stays clearly visible.
   A very subtle bottom fade is added only to protect CTA legibility,
   not to darken the whole frame. */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(100deg,
            rgba(0, 0, 0, 0.74) 0%,
            rgba(0, 0, 0, 0.46) 32%,
            rgba(0, 0, 0, 0.16) 58%,
            rgba(0, 0, 0, 0) 78%),
        linear-gradient(to top,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0) 26%);
    z-index: 2;
}

/* Hero Badge - smaller, quieter; its job is to be read second, not
   compete with the headline. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 30px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-badge:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.hero-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
    display: inline-block;
}

/* Fixed left anchor (not centered) - previously this used
   max-width:1400px + margin:0 auto, which meant the left gap kept
   growing on wide/ultra-wide screens (and shifted under browser
   zoom, since zoom changes the effective viewport width the centering
   math reacts to). It's now pinned to a constant distance from the
   left edge on desktop/laptop, so the text block stays put no matter
   how wide the window is or how far the page is zoomed. Mobile keeps
   its own centered behavior below (unchanged, handled separately). */
.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0;
    padding-left: 60px;
    padding-right: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

/* Heading - the core fix. Smaller max size (was up to 3.25rem / 52px,
   now tops out at 2.6rem / ~42px, in line with Stripe/IBM hero scale),
   a hard-controlled width so it wraps into a short, balanced block
   instead of one wide rectangle, tighter tracking for an "elegant"
   rather than "loud" feel, and text-wrap:balance so line breaks are
   never awkward regardless of the exact copy length. */
.hero-content h1 {
    font-size: clamp(1.9rem, 1.1rem + 2.1vw, 2.6rem);
    font-weight: 700;
    line-height: 1.16;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: -0.025em;
    max-width: 560px;
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Paragraph - pulled in from 580px to 440px so it reads as a short,
   confident block rather than a wide slab of copy competing with the
   heading for space. Slightly dimmer than the heading on purpose -
   that contrast in brightness is part of the hierarchy. */
.hero-content p {
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.0625rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
    max-width: 440px;
    line-height: 1.75;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Hero CTA Buttons */
.hero-btns {
    display: flex;
    gap: 14px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 13px 28px;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.hero-btn-primary {
    background: var(--primary-red);
    color: var(--white);
}

.hero-btn-primary:hover {
    background: #c31a20;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(228, 31, 38, 0.3);
}

.hero-btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.hero-btn-outline:hover {
    background: var(--white);
    color: var(--text-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   RESPONSIVE (HERO)
   ------------------------------------------------------------------
   Below 1024px the layout re-centers (unchanged behavior), but the
   type scale and widths are re-tuned to the same lighter, tighter
   hierarchy rather than just shrinking the old oversized values.
   ========================= */
@media screen and (max-width: 1024px) {
    .hero {
        justify-content: center;
        text-align: center;
    }

    .hero-overlay {
        background:
            linear-gradient(to bottom,
                rgba(0, 0, 0, 0.28) 0%,
                rgba(0, 0, 0, 0.6) 58%,
                rgba(0, 0, 0, 0.82) 100%);
    }

    .hero-content {
        padding: 0 30px;
        margin-top: 80px;
        align-items: center;
    }

    .hero-badge {
        margin-bottom: 22px;
    }

    .hero-content h1 {
        font-size: clamp(1.65rem, 1rem + 3vw, 2.15rem);
        max-width: 520px;
        margin-bottom: 16px;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
        font-size: 0.95rem;
        max-width: 420px;
        margin-bottom: 30px;
    }

    .hero-btns {
        justify-content: center;
        flex-direction: row;
        width: 100%;
        gap: 12px;
    }

    .hero-btn {
        padding: 12px 24px;
        font-size: 13px;
        flex: 1;
        max-width: 200px;
    }
}

@media screen and (max-width: 576px) {
    .hero-content {
        padding: 0 20px;
    }

    .hero-badge {
        font-size: 11px;
        margin-bottom: 18px;
    }

    .hero-content h1 {
        font-size: clamp(1.5rem, 1.1rem + 4vw, 1.9rem);
        max-width: 100%;
        line-height: 1.2;
    }

    .hero-content p {
        max-width: 100%;
        font-size: 0.9rem;
        margin-bottom: 26px;
    }

    .hero-btns {
        flex-direction: column;
        align-items: center;
    }

    .hero-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ========================= FEATURED INSIGHTS SECTION ========================= */
.insights-section {
    width: 100%;
    padding: 80px 20px 100px;
    background: #0a0a0a;
    overflow: hidden;
    box-sizing: border-box;
}

.insights-section * {
    box-sizing: border-box;
}

.insights-section .container {
    max-width: 1300px;
    margin: auto;
}

.section-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 55px;
    color: var(--white);
}

.insights-section .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 720px;
    padding: 30px;
    border-radius: 0px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.card.active {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    transition: background 0.5s ease, backdrop-filter 0.5s ease;
}

.card:hover::before,
.card.active::before {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    transition-delay: 0s;
}

.card-content {
    position: relative;
    z-index: 5;
    transform: translateY(80px);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover .card-content,
.card.active .card-content {
    transform: translateY(-10px);
}

.card .tag {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    transition: opacity 0.4s ease;
}

.card h3 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    color: var(--white);
    transition: transform 0.6s ease;
}

.card-description {
    visibility: hidden;
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover .card-description,
.card.active .card-description {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.card-link {
    display: inline-flex;
    align-items: center;
    visibility: hidden;
    gap: 10px;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.card:hover .card-link,
.card.active .card-link {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

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

/* --- Card Background & Decorative Shapes --- */
.card1 {
    background: url('../images/portfolio/ideas-exhibition.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card1 .shape1 {
    position: absolute;
    right: -50px;
    bottom: -40px;
    z-index: 0;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9cc6, #ff4f87);
    opacity: .9;
}

.card1 .shape2 {
    position: absolute;
    top: 40px;
    left: -40px;
    z-index: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.card2 {
    background: url('../images/portfolio/itcn-asia-generated.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card2 .glass {
    position: absolute;
    top: 70px;
    left: 50%;
    z-index: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    transform: translateX(-50%);
}

.card2 .ring {
    position: absolute;
    top: -40px;
    right: -40px;
    z-index: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 25px solid rgba(255, 255, 255, 0.08);
}

.card3 {
    background: url('../images/portfolio/bxss-powerhouse-generated.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card3 .blob {
    position: absolute;
    right: -20px;
    bottom: -40px;
    z-index: 0;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, 0.13);
    border-radius: 58% 42% 70% 30% / 30% 52% 48% 70%;
    backdrop-filter: blur(10px);
}

.card3 .small-circle {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.card4 {
    background: url('../images/portfolio/my-karachi-generated.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card4 .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 150px;
    background: rgba(255, 255, 255, 0.08);
    clip-path: ellipse(70% 100% at 50% 100%);
}

.card4 .circle {
    position: absolute;
    top: 30px;
    right: -40px;
    z-index: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.card5 {
    background: url('../images/portfolio/b2b-industrial-generated.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card5 .lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(135deg, transparent 0, transparent 12px, rgba(255, 255, 255, 0.06) 13px, rgba(255, 255, 255, 0.06) 15px);
}

.card5 .glow {
    position: absolute;
    right: -60px;
    bottom: -80px;
    z-index: 0;
    width: 220px;
    height: 220px;
    background: #8f9cff;
    filter: blur(90px);
    opacity: .35;
}

.card6 {
    background: url('../images/portfolio/textile-asia-generated.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card6 .diamond {
    position: absolute;
    top: 60px;
    right: -60px;
    z-index: 0;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(45deg);
    border-radius: 20px;
}

.card6 .circle2 {
    position: absolute;
    bottom: 30px;
    left: -30px;
    z-index: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

@media(max-width:992px) {
    .insights-section .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {
    .section-title {
        font-size: 32px;
    }

    .insights-section .cards {
        grid-template-columns: 1fr;
    }

    .card {
        min-height: 450px;
    }

    /* Fluid typography fix: header dynamically sizes between 15px and 18px */
    .card h3 {
        font-size: clamp(15px, 4.2vw, 18px);
        line-height: 1.3;
    }

    .card .tag {
        font-size: 10px;
        padding: 4px 10px;
        margin-bottom: 8px;
    }

    .card-description {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 10px;
    }
}

/* MOBILE: Horizontal Carousel Mode for Featured Insights */
@media (max-width: 1024px) {
    .insights-section .cards {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        padding: 20px 15px !important;
        gap: 20px !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .insights-section .cards::-webkit-scrollbar {
        display: none;
    }

    .insights-section .card {
        flex: 0 0 85% !important;
        min-width: 85%;
        scroll-snap-align: center;
        margin-bottom: 0 !important;
    }
}

/* Touch devices click-reveal logic instead of hover.
           We hide description & link by default to show the background image. */
@media (hover: none),
(pointer: coarse) {
    .insights-section .card-content {
        /* Keep it pushed down so description/link are hidden by default */
        transform: translateY(140px);
    }

    /* By default, we use a nice light-to-dark gradient so the image is fully clear
               but the text on top of it is readable. No blur. */
    .insights-section .card::before {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.8) 100%);
        backdrop-filter: none;
    }

    /* Active/Clicked state overlay: Blur and darken the background image */
    .insights-section .card.active::before {
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(8px);
    }

    /* Active/Clicked state content moves up */
    .insights-section .card.active .card-content {
        transform: translateY(-10px);
    }

    .insights-section .card-description {
        margin-top: 15px;
    }

    .insights-section .card:active {
        transform: scale(0.98);
    }
}


/* =============================================================================
   STATISTICS SECTION (DEVELOPER PROVIDED)
   ============================================================================= */
.stats-section {
    width: 100%;
    padding: 120px 20px;
    background: #fdfdfd;
}

/* TOP AREA */
.testi-top-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 90px;
    flex-wrap: wrap;
}

/* BUTTONS */
.testi-btns {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
}

.testi-btn {
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    font-weight: 700;
    border-radius: 50px;
    height: 58px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-btn {
    background: #fff;
    border: 1.5px solid #d6d6d6;
    color: #172033;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.demo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #172033;
}

.testi-play-icon {
    width: 22px;
    height: 22px;
    border: 1.5px solid #172033;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    padding-left: 2px;
}

.start-btn {
    background: #2d3a52;
    color: #fff;
    box-shadow: 0 10px 20px rgba(45, 58, 82, 0.18);
}

.start-btn:hover {
    transform: translateY(-3px);
    background: #1f2a3d;
    box-shadow: 0 14px 30px rgba(45, 58, 82, 0.25);
}

/* STATS GRID */

/* =============================================================================
   CONTAINER / HEADER
   (.testi-container / .testi-top-area / .testi-main-heading were referenced
   in the original HTML but never defined in the given CSS  they're shared
   styles borrowed from a testimonials section elsewhere in the project.
   Defined here with sensible, fluid values so this section works standalone.)
   ============================================================================= */
.testi-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.testi-top-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: clamp(40px, 6vw, 70px);
}

.testi-main-heading {
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    color: #1d2433;
    line-height: 1.25;
    margin: 0 0 16px 0;
}

.testi-lead {
    font-size: clamp(15px, 1.6vw, 20px);
    color: #666;
    line-height: 1.8;
    max-width: 620px;
    margin: 0;
}

/* =============================================================================
   STATS SECTION
   ============================================================================= */
.stats-section {
    padding: clamp(60px, 9vw, 110px) 20px;
    background: #fff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(36px, 4.5vw, 55px);
}

.stat-box {
    position: relative;
    padding-top: 25px;
    transition: transform 0.35s ease;
}

/* Small polish: gentle lift on hover, matches the brand's existing
   micro-interaction style elsewhere in the site (cards, buttons). */
.stat-box:hover {
    transform: translateY(-4px);
}

.stat-number {
    font-size: clamp(34px, 4vw, 45px);
    font-weight: 650;
    color: #e21d24;
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}

.stat-title {
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 700;
    color: #1d2433;
    margin-bottom: 12px;
}

.stat-desc {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.8;
    color: #6e6e6e;
}

/* TOP LINE ANIMATION */
.stat-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: #2d3a52;
    border-radius: 10px;
    transition: width 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
        background-color 0.35s ease;
}

.stat-box.active::before {
    width: 70px;
}

/* Small polish: the accent line picks up the brand red on hover, giving a
   subtle, tasteful acknowledgement without changing the layout. */
.stat-box:hover::before {
    background: #e21d24;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(40px, 6vw, 60px) clamp(24px, 4vw, 40px);
    }
}

@media (max-width: 768px) {
    .testi-top-area {
        margin-bottom: 50px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Single column gives each stat more horizontal room, so the number
       is intentionally sized up here rather than scaled down  this is a
       deliberate design choice carried over from the original CSS, not a
       fluid clamp() value. */
    .stat-number {
        font-size: 58px;
        letter-spacing: -2.5px;
    }
}

@media (max-width: 480px) {
    .stats-section {
        padding: 50px 18px;
    }

    .testi-container {
        padding: 0 4px;
    }

    .stat-number {
        font-size: 46px;
    }

    .stat-title {
        font-size: 18px;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .stat-box,
    .stat-box::before {
        transition: none;
    }
}

/* ========================= PLATFORM FEATURES SHOWCASE ========================= */
:root {
    --pfs-bg: #d7d7d7;
    --pfs-text: #0b0b0b;
    --pfs-muted: #3a3a3a;
    --pfs-card-radius: 8px;
}



.pfs-section {
    background: var(--pfs-bg);
    color: var(--pfs-text);
    padding: 80px 0;
    overflow-x: hidden;
}

.pfs-wrapper {
    width: min(96vw, 1840px);
    margin: 0 auto;
}

.pfs-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    margin-bottom: 70px;
    padding: 0 10px;
}

.pfs-title {
    font-size: 3.85rem;
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1;
    margin: 0;
}

.pfs-lead {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.35;
    margin-top: 6px;
    color: #111;
}

/* Viewport that clips the scrolling card track */
.pfs-cards-slider-wrap {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

/* The scrolling track  flex row, never wraps */
.pfs-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.pfs-cards.pfs-dragging {
    transition: none;
}

.pfs-card {
    /* Fixed card width: 4 visible + partial peek of next (desktop default) */
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    height: 585px;
    border-radius: var(--pfs-card-radius);
    position: relative;
    overflow: hidden;
    background: #222;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.pfs-card img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.pfs-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pfs-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pfs-card .pfs-card-content {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 18px;
    z-index: 3;
    color: #fff;
}

.pfs-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pfs-card p {
    font-size: 12px;
    line-height: 1.35;
    max-width: 280px;
    opacity: .95;
}

.pfs-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 32px 12px 0;
}

.pfs-dots {
    display: flex;
    gap: 7px;
    margin-right: auto;
    margin-left: 48%;
}

.pfs-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8d8d8d;
    cursor: pointer;
    transition: background 0.3s ease;
    border: none;
    padding: 0;
}

.pfs-dot.pfs-dot-active {
    width: 28px;
    border-radius: 20px;
    background: #6b6b6b;
}

.pfs-navbtn {
    width: 32px;
    height: 32px;
    border: 1.5px solid #9a9a9a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    user-select: none;
    background: transparent;
    flex: none;
}

.pfs-navbtn:hover {
    background: #e0e0e0;
    border-color: #666;
}

.pfs-navbtn.pfs-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ===== Tablet ===== */
@media (max-width: 1200px) {
    .pfs-top {
        grid-template-columns: 1fr;
    }

    .pfs-lead {
        margin-top: 20px;
    }

    /* Show 2 cards at a time on tablet */
    .pfs-card {
        flex: 0 0 calc((100% - 24px) / 2);
        height: 460px;
    }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .pfs-section {
        padding: 48px 0;
    }

    .pfs-wrapper {
        width: 92vw;
    }

    .pfs-title {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }

    .pfs-lead {
        font-size: 15px;
        max-width: 100%;
    }

    /* Show 1 card at a time on mobile */
    .pfs-card {
        flex: 0 0 100%;
        height: 340px;
    }

    .pfs-dots {
        margin-left: 0;
    }

    .pfs-controls {
        padding-top: 20px;
    }
}

@media (max-width: 420px) {
    .pfs-card {
        height: 280px;
    }
}

/* =============================================================================
           OUR STORY  PREMIUM ABOUT US SECTION
           Namespaced under .story-section / .story-* so nothing here can collide with
           existing site classes (.about, .about-content, etc. are left untouched).
           ============================================================================= */

#our-story,
#our-story * {
    box-sizing: border-box;
}

.story-section {
    --story-red: #e41f26;
    --story-red-deep: #b81119;
    --story-ink: #101012;
    --story-muted: #6b6f76;
    --story-faint: #9a9ea5;
    --story-paper: #fbfaf8;
    --story-line: #e6e2da;
    --story-charcoal: #131315;
    --story-ease: cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    background: var(--story-paper);
    padding: 150px 0 160px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: var(--story-ink);
}

/* ambient depth  a single soft red bloom, never decorative clutter */
.story-glow {
    position: absolute;
    top: -180px;
    right: -220px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 31, 38, 0.10) 0%, rgba(228, 31, 38, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.story-container {
    position: relative;
    z-index: 1;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
}

/* =========================================================
           SCROLL-REVEAL PRIMITIVES
           ========================================================= */
.story-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.9s var(--story-ease), transform 0.9s var(--story-ease);
}

.story-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

.reveal-line {
    display: block;
    overflow: hidden;
}

.reveal-inner {
    display: block;
    transform: translateY(105%);
    transition: transform 1s var(--story-ease);
}

.story-headline.in-view .reveal-inner {
    transform: translateY(0);
}

.story-headline .reveal-line:nth-child(2) .reveal-inner {
    transition-delay: 0.12s;
}

/* =========================================================
           MASTHEAD
           ========================================================= */
.story-eyebrow-wrap {
    margin-bottom: 28px;
}

.story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--story-red);
}

.story-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--story-red);
    box-shadow: 0 0 0 4px rgba(228, 31, 38, 0.15);
}

.story-headline-row {
    display: grid;
    grid-template-columns: 7.2fr 4.8fr;
    gap: 60px;
    align-items: end;
    padding-bottom: 64px;
    margin-bottom: 64px;
    border-bottom: 1px solid var(--story-line);
}

.story-headline {
    font-size: clamp(2.3rem, 4.3vw, 4.35rem);
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 300;
    color: var(--story-ink);
    margin: 0;
}

.story-headline strong {
    font-weight: 800;
    letter-spacing: -2px;
}

.story-side {
    padding-bottom: 6px;
}

.story-lead {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--story-muted);
    margin: 0 0 28px;
    max-width: 420px;
}

.story-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--story-red);
    color: #fff;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.2px;
    box-shadow: 0 14px 30px rgba(228, 31, 38, 0.22);
    transition: transform 0.35s var(--story-ease), box-shadow 0.35s var(--story-ease), background 0.35s var(--story-ease);
}

.story-cta i {
    font-size: 12px;
    transition: transform 0.35s var(--story-ease);
}

.story-cta:hover {
    transform: translateY(-4px);
    background: var(--story-red-deep);
    box-shadow: 0 18px 36px rgba(228, 31, 38, 0.3);
}

.story-cta:hover i {
    transform: translateX(4px);
}

.story-cta:focus-visible {
    outline: 3px solid var(--story-ink);
    outline-offset: 3px;
}

/* =========================================================
           PROOF ROW  dark photo panel + stat ledger
           ========================================================= */
.story-proof {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: stretch;
    margin-bottom: 130px;
}

.story-photo {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 480px;
    background: var(--story-charcoal);
    isolation: isolate;
}

.story-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    filter: saturate(0.92) contrast(1.03);
    transition: transform 1.4s var(--story-ease);
}

.story-photo.in-view img {
    transform: scale(1);
}

.story-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 11, 0.05) 0%, rgba(10, 10, 11, 0.55) 100%),
        linear-gradient(100deg, rgba(10, 10, 11, 0.35) 0%, transparent 55%);
}

.story-caption {
    position: absolute;
    left: 28px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 16, 18, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    padding: 12px 18px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s var(--story-ease) 0.5s, transform 0.8s var(--story-ease) 0.5s;
}

.story-photo.in-view .story-caption {
    opacity: 1;
    transform: translateY(0);
}

.story-caption-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--story-red);
    flex-shrink: 0;
}

/* --- ledger --- */
.story-ledger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid var(--story-line);
}

.story-ledger-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 4px;
    border-bottom: 1px solid var(--story-line);
}

.ledger-num-wrap {
    display: flex;
    align-items: baseline;
    font-size: clamp(2.1rem, 2.6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--story-ink);
    font-variant-numeric: tabular-nums;
}

.ledger-suffix {
    color: var(--story-red);
    font-weight: 800;
}

.ledger-label {
    text-align: right;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--story-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    max-width: 160px;
}

/* =========================================================
           SIGNATURE  THE LEDGER TIMELINE
           ========================================================= */
.story-timeline-wrap {
    padding-top: 8px;
}

.story-timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 68px;
    flex-wrap: wrap;
    gap: 14px;
}

.story-timeline-tag {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--story-red);
}

.story-timeline-sub {
    font-size: 15px;
    color: var(--story-faint);
    font-weight: 500;
}

.story-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-top: 6px;
}

.story-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--story-ease), transform 0.7s var(--story-ease);
}

.story-timeline-wrap.in-view .story-node {
    opacity: 1;
    transform: translateY(0);
}

.story-timeline-wrap.in-view .story-node:nth-child(2) {
    transition-delay: 0.15s;
}

.story-timeline-wrap.in-view .story-node:nth-child(3) {
    transition-delay: 0.35s;
}

.story-timeline-wrap.in-view .story-node:nth-child(4) {
    transition-delay: 0.55s;
}

.story-timeline-wrap.in-view .story-node:nth-child(5) {
    transition-delay: 0.75s;
}

.story-timeline-wrap.in-view .story-node:nth-child(6) {
    transition-delay: 0.95s;
}

.node-year {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--story-ink);
    white-space: nowrap;
}

/* --- the connector line lives INSIDE each node's own dot row.
               It stretches to fill that row (edge-to-edge of the node's
               column via the negative margins below), so it always meets
               the next node's line exactly at the shared column boundary,
               and is always vertically centered on the dot  no absolute
               pixel guessing, no overlap with the year number, at any
               screen size. */
.node-line-row {
    position: relative;
    width: calc(100% + 32px);
    margin: 16px -16px 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-line-row::before,
.node-line-row::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}

.node-line-row::before {
    background: var(--story-line);
    z-index: 0;
}

.node-line-row::after {
    background: var(--story-red);
    width: 0%;
    transform-origin: left center;
    transition: width 1.2s var(--story-ease);
    z-index: 0;
}

.story-timeline-wrap.in-view .node-line-row::after {
    width: 100%;
}

.story-timeline-wrap.in-view .story-node:nth-child(2) .node-line-row::after {
    transition-delay: 0.15s;
}

.story-timeline-wrap.in-view .story-node:nth-child(3) .node-line-row::after {
    transition-delay: 0.35s;
}

.story-timeline-wrap.in-view .story-node:nth-child(4) .node-line-row::after {
    transition-delay: 0.55s;
}

.story-timeline-wrap.in-view .story-node:nth-child(5) .node-line-row::after {
    transition-delay: 0.75s;
}

/* first node: line only runs from the dot rightward (nothing to its left) */
.story-node:first-child .node-line-row::before,
.story-node:first-child .node-line-row::after {
    left: 50%;
    width: 50%;
}

.story-timeline-wrap.in-view .story-node:first-child .node-line-row::after {
    width: 50%;
}

/* last node: line only runs from the dot leftward (nothing beyond it) */
.story-node:last-child .node-line-row::before,
.story-node:last-child .node-line-row::after {
    left: 0;
    width: 50%;
}

.story-timeline-wrap.in-view .story-node:last-child .node-line-row::after {
    width: 50%;
}

.node-dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--story-red);
    box-shadow: 0 0 0 5px var(--story-paper), 0 0 0 6px var(--story-line);
    flex-shrink: 0;
}

.node-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--story-muted);
    max-width: 190px;
}

.story-node--current .node-year {
    color: var(--story-red);
}

.story-node--current .node-dot {
    background: #fff;
    border: 3px solid var(--story-red);
    box-shadow: 0 0 0 5px var(--story-paper), 0 0 0 6px var(--story-line);
}

/* =========================================================
           RESPONSIVE
           ========================================================= */
@media (max-width: 1300px) {
    .story-container {
        padding: 0 32px;
    }
}

@media (max-width: 1180px) {
    .story-headline-row {
        grid-template-columns: 1fr;
        gap: 34px;
        align-items: start;
    }

    .story-side {
        padding-bottom: 0;
    }

    .story-lead {
        max-width: 640px;
    }

    .story-proof {
        grid-template-columns: 1fr;
    }

    .story-photo {
        min-height: 380px;
    }

    .story-ledger {
        border-top: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 40px;
    }

    .story-ledger-row {
        border-top: 1px solid var(--story-line);
    }
}

@media (max-width: 900px) {
    .story-section {
        padding: 110px 0 120px;
    }

    .story-proof {
        margin-bottom: 100px;
    }

    .story-timeline {
        grid-template-columns: none;
        display: flex;
        gap: 0;
        overflow-x: auto;
        padding: 6px 6px 20px;
        margin: 0 -6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .story-timeline::-webkit-scrollbar {
        height: 4px;
    }

    .story-timeline::-webkit-scrollbar-thumb {
        background: var(--story-line);
        border-radius: 4px;
    }

    .story-node {
        flex: 0 0 200px;
        width: 200px;
        scroll-snap-align: start;
    }

    /* on the horizontal scroll strip every node is a visual "middle"
               node  the line should run edge-to-edge through all of them,
               so only the very first/last node in the whole strip gets the
               trimmed half-line, same rule as desktop, already handled by
               :first-child / :last-child above. */
}

@media (max-width: 640px) {
    .story-container {
        padding: 0 22px;
    }

    .story-glow {
        width: 380px;
        height: 380px;
        top: -100px;
        right: -140px;
    }

    .story-headline {
        letter-spacing: -0.8px;
    }

    .story-headline strong {
        letter-spacing: -1px;
    }

    .story-headline-row {
        padding-bottom: 44px;
        margin-bottom: 44px;
    }

    .story-ledger {
        grid-template-columns: 1fr;
    }

    .story-photo {
        min-height: 320px;
        border-radius: 20px;
    }

    .story-caption {
        left: 16px;
        bottom: 16px;
        padding: 8px 14px;
        font-size: 11px;
        border-radius: 12px;
        max-width: calc(100% - 32px);
        box-sizing: border-box;
        align-items: flex-start;
    }

    .story-caption-dot {
        margin-top: 4px;
    }

    .story-timeline-head {
        margin-bottom: 44px;
    }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .story-reveal,
    .reveal-inner,
    .story-photo img,
    .story-caption,
    .story-node,
    .node-line-row::after,
    .story-cta,
    .story-cta i {
        transition: none !important;
        animation: none !important;
    }

    .story-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .reveal-inner {
        transform: none !important;
    }

    .story-node {
        opacity: 1 !important;
        transform: none !important;
    }

    .node-line-row::after {
        width: 100% !important;
    }

    .story-node:first-child .node-line-row::after,
    .story-node:last-child .node-line-row::after {
        width: 50% !important;
    }
}


/* =============================================================================
   CORPORATE SERVICES SHOWCASE (Editorial Split-Screen)
   ============================================================================= */
.what-we-do-split {
    padding: 100px 0;
    background: #f8f9fa;
    position: relative;
    overflow-x: clip;
}

.what-we-do-split .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

.split-header {
    margin-bottom: 40px;
    padding: 0 20px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.split-header h2 {
    font-size: clamp(28px, 6vw, 36px);
    color: #111;
    margin-top: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.split-subtitle {
    font-size: 15px;
    color: #555;
    margin-top: 12px;
    max-width: 600px;
    line-height: 1.5;
}

/* --- Base styles for Desktop version --- */
.split-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-sizing: border-box;
}

.split-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.split-nav-btn {
    width: 100%;
    text-align: left;
    background: #fff;
    border: none;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.split-nav-btn:hover {
    background: #fdfdfd;
}

.nav-num {
    font-size: 14px;
    font-weight: 700;
    color: #aaa;
    margin-right: 20px;
    min-width: 25px;
}

.nav-title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    flex: 1;
}

.nav-arrow {
    color: #888;
    transition: transform 0.3s ease;
}

.split-nav-btn.active {
    background: #0a1128;
    border-left-color: var(--primary-red);
}

.split-nav-btn.active .nav-num {
    color: rgba(255, 255, 255, 0.5);
}

.split-nav-btn.active .nav-title,
.split-nav-btn.active .nav-arrow {
    color: #fff;
}

.split-visuals {
    flex: 1;
}

.split-panel {
    background: #0a1128;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.panel-inner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.panel-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
}

.panel-inner img.fading-out {
    opacity: 0;
}

.panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 17, 40, 0.95) 0%, rgba(10, 17, 40, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
    color: #fff;
    width: 100%;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.panel-content.fading-out {
    opacity: 0;
    transform: translateY(10px);
}

.panel-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary-red);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.panel-headline {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.panel-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    line-height: 1.6;
    max-width: 90%;
}

.panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.panel-cta:hover {
    gap: 12px;
    color: var(--primary-red);
}

/* Display rules */
@media screen and (max-width: 1023px) {
    .desktop-only-split {
        display: none !important;
    }

    .mobile-only-split {
        display: block !important;
    }
}

@media screen and (min-width: 1024px) {
    .desktop-only-split {
        display: flex !important;
    }

    .mobile-only-split {
        display: none !important;
    }
}

/* ========================= MOBILE TABLET SCROLLSTACK ========================= */
@media screen and (max-width: 1023px) {
    .split-stack-container {
        padding: 20px 20px 80px;
        width: 100%;
        box-sizing: border-box;
    }

    .split-stack-cards {
        display: flex;
        flex-direction: column;
        gap: 30px;
        max-width: 600px;
        margin: 0 auto;
        position: relative;
    }

    .split-stack-card {
        position: sticky;
        top: 120px;
        /* Keeps card sticky below header */
        width: 100%;
        height: 380px;
        margin-bottom: 40px;
        will-change: transform, opacity;
        transition: transform 0.1s ease-out, opacity 0.1s ease-out, filter 0.1s ease-out;
    }

    .stack-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .stack-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 17, 40, 0.95) 0%, rgba(10, 17, 40, 0.4) 60%, rgba(0, 0, 0, 0.2) 100%);
        z-index: 1;
    }

    .stack-card-content {
        position: relative;
        z-index: 2;
        padding: 25px;
        color: #fff;
    }

    .stack-card-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--primary-red);
        text-transform: uppercase;
        display: block;
        margin-bottom: 8px;
    }

    .stack-card-headline {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .stack-card-desc {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 14px;
        line-height: 1.55;
    }

    .stack-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        transition: gap 0.3s ease;
    }

    .stack-card-cta:hover {
        gap: 12px;
        color: var(--primary-red);
    }
}

/* ========================= DESKTOP SPLIT SHOWCASE (>=1024px) ========================= */
@media screen and (min-width: 1024px) {
    .what-we-do-split {
        height: 250vh;
        padding: 0;
    }

    .split-sticky-wrapper {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: clamp(40px, 8vh, 100px);
        box-sizing: border-box;
    }

    .split-header {
        margin-bottom: clamp(30px, 4vh, 60px);
        padding: 0 40px;
    }

    .split-header h2 {
        font-size: 42px;
    }

    .split-subtitle {
        font-size: 18px;
        margin-top: 15px;
        line-height: 1.6;
    }

    .split-container {
        flex-direction: row;
        gap: clamp(30px, 4vw, 50px);
        align-items: center;
    }

    .split-nav {
        flex: 3.5;
    }

    .split-visuals {
        flex: 6.5;
    }

    .split-nav-btn {
        border-radius: 0;
        background: transparent;
        border-left: 3px solid rgba(0, 0, 0, 0.08);
        box-shadow: none;
        padding: clamp(15px, 2vh, 30px) 0 clamp(15px, 2vh, 30px) 25px;
        position: relative;
    }

    .split-nav-btn::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 25px;
        right: 0;
        height: 1px;
        background: rgba(0, 0, 0, 0.06);
    }

    .split-nav-btn:hover {
        background: transparent;
        padding-left: 35px;
    }

    .nav-arrow {
        color: var(--primary-red);
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
    }

    .split-nav-btn.active {
        background: transparent;
        border-left: 3px solid var(--primary-red);
        padding-left: 35px;
    }

    .split-nav-btn.active .nav-num,
    .split-nav-btn.active .nav-title {
        color: #0a1128;
    }

    .split-nav-btn.active .nav-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    .split-panel {
        background: transparent;
        padding: 0;
    }

    .panel-inner {
        height: min(550px, calc(100vh - 250px));
        min-height: 350px;
        border-radius: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .panel-content {
        padding: clamp(20px, 4vh, 50px);
    }

    .panel-headline {
        font-size: clamp(24px, 3vw, 36px);
    }

    .panel-desc {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Touch devices: no reliable hover, keep the resting-state look intact on tap */
@media (hover: none),
(pointer: coarse) {
    .split-nav-btn:hover {
        background: inherit;
    }
}

/* --- Responsive Layouts --- */
@media screen and (max-width: 1024px) {
    .about-container {
        flex-direction: column;
        gap: 60px;
        text-align: center;
    }

    .about-features {
        justify-content: center;
    }

    .experience-badge {
        right: 0;
        bottom: -20px;
    }
}

/* =============================================================================
   SCROLL TO TOP BUTTON
   ============================================================================= */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(228, 31, 38, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(228, 31, 38, 0.4);
    color: var(--primary-red);
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: var(--primary-red);
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(228, 31, 38, 0.3);
}

/* =============================================================================
   EVENTS SHOWCASE SLIDER
   ============================================================================= */
/* ========================= EVENTS SHOWCASE SLIDER ========================= */
.evt-slider-section {
    background: transparent;
    padding: 80px 0 60px;
    overflow: hidden;
    position: relative;
}

.evt-slider-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.evt-slider-header h2 {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 800;
    color: #050404;
    max-width: 700px;
    margin: 10px auto 0;
    line-height: 1.3;
}

.section-tag {
    display: inline-block;
    color: #C31A20;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.evt-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--primary-red);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition-fast);
}

.evt-view-all i {
    font-size: 12px;
    transition: var(--transition-fast);
}

.evt-view-all:hover {
    gap: 12px;
}

.evt-slider-wrapper {
    width: 100%;
    position: relative;
}

/* SLIDER WINDOW */
.evt-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 40px 0;
}

/* SLIDER TRACK  The moving part */
.evt-slider-track {
    display: flex;
    align-items: center;
    gap: 30px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.evt-slider::-webkit-scrollbar {
    display: none;
}

/* CARD  fixed uniform size for ALL cards (active or not).
   IMPORTANT: size must stay identical between .evt-card and .evt-card.active.
   Changing width/height on .active shifts every card's offsetLeft after it,
   which is what caused the centering drift / "stuck mid-transition" bug on
   repeated next/prev clicks. Emphasis for the active card is now done with
   transform: scale() + z-index, which does NOT affect flex layout at all. */
.evt-card {
    position: relative;
    flex: 0 0 900px;
    height: 550px;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease, box-shadow 0.5s ease;
    filter: brightness(0.55);
    flex-shrink: 0;
    transform: scale(0.94);
    z-index: 1;
}

/* ACTIVE CARD  visual emphasis only, no layout-affecting size change */
.evt-card.active {
    filter: brightness(1);
    transform: scale(1);
    z-index: 3;
}

/* IMAGE */
.evt-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK GRADIENT OVERLAY */
.evt-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
}

/* TAG */
.evt-tag {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    background: rgba(180, 26, 31, 0.9);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* CONTENT */
.evt-content {
    position: absolute;
    left: 28px;
    bottom: 35px;
    z-index: 2;
    color: #fff;
    width: 70%;
}

.evt-content h3 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 14px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.evt-arrow {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.7);
}

/* NAVIGATION BAR */
.evt-navigation {
    position: relative;
    margin: 35px auto 0;
    width: fit-content;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 12px 28px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.evt-nav-btn {
    font-size: 26px;
    cursor: pointer;
    user-select: none;
    color: #aaa;
    transition: color 0.2s;
    line-height: 1;
}

.evt-nav-btn:hover {
    color: #fff;
}

.evt-counter {
    font-size: 16px;
    color: #ccc;
}

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

/* LAPTOP / SMALL DESKTOP */
@media (max-width: 1300px) {
    .evt-card {
        flex: 0 0 760px;
        height: 460px;
    }
}

/* TABLET */
@media (max-width: 992px) {
    .evt-slider-section {
        padding: 60px 0 45px;
    }

    .evt-slider {
        padding: 25px 15px;
    }

    .evt-card {
        flex: 0 0 78vw;
        height: 400px;
    }

    .evt-content h3 {
        font-size: 16px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .evt-slider-header {
        margin-bottom: 32px;
    }

    .evt-slider-header h2 {
        line-height: 1.35;
    }

    .evt-slider {
        padding: 18px 12px;
    }

    .evt-slider-track {
        gap: 18px;
    }

    .evt-card {
        flex: 0 0 82vw;
        height: 300px;
        border-radius: 20px;
    }

    .evt-content {
        left: 18px;
        bottom: 20px;
        width: 82%;
    }

    .evt-content h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .evt-tag {
        top: 16px;
        left: 16px;
        font-size: 10px;
        padding: 5px 10px;
    }

    .evt-arrow {
        font-size: 22px;
    }

    .evt-navigation {
        gap: 20px;
        padding: 10px 22px;
        margin-top: 24px;
    }

    .evt-nav-btn {
        font-size: 22px;
    }

    .evt-counter {
        font-size: 14px;
    }
}

/* SMALL MOBILE */
@media (max-width: 400px) {
    .evt-card {
        flex: 0 0 86vw;
        height: 250px;
    }

    .evt-content h3 {
        font-size: 13px;
    }

    .evt-content {
        width: 88%;
    }
}

/* ========================= SERVICES STICKY CAROUSEL ========================= */
.new-services-carousel {
    --primary-red: #e41f26;
}



/*
         * MOBILE-FIRST DEFAULT (≤1024px):
         * The scroll-jacked "pin & translate" effect is replaced with a native,
         * touch-friendly horizontal scroll-snap carousel. Scroll-jacking on touch
         * devices is unreliable (mobile address-bar resize breaks 100vh math,
         * touch scroll fights the JS transform, iOS Safari momentum scroll glitches).
         * Above 1024px the original sticky scroll-driven carousel takes over.
         */
.services-scroll-track {
    position: relative;
    height: auto;
}

.new-services-carousel.sticky-section {
    position: relative;
    top: auto;
    height: auto;
    background: #151515;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0 50px;
}

.nsc-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.nsc-header-center {
    text-align: center;
    margin-bottom: 36px;
}

.nsc-header-center h2.nsc-eyebrow {
    letter-spacing: 4px;
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin: 0;
}

.nsc-header-center h2.nsc-eyebrow::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--primary-red);
}

.nsc-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 36px;
}

.nsc-left h2 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: #fff;
}

.nsc-highlight {
    background: linear-gradient(90deg, #e41f26, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nsc-right p {
    max-width: 500px;
    color: #ccc;
    line-height: 1.6;
    font-size: 14px;
    margin: 0;
}

/* CAROUSEL WRAPPER  mobile: native scroll-snap */
.svc-cards-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.svc-cards-wrapper::-webkit-scrollbar {
    display: none;
}

.svc-cards {
    display: flex;
    gap: 18px;
    padding: 0 24px 16px;
    will-change: transform;
}

/* Spacers are only meaningful for the desktop scroll-jack effect */
.svc-cards::before,
.svc-cards::after {
    content: none;
}

.svc-card {
    scroll-snap-align: start;
    width: 78vw;
    min-width: 78vw;
    max-width: 320px;
    height: 300px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    padding-bottom: 60px;
    background-size: cover;
    background-position: center;
}

.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.28) 70%,
            rgba(0, 0, 0, 0.08) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Colors */
.svc-pink {
    background-color: #B83F6E;
}

.svc-blue {
    background-color: #1A5276;
}

.svc-yellow {
    background-color: #B7950B;
}

/* Text */
.svc-card h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #fff;
    margin: 0;
    text-align: left;
    position: relative;
    z-index: 2;
}

.svc-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
    margin: 8px 0 0 0;
    line-height: 1.4;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Read More button inside cards */
.read-more-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid #fff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 2;
    font-family: inherit;
}

.read-more-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Scroll-snap progress dots (mobile/tablet only) */
.svc-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
}

.svc-mobile-dots .pfs-dot-mini {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #555;
    transition: width .3s ease, background .3s ease;
}

.svc-mobile-dots .pfs-dot-mini.active {
    width: 20px;
    border-radius: 20px;
    background: var(--primary-red);
}

/* ===== Small phones ===== */
@media (max-width: 420px) {
    .svc-card {
        width: 84vw;
        min-width: 84vw;
        height: 280px;
    }

    .nsc-left h2 {
        font-size: 24px;
    }
}

/*
         * ===== DESKTOP / LAPTOP (≥1025px) =====
         * Restores the original sticky, scroll-jacked, horizontally-panning carousel.
         */
@media (min-width: 1025px) {
    .services-scroll-track {
        height: 300vh;
    }

    .new-services-carousel.sticky-section {
        position: sticky;
        top: 0;
        height: 100vh;
        padding: 0;
    }

    .nsc-container {
        padding: 0 40px;
    }

    .nsc-header-center {
        margin-bottom: 50px;
    }

    .nsc-header-center h2.nsc-eyebrow {
        font-size: 14px;
    }

    .nsc-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
        margin-bottom: 60px;
    }

    .nsc-left h2 {
        font-size: 42px;
    }

    .nsc-right p {
        font-size: 15px;
    }

    .svc-cards-wrapper {
        overflow: hidden;
        scroll-snap-type: none;
    }

    .svc-cards {
        gap: 25px;
        padding: 0 0 40px;
    }

    .svc-cards::before,
    .svc-cards::after {
        content: '';
        flex-shrink: 0;
        width: max(15px, calc((100vw - 1300px) / 2 + 15px));
    }

    .svc-card {
        scroll-snap-align: none;
        width: 320px;
        min-width: 320px;
        max-width: none;
        height: 360px;
        padding: 25px;
        padding-bottom: 70px;
        transition: 0.3s ease;
    }

    .svc-card h3 {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .svc-card p {
        font-size: 13px;
    }

    .svc-mobile-dots {
        display: none;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .svc-card {
        min-width: 280px;
        width: 280px;
        height: 320px;
    }
}

/* =============================================================================
   TESTIMONIALS SECTION (DEVELOPER PROVIDED)
   ============================================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    background: #fff;
}

/* =============================================================================
   TESTIMONIALS SECTION
   Fluid via clamp() throughout so it scales smoothly at every viewport
   width instead of only jumping at the two original breakpoints.
   ============================================================================= */
.testimonial-section {
    width: 100%;
    padding: clamp(60px, 9vw, 120px) 20px;
    background: #f9f9f9;
    text-align: center;
    overflow-x: hidden;
}

.testi-container {
    max-width: 1400px;
    margin: 0 auto;
}

.testi-small-heading {
    color: #C31A20;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testi-main-heading {
    font-size: clamp(26px, 5vw, 46px);
    line-height: 1.2;
    font-weight: 800;
    color: #111;
    margin-bottom: clamp(44px, 7vw, 90px);
}

.testi-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
}

.testi-slider-window {
    /* BUG FIX: this was `width: 100%`, which  inside a flex row alongside
       two nav buttons  sizes to 100% of the WRAPPER, not the space left
       over after the buttons. On narrow screens that pushed the buttons
       out / caused overflow. `flex: 1 1 0%` + `min-width: 0` is the
       correct flex pattern: it fills exactly the remaining space and is
       still allowed to shrink below its content size. */
    flex: 1 1 0%;
    min-width: 0;
    max-width: 1236px;
    overflow: hidden;
    padding: 60px 0 30px;
}

.testi-cards-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: nowrap;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* NAVIGATION BUTTONS */
.testi-nav-btn {
    width: clamp(38px, 9vw, 50px);
    height: clamp(38px, 9vw, 50px);
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-size: clamp(14px, 3vw, 18px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    flex-shrink: 0;
}

.testi-nav-btn:hover {
    background: #e41f26;
    color: #fff;
    border-color: #e41f26;
    box-shadow: 0 5px 15px rgba(228, 31, 38, 0.3);
}

.testi-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* CARD */
.testimonial-card {
    position: relative;
    width: calc((100% - 3 * 32px) / 4);
    flex: 0 0 calc((100% - 3 * 32px) / 4);
    background: #fff;
    border-radius: 20px;
    padding: 80px 32px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

/* TOP IMAGE */
.testi-profile-wrapper {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.testi-profile-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testi-client-name {
    font-size: 19px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
}

.testi-client-role {
    font-size: 14px;
    color: #888;
    margin-bottom: 22px;
    font-weight: 500;
}

.testi-review-text {
    font-size: 14.5px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 25px;
}

.testi-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.testi-star {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e41f26;
}

/* SECOND CARD BLUE STARS */
.testi-blue .testi-star {
    background: #5138ff;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1200px) {
    .testi-cards-wrapper {
        gap: 25px;
    }

    .testi-slider-window {
        max-width: 905px;
        /* Exactly 3 cards (285 * 3) + 2 gaps (25 * 2) */
    }

    .testimonial-card {
        width: calc((100% - 2 * 25px) / 3);
        flex: 0 0 calc((100% - 2 * 25px) / 3);
    }
}

@media (max-width: 1024px) {
    .testi-slider-window {
        max-width: 595px;
        /* Exactly 2 cards (285 * 2) + 1 gap (25) */
    }

    .testimonial-card {
        width: calc((100% - 1 * 25px) / 2);
        flex: 0 0 calc((100% - 1 * 25px) / 2);
    }
}

@media (max-width: 900px) {
    .testi-slider-window {
        padding: 50px 0 25px;
    }
}

@media (max-width: 768px) {
    .testimonial-section {
        padding: 60px 16px;
    }

    .testi-slider-wrapper {
        gap: 8px;
    }

    .testi-slider-window {
        max-width: 380px;
        /* Exactly 1 card max-width */
    }

    /* BUG FIX: the original only set `width: 100%` here, but `.testimonial-card`
       also has `flex: 0 0 285px` which WINS over `width` for a flex item's
       size  so the card never actually became fluid on mobile like the
       code intended. `flex-basis` must be overridden too. This now gives a
       clean one-card-per-view mobile carousel. */
    .testimonial-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 380px;
        padding: 70px 26px 32px;
        margin: 0 auto;
    }

    .testi-cards-wrapper {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .testimonial-section {
        padding: 46px 12px;
    }

    .testi-slider-window {
        padding: 46px 0 20px;
    }

    .testi-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .testimonial-card {
        padding: 62px 20px 28px;
        border-radius: 16px;
    }

    .testi-profile-wrapper {
        width: 64px;
        height: 64px;
        top: -32px;
    }

    .testi-client-name {
        font-size: 17px;
    }

    .testi-review-text {
        font-size: 14px;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .testi-cards-wrapper,
    .testimonial-card {
        transition: none !important;
    }
}

/* KEYBOARD ACCESSIBILITY */
a:focus-visible,
button:focus-visible,
.testi-nav-btn:focus-visible {
    outline: 3px solid #e41f26;
    outline-offset: 3px;
}

/* ==========================================
   CEO SECTION CSS (Appended from scrap.txt)
   ========================================== */
.ceo-section {
    display: flex;
    justify-content: space-between;
    min-height: 80vh;
    background: #0a0a0a;
    color: #f0ece4;
    font-family: 'Inter', sans-serif;
}

.ceo-image-col {
    width: 40%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ceo-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, #0a0a0a 100%);
    z-index: 2;
}

.ceo-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: grayscale(15%);
}

.ceo-content-col {
    width: 55%;
    padding: 4rem 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ceo-section .top-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.ceo-section .badge-line {
    width: 32px;
    height: 1px;
    background: #ed1414;
}

.ceo-section .badge-text {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: #ed1414;
    text-transform: uppercase;
}

.ceo-section .ceo-name {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 400;
    color: #f0ece4;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
}

.ceo-section .ceo-designation {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: #9a9590;
    text-transform: uppercase;
    margin: 0 0 2rem 0;
}

.ceo-section .divider {
    width: 48px;
    height: 1px;
    background: #2a2a2a;
    margin-bottom: 2rem;
}

.ceo-section .ceo-quote {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    color: #e7dfdf;
    line-height: 1.6;
    margin: 0 0 2rem 0;
    padding-left: 1.5rem;
    border-left: 1px solid #bd0000;
}

.ceo-section .ceo-message {
    font-size: 14px;
    font-weight: 300;
    color: #9a9590;
    line-height: 1.9;
    margin: 0 0 2.5rem 0;
    max-width: 520px;
}

.ceo-section .stats-row {
    display: flex;
    gap: 3rem;
    margin-bottom: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #1e1e1e;
}

.ceo-section .stat-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ceo-section .stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 400;
    color: #f0ece4;
    line-height: 1;
    letter-spacing: -1px;
}

.ceo-section .stat-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #5a5550;
    text-transform: uppercase;
}

.ceo-section .stat-divider {
    width: 1px;
    background: #1e1e1e;
    align-self: stretch;
}

.ceo-section .signature-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ceo-section .signature-svg {
    width: 160px;
    height: 56px;
    margin-bottom: 4px;
}

.ceo-section .signature-name {
    font-size: 13px;
    font-weight: 400;
    color: #f0ece4;
    letter-spacing: 0.05em;
}

.ceo-section .signature-title {
    font-size: 11px;
    font-weight: 300;
    color: #9d9a9a;
    letter-spacing: 0.1em;
}

/* ====================================================================
   RESPONSIVE LAYER
   ==================================================================== */

.ceo-section,
.ceo-section * {
    box-sizing: border-box;
}

.ceo-section {
    overflow-x: hidden;
}

.ceo-section .stat-label {
    overflow-wrap: break-word;
}

@media (max-width: 1024px) {
    .ceo-section .ceo-content-col {
        padding: 4rem 3rem 4rem 3rem;
    }

    .ceo-section .ceo-name {
        font-size: clamp(34px, 4.6vw, 48px);
    }

    .ceo-section .ceo-quote {
        font-size: clamp(18px, 2.3vw, 22px);
    }

    .ceo-section .ceo-message {
        font-size: clamp(13px, 1.6vw, 14px);
        max-width: 100%;
    }

    .ceo-section .stats-row {
        gap: 2rem;
        flex-wrap: wrap;
    }

    .ceo-section .stat-item {
        flex: 1 1 auto;
        min-width: 130px;
    }

    .ceo-section .stat-number {
        font-size: clamp(28px, 3.6vw, 36px);
    }
}

@media (max-width: 820px) {
    .ceo-section .ceo-content-col {
        padding: 3.5rem 2.25rem;
    }

    .ceo-section .top-badge {
        margin-bottom: 2rem;
    }

    .ceo-section .ceo-name {
        font-size: clamp(30px, 5vw, 38px);
        margin-bottom: 0.4rem;
    }

    .ceo-section .ceo-designation {
        margin-bottom: 2.25rem;
    }

    .ceo-section .divider {
        margin-bottom: 2.25rem;
    }

    .ceo-section .ceo-quote {
        margin-bottom: 2.25rem;
        padding-left: 1.25rem;
    }

    .ceo-section .ceo-message {
        margin-bottom: 2.25rem;
    }

    .ceo-section .stats-row {
        gap: 1.5rem;
        margin-bottom: 2.25rem;
        padding-top: 2rem;
    }

    .ceo-section .stat-item {
        min-width: 110px;
    }

    .ceo-section .stat-label {
        font-size: 9px;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 768px) {
    .ceo-section {
        flex-direction: column;
        min-height: auto;
    }

    /* Fixed height to accommodate full image body/shoulders and reset position */
    .ceo-section .ceo-image-col {
        width: 100%;
        height: clamp(480px, 68vh, 620px);
    }

    .ceo-section .ceo-photo {
        object-position: top center;
    }

    .ceo-section .ceo-image-overlay {
        background: linear-gradient(to bottom, transparent 55%, #0a0a0a 100%);
    }

    .ceo-section .ceo-content-col {
        width: 100%;
        padding: 3rem 2rem;
    }

    .ceo-section .ceo-name {
        font-size: clamp(30px, 7vw, 38px);
    }

    .ceo-section .ceo-quote {
        font-size: clamp(17px, 4vw, 20px);
    }

    .ceo-section .ceo-message {
        line-height: 1.8;
    }

    .ceo-section .stats-row {
        flex-wrap: wrap;
        row-gap: 1.5rem;
    }
}

@media (max-width: 480px) {

    /* Fixed scaled-up height for small mobile devices */
    .ceo-section .ceo-image-col {
        height: clamp(350px, 60vh, 450px);
    }

    .ceo-section .ceo-content-col {
        padding: 2.5rem 1.5rem;
    }

    .ceo-section .top-badge {
        margin-bottom: 1.75rem;
    }

    .ceo-section .badge-text {
        font-size: 9px;
    }

    .ceo-section .ceo-name {
        font-size: clamp(26px, 8vw, 32px);
    }

    .ceo-section .ceo-designation {
        font-size: 11px;
        margin-bottom: 2rem;
    }

    .ceo-section .divider {
        margin-bottom: 2rem;
    }

    .ceo-section .ceo-quote {
        font-size: clamp(16px, 5vw, 18px);
        padding-left: 1rem;
        margin-bottom: 2rem;
        line-height: 1.5;
    }

    .ceo-section .ceo-message {
        font-size: 13px;
        line-height: 1.75;
        margin-bottom: 2.5rem;
    }

    .ceo-section .stats-row {
        flex-direction: column;
        gap: 1.25rem;
        padding-top: 1.75rem;
        margin-bottom: 2.5rem;
    }

    .ceo-section .stat-item {
        min-width: 0;
        width: 100%;
        padding-top: 1rem;
        border-top: 1px solid #1e1e1e;
    }

    .ceo-section .stat-item:first-child {
        padding-top: 0;
        border-top: none;
    }

    .ceo-section .stat-divider {
        display: none;
    }

    .ceo-section .stat-number {
        font-size: 28px;
    }

    .ceo-section .signature-svg {
        width: 150px;
        height: 52px;
    }
}

@media (max-width: 360px) {

    /* Fixed scaled-up height for smallest mobile devices */
    .ceo-section .ceo-image-col {
        height: 320px;
    }

    .ceo-section .ceo-content-col {
        padding: 2rem 1.25rem;
    }

    .ceo-section .badge-line {
        width: 24px;
    }

    .ceo-section .badge-text {
        font-size: 8px;
        letter-spacing: 0.15em;
    }

    .ceo-section .ceo-name {
        font-size: 24px;
    }

    .ceo-section .ceo-designation {
        font-size: 10px;
    }

    .ceo-section .ceo-quote {
        font-size: 15px;
        padding-left: 0.85rem;
    }

    .ceo-section .ceo-message {
        font-size: 12px;
        line-height: 1.7;
    }

    .ceo-section .stat-number {
        font-size: 24px;
    }

    .ceo-section .stat-label {
        font-size: 9px;
    }

    .ceo-section .signature-svg {
        width: 135px;
        height: 48px;
    }

    .ceo-section .signature-name {
        font-size: 12px;
    }

    .ceo-section .signature-title {
        font-size: 10px;
    }
}