/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

body{
    background:#f4f6f9;
}

/* =========================================================
   HEADER  (topbar + navbar)
   Brand: navy #101828, red #E7000B, font Poppins
========================================================= */
:root{
    /* All colours taken from the existing site */
    --nav-navy:#101828;          /* dark navy (topbar, headings) */
    --nav-navy-2:#3E4C69;        /* topbar gradient end */
    --nav-red:#E7000B;           /* brand red */
    --nav-red-dark:#B90009;      /* original topbar red shape */
    --nav-red-soft:#FEF2F2;      /* light red tint */
    --nav-text:#364153;          /* menu text */
    --nav-muted:#6B7280;         /* small grey text */
    --nav-line:rgba(0,0,0,.08);  /* borders */
    --nav-bg:#F4F6F9;            /* page background */
    --nav-gutter:max(20px, 5%);
}

/* ===== TOPBAR (half blue / half red, diagonal split) ===== */
.topbar{
    --split:53.5%;
    color:#D1D5DB;
    font-size:13px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(115deg,
            var(--nav-navy) 0%,
            var(--nav-navy-2) calc(var(--split) - 0.1%),
            #fff var(--split),
            #fff calc(var(--split) + 0.4%),
            var(--nav-red-dark) calc(var(--split) + 0.4%),
            var(--nav-red) 100%);
}

/* soft shine on the red half */
.topbar::after{
    content:"";
    position:absolute;
    inset:0;
    background:none;
    pointer-events:none;
}

.topbar-inner{
    max-width:1320px;
    margin:0 auto;
    padding:0 var(--nav-gutter);
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:26px;
}

.tb-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#D1D5DB;
    text-decoration:none;
    white-space:nowrap;
    transition:color .25s;
}

.tb-item i{
    color:var(--nav-red);
    font-size:12px;
}

a.tb-item:hover{ color:#fff; }

.topbar-inner{ position:relative; z-index:1; }
.topbar-right .tb-item{ color:#fff; font-weight:500; }
.topbar-right .tb-item i{ color:#fff; }
.topbar-right a.tb-item:hover{ opacity:.85; }
.topbar .tb-divider{ background:rgba(255,255,255,.35); }
.topbar .tb-social a{ color:#fff; background:rgba(255,255,255,.14); }
.topbar .tb-social a:hover{ background:#fff; color:var(--nav-red); }

.tb-divider{
    width:1px;
    height:18px;
    background:rgba(255,255,255,.18);
}

.tb-social{
    display:flex;
    gap:6px;
}

.tb-social a{
    width:28px;
    height:28px;
    border-radius:6px;
    display:grid;
    place-items:center;
    color:#D1D5DB;
    font-size:12px;
    text-decoration:none;
    transition:background .25s, color .25s;
}

.tb-social a:hover{
    background:var(--nav-red);
    color:#fff;
}

/* ===== NAVBAR ===== */
.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--nav-line);
    transition:box-shadow .3s ease;
}

.navbar.scrolled{
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.nav-container{
    max-width:1320px;
    margin:0 auto;
    padding:0 var(--nav-gutter);
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    transition:height .3s ease;
}

.navbar.scrolled .nav-container{ height:70px; }

/* Logo */
.nav-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.nav-logo img{
    height:52px;
    width:auto;
    display:block;
    transition:height .3s ease;
}

.navbar.scrolled .nav-logo img{ height:44px; }

/* Menu links */
.nav-menu{ display:flex; align-items:center; }

.nav-links{
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:6px;
    background:var(--nav-bg);
    border-radius:999px;
}

.nav-links a{
    display:block;
    padding:10px 20px;
    border-radius:999px;
    color:var(--nav-text);
    font-size:15px;
    font-weight:500;
    text-decoration:none;
    transition:color .25s, background .25s, box-shadow .25s;
}

.nav-links a:hover{
    color:var(--nav-red);
}

.nav-links a.active{
    background:#fff;
    color:var(--nav-red);
    font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Right side */
.nav-right{
    display:flex;
    align-items:center;
    gap:22px;
    flex-shrink:0;
}

.nav-call{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--nav-navy);
}

.call-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--nav-red-soft);
    color:var(--nav-red);
    font-size:16px;
    flex-shrink:0;
    transition:background .25s, color .25s;
}

.nav-call:hover .call-icon{
    background:var(--nav-red);
    color:#fff;
}

.call-text{
    display:grid;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
    white-space:nowrap;
}

.call-text small,
.mobile-call small{
    font-size:12px;
    font-weight:400;
    color:var(--nav-muted);
}

.nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:48px;
    padding:0 26px;
    border-radius:10px;
    background:var(--nav-red);
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 8px 20px rgba(231,0,11,0.4);
    transition:background .25s, transform .25s, box-shadow .25s;
}

.nav-cta i{ font-size:13px; transition:transform .25s; }

.nav-cta:hover{
    background:var(--nav-red-dark);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(231,0,11,0.6);
}

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

/* Hamburger */
.hamburger{
    display:none;
    width:46px;
    height:46px;
    border:1px solid var(--nav-line);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0;
}

.hamburger span{
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--nav-navy);
    transition:transform .3s ease, opacity .2s ease;
}

.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-extra{ display:none; }

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(16,24,40,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s, visibility .3s;
    z-index:998;
}

.nav-overlay.active{ opacity:1; visibility:visible; }

/* Keyboard focus */
.navbar a:focus-visible,
.navbar button:focus-visible,
.topbar a:focus-visible{
    outline:2px solid var(--nav-red);
    outline-offset:3px;
}

/* ===== Responsive ===== */

/* Medium screens: hide the phone text, keep the icon */
@media(max-width:1280px){
    .call-text{ display:none; }
    .nav-links a{ padding:10px 16px; }
}

@media(max-width:1100px){
    .tb-hours{ display:none; }
    .topbar{ --split:48%; }
}

/* Tablet & mobile: slide-in menu */
@media(max-width:1024px){

    .nav-container{ height:74px; }
    .navbar.scrolled .nav-container{ height:66px; }
    .nav-logo img{ height:46px; }

    /* backdrop-filter would trap the fixed menu inside the navbar */
    .navbar{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }

    .nav-right{ display:none; }
    .hamburger{ display:flex; }
    .navbar .hamburger.active{ background:#fff; opacity:1; transform:none; }

    .nav-menu{
        position:fixed;
        top:0;
        right:0;
        width:min(360px, 88vw);
        height:100vh;
        height:100dvh;
        background:#fff;
        flex-direction:column;
        align-items:stretch;
        justify-content:space-between;
        padding:96px 24px 28px;
        overflow-y:auto;
        transform:translateX(100%);
        visibility:hidden;
        transition:transform .4s cubic-bezier(.2,.8,.2,1), visibility .4s;
        box-shadow:-20px 0 50px rgba(16,24,40,.15);
        z-index:999;
    }

    .nav-menu.active{ transform:translateX(0); visibility:visible; }

    .hamburger{ position:relative; z-index:1001; }

    .nav-links{
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:none;
        padding:0;
        border-radius:0;
    }

    .nav-links a{
        padding:14px 16px;
        border-radius:12px;
        font-size:17px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .nav-links a::after{
        content:"\f054";
        font-family:"Font Awesome 6 Free";
        font-weight:900;
        font-size:12px;
        color:#9CA3AF;
    }

    .nav-links a.active{
        background:var(--nav-red-soft);
        box-shadow:none;
    }

    .nav-links a.active::after{ color:var(--nav-red); }

    .mobile-extra{
        display:flex;
        flex-direction:column;
        gap:14px;
        padding-top:24px;
        margin-top:24px;
        border-top:1px solid var(--nav-line);
    }

    .mobile-call{
        display:flex;
        align-items:center;
        gap:12px;
        color:var(--nav-navy);
        font-weight:600;
        text-decoration:none;
    }

    .mobile-call span:last-child{ display:grid; line-height:1.3; }

    .mobile-extra .nav-cta{ width:100%; height:52px; }

    .mobile-social{
        display:flex;
        gap:8px;
        justify-content:center;
        padding-top:6px;
    }

    .mobile-social a{
        width:40px;
        height:40px;
        border-radius:10px;
        border:1px solid var(--nav-line);
        display:grid;
        place-items:center;
        color:var(--nav-text);
        text-decoration:none;
    }

    .mobile-social a:hover{ background:var(--nav-red); border-color:var(--nav-red); color:#fff; }

    body.menu-open{ overflow:hidden; }
}

/* Small tablets: shorter topbar */
@media(max-width:860px){
    .tb-address{ display:none; }
    .topbar{ --split:30%; }
}

/* Phones: topbar becomes one compact row */
@media(max-width:600px){
    .topbar-inner{ min-height:40px; gap:12px; }
    .topbar-right{ width:100%; justify-content:space-between; gap:12px; }
    .topbar-left{ display:none; }
    .tb-divider{ display:none; }
    .topbar-right .tb-item:first-child{ display:none; }   /* email lives in the menu & footer */
    .topbar{ --split:52%; }
    .topbar-right .tb-phone{ color:#fff; }
}

@media(prefers-reduced-motion:reduce){
    .navbar, .nav-container, .nav-logo img, .nav-menu, .nav-cta, .hamburger span{ transition:none; }
}

/* =========================
   HERO SECTION
   Compact: hero + service cards fit in the first screen
========================= */

.hero{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#101828;
    display:flex;
    align-items:center;
}

/* ===== Carousel Background ===== */
.carousel{ position:absolute; inset:0; }

.slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s ease;
}

.slide.active{
    opacity:1;
    animation:kenburns 10s ease-in-out forwards;
}

@keyframes kenburns{
    from{ transform:scale(1); }
    to{ transform:scale(1.1); }
}

/* ===== Overlay ===== */
.overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(16,24,40,.92) 0%, rgba(16,24,40,.70) 45%, rgba(16,24,40,.35) 100%),
        linear-gradient(0deg, rgba(16,24,40,.55) 0%, transparent 40%);
}

/* ===== Content ===== */
.hero-inner{
    position:relative;
    z-index:10;
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:40px max(20px, 5%) 112px;
}

/* Red bracket around the text */
.hero-frame{
    position:relative;
    max-width:780px;
    padding:30px 0 30px 40px;
    color:#fff;
}

/* bracket = top arm + left bar + bottom arm, drawn in on load */
.hero-frame::before,
.hero-frame::after{
    content:"";
    position:absolute;
    left:0;
    width:150px;
    height:50%;
    border-left:6px solid #E7000B;
    pointer-events:none;
}
.hero-frame::before{ top:0;    border-top:6px solid #E7000B;    transform-origin:top left; }
.hero-frame::after { bottom:0; border-bottom:6px solid #E7000B; transform-origin:bottom left; }

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#fff;
}

.hero-kicker::before{
    content:"";
    width:34px;
    height:2px;
    background:#E7000B;
}

.hero-frame h1{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:60px;
    line-height:1.06;
    font-weight:700;
    letter-spacing:-1.5px;
    margin:16px 0 20px;
}

/* each line slides up from behind a mask */
.hero-frame h1 .hl{ display:block; overflow:hidden; padding-bottom:12px; margin-bottom:-8px; }
.hero-frame h1 .hl > span{ display:inline-block; }

.hero-frame h1 em{
    font-style:normal;
    color:#E7000B;
    white-space:nowrap;
    position:relative;
}

/* hand-drawn style underline under "IT Solutions" */
.hero-frame h1 em::after{
    content:"";
    position:absolute;
    left:2px; right:2px;
    bottom:-6px;
    height:5px;
    border-radius:5px;
    background:#E7000B;
    opacity:.85;
    transform-origin:left;
}

.hero-frame p{
    font-size:18px;
    line-height:1.7;
    font-weight:300;
    color:rgba(255,255,255,.88);
    max-width:560px;
}

/* ===== Buttons ===== */
.buttons{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.btn{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 30px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    letter-spacing:.2px;
    transition:color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
    z-index:0;
}

/* fill sweep on hover */
.btn::before{
    content:"";
    position:absolute;
    inset:0;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .4s cubic-bezier(.7,0,.2,1);
    z-index:-1;
}
.btn:hover::before{ transform:scaleX(1); transform-origin:left; }

.btn.primary{ background:#E7000B; color:#fff; box-shadow:0 12px 26px -10px rgba(231,0,11,.8); }
.btn.primary::before{ background:#B90009; }
.btn.primary i{ font-size:13px; transition:transform .35s ease; }
.btn.primary:hover{ transform:translateY(-3px); }
.btn.primary:hover i{ transform:translateX(4px); }

.btn.outline{ border:2px solid rgba(255,255,255,.8); color:#fff; padding:13px 28px; }
.btn.outline::before{ background:#fff; }
.btn.outline:hover{ color:#101828; border-color:#fff; }

/* ===== Entrance animation (runs on load and on every slide change) ===== */
@keyframes heroFade   { from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes heroLine   { from{ transform:translateY(110%); } to{ transform:none; } }
@keyframes heroDraw   { from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes heroWidth  { from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes cardRise   { from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }

.hero-frame.play::before,
.hero-frame.play::after   { animation:heroDraw .7s cubic-bezier(.7,0,.2,1) both; }
.hero-frame.play .hero-kicker            { animation:heroFade .6s ease .15s both; }
.hero-frame.play h1 .line > span         { animation:heroLine .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-frame.play h1 .line:nth-child(1) > span{ animation-delay:.25s; }
.hero-frame.play h1 .line:nth-child(2) > span{ animation-delay:.38s; }
.hero-frame.play h1 em::after            { animation:heroWidth .6s cubic-bezier(.7,0,.2,1) .95s both; }
.hero-frame.play p                       { animation:heroFade .7s ease .55s both; }
.hero-frame.play .buttons                { animation:heroFade .7s ease .7s both; }

.hs-card{ animation:cardRise .8s cubic-bezier(.2,.8,.2,1) both; }
.hs-card:nth-child(1){ animation-delay:.6s; }
.hs-card:nth-child(2){ animation-delay:.72s; }
.hs-card:nth-child(3){ animation-delay:.84s; }
.hs-card:nth-child(4){ animation-delay:.96s; }

/* ===== Arrows ===== */
.arrows{
    position:absolute;
    right:max(20px, 4%);
    top:40%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:15;
}

.arrows button{
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.6);
    background:transparent;
    color:#fff;
    font-size:15px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:all .3s ease;
}

.arrows button.next{ background:#E7000B; border-color:#E7000B; }
.arrows button:hover{ background:#fff; border-color:#fff; color:#E7000B; }

/* ===== Dots (squares) ===== */
.dots{
    position:absolute;
    bottom:90px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:15;
}

.dots span{
    width:11px;
    height:11px;
    border:2px solid #fff;
    background:transparent;
    cursor:pointer;
    transition:all .3s ease;
}

.dots span.active{ background:#fff; box-shadow:inset 0 0 0 2px #101828; }

/* =========================
   HERO SERVICE CARDS
========================= */
.hero-services{
    position:relative;
    z-index:20;
    max-width:1320px;
    margin:-75px auto 0;
    padding:0 max(20px, 5%) 30px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:26px;
}

.hs-card{ position:relative; text-align:center; cursor:pointer; }
.hs-card:focus-visible{ outline:2px solid #E7000B; outline-offset:6px; border-radius:16px; }

/* tilted red card behind */
.hs-card::before{
    content:"";
    position:absolute;
    inset:-10px -10px 16px 10px;
    background:#E7000B;
    opacity:.6;
    border-radius:16px;
    transform:rotate(4deg);
    transform-origin:bottom left;
    transition:transform .4s ease, opacity .4s ease;
}

.hs-body{
    position:relative;
    background:#fff;
    border-radius:16px;
    padding:20px 18px 18px;
    box-shadow:0 20px 45px -15px rgba(16,24,40,.25);
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:transform .4s ease, background .4s ease;
}

.hs-body h3, .hs-body p, .hs-icon, .hs-link{ transition:color .4s ease, border-color .4s ease, background .4s ease; }

.hs-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    border:2px solid #E7000B;
    display:grid;
    place-items:center;
    margin-bottom:12px;
}

.hs-icon span{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#E7000B;
    color:#fff;
    font-size:20px;
    display:grid;
    place-items:center;
}

.hs-text{ margin-bottom:14px; }

.hs-body h3{
    font-size:17px;
    font-weight:600;
    color:#101828;
    margin-bottom:4px;
    line-height:1.3;
}

.hs-body p{
    font-size:13.5px;
    color:#4A5565;
    line-height:1.5;
}

.hs-link{
    margin-top:auto;
    width:36px;
    height:36px;
    font-size:13px;
    border-radius:50%;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    text-decoration:none;
    outline:2px dashed rgba(231,0,11,.45);
    outline-offset:3px;
    transition:background .3s ease, color .3s ease;
}

.hs-link i{ transform:rotate(-45deg); transition:transform .3s ease; }

/* featured (dark) card */
.hs-card.featured .hs-body{ background:#101828; }
.hs-card.featured h3{ color:#fff; }
.hs-card.featured p{ color:rgba(255,255,255,.8); }
.hs-card.featured .hs-icon{ border-color:#fff; }
.hs-card.featured .hs-link{ background:#fff; color:#E7000B; outline-color:rgba(255,255,255,.5); }
.hs-card.featured .hs-link i{ transform:none; }

/* hover */
.hs-card:hover .hs-body{ transform:translateY(-6px); }
.hs-card:hover::before{ transform:rotate(6deg); opacity:.85; }
.hs-card:hover .hs-link i{ transform:none; }

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1200px){
    .hero-services{ grid-template-columns:repeat(2, 1fr); gap:28px 26px; }
}

@media(max-width:992px){
    .hero-frame h1{ font-size:46px; letter-spacing:-1px; }
    .hero-kicker{ font-size:14px; }
    .hero-frame p{ font-size:16.5px; }
    .arrows{ top:auto; bottom:62px; transform:none; flex-direction:row; }
    .dots{ left:max(20px, 5%); transform:none; bottom:74px; }
    .hero-inner{ padding-bottom:110px; }
    .hero-services{ margin-top:-60px; }
}

@media(max-width:600px){
    .hero-inner{ padding:18px 16px 92px; }
    .hero-frame{ padding:18px 0 18px 22px; }
    .hero-frame::before, .hero-frame::after{ width:80px; border-width:4px; }
    .hero-kicker{ font-size:12px; letter-spacing:2px; gap:8px; }
    .hero-kicker::before{ width:22px; }
    .hero-frame h1{ font-size:29px; letter-spacing:-.6px; margin:10px 0 12px; }
    .hero-frame h1 em::after{ height:4px; }
    .hero-frame p{ font-size:15px; line-height:1.6; }
    .buttons{ margin-top:20px; gap:10px; }
    .btn{ padding:12px 20px; font-size:15px; }
    .btn.outline{ padding:10px 18px; }
    .arrows{ bottom:52px; right:16px; }
    .arrows button{ width:34px; height:34px; font-size:12px; }
    .dots{ bottom:63px; left:16px; }
    .dots span{ width:10px; height:10px; }
    .hero-services{ grid-template-columns:1fr 1fr; margin-top:-40px; gap:22px 18px; padding:0 22px 24px 16px; }
    .hs-body{ padding:16px 10px 14px; }
    .hs-icon{ width:50px; height:50px; margin-bottom:10px; }
    .hs-icon span{ width:40px; height:40px; font-size:16px; }
    .hs-text{ margin-bottom:10px; }
    .hs-body h3{ font-size:14px; }
    .hs-body p{ display:none; }
    .hs-link{ width:32px; height:32px; font-size:12px; }
}

/* ===== Compact hero cards: tablet ===== */
@media(min-width:601px) and (max-width:1200px){
    .hero-services{ grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:-48px; }
    .hs-card::before{ inset:-6px -6px 10px 6px; border-radius:12px; }
    .hs-body{ padding:14px 10px 12px; border-radius:12px; }
    .hs-icon{ width:46px; height:46px; margin-bottom:8px; }
    .hs-icon span{ width:36px; height:36px; font-size:15px; }
    .hs-text{ margin-bottom:8px; }
    .hs-body h3{ font-size:14px; margin-bottom:0; }
    .hs-body p{ display:none; }
    .hs-link{ width:28px; height:28px; font-size:11px; outline-offset:2px; }
}

/* small tablets: 2 per row but narrower */
@media(min-width:601px) and (max-width:767px){
    .hero-services{ grid-template-columns:repeat(2, 1fr); max-width:520px; gap:20px 18px; }
}

/* ===== Compact hero cards: mobile ===== */
@media(max-width:600px){
    .hero-services{ max-width:400px; gap:16px 14px; margin-top:-36px; padding:0 20px 20px 16px; }
    .hs-card::before{ inset:-5px -5px 8px 5px; border-radius:12px; }
    .hs-body{ padding:12px 8px 10px; border-radius:12px; }
    .hs-icon{ width:40px; height:40px; margin-bottom:6px; }
    .hs-icon span{ width:31px; height:31px; font-size:13px; }
    .hs-text{ margin-bottom:6px; }
    .hs-body h3{ font-size:12.5px; }
    .hs-link{ width:26px; height:26px; font-size:10px; outline-offset:2px; }
}

@media(prefers-reduced-motion:reduce){
    .slide.active{ animation:none; }
    .hs-body, .hs-card::before, .hs-link, .btn, .btn::before{ transition:none; }
    .hero-frame.play *, .hero-frame.play::before, .hero-frame.play::after, .hero-frame h1 em::after, .hs-card{ animation:none !important; }
}

/* =========================
   ABOUT SECTION (Get to know us)
========================= */

.about{
    position:relative;
    padding:110px max(20px, 5%);
    background:#fff;
    overflow:hidden;
}

/* faint dot grid in the top-right corner */
.about::before{
    content:"";
    position:absolute;
    top:40px;
    right:4%;
    width:220px;
    height:160px;
    background-image:radial-gradient(#E7000B 1.6px, transparent 1.6px);
    background-size:18px 18px;
    opacity:.18;
    pointer-events:none;
}

.about-container{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:80px;
    align-items:center;
}

/* ===== Image side ===== */
.about-image{
    position:relative;
    padding:0 0 34px 34px;
}

/* red block offset behind the photo */
.about-image::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:62%;
    height:72%;
    background:#E7000B;
    border-radius:18px;
}

/* navy outline offset on the top-right */
.about-image::after{
    content:"";
    position:absolute;
    top:-18px;
    right:-18px;
    width:45%;
    height:45%;
    border:3px solid #101828;
    border-radius:18px;
    opacity:.12;
}

.about-img-wrap{
    position:relative;
    z-index:1;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 60px -25px rgba(16,24,40,.45);
}

.about-img-wrap img{
    display:block;
    width:100%;
    aspect-ratio:4 / 3.4;
    object-fit:cover;
    transition:transform .8s ease;
}

.about-image:hover .about-img-wrap img{ transform:scale(1.06); }

/* floating badge */
.about-badge{
    position:absolute;
    z-index:2;
    right:-26px;
    bottom:56px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 22px 16px 16px;
    background:#101828;
    color:#fff;
    border-radius:14px;
    box-shadow:0 20px 40px -12px rgba(16,24,40,.55);
    animation:aboutFloat 4s ease-in-out infinite;
}

.about-badge-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#E7000B;
    display:grid;
    place-items:center;
    font-size:20px;
    flex-shrink:0;
}

.about-badge strong{
    display:block;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:19px;
    font-weight:700;
    line-height:1.2;
}

.about-badge span:last-child{
    font-size:13px;
    color:rgba(255,255,255,.75);
    line-height:1.4;
}

@keyframes aboutFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}

/* ===== Content side ===== */
.about-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.about-kicker::before{
    content:"";
    width:34px;
    height:2px;
    background:#E7000B;
}

.about-content h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin:16px 0 20px;
}

.about-content h2 span{ color:#E7000B; }

.about-desc{
    font-size:16.5px;
    line-height:1.75;
    color:#4A5565;
    max-width:560px;
}

/* features: 2 x 2 tiles */
.about-features{
    list-style:none;
    margin:30px 0 34px;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.about-features li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:#F9FAFB;
    border:1px solid #F3F4F6;
    border-radius:12px;
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    color:#101828;
    transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.af-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#FFE4E6;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:16px;
    flex-shrink:0;
    transition:background .3s ease, color .3s ease;
}

.about-features li:hover{
    background:#fff;
    border-color:#FFE4E6;
    transform:translateY(-3px);
    box-shadow:0 14px 30px -14px rgba(231,0,11,.35);
}

.about-features li:hover .af-icon{ background:#E7000B; color:#fff; }

/* actions */
.about-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
}

.about-call{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#101828;
    font-weight:600;
    font-size:16px;
}

.about-call span:last-child{ display:grid; line-height:1.3; }

.about-call small{
    font-size:13px;
    font-weight:400;
    color:#6B7280;
}

.about-call-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px dashed #E7000B;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:17px;
    transition:background .3s ease, color .3s ease, border-style .3s ease;
}

.about-call:hover .about-call-icon{ background:#E7000B; color:#fff; border-style:solid; }

/* ===== Scroll reveal ===== */
.about-image,
.about-kicker,
.about-content h2,
.about-desc,
.about-features li,
.about-actions{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.about-image{ transform:translateX(-40px); }

.about.show .about-image,
.about.show .about-kicker,
.about.show .about-content h2,
.about.show .about-desc,
.about.show .about-features li,
.about.show .about-actions{
    opacity:1;
    transform:none;
}

.about.show .about-kicker{ transition-delay:.15s; }
.about.show .about-content h2{ transition-delay:.25s; }
.about.show .about-desc{ transition-delay:.35s; }
.about.show .about-features li:nth-child(1){ transition-delay:.45s; }
.about.show .about-features li:nth-child(2){ transition-delay:.52s; }
.about.show .about-features li:nth-child(3){ transition-delay:.59s; }
.about.show .about-features li:nth-child(4){ transition-delay:.66s; }
.about.show .about-actions{ transition-delay:.75s; }

/* hover lift must not wait for the reveal delay */
.about.show .about-features li:hover{ transition-delay:0s; }

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1100px){
    .about-container{ gap:56px; }
    .about-content h2{ font-size:38px; }
    .about-badge{ right:-10px; }
}

@media(max-width:992px){
    .about{ padding:80px max(20px, 5%); }
    .about-container{ grid-template-columns:1fr; gap:56px; }
    .about-image{ max-width:620px; width:100%; margin:0 auto; }
    .about-content h2{ font-size:34px; }
}

@media(max-width:600px){
    .about{ padding:60px 20px; }
    .about::before{ display:none; }
    .about-image{ padding:0 0 20px 20px; }
    .about-image::after{ display:none; }
    .about-badge{ right:-6px; bottom:34px; padding:12px 16px 12px 12px; gap:10px; }
    .about-badge-icon{ width:40px; height:40px; font-size:16px; }
    .about-badge strong{ font-size:16px; }
    .about-badge span:last-child{ font-size:12px; }
    .about-kicker{ font-size:12px; letter-spacing:2px; gap:8px; }
    .about-kicker::before{ width:22px; }
    .about-content h2{ font-size:28px; letter-spacing:-.6px; margin:12px 0 14px; }
    .about-desc{ font-size:15px; line-height:1.7; }
    .about-features{ grid-template-columns:1fr; gap:10px; margin:24px 0 28px; }
    .about-features li{ padding:12px 14px; font-size:14.5px; }
    .about-actions{ gap:18px; }
    .about-actions .btn{ width:100%; justify-content:center; }
}

@media(prefers-reduced-motion:reduce){
    .about-badge{ animation:none; }
    .about-image, .about-kicker, .about-content h2, .about-desc, .about-features li, .about-actions{ transition:none; opacity:1; transform:none; }
}

/* =========================
   TRUSTED PARTNERS
========================= */

.partners{
    position:relative;
    padding:90px 0;
    background:#F9FAFB;
    overflow:hidden;
}

/* soft red glow behind the strip */
.partners::before{
    content:"";
    position:absolute;
    left:50%;
    top:60%;
    width:900px;
    height:300px;
    transform:translate(-50%,-50%);
    background:radial-gradient(closest-side, rgba(231,0,11,.08), transparent);
    pointer-events:none;
}

.partners-inner{ position:relative; }

.partners-header{
    max-width:640px;
    margin:0 auto 48px;
    padding:0 20px;
    text-align:center;
}

.partners-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.partners-kicker::before,
.partners-kicker::after{
    content:"";
    width:28px;
    height:2px;
    background:#E7000B;
}

.partners-header h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:40px;
    line-height:1.15;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin:14px 0 12px;
}

.partners-header h2 span{ color:#E7000B; }

.partners-header p{
    font-size:16px;
    line-height:1.7;
    color:#4A5565;
}

/* ===== Logo strip ===== */
.partners-slider{
    position:relative;
    overflow:hidden;
    padding:14px 0 24px;
    /* fade logos in/out at both edges */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.partners-track{
    display:flex;
    gap:28px;
    width:max-content;
    animation:partnersScroll 32s linear infinite;
}

.partners-slider:hover .partners-track{ animation-play-state:paused; }

@keyframes partnersScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-50% - 14px)); }
}

.partner-card{
    position:relative;
    width:220px;
    height:130px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    padding:18px 26px;
    background:#fff;
    border:1px solid #F3F4F6;
    border-radius:16px;
    box-shadow:0 10px 30px -18px rgba(16,24,40,.25);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* red line that grows along the bottom on hover */
.partner-card::after{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    bottom:-1px;
    height:3px;
    border-radius:3px;
    background:#E7000B;
    transform:scaleX(0);
    transition:transform .35s ease;
}

.partner-card img{
    max-width:100%;
    max-height:94px;
    object-fit:contain;
    filter:grayscale(1);
    opacity:.65;
    mix-blend-mode:multiply;   /* hides the white box around jpg logos */
    transition:filter .35s ease, opacity .35s ease, transform .35s ease;
}

.partner-card:hover{
    transform:translateY(-6px);
    border-color:#FFE4E6;
    box-shadow:0 22px 40px -18px rgba(231,0,11,.35);
}

.partner-card:hover::after{ transform:scaleX(1); }

.partner-card:hover img{
    filter:none;
    opacity:1;
    transform:scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){
    .partners{ padding:70px 0; }
    .partners-header h2{ font-size:32px; }
}

@media(max-width:600px){
    .partners{ padding:56px 0; }
    .partners-header{ margin-bottom:32px; }
    .partners-kicker{ font-size:12px; letter-spacing:2px; gap:8px; }
    .partners-kicker::before, .partners-kicker::after{ width:18px; }
    .partners-header h2{ font-size:26px; letter-spacing:-.5px; }
    .partners-header p{ font-size:14.5px; }
    .partners-track{ gap:16px; animation-duration:24s; }
    @keyframes partnersScroll{ to{ transform:translateX(calc(-50% - 8px)); } }
    .partner-card{ width:160px; height:100px; padding:14px 18px; border-radius:12px; }
    .partner-card img{ max-height:72px; filter:none; opacity:1; }   /* full colour on touch screens */
}

@media(prefers-reduced-motion:reduce){
    .partners-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
    .partner-card[aria-hidden="true"]{ display:none; }
}

/* =========================
   COMPANY OVERVIEW (dark band)
========================= */

.overview{
    position:relative;
    padding:110px max(20px, 5%);
    background:#101828;
    color:#fff;
    overflow:hidden;
}

/* faint grid + red glow */
.overview::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
            mask-image:radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
    pointer-events:none;
}

.overview::after{
    content:"";
    position:absolute;
    right:-200px;
    bottom:-200px;
    width:600px;
    height:600px;
    background:radial-gradient(closest-side, rgba(231,0,11,.22), transparent);
    pointer-events:none;
}

.overview-container{
    position:relative;
    z-index:1;
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;
    align-items:center;
}

/* ===== Content ===== */
.overview-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#FF6467;
}

.overview-tag::before{
    content:"";
    width:34px;
    height:2px;
    background:#E7000B;
}

.overview-content h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:42px;
    line-height:1.18;
    font-weight:600;
    letter-spacing:-1px;
    color:#fff;
    margin:16px 0 22px;
}

/* "enabler" with a red marker behind it */
.ov-hl{
    position:relative;
    display:inline-block;
    color:#fff;
    z-index:0;
}

.ov-hl::before{
    content:"";
    position:absolute;
    left:-6px;
    right:-6px;
    bottom:4px;
    height:42%;
    background:#E7000B;
    border-radius:4px;
    z-index:-1;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .7s cubic-bezier(.7,0,.2,1) .7s;
}

.overview.show .ov-hl::before{ transform:scaleX(1); }

.overview-content > p{
    font-size:17px;
    line-height:1.75;
    font-weight:300;
    color:rgba(255,255,255,.75);
    max-width:580px;
}

/* three values */
.ov-values{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin:36px 0 32px;
}

.ov-value{
    padding:22px 18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    transition:background .35s ease, border-color .35s ease, transform .35s ease;
}

.ov-value:hover{
    background:rgba(231,0,11,.10);
    border-color:rgba(231,0,11,.45);
    transform:translateY(-5px);
}

.ov-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:18px;
    margin-bottom:14px;
    box-shadow:0 10px 24px -8px rgba(231,0,11,.7);
}

.ov-value h4{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
}

.ov-value p{
    font-size:13.5px;
    line-height:1.55;
    color:rgba(255,255,255,.65);
}

/* who we serve */
.ov-serve{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 18px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.1);
}

.ov-serve-label{
    font-size:14px;
    color:rgba(255,255,255,.6);
}

.ov-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ov-chips span{
    padding:6px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    font-size:13px;
    font-weight:500;
    color:#fff;
    transition:background .3s ease, border-color .3s ease;
}

.ov-chips span:hover{ background:#E7000B; border-color:#E7000B; }

/* ===== Image ===== */
.overview-image{
    position:relative;
    padding:26px 26px 0 0;
}

/* red corner frame top-right */
.overview-image::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:55%;
    height:55%;
    border-top:6px solid #E7000B;
    border-right:6px solid #E7000B;
    border-radius:0 18px 0 0;
}

.ov-img-wrap{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 40px 70px -30px rgba(0,0,0,.8);
}

.ov-img-wrap img{
    display:block;
    width:100%;
    aspect-ratio:4 / 4.6;
    object-fit:cover;
    transition:transform .8s ease;
}

.overview-image:hover .ov-img-wrap img{ transform:scale(1.06); }

/* quote card */
.ov-quote{
    position:absolute;
    left:-34px;
    bottom:40px;
    max-width:240px;
    padding:20px 22px;
    background:#E7000B;
    border-radius:14px;
    box-shadow:0 24px 40px -14px rgba(231,0,11,.6);
}

.ov-quote i{
    font-size:22px;
    opacity:.5;
}

.ov-quote p{
    margin-top:6px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:20px;
    font-weight:600;
    line-height:1.3;
}

/* ===== Scroll reveal ===== */
.overview-tag,
.overview-content h2,
.overview-content > p,
.ov-value,
.ov-serve,
.overview-image{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), background .35s ease, border-color .35s ease;
}

.overview-image{ transform:translateX(40px); }

.overview.show .overview-tag,
.overview.show .overview-content h2,
.overview.show .overview-content > p,
.overview.show .ov-value,
.overview.show .ov-serve,
.overview.show .overview-image{
    opacity:1;
    transform:none;
}

.overview.show .overview-content h2{ transition-delay:.1s; }
.overview.show .overview-content > p{ transition-delay:.2s; }
.overview.show .ov-value:nth-child(1){ transition-delay:.3s; }
.overview.show .ov-value:nth-child(2){ transition-delay:.4s; }
.overview.show .ov-value:nth-child(3){ transition-delay:.5s; }
.overview.show .ov-serve{ transition-delay:.6s; }
.overview.show .overview-image{ transition-delay:.15s; }
.overview.show .ov-value:hover{ transition-delay:0s; transform:translateY(-5px); }

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1100px){
    .overview-container{ gap:56px; }
    .overview-content h2{ font-size:36px; }
    .ov-quote{ left:-14px; }
}

@media(max-width:992px){
    .overview{ padding:80px max(20px, 5%); }
    .overview-container{ grid-template-columns:1fr; gap:56px; }
    .overview-image{ max-width:560px; width:100%; margin:0 auto; }
    .ov-img-wrap img{ aspect-ratio:4 / 3.4; }
}

@media(max-width:600px){
    .overview{ padding:60px 20px; }
    .overview-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .overview-tag::before{ width:22px; }
    .overview-content h2{ font-size:27px; letter-spacing:-.5px; margin:12px 0 16px; }
    .overview-content > p{ font-size:15px; line-height:1.7; }
    .ov-values{ grid-template-columns:1fr; gap:10px; margin:28px 0 26px; }
    .ov-value{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:center; padding:14px; }
    .ov-icon{ grid-row:span 2; width:44px; height:44px; margin:0; font-size:16px; }
    .ov-value h4{ font-size:16px; margin:0; }
    .overview-image{ padding:16px 16px 0 0; }
    .overview-image::before{ border-width:4px; }
    .ov-quote{ left:-6px; bottom:22px; padding:14px 16px; max-width:190px; }
    .ov-quote p{ font-size:16px; }
}

@media(prefers-reduced-motion:reduce){
    .overview-tag, .overview-content h2, .overview-content > p, .ov-value, .ov-serve, .overview-image{ opacity:1; transform:none; transition:none; }
    .ov-hl::before{ transform:none; transition:none; }
}

/* =========================
   PROJECTS SECTION
========================= */

.projects{
    padding:110px max(20px, 5%);
    background:#fff;
}

.projects-inner{
    max-width:1240px;
    margin:0 auto;
}

/* ===== Header row ===== */
.projects-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px 80px;
    align-items:end;
    margin-bottom:50px;
}

.projects-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.projects-tag::before{
    content:"";
    width:34px;
    height:2px;
    background:#E7000B;
}

.projects-title h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin-top:16px;
}

.projects-title h2 span{ color:#E7000B; }

.projects-intro p{
    font-size:16.5px;
    line-height:1.75;
    color:#4A5565;
    margin-bottom:22px;
}

/* ===== Bento grid ===== */
.projects-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr;
    grid-template-rows:280px 280px;
    grid-template-areas:
        "a b c"
        "a d d";
    gap:22px;
}

.pc-a{ grid-area:a; }
.pc-b{ grid-area:b; }
.pc-c{ grid-area:c; }
.pc-d{ grid-area:d; }

.project-card{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:18px;
    background:#101828;
    text-decoration:none;
    color:#fff;
    isolation:isolate;
    box-shadow:0 20px 40px -24px rgba(16,24,40,.5);
}

.project-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .9s cubic-bezier(.2,.8,.2,1);
    z-index:-2;
}

/* dark fade from the bottom */
.project-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(16,24,40,.92) 100%);
    z-index:-1;
    transition:background .5s ease;
}

/* red wash on hover */
.project-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 20%, rgba(231,0,11,.85) 100%);
    opacity:0;
    z-index:-1;
    transition:opacity .5s ease;
}

.pc-overlay{
    position:absolute;
    left:24px;
    right:80px;
    bottom:22px;
    transform:translateY(8px);
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.pc-cat{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    font-size:12px;
    font-weight:500;
    letter-spacing:.5px;
    margin-bottom:10px;
}

.pc-overlay h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:22px;
    font-weight:600;
    line-height:1.2;
}

.pc-a .pc-overlay h3{ font-size:28px; }

.pc-arrow{
    position:absolute;
    right:22px;
    bottom:22px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:15px;
    transform:scale(.6) rotate(-45deg);
    opacity:0;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.project-card:hover img{ transform:scale(1.08); }
.project-card:hover::after{ opacity:1; }
.project-card:hover .pc-overlay{ transform:none; }
.project-card:hover .pc-arrow{ opacity:1; transform:none; }

.project-card:focus-visible{ outline:3px solid #E7000B; outline-offset:4px; }

/* =========================
   ANIMATION
========================= */
.projects-head,
.project-card{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}

.projects.show .projects-head,
.projects.show .project-card{
    opacity:1;
    transform:none;
}

.projects.show .pc-a{ transition-delay:.15s; }
.projects.show .pc-b{ transition-delay:.25s; }
.projects.show .pc-c{ transition-delay:.35s; }
.projects.show .pc-d{ transition-delay:.45s; }

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1100px){
    .projects-title h2{ font-size:38px; }
    .projects-grid{ grid-template-rows:240px 240px; }
}

@media(max-width:992px){
    .projects{ padding:80px max(20px, 5%); }
    .projects-head{ grid-template-columns:1fr; gap:18px; margin-bottom:36px; }
    .projects-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:300px 220px 220px;
        grid-template-areas:
            "a b"
            "a c"
            "d d";
    }
}

@media(max-width:600px){
    .projects{ padding:60px 20px; }
    .projects-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .projects-tag::before{ width:22px; }
    .projects-title h2{ font-size:28px; letter-spacing:-.5px; margin-top:12px; }
    .projects-intro p{ font-size:15px; line-height:1.7; }
    .projects-intro .btn{ width:100%; justify-content:center; }
    .projects-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:240px 170px 170px;
        grid-template-areas:
            "a a"
            "b c"
            "d d";
        gap:12px;
    }
    .project-card{ border-radius:14px; }
    .pc-overlay{ left:14px; right:14px; bottom:14px; transform:none; }
    .pc-cat{ font-size:11px; padding:4px 10px; margin-bottom:6px; }
    .pc-overlay h3, .pc-a .pc-overlay h3{ font-size:16px; }
    .pc-a .pc-overlay h3{ font-size:20px; }
    .pc-arrow{ display:none; }
}

@media(prefers-reduced-motion:reduce){
    .projects-head, .project-card{ opacity:1; transform:none; transition:none; }
    .project-card img, .pc-overlay, .pc-arrow{ transition:none; }
}

/* =========================
   HOW WE WORK (process)
========================= */

/* kept: also styles the "+" icon in the About page accordion */
.icon{
font-size:30px;
color:#E7000B;
margin-top:10px;
}

.process-section{
    position:relative;
    padding:110px max(20px, 5%);
    background:#F9FAFB;
    overflow:hidden;
}

.process-inner{
    max-width:1240px;
    margin:0 auto;
}

.process-header{
    max-width:640px;
    margin:0 auto 64px;
    text-align:center;
}

.process-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.process-tag::before,
.process-tag::after{
    content:"";
    width:28px;
    height:2px;
    background:#E7000B;
}

.process-header h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin:14px 0 12px;
}

.process-header h2 span{ color:#E7000B; }

.process-header p{
    font-size:16.5px;
    line-height:1.7;
    color:#4A5565;
}

/* ===== Steps (circles) ===== */
.pw-steps{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
}

.pw-step{
    flex:0 1 320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.pw-circle{
    position:relative;
    width:250px;
    height:250px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 30px 50px -28px rgba(16,24,40,.45);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
    transition:background .45s ease, transform .45s ease, box-shadow .45s ease;
}

/* dashed outer ring that slowly rotates */
.pw-ring{
    position:absolute;
    inset:-16px;
    border-radius:50%;
    border:2px dashed rgba(231,0,11,.45);
    animation:pwSpin 18s linear infinite;
}

/* small red dot riding the ring */
.pw-ring::after{
    content:"";
    position:absolute;
    top:50%;
    left:-7px;
    width:12px;
    height:12px;
    margin-top:-6px;
    border-radius:50%;
    background:#E7000B;
    box-shadow:0 0 0 5px rgba(231,0,11,.18);
}

.pw-step:nth-of-type(2) .pw-ring{ animation-direction:reverse; }

@keyframes pwSpin{ to{ transform:rotate(360deg); } }

/* number badge on top */
.pw-num{
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    background:#E7000B;
    color:#fff;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:17px;
    font-weight:700;
    display:grid;
    place-items:center;
    border:4px solid #F9FAFB;
    box-shadow:0 10px 20px -6px rgba(231,0,11,.6);
    z-index:2;
}

.pw-icon{
    width:66px;
    height:66px;
    border-radius:50%;
    background:#FFE4E6;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:26px;
    margin-bottom:14px;
    transition:background .45s ease, color .45s ease, transform .45s ease;
}

.pw-circle h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:19px;
    font-weight:600;
    line-height:1.25;
    color:#101828;
    max-width:170px;
    transition:color .45s ease;
}

.pw-step > p{
    margin-top:34px;
    max-width:280px;
    font-size:15px;
    line-height:1.7;
    color:#4A5565;
}

/* arrows between circles */
.pw-arrow{
    flex:0 0 auto;
    margin-top:105px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:15px;
    box-shadow:0 10px 24px -10px rgba(16,24,40,.35);
    animation:pwNudge 1.6s ease-in-out infinite;
}

@keyframes pwNudge{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(6px); }
}

/* hover: circle turns navy */
.pw-step:hover .pw-circle{
    background:#101828;
    transform:translateY(-8px);
    box-shadow:0 40px 60px -28px rgba(16,24,40,.7);
}
.pw-step:hover .pw-icon{ background:#E7000B; color:#fff; transform:rotate(-10deg) scale(1.05); }
.pw-step:hover .pw-circle h3{ color:#fff; }
.pw-step:hover .pw-ring{ border-color:#E7000B; animation-duration:6s; }

/* ===== Scroll reveal ===== */
.process-header,
.pw-step,
.pw-arrow{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.pw-step .pw-circle{ transform:scale(.7); transition:transform .8s cubic-bezier(.2,.9,.3,1.3), background .45s ease, box-shadow .45s ease; }

.process-section.show .process-header,
.process-section.show .pw-step,
.process-section.show .pw-arrow{ opacity:1; transform:none; }
.process-section.show .pw-step .pw-circle{ transform:none; }
.process-section.show .pw-step:hover .pw-circle{ transform:translateY(-8px); }

.process-section.show .pw-step:nth-of-type(1),
.process-section.show .pw-step:nth-of-type(1) .pw-circle{ transition-delay:.15s; }
.process-section.show .pw-arrow:nth-of-type(2){ transition-delay:.45s; }
.process-section.show .pw-step:nth-of-type(3),
.process-section.show .pw-step:nth-of-type(3) .pw-circle{ transition-delay:.6s; }
.process-section.show .pw-arrow:nth-of-type(4){ transition-delay:.9s; }
.process-section.show .pw-step:nth-of-type(5),
.process-section.show .pw-step:nth-of-type(5) .pw-circle{ transition-delay:1.05s; }
.process-section.show .pw-step:hover .pw-circle{ transition-delay:0s; }

/* ===== Responsive ===== */
@media(max-width:1100px){
    .pw-circle{ width:220px; height:220px; padding:24px; }
    .pw-arrow{ margin-top:90px; }
    .pw-circle h3{ font-size:17px; }
}

@media(max-width:992px){
    .process-section{ padding:80px max(20px, 5%); }
    .process-header{ margin-bottom:56px; }
    .process-header h2{ font-size:36px; }
    .pw-steps{ flex-direction:column; align-items:center; gap:14px; }
    .pw-step{ flex:none; }
    .pw-step > p{ margin-top:26px; }
    .pw-arrow{ margin:6px 0 22px; transform:rotate(90deg); animation:none; }
    .process-section.show .pw-arrow{ transform:rotate(90deg); }
}

@media(max-width:600px){
    .process-section{ padding:60px 20px; }
    .process-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .process-tag::before, .process-tag::after{ width:18px; }
    .process-header{ margin-bottom:48px; }
    .process-header h2{ font-size:28px; letter-spacing:-.5px; }
    .process-header p{ font-size:15px; }
    .pw-circle{ width:200px; height:200px; padding:22px; }
    .pw-ring{ inset:-12px; }
    .pw-num{ width:42px; height:42px; font-size:15px; top:-18px; }
    .pw-icon{ width:56px; height:56px; font-size:22px; margin-bottom:10px; }
    .pw-circle h3{ font-size:16px; }
    .pw-step > p{ font-size:14.5px; margin-top:22px; }
    .pw-arrow{ width:38px; height:38px; font-size:13px; }
}

@media(prefers-reduced-motion:reduce){
    .process-header, .pw-step, .pw-arrow, .pw-step .pw-circle{ opacity:1; transform:none; transition:none; }
    .pw-ring, .pw-arrow{ animation:none; }
}

/* =========================
   TESTIMONIALS
========================= */
.testimonial-section{
    position:relative;
    padding:110px 0;
    background:#101828;
    color:#fff;
    overflow:hidden;
}

/* big faint quote mark + red glow */
.testimonial-section::before{
    content:"\201C";
    position:absolute;
    top:-60px;
    left:4%;
    font-family:Georgia, serif;
    font-size:420px;
    line-height:1;
    color:rgba(255,255,255,.04);
    pointer-events:none;
}

.testimonial-section::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-260px;
    width:900px;
    height:500px;
    transform:translateX(-50%);
    background:radial-gradient(closest-side, rgba(231,0,11,.22), transparent);
    pointer-events:none;
}

.t-inner{
    position:relative;
    z-index:1;
    max-width:1240px;
    margin:0 auto;
    padding:0 max(20px, 5%);
}

.testimonial-header{
    max-width:760px;
    margin:0 auto 56px;
    text-align:center;
}

.t-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#FF6467;
}

.t-tag::before,
.t-tag::after{
    content:"";
    width:28px;
    height:2px;
    background:#E7000B;
}

.testimonial-header h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    margin:14px 0 12px;
    text-wrap:balance;
}

.testimonial-header h2 span{ color:#E7000B; }

.testimonial-header p{
    font-size:16.5px;
    line-height:1.7;
    color:rgba(255,255,255,.65);
}

/* ===== Slider ===== */
.testimonial-slider{
    position:relative;
    z-index:1;
    overflow:hidden;
    padding:16px 0 30px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.testimonial-track{
    display:flex;
    gap:28px;
    width:max-content;
    animation:tScroll 40s linear infinite;
}

.testimonial-slider:hover .testimonial-track{ animation-play-state:paused; }

@keyframes tScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-50% - 14px)); }
}

/* ===== Card ===== */
.t-card{
    position:relative;
    width:400px;
    margin:0;
    padding:30px 30px 26px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    transition:background .4s ease, border-color .4s ease, transform .4s ease;
}

.t-card:hover{
    background:#fff;
    border-color:#fff;
    transform:translateY(-8px);
}

.t-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.t-quote{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#E7000B;
    display:grid;
    place-items:center;
    font-size:20px;
    box-shadow:0 12px 24px -10px rgba(231,0,11,.8);
}

.t-stars{
    display:flex;
    gap:4px;
    color:#FDC700;
    font-size:14px;
}

.t-card blockquote{
    margin:0 0 24px;
    font-size:16px;
    line-height:1.75;
    color:rgba(255,255,255,.82);
    flex:1;
    transition:color .4s ease;
}

.t-user{
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
    transition:border-color .4s ease;
}

.t-avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    background:linear-gradient(135deg, #E7000B, #B90009);
    display:grid;
    place-items:center;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:17px;
    font-weight:700;
    color:#fff;
    border:3px solid rgba(255,255,255,.15);
    flex-shrink:0;
}

.t-user span:last-child{
    display:grid;
    font-size:13.5px;
    color:rgba(255,255,255,.6);
    line-height:1.4;
    transition:color .4s ease;
}

.t-user strong{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:17px;
    font-weight:600;
    color:#fff;
    transition:color .4s ease;
}

/* hover: white card, dark text */
.t-card:hover blockquote{ color:#364153; }
.t-card:hover .t-user{ border-color:#F3F4F6; }
.t-card:hover .t-user strong{ color:#101828; }
.t-card:hover .t-user span:last-child{ color:#6B7280; }
.t-card:hover .t-avatar{ border-color:#FFE4E6; }

/* ===== Responsive ===== */
@media(max-width:992px){
    .testimonial-section{ padding:80px 0; }
    .testimonial-header h2{ font-size:36px; }
    .testimonial-section::before{ font-size:300px; }
}

@media(max-width:600px){
    .testimonial-section{ padding:60px 0; }
    .testimonial-header{ margin-bottom:36px; }
    .t-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .t-tag::before, .t-tag::after{ width:18px; }
    .testimonial-header h2{ font-size:28px; letter-spacing:-.5px; }
    .testimonial-header p{ font-size:15px; }
    .testimonial-track{ gap:16px; animation-duration:30s; }
    @keyframes tScroll{ to{ transform:translateX(calc(-50% - 8px)); } }
    .t-card{ width:290px; padding:22px 20px 20px; border-radius:16px; }
    .t-quote{ width:44px; height:44px; font-size:17px; border-radius:12px; }
    .t-card blockquote{ font-size:14.5px; }
    .t-avatar{ width:44px; height:44px; font-size:15px; }
    .t-user strong{ font-size:15.5px; }
}

@media(prefers-reduced-motion:reduce){
    .testimonial-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; padding:0 20px; }
    .t-card[aria-hidden="true"]{ display:none; }
}

/* =========================
   PRICING / PACKAGES
========================= */
.pricing{
    position:relative;
    padding:110px max(20px, 5%);
    background:#fff;
    overflow:hidden;
}

.pricing::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:420px;
    background:linear-gradient(180deg, #F9FAFB, #fff);
    pointer-events:none;
}

.pricing-inner{
    position:relative;
    max-width:1240px;
    margin:0 auto;
}

.pricing-header{
    max-width:640px;
    margin:0 auto 64px;
    text-align:center;
}

.pricing-sub{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.pricing-sub::before,
.pricing-sub::after{
    content:"";
    width:28px;
    height:2px;
    background:#E7000B;
}

.pricing-header h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin:14px 0 12px;
}

.pricing-header h2 span{ color:#E7000B; }

.pricing-header p{
    font-size:16.5px;
    line-height:1.7;
    color:#4A5565;
}

/* ===== Grid ===== */
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    align-items:stretch;
}

.pricing-card{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:34px 30px 30px;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:22px;
    box-shadow:0 24px 48px -32px rgba(16,24,40,.35);
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

/* red bar that slides in at the top on hover */
.pricing-card::before{
    content:"";
    position:absolute;
    top:-1px;
    left:30px;
    right:30px;
    height:4px;
    border-radius:0 0 4px 4px;
    background:#E7000B;
    transform:scaleX(0);
    transition:transform .4s ease;
}

.pricing-card:hover{
    transform:translateY(-8px);
    border-color:#FFE4E6;
    box-shadow:0 36px 60px -30px rgba(231,0,11,.35);
}

.pricing-card:hover::before{ transform:scaleX(1); }

/* ===== Head ===== */
.card-head{
    padding-bottom:24px;
    margin-bottom:24px;
    border-bottom:1px dashed #E5E7EB;
}

.plan-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#FFE4E6;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:22px;
    margin-bottom:20px;
}

.card-head h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:28px;
    font-weight:700;
    letter-spacing:-.5px;
    color:#101828;
}

.card-head h3 span{
    font-weight:500;
    color:#6B7280;
    font-size:.7em;
    letter-spacing:0;
}

.card-head p{
    margin-top:6px;
    font-size:15px;
    line-height:1.55;
    color:#E7000B;
}

.plan-price{
    margin-top:18px;
    font-size:14px;
    color:#6B7280;
}

.plan-price strong{
    display:block;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:24px;
    font-weight:700;
    color:#101828;
}

.plan-inc{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    padding:7px 14px;
    border-radius:999px;
    background:#FFE4E6;
    color:#E7000B;
    font-size:13px;
    font-weight:600;
}

/* ===== Features ===== */
.plan-features{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-bottom:28px;
}

.feature h4{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;
    color:#101828;
    margin-bottom:10px;
}

.feature ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:9px;
}

.feature li{
    position:relative;
    padding-left:28px;
    font-size:14.5px;
    line-height:1.5;
    color:#4A5565;
}

.feature li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#E7000B;
    color:#fff;
    font-size:9px;
    display:grid;
    place-items:center;
}

/* ===== Button ===== */
.pricing-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 20px;
    border-radius:12px;
    background:#E7000B;
    border:2px solid #E7000B;
    color:#fff;
    font-family:inherit;
    font-size:15.5px;
    font-weight:600;
    text-decoration:none;
    transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.pricing-btn i{ font-size:13px; transition:transform .3s ease; }
.pricing-btn:hover{ background:#B90009; border-color:#B90009; box-shadow:0 14px 28px -12px rgba(231,0,11,.7); }
.pricing-btn:hover i{ transform:translateX(4px); }



/* ===== Featured (Premium) card: original light pink-blue colours ===== */
.pricing-card.premium{
    background:linear-gradient(135deg, #FEF2F2, #EFF6FF);
    border-color:#FFE2E2;
    transform:translateY(-16px);
    box-shadow:0 36px 60px -30px rgba(231,0,11,.35);
}

.pricing-card.premium:hover{ transform:translateY(-24px); }

.pricing-card.premium .plan-icon{ background:#E7000B; color:#fff; }
.pricing-card.premium .card-head{ border-color:#FFE2E2; }

.badge{
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    padding:7px 18px;
    border-radius:999px;
    background:#E7000B;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    white-space:nowrap;
    box-shadow:0 10px 20px -6px rgba(231,0,11,.6);
    z-index:2;
}

/* ===== Scroll reveal ===== */
.pricing-header,
.pricing-card{
    opacity:0;
    translate:0 40px;
    transition:opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1), transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.pricing.show .pricing-header,
.pricing.show .pricing-card{ opacity:1; translate:0 0; }
.pricing.show .pricing-card:nth-child(2){ transition-delay:.15s, .15s, 0s, 0s, 0s; }
.pricing.show .pricing-card:nth-child(3){ transition-delay:.3s, .3s, 0s, 0s, 0s; }

/* ===== Responsive ===== */
@media(max-width:1100px){
    .pricing-grid{ gap:20px; }
    .pricing-card{ padding:30px 22px 24px; }
    .pricing-header h2{ font-size:38px; }
}

@media(max-width:992px){
    .pricing{ padding:80px max(20px, 5%); }
    .pricing-grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; gap:40px; }
    .pricing-card.premium{ transform:none; }
    .pricing-card.premium:hover{ transform:translateY(-8px); }
}

@media(max-width:600px){
    .pricing{ padding:60px 20px; }
    .pricing-header{ margin-bottom:48px; }
    .pricing-sub{ font-size:12px; letter-spacing:2px; gap:8px; }
    .pricing-sub::before, .pricing-sub::after{ width:18px; }
    .pricing-header h2{ font-size:28px; letter-spacing:-.5px; }
    .pricing-header p{ font-size:15px; }
    .pricing-card{ padding:28px 20px 22px; border-radius:18px; }
    .card-head h3{ font-size:24px; }
    .plan-price strong{ font-size:21px; }
    .feature li{ font-size:14px; }
}

@media(prefers-reduced-motion:reduce){
    .pricing-header, .pricing-card{ opacity:1; translate:none; transition:none; }
}

/* =========================
   CONTACT CTA
========================= */
.contact-cta{
    position:relative;
    padding:90px max(20px, 5%);
    background:#F9FAFB;
    overflow:hidden;
}

/* soft red shapes in the corners */
.contact-cta::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(231,0,11,.10), transparent);
    pointer-events:none;
}

.cc-inner{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:48px;
    align-items:center;
}

.cc-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.cc-tag::before{ content:""; width:34px; height:2px; background:#E7000B; }

.cc-info h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:42px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin:14px 0 14px;
}

.cc-info h2 span{ color:#E7000B; }

.cc-info > p{
    font-size:16px;
    line-height:1.7;
    color:#4A5565;
    max-width:480px;
}

/* 2 x 2 contact tiles */
.cc-tiles{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:30px;
}

.cc-tile{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    background:#fff;
    border:1px solid #F3F4F6;
    border-radius:14px;
    text-decoration:none;
    color:#101828;
    box-shadow:0 12px 24px -20px rgba(16,24,40,.4);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    min-width:0;
}

a.cc-tile:hover{
    transform:translateY(-4px);
    border-color:#FFE4E6;
    box-shadow:0 18px 30px -18px rgba(231,0,11,.35);
}

.cc-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:16px;
    flex-shrink:0;
}

.cc-tile > span:last-child{
    display:grid;
    min-width:0;
    font-size:14.5px;
    font-weight:600;
    line-height:1.35;
    overflow-wrap:break-word;
}

.cc-tile small{
    font-size:12px;
    font-weight:400;
    color:#6B7280;
}

/* form card */
.cc-form{
    position:relative;
    padding:38px 36px;
    background:#fff;
    border-radius:22px;
    border-top:5px solid #E7000B;
    box-shadow:0 30px 60px -30px rgba(16,24,40,.4);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.cc-form h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:24px;
    font-weight:700;
    color:#101828;
}

.cc-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.cc-field{ display:grid; gap:6px; min-width:0; }

.cc-field label{
    font-size:13px;
    font-weight:500;
    color:#364153;
}

.cc-field input,
.cc-field select,
.cc-field textarea{
    width:100%;
    padding:12px 15px;
    border:1.5px solid #E5E7EB;
    border-radius:10px;
    background:#F9FAFB;
    font-family:inherit;
    font-size:15px;
    color:#101828;
    transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.cc-field textarea{ resize:vertical; min-height:110px; }

.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus{
    outline:none;
    border-color:#E7000B;
    background:#fff;
    box-shadow:0 0 0 4px rgba(231,0,11,.08);
}

.cc-field.error input,
.cc-field.error textarea{ border-color:#E7000B; background:#FEF2F2; }

.cc-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
}

.cc-submit{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    border:none;
    border-radius:10px;
    background:#E7000B;
    color:#fff;
    font-family:inherit;
    font-size:15.5px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 12px 24px -12px rgba(231,0,11,.7);
    transition:background .3s ease, transform .3s ease;
}

.cc-submit i{ transition:transform .3s ease; }
.cc-submit:hover{ background:#B90009; transform:translateY(-2px); }
.cc-submit:hover i{ transform:translate(3px,-2px); }

.form-note{ font-size:13.5px; margin:0; }
.form-note.ok{ color:#16A34A; }
.form-note.err{ color:#E7000B; }

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* =========================
   FOOTER
========================= */
.footer{
    position:relative;
    background:#101828;
    color:rgba(255,255,255,.7);
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, #E7000B 0 35%, #3E4C69 35% 100%);
}

.footer-inner{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    padding:70px max(20px, 5%) 0;
}

.footer-container{
    display:grid;
    grid-template-columns:1.3fr .85fr .85fr 1.45fr 1.3fr;
    gap:36px;
}

/* brand name in text, no logo image */
.footer-brand{
    display:inline-block;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.5px;
    white-space:nowrap;
    color:#fff;
    text-decoration:none;
    line-height:1;
}

.footer-brand span{ color:#E7000B; }

.footer-text{
    margin:18px 0 22px;
    font-size:14.5px;
    line-height:1.75;
    max-width:300px;
}

.footer-col h3{
    position:relative;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:18px;
    font-weight:600;
    color:#fff;
    margin-bottom:22px;
    padding-bottom:10px;
}

.footer-col h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:30px;
    height:3px;
    border-radius:3px;
    background:#E7000B;
}

.footer-links{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:11px;
}

.footer-links a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.7);
    text-decoration:none;
    font-size:14.5px;
    transition:color .25s ease, transform .25s ease;
}

.footer-links a::before{
    content:"\f105";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:11px;
    color:#E7000B;
}

.footer-links a:hover{ color:#fff; transform:translateX(4px); }

.footer-contact{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:14px;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:14.5px;
    line-height:1.5;
}

.footer-contact i{
    width:30px;
    height:30px;
    border-radius:8px;
    background:rgba(255,255,255,.07);
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:12px;
    flex-shrink:0;
}

.footer-contact span,
.footer-contact a{ padding-top:5px; }

.footer-contact a{
    color:rgba(255,255,255,.7);
    text-decoration:none;
    overflow-wrap:break-word;
}

.footer-contact a:hover{ color:#fff; }

.socials{ display:flex; gap:10px; }

.socials a{
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:14px;
    text-decoration:none;
    transition:background .25s ease, transform .25s ease;
}

.socials a:hover{ background:#E7000B; transform:translateY(-3px); }

/* newsletter column */
.footer-news > p{
    font-size:14.5px;
    line-height:1.65;
    margin-bottom:16px;
}

.newsletter{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.newsletter input{
    width:100%;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    background:rgba(255,255,255,.06);
    font-family:inherit;
    font-size:14.5px;
    color:#fff;
}

.newsletter input::placeholder{ color:rgba(255,255,255,.45); }

.newsletter input:focus{
    outline:none;
    border-color:#E7000B;
}

.newsletter button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 18px;
    border:none;
    border-radius:10px;
    background:#E7000B;
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .25s ease;
}

.newsletter button:hover{ background:#B90009; }

.footer-news .form-note{ margin-top:10px; }
.footer-news .form-note.ok{ color:#4ADE80; }
.footer-news .form-note.err{ color:#FF6467; }

/* bottom bar */
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 20px;
    margin-top:50px;
    padding:22px 0 26px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:14px;
}

.footer-bottom strong{ color:#fff; font-weight:600; }

.bottom-links{ display:flex; gap:22px; }

.bottom-links a{
    color:rgba(255,255,255,.65);
    text-decoration:none;
    transition:color .25s ease;
}

.bottom-links a:hover{ color:#E7000B; }

/* back to top */
.to-top{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:900;
    width:46px;
    height:46px;
    border-radius:12px;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    text-decoration:none;
    box-shadow:0 12px 24px -10px rgba(231,0,11,.7);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s, background .3s ease;
}

.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:#B90009; }

/* =========================
   RESPONSIVE (contact + footer)
========================= */
@media(max-width:1150px){
    .footer-container{ grid-template-columns:1.3fr 1fr 1fr; gap:40px 32px; }
    .footer-about{ grid-column:1 / -1; }
    .footer-text{ max-width:520px; }
    .footer-news{ grid-column:span 1; }
}

@media(max-width:992px){
    .contact-cta{ padding:70px max(20px, 5%); }
    .cc-inner{ grid-template-columns:1fr; gap:40px; }
    .cc-info h2{ font-size:36px; }
    .footer-container{ grid-template-columns:1fr 1fr; }
    .footer-news{ grid-column:1 / -1; max-width:460px; }
}

@media(max-width:600px){
    .contact-cta{ padding:56px 16px; }
    .cc-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .cc-tag::before{ width:22px; }
    .cc-info h2{ font-size:28px; letter-spacing:-.5px; }
    .cc-info > p{ font-size:15px; }
    .cc-tiles{ grid-template-columns:1fr; gap:10px; margin-top:22px; }
    .cc-form{ padding:26px 20px; border-radius:18px; }
    .cc-form h3{ font-size:21px; }
    .cc-row{ grid-template-columns:1fr; }
    .cc-submit{ width:100%; justify-content:center; }

    .footer-inner{ padding-top:54px; }
    .footer-container{ grid-template-columns:1fr 1fr; gap:34px 20px; }
    .footer-brand{ font-size:26px; }
    .footer-container > .footer-col:nth-child(4), .footer-news{ grid-column:1 / -1; }
    .footer-bottom{ flex-direction:column; text-align:center; margin-top:40px; }
    .to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}

@media(prefers-reduced-motion:reduce){
    .to-top, .socials a, .cc-submit, .cc-tile, .footer-links a{ transition:none; }
}

.about-banner{
width:100%;
height:420px;
background-image:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("https://images.unsplash.com/photo-1556761175-4b46a572b786?q=80&w=1600");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
}

.about-banner-content{
color:white;
max-width:800px;
}

.about-tag{
background:#e7000b;
padding:6px 16px;
border-radius:20px;
font-size:12px;
letter-spacing:2px;
font-weight:600;
}

.about-banner h1{
font-size:46px;
margin:20px 0;
font-weight:700;
}

.about-banner p{
font-size:18px;
color:#d1d5db;
}

@media(max-width:768px){

.about-banner{
height:340px;
}

.about-banner h1{
font-size:32px;
}

.about-banner p{
font-size:15px;
}

}
.who-we-are{
padding:100px 20px;
background:white;
overflow:hidden;
}

.who-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
gap:60px;
}

.who-image{
flex:1;
}

.who-image img{
width:100%;
border-radius:20px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
transition:.5s;
}

.who-image img:hover{
transform:scale(1.05);
}

.who-content{
flex:1;
}

.who-tag{
background:#ffe4e6;
color:#e11d48;
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.who-content h2{
font-size:40px;
margin:20px 0;
color:#111827;
}

.who-content p{
color:#6b7280;
margin-bottom:18px;
line-height:1.6;
}

.points{
list-style:none;
padding:0;
margin:20px 0;
}

.points li{
margin-bottom:10px;
font-weight:600;
color:#374151;
position:relative;
padding-left:28px;
}

.points li:before{
content:"✔";
position:absolute;
left:0;
top:0;
background:#e11d48;
color:white;
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:12px;
}
.reveal-left{
opacity:0;
transform:translateX(-80px);
transition:all 1s ease;
}

.reveal-right{
opacity:0;
transform:translateX(80px);
transition:all 1s ease;
}

.active{
opacity:1;
transform:translateX(0);
}
@media (max-width:900px){

.who-container{
flex-direction:column;
gap:40px;
text-align:center;
}

.who-content h2{
font-size:30px;
}

.points li{
padding-left:0;
}

.points li:before{
display:none;
}

}

@media (max-width:500px){

.who-we-are{
padding:70px 20px;
}

.who-content h2{
font-size:24px;
}

.who-content p{
font-size:15px;
}

}
.foundation{
padding:100px 20px;
background:#f8fafc;
text-align:center;
}

.foundation-header{
max-width:700px;
margin:auto;
margin-bottom:60px;
}

.foundation-header h2{
font-size:40px;
margin-bottom:15px;
}

.foundation-header p{
color:#6b7280;
line-height:1.6;
}


.foundation-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}


.foundation-card{
background:white;
padding:40px 25px;
border-radius:18px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
transition:0.4s;
}

.foundation-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.foundation-icon{
font-size:40px;
margin-bottom:20px;
}

.foundation-card h3{
margin-bottom:12px;
}

.foundation-card p{
color:#6b7280;
line-height:1.6;
}
@media(max-width:1000px){

.foundation-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.foundation-grid{
grid-template-columns:1fr;
}

.foundation-header h2{
font-size:30px;
}

}
.team-section{

padding:100px 20px;
background:#f9fafb;

}

.team-container{

max-width:1200px;
margin:auto;

}

.team-header{

text-align:center;
margin-bottom:60px;

}

.team-tag{

background:#ffe4e6;
color:#e11d48;
padding:6px 16px;
border-radius:20px;
font-size:12px;
font-weight:600;

}

.team-header h2{

font-size:40px;
margin:15px 0;

}

.team-header p{

color:#6b7280;

}


/* GRID */

.team-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}


/* CARD */

.team-card{

background:white;
border-radius:20px;
overflow:hidden;

box-shadow:0 10px 40px rgba(0,0,0,.08);

transition:.4s;

}

.team-card:hover{

transform:translateY(-12px);
box-shadow:0 25px 60px rgba(0,0,0,.2);

}


/* IMAGE */

.team-image{

position:relative;
overflow:hidden;

}

.team-image img{

width:100%;
height:260px;
object-fit:cover;

transition:.5s;

}

.team-card:hover img{

transform:scale(1.08);

}


/* NAME BAR */

.team-name{

position:absolute;
bottom:0;
width:100%;

background:#e7000b;

color:white;

padding:12px;
font-weight:600;

}


/* TEXT */

.team-info{

padding:22px;

}

.team-info h4{

margin-bottom:10px;

}

.team-info p{

color:#6b7280;
font-size:14px;
line-height:1.6;

}
@media(max-width:1024px){

.team-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.team-grid{

grid-template-columns:1fr;

}

.team-header h2{

font-size:30px;

}

}
.case-study{
padding:120px 20px;
background:linear-gradient(135deg,#0f172a,#020617);
color:white;
}

.case-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.case-left h2{
font-size:42px;
margin-bottom:20px;
}

.case-desc{
color:#cbd5e1;
line-height:1.7;
margin-bottom:40px;
}

.case-image{
border-radius:20px;
overflow:hidden;
box-shadow:0 40px 80px rgba(0,0,0,.6);
}

.case-image img{
width:100%;
transition:.5s;
}

.case-image:hover img{
transform:scale(1.05);
}

/* Accordion */

.accordion-item{
margin-bottom:15px;
border-radius:12px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
overflow:hidden;
border:1px solid rgba(255,255,255,0.08);
}

.accordion-header{
padding:18px 20px;
font-weight:600;
display:flex;
justify-content:space-between;
cursor:pointer;
}

.accordion-header:hover{
background:rgba(255,255,255,0.08);
}

.accordion-body{
padding:0 20px;
max-height:0;
overflow:hidden;
color:#cbd5e1;
transition:max-height .4s ease;
}

.accordion-item.active .accordion-body{
padding:20px;
max-height:200px;
}

.icon{
color:#ef4444;
font-size:20px;
}
@media(max-width:900px){

.case-container{
grid-template-columns:1fr;
}

.case-left h2{
font-size:32px;
}

}
.career-section{

padding:120px 20px;
background:#f9fafb;

}

.career-container{

max-width:1200px;
margin:auto;

}

.career-header{

text-align:center;
margin-bottom:60px;

}

.career-tag{

background:#ffe4e6;
color:#e7000b;

padding:6px 16px;
border-radius:20px;

font-size:12px;
font-weight:600;

}

.career-header h2{

font-size:42px;
margin:15px 0;

}

.career-header p{

max-width:700px;
margin:auto;

color:#6b7280;

}


/* GRID */

.career-box{

display:grid;
grid-template-columns:1fr 1fr;

border-radius:20px;
overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.1);

}


/* IMAGE */

.career-image img{

width:100%;
height:100%;
object-fit:cover;

}


/* RIGHT BOX */

.career-content{

background:#e7000b;
color:white;

padding:60px;

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

}

.career-small{

font-size:12px;
letter-spacing:1px;
opacity:.8;
margin-bottom:10px;

}

.career-content h3{

font-size:28px;
margin-bottom:25px;

}


/* BUTTON */

.career-btn{

background:white;
color:#e7000b;

padding:14px 28px;

border-radius:8px;

text-decoration:none;
font-weight:600;

width:fit-content;

transition:.3s;

}

.career-btn:hover{

background:#111827;
color:white;

}
.career-premium{

padding:120px 20px;
background:linear-gradient(135deg,#0f172a,#020617);

color:white;

}

.career-container{

max-width:1200px;
margin:auto;

}

.career-header{

text-align:center;
margin-bottom:70px;

}

.career-tag{

background:#ef4444;
padding:6px 16px;

border-radius:20px;
font-size:12px;
font-weight:600;

}

.career-header h2{

font-size:42px;
margin:18px 0;

}

.career-header p{

color:#cbd5e1;
max-width:700px;
margin:auto;

}


/* CARD */

.career-card{

display:grid;
grid-template-columns:1fr 1fr;

border-radius:20px;
overflow:hidden;

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

box-shadow:0 30px 80px rgba(0,0,0,.6);

transition:.4s;

}

.career-card:hover{

transform:translateY(-10px);
box-shadow:0 50px 120px rgba(0,0,0,.8);

}


/* IMAGE */

.career-image{

overflow:hidden;

}

.career-image img{

width:100%;
height:100%;
object-fit:cover;

transition:.6s;

}

.career-card:hover img{

transform:scale(1.08);

}


/* CONTENT */

.career-content{

padding:60px;

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

}

.career-small{

font-size:12px;
letter-spacing:1px;
color:#f87171;

margin-bottom:10px;

}

.career-content h3{

font-size:30px;
margin-bottom:15px;

}

.career-content p{

color:#cbd5e1;
margin-bottom:25px;

}


/* BUTTON */

.career-btn{

background:#ef4444;

padding:14px 30px;

border-radius:8px;

text-decoration:none;

color:white;
font-weight:600;

width:fit-content;

transition:.3s;

}

.career-btn:hover{

background:white;
color:#ef4444;

}
.career-section{

padding:120px 20px;
background:white;

}

.career-container{

max-width:1200px;
margin:auto;

}

.career-header{

text-align:center;
margin-bottom:70px;

}

.career-tag{

background:#ffe4e6;
color:#e7000b;

padding:6px 16px;
border-radius:20px;

font-size:12px;
font-weight:600;

}

.career-header h2{

font-size:42px;
margin:15px 0;

}

.career-header p{

color:#6b7280;
max-width:700px;
margin:auto;

}


/* CARD */

.career-card{

display:grid;
grid-template-columns:1fr 1fr;

border-radius:20px;
overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.08);

transition:.4s;

}

.career-card:hover{

transform:translateY(-10px);
box-shadow:0 35px 90px rgba(0,0,0,.15);

}


/* IMAGE */

.career-image{

overflow:hidden;

}

.career-image img{

width:100%;
height:100%;
object-fit:cover;

transition:.6s;

}

.career-card:hover img{

transform:scale(1.08);

}


/* RIGHT CONTENT */

.career-content{

background:#e7000b;
color:white;

padding:60px;

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

}

.career-small{

font-size:12px;
letter-spacing:1px;
opacity:.9;

margin-bottom:10px;

}

.career-content h3{

font-size:28px;
margin-bottom:15px;

}

.career-content p{

margin-bottom:25px;
opacity:.9;

}


/* BUTTON */

.career-btn{

background:white;
color:#e7000b;

padding:14px 28px;

border-radius:8px;

text-decoration:none;
font-weight:600;

width:fit-content;

transition:.3s;

}

.career-btn:hover{

background:#111827;
color:white;

}
@media(max-width:900px){

.career-card{

grid-template-columns:1fr;

}

.career-content{

text-align:center;
align-items:center;

}

.career-header h2{

font-size:32px;

}

}


.service-hero{

width:100%;
height:420px;

background-image:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1600");

background-size:cover;
background-position:center;

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

text-align:center;
padding:20px;

}

.service-hero-content{

color:white;
max-width:800px;

}

.service-tag{

background:#e7000b;
padding:6px 16px;
border-radius:20px;

font-size:12px;
letter-spacing:2px;
font-weight:600;

}

.service-hero h1{

font-size:46px;
margin:20px 0;
font-weight:700;

}

.service-hero p{

font-size:18px;
color:#d1d5db;

}
@media(max-width:768px){

.service-hero{
height:340px;
}

.service-hero h1{
font-size:32px;
}

.service-hero p{
font-size:15px;
}

}
/* =========================
   SERVICES PAGE: service cards
========================= */
.services{
    padding:110px max(20px, 5%);
    background:#F9FAFB;
}

.services-inner{
    max-width:1240px;
    margin:0 auto;
}

.services-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 80px;
    align-items:end;
    margin-bottom:54px;
}

.services-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.services-tag::before{ content:""; width:34px; height:2px; background:#E7000B; }

.services-head h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin-top:14px;
}

.services-head h2 span{ color:#E7000B; }

.services-head p{
    font-size:16.5px;
    line-height:1.75;
    color:#4A5565;
}

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

.svc-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #F3F4F6;
    box-shadow:0 24px 44px -30px rgba(16,24,40,.4);
    transition:transform .4s ease, box-shadow .4s ease;
}

/* red line growing along the bottom */
.svc-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:#E7000B;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s ease;
}

.svc-card:hover{
    transform:translateY(-8px);
    box-shadow:0 34px 60px -30px rgba(231,0,11,.35);
}

.svc-card:hover::after{ transform:scaleX(1); }

.svc-img{
    position:relative;
    height:220px;
    overflow:hidden;
}

.svc-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .8s ease;
}

.svc-img::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(16,24,40,.55));
}

.svc-card:hover .svc-img img{ transform:scale(1.08); }

.svc-num{
    position:absolute;
    top:16px;
    right:16px;
    z-index:1;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(16,24,40,.6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#fff;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.svc-body{
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    padding:44px 26px 26px;
}

/* icon overlapping the photo */
.svc-icon{
    position:absolute;
    top:-30px;
    left:26px;
    width:60px;
    height:60px;
    border-radius:16px;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:22px;
    border:4px solid #fff;
    box-shadow:0 12px 24px -10px rgba(231,0,11,.7);
    transition:transform .4s ease, background .4s ease;
}

.svc-card:hover .svc-icon{ transform:rotate(-8deg) scale(1.05); background:#101828; }

.svc-body h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:21px;
    font-weight:600;
    line-height:1.3;
    color:#101828;
    margin-bottom:10px;
}

.svc-body p{
    flex:1;
    font-size:15px;
    line-height:1.7;
    color:#4A5565;
    margin-bottom:20px;
}

.svc-link{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:600;
    color:#E7000B;
    text-decoration:none;
}

.svc-link i{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#FFE4E6;
    display:grid;
    place-items:center;
    font-size:12px;
    transition:background .3s ease, color .3s ease, transform .3s ease;
}

.svc-link:hover i,
.svc-card:hover .svc-link i{ background:#E7000B; color:#fff; transform:translateX(4px); }

/* scroll reveal */
.services-head,
.svc-card{
    opacity:0;
    translate:0 40px;
    transition:opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1), transform .4s ease, box-shadow .4s ease;
}

.services.show .services-head,
.services.show .svc-card{ opacity:1; translate:0 0; }
.services.show .svc-card:nth-child(2){ transition-delay:.1s, .1s, 0s, 0s; }
.services.show .svc-card:nth-child(3){ transition-delay:.2s, .2s, 0s, 0s; }
.services.show .svc-card:nth-child(4){ transition-delay:.3s, .3s, 0s, 0s; }
.services.show .svc-card:nth-child(5){ transition-delay:.4s, .4s, 0s, 0s; }
.services.show .svc-card:nth-child(6){ transition-delay:.5s, .5s, 0s, 0s; }

@media(max-width:1100px){
    .services-grid{ grid-template-columns:repeat(2, 1fr); }
    .services-head h2{ font-size:38px; }
}

@media(max-width:992px){
    .services{ padding:80px max(20px, 5%); }
    .services-head{ grid-template-columns:1fr; margin-bottom:40px; }
}

@media(max-width:600px){
    .services{ padding:60px 20px; }
    .services-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .services-tag::before{ width:22px; }
    .services-head h2{ font-size:28px; letter-spacing:-.5px; }
    .services-head p{ font-size:15px; }
    .services-grid{ grid-template-columns:1fr; gap:22px; }
    .svc-img{ height:190px; }
    .svc-body{ padding:40px 20px 22px; }
    .svc-body h3{ font-size:19px; }
}

@media(prefers-reduced-motion:reduce){
    .services-head, .svc-card{ opacity:1; translate:none; transition:none; }
}

.packages-hero{

width:100%;
height:420px;

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

text-align:center;
padding:20px;

background-image:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1600");

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

}

.packages-hero-content{

color:white;
max-width:800px;

}

.packages-tag{

background:#e7000b;
padding:6px 16px;

border-radius:20px;

font-size:12px;
letter-spacing:2px;
font-weight:600;

display:inline-block;

}

.packages-hero h1{

font-size:46px;
margin:20px 0;
font-weight:700;

}

.packages-hero p{

font-size:18px;
color:#d1d5db;

}
.packages-hero{

width:100%;
height:420px;

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

text-align:center;
padding:20px;

background-image:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1600");

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

}

.packages-hero-content{

color:white;
max-width:800px;

}

.packages-tag{

background:#e7000b;
padding:6px 16px;

border-radius:20px;

font-size:12px;
letter-spacing:2px;
font-weight:600;

display:inline-block;

}

.packages-hero h1{

font-size:46px;
margin:20px 0;
font-weight:700;

}

.packages-hero p{

font-size:18px;
color:#d1d5db;

}



.contact-hero{

width:100%;
height:420px;

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

text-align:center;
padding:20px;

background-image:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600");

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

}

.contact-hero-content{

color:white;
max-width:800px;

}

.contact-tag{

background:#e7000b;
padding:6px 16px;

border-radius:20px;

font-size:12px;
letter-spacing:2px;
font-weight:600;

display:inline-block;

}

.contact-hero h1{

font-size:46px;
margin:20px 0;
font-weight:700;

}

.contact-hero p{

font-size:18px;
color:#d1d5db;

}
@media(max-width:768px){

.contact-hero{
height:340px;
}

.contact-hero h1{
font-size:32px;
}

.contact-hero p{
font-size:15px;
}

}
.contact-info{

padding:100px 20px;
background:#f9fafb;
text-align:center;

}

.contact-container{

max-width:1200px;
margin:auto;

}

.contact-container h2{

font-size:40px;
margin-bottom:10px;

}

.contact-sub{

color:#6b7280;
margin-bottom:60px;

}


/* GRID */

.contact-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}


/* CARD */

.contact-card{

background:white;
padding:40px;

border-radius:16px;

box-shadow:0 15px 50px rgba(0,0,0,.08);

transition:.4s;

}

.contact-card:hover{

transform:translateY(-10px);
box-shadow:0 30px 70px rgba(0,0,0,.15);

}


/* ICON */

.contact-icon{

width:60px;
height:60px;

margin:auto;
margin-bottom:20px;

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

background:#ffe4e6;

border-radius:50%;

font-size:24px;

}

.highlight{

color:#e7000b;
margin-bottom:10px;

}
.contact-form-section{

padding:120px 20px;
background:white;

}

.form-container{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

align-items:center;

}


/* IMAGE */

.form-image{

position:relative;

}

.form-image img{

width:100%;
border-radius:16px;

}

.hello-badge{

position:absolute;
top:40px;
right:40px;

background:white;
padding:20px;

border-radius:50%;

box-shadow:0 10px 40px rgba(0,0,0,.1);

text-align:center;
font-weight:600;

}


/* FORM */

.form-box{

background:#f9fafb;

padding:50px;

border-radius:16px;

}

.form-tag{

background:#ffe4e6;
color:#e7000b;

padding:6px 14px;
border-radius:20px;

font-size:12px;

}

.form-box h2{

margin:20px 0;

}

.form-box form{

display:flex;
flex-direction:column;
gap:15px;

}

.form-box input, .form-box textarea{

padding:14px;

border:1px solid #e5e7eb;
border-radius:6px;

}

.form-box textarea{

height:120px;

}

.form-box button{

background:#e7000b;
color:white;

padding:14px;

border:none;

border-radius:6px;

cursor:pointer;

transition:.3s;

}

.form-box button:hover{

background:#111827;

}
@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

.form-container{

grid-template-columns:1fr;

}

}


/* =========================
   INNER PAGE HERO (About, Services, Packages, Contact)
========================= */
.page-hero{
    position:relative;
    overflow:hidden;
    background:#101828 var(--ph-img) var(--ph-pos, center) / cover no-repeat;
    color:#fff;
}

/* navy overlay, darker on the text side */
.page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(16,24,40,.95) 0%, rgba(16,24,40,.82) 45%, rgba(16,24,40,.35) 100%),
        linear-gradient(0deg, rgba(16,24,40,.6), transparent 45%);
}

/* faint grid on the left */
.page-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:linear-gradient(90deg, #000 0%, transparent 60%);
            mask-image:linear-gradient(90deg, #000 0%, transparent 60%);
    pointer-events:none;
}

.ph-inner{
    position:relative;
    z-index:1;
    max-width:1320px;
    margin:0 auto;
    padding:70px max(20px, 5%) 80px;
}

/* red bracket, same as the home hero */
.ph-frame{
    position:relative;
    max-width:780px;
    padding:28px 0 28px 38px;
}

.ph-frame::before,
.ph-frame::after{
    content:"";
    position:absolute;
    left:0;
    width:120px;
    height:50%;
    border-left:6px solid #E7000B;
    pointer-events:none;
    animation:heroDraw .7s cubic-bezier(.7,0,.2,1) both;
}

.ph-frame::before{ top:0; border-top:6px solid #E7000B; transform-origin:top left; }
.ph-frame::after{ bottom:0; border-bottom:6px solid #E7000B; transform-origin:bottom left; }

/* breadcrumb */
.ph-crumb{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 16px;
    margin-bottom:22px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    font-size:13.5px;
    animation:heroFade .6s ease .1s both;
}

.ph-crumb a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:color .25s ease;
}

.ph-crumb a:hover{ color:#fff; }
.ph-crumb > i{ font-size:10px; color:#E7000B; }
.ph-crumb span{ color:#fff; font-weight:600; }

.ph-kicker{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#FF6467;
    animation:heroFade .6s ease .2s both;
}

.ph-kicker::before{ content:""; width:34px; height:2px; background:#E7000B; }

.page-hero h1{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:50px;
    line-height:1.08;
    font-weight:700;
    letter-spacing:-1.2px;
    margin:14px 0 18px;
    text-wrap:balance;
    animation:heroFade .8s cubic-bezier(.2,.8,.2,1) .3s both;
}

.page-hero h1 span{ color:#E7000B; }

.page-hero .ph-frame > p{
    font-size:17px;
    line-height:1.7;
    font-weight:300;
    color:rgba(255,255,255,.85);
    max-width:580px;
    animation:heroFade .7s ease .45s both;
}

.ph-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
    animation:heroFade .7s ease .6s both;
}

/* bottom accent strip */
.page-hero .ph-inner::after{
    content:"";
    position:absolute;
    left:max(20px, 5%);
    bottom:0;
    width:180px;
    height:4px;
    background:#E7000B;
}

@media(max-width:992px){
    .ph-inner{ padding:56px max(20px, 5%) 64px; }
    .page-hero h1{ font-size:42px; }
    .page-hero::before{ background:linear-gradient(90deg, rgba(16,24,40,.94), rgba(16,24,40,.75)); }
}

@media(max-width:600px){
    .ph-inner{ padding:40px 20px 50px; }
    .ph-frame{ padding:18px 0 18px 22px; }
    .ph-frame::before, .ph-frame::after{ width:70px; border-width:4px; }
    .ph-crumb{ font-size:12.5px; padding:6px 12px; margin-bottom:16px; }
    .ph-kicker{ font-size:12px; letter-spacing:2px; gap:8px; }
    .ph-kicker::before{ width:22px; }
    .page-hero h1{ font-size:30px; letter-spacing:-.6px; margin:10px 0 12px; }
    .page-hero .ph-frame > p{ font-size:15px; }
    .ph-actions{ gap:10px; margin-top:20px; }
    .ph-actions .btn{ padding:12px 20px; font-size:14.5px; }
    .ph-actions .btn.outline{ padding:10px 18px; }
}

@media(prefers-reduced-motion:reduce){
    .ph-frame::before, .ph-frame::after, .ph-crumb, .ph-kicker, .page-hero h1, .page-hero .ph-frame > p, .ph-actions{ animation:none; }
}


/* =========================
   SHARED SECTION HEADER (inner pages)
========================= */
.sec-head{ max-width:640px; margin:0 auto 52px; }
.sec-head.center{ text-align:center; }

.sec-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E7000B;
}

.sec-tag::before{ content:""; width:34px; height:2px; background:#E7000B; }
.sec-head.center .sec-tag::after{ content:""; width:34px; height:2px; background:#E7000B; }
.sec-head.light .sec-tag, .sec-tag.light{ color:#FF6467; }

.sec-head h2,
.cstudy-text h2,
.careers-band h2{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:44px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1px;
    color:#101828;
    margin:14px 0 12px;
    text-wrap:balance;
}

.sec-head h2 span,
.cstudy-text h2 span{ color:#E7000B; }

.sec-head p{
    font-size:16.5px;
    line-height:1.7;
    color:#4A5565;
}

.sec-head.light h2{ color:#fff; }
.sec-head.light p{ color:rgba(255,255,255,.7); }

/* =========================
   ABOUT: FOUNDATION (dark band)
========================= */
.fnd{
    position:relative;
    padding:110px max(20px, 5%);
    background:#101828;
    color:#fff;
    overflow:hidden;
}

.fnd::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 70%);
            mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 70%);
    pointer-events:none;
}

.fnd-inner{ position:relative; max-width:1240px; margin:0 auto; }

.fnd-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
}

.fnd-card{
    padding:30px 24px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    transition:background .35s ease, border-color .35s ease, transform .35s ease;
}

.fnd-card:hover{
    background:rgba(231,0,11,.1);
    border-color:rgba(231,0,11,.45);
    transform:translateY(-6px);
}

.fnd-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#E7000B;
    display:grid;
    place-items:center;
    font-size:22px;
    margin-bottom:20px;
    box-shadow:0 12px 24px -10px rgba(231,0,11,.7);
}

.fnd-card h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:21px;
    font-weight:600;
    margin-bottom:8px;
}

.fnd-card p{
    font-size:14.5px;
    line-height:1.7;
    color:rgba(255,255,255,.7);
}

/* =========================
   ABOUT: TEAM
========================= */
.team-section{
    padding:110px max(20px, 5%);
    background:#F9FAFB;
}

.team-inner{ max-width:1240px; margin:0 auto; }

/* flex + centre so any team size (e.g. 5) looks balanced */
.tm-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
}

.tm-grid > .tm-card{ flex:0 1 calc((100% - 96px) / 5); min-width:0; }

.tm-card{
    background:#fff;
    border:1px solid #F3F4F6;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 40px -30px rgba(16,24,40,.4);
    transition:transform .35s ease, box-shadow .35s ease;
}

.tm-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 50px -28px rgba(231,0,11,.35);
}

/* photo, with initials underneath until the photo is uploaded */
.tm-photo{
    position:relative;
    aspect-ratio:1 / 1;
    max-width:100%;
    background:linear-gradient(135deg, #101828, #3E4C69);
    display:grid;
    place-items:center;
    overflow:hidden;
}

.tm-photo::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:#E7000B;
    transform:scaleX(.25);
    transform-origin:left;
    transition:transform .4s ease;
}

.tm-card:hover .tm-photo::after{ transform:scaleX(1); }

.tm-initials{
    width:96px;
    height:96px;
    border-radius:50%;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:34px;
    font-weight:700;
    border:5px solid rgba(255,255,255,.15);
}

.tm-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.tm-card:hover .tm-photo img{ transform:scale(1.06); }

.tm-info{ padding:20px 20px 22px; }

.tm-info h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:19px;
    font-weight:600;
    color:#101828;
}

.tm-role{
    display:inline-block;
    margin:6px 0 10px;
    font-size:13px;
    font-weight:600;
    color:#E7000B;
}

.tm-info p{
    font-size:14px;
    line-height:1.6;
    color:#4A5565;
}

/* =========================
   ABOUT: CASE STUDY
========================= */
.cstudy{
    padding:110px max(20px, 5%);
    background:#fff;
}

.cstudy-inner{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.cstudy-desc{
    font-size:16.5px;
    line-height:1.75;
    color:#4A5565;
    margin-bottom:28px;
}

.cstudy .accordion{ display:grid; gap:12px; }

.cstudy .accordion-item{
    margin:0;
    background:#F9FAFB;
    border:1px solid #F3F4F6;
    border-radius:14px;
    backdrop-filter:none;
    overflow:hidden;
    transition:border-color .3s ease, background .3s ease;
}

.cstudy .accordion-item.active{
    background:#fff;
    border-color:#FFE4E6;
    box-shadow:0 18px 30px -22px rgba(231,0,11,.4);
}

.cstudy .accordion-header{
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:17px;
    font-weight:600;
    color:#101828;
    cursor:pointer;
}

.acc-icon{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#FFE4E6;
    color:#E7000B;
    display:grid;
    place-items:center;
    font-size:12px;
    transition:transform .3s ease, background .3s ease, color .3s ease;
}

.cstudy .accordion-item.active .acc-icon{ transform:rotate(45deg); background:#E7000B; color:#fff; }

.cstudy .accordion-body{
    max-height:0;
    padding:0 20px;
    overflow:hidden;
    font-size:15px;
    line-height:1.7;
    color:#4A5565;
    transition:max-height .4s ease, padding .4s ease;
}

.cstudy .accordion-item.active .accordion-body{
    max-height:220px;
    padding:0 20px 20px;
}

.cstudy-media{ position:relative; padding:0 0 30px 30px; }

.cstudy-media::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60%;
    height:70%;
    border-radius:18px;
    background:#E7000B;
}

.cstudy-img{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 60px -28px rgba(16,24,40,.5);
}

.cstudy-img img{
    display:block;
    width:100%;
    aspect-ratio:4 / 4.3;
    object-fit:cover;
}

.cstudy-stat{
    position:absolute;
    right:-20px;
    top:40px;
    padding:20px 24px;
    background:#101828;
    color:#fff;
    border-radius:16px;
    max-width:200px;
    box-shadow:0 20px 40px -14px rgba(16,24,40,.6);
    animation:aboutFloat 4s ease-in-out infinite;
}

.cstudy-stat strong{
    display:block;
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:42px;
    font-weight:800;
    line-height:1;
    color:#E7000B;
}

.cstudy-stat span{
    display:block;
    margin-top:6px;
    font-size:13.5px;
    line-height:1.45;
    color:rgba(255,255,255,.8);
}

/* =========================
   ABOUT: CAREERS BAND
========================= */
.careers-band{ padding:0 max(20px, 5%) 110px; background:#fff; }

.careers-inner{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    padding:54px 56px;
    border-radius:24px;
    background:linear-gradient(120deg, #E7000B 0%, #B90009 100%);
    color:#fff;
    display:grid;
    grid-template-columns:1.4fr auto;
    gap:30px 50px;
    align-items:center;
    overflow:hidden;
}

.careers-inner::before{
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:300px;
    height:300px;
    border-radius:50%;
    border:46px solid rgba(255,255,255,.1);
    pointer-events:none;
}

.careers-band .sec-tag.light{ color:#fff; }
.careers-band .sec-tag.light::before{ background:#fff; }

.careers-band h2{ color:#fff; font-size:38px; }

.careers-band p{
    font-size:16px;
    line-height:1.7;
    color:rgba(255,255,255,.88);
    max-width:560px;
}

.careers-actions{ position:relative; display:flex; flex-wrap:wrap; gap:14px; }

.btn.careers-btn{ background:#fff; color:#E7000B; }
.btn.careers-btn::before{ background:#101828; }
.btn.careers-btn:hover{ color:#fff; }
.careers-band .btn.outline{ border-color:rgba(255,255,255,.85); }
.careers-band .btn.outline:hover{ color:#E7000B; }

/* =========================
   CONTACT PAGE: MAP
========================= */
.contact-page-cta{ background:#fff; }

.map-section{
    padding:0 max(20px, 5%) 110px;
    background:#fff;
}

.map-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    border-radius:22px;
    overflow:hidden;
    border:1px solid #F3F4F6;
    box-shadow:0 30px 60px -36px rgba(16,24,40,.45);
}

.map-card{
    padding:40px 36px;
    background:#101828;
    color:#fff;
}

.map-card .cc-tag{ color:#FF6467; }

.map-card h3{
    font-family:'Outfit', 'Poppins', sans-serif;
    font-size:30px;
    font-weight:700;
    margin:10px 0 24px;
}

.map-card ul{
    list-style:none;
    margin:0 0 28px;
    padding:0;
    display:grid;
    gap:18px;
}

.map-card li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:14.5px;
    line-height:1.55;
    color:rgba(255,255,255,.75);
}

.map-card li i{
    width:40px;
    height:40px;
    border-radius:12px;
    background:#E7000B;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:15px;
    flex-shrink:0;
}

.map-card li strong{ display:block; color:#fff; font-weight:600; }
.map-card li a{ color:rgba(255,255,255,.85); text-decoration:none; }
.map-card li a:hover{ color:#fff; }

.map-frame{ min-height:420px; background:#E5E7EB; }

.map-frame iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
}

/* =========================
   RESPONSIVE (inner pages)
========================= */
@media(max-width:1100px){
    .fnd-grid{ grid-template-columns:repeat(2, 1fr); }
    .tm-grid > .tm-card{ flex-basis:calc((100% - 48px) / 3); }
    .sec-head h2, .cstudy-text h2{ font-size:38px; }
    .cstudy-inner{ gap:50px; }
}

@media(max-width:992px){
    .fnd, .team-section, .cstudy{ padding:80px max(20px, 5%); }
    .cstudy-inner{ grid-template-columns:1fr; }
    .cstudy-media{ max-width:560px; width:100%; margin:0 auto; }
    .careers-band{ padding-bottom:80px; }
    .careers-inner{ grid-template-columns:1fr; padding:44px 36px; }
    .map-inner{ grid-template-columns:1fr; }
    .map-section{ padding-bottom:80px; }
}

@media(max-width:600px){
    .sec-head{ margin-bottom:36px; }
    .sec-tag{ font-size:12px; letter-spacing:2px; gap:8px; }
    .sec-tag::before, .sec-head.center .sec-tag::after{ width:20px; }
    .sec-head h2, .cstudy-text h2{ font-size:28px; letter-spacing:-.5px; }
    .sec-head p, .cstudy-desc{ font-size:15px; }
    .fnd, .team-section, .cstudy{ padding:60px 20px; }
    .fnd-grid{ grid-template-columns:1fr; gap:14px; }
    .fnd-card{ display:grid; grid-template-columns:48px 1fr; column-gap:16px; padding:20px; }
    .fnd-icon{ grid-row:span 2; width:48px; height:48px; font-size:18px; margin:0; }
    .fnd-card h3{ font-size:18px; margin-bottom:4px; }
    .tm-grid{ gap:14px; }
    .tm-grid > .tm-card{ flex-basis:calc((100% - 14px) / 2); }
    .tm-initials{ width:70px; height:70px; font-size:24px; }
    .tm-info{ padding:14px 14px 16px; }
    .tm-info h3{ font-size:15.5px; }
    .tm-role{ font-size:12px; margin:4px 0 6px; }
    .tm-info p{ font-size:13px; }
    .cstudy .accordion-header{ font-size:15.5px; padding:16px; }
    .cstudy-media{ padding:0 0 20px 20px; }
    .cstudy-stat{ right:-6px; top:20px; padding:14px 16px; max-width:160px; }
    .cstudy-stat strong{ font-size:32px; }
    .careers-band{ padding:0 16px 60px; }
    .careers-inner{ padding:34px 22px; border-radius:18px; }
    .careers-band h2{ font-size:27px; }
    .careers-actions .btn{ flex:1; justify-content:center; }
    .map-section{ padding:0 16px 60px; }
    .map-card{ padding:30px 22px; }
    .map-card h3{ font-size:24px; }
    .map-frame, .map-frame iframe{ min-height:300px; }
}

@media(prefers-reduced-motion:reduce){
    .cstudy-stat{ animation:none; }
    .fnd-card, .tm-card, .cstudy .accordion-body{ transition:none; }
}


/* =========================
   STICKY WHATSAPP BUTTON (bottom right)
========================= */
.wa-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:950;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:30px;
    text-decoration:none;
    box-shadow:0 12px 26px -8px rgba(37,211,102,.7);
    transition:transform .3s ease, background .3s ease;
}

/* soft pulse ring */
.wa-float::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    z-index:-1;
    animation:waPulse 2.2s ease-out infinite;
}

@keyframes waPulse{
    0%{ transform:scale(1); opacity:.55; }
    100%{ transform:scale(1.6); opacity:0; }
}

.wa-float:hover{ background:#1EBE5A; transform:translateY(-3px); }

.wa-tip{
    position:absolute;
    right:70px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    padding:8px 14px;
    border-radius:8px;
    background:#101828;
    color:#fff;
    font-size:13.5px;
    font-weight:500;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    pointer-events:none;
}

.wa-float:hover .wa-tip{ opacity:1; visibility:visible; transform:translateY(-50%); }

/* back-to-top sits just above the WhatsApp button */
.to-top{ bottom:92px; right:28px; }

@media(max-width:600px){
    .wa-float{ right:16px; bottom:16px; width:52px; height:52px; font-size:27px; }
    .wa-tip{ display:none; }
    .to-top{ right:21px; bottom:80px; }
}

@media(prefers-reduced-motion:reduce){
    .wa-float::before{ animation:none; }
}

/* footer links to a service card: stop below the sticky header */
.svc-card[id]{ scroll-margin-top:150px; }

/* long footer links wrap neatly with the arrow on the first line */
.footer-links a{ align-items:flex-start; line-height:1.45; }
.footer-links a::before{ margin-top:4px; }

/* never let off-screen pieces (e.g. the closed mobile menu) widen the page */
html, body{ overflow-x:clip; }