:root {
    --primary: #145374;
    --primary-dark: #0c364d;
    --accent: #dd441a;
    --accent-hover: #c03814;
    --line: rgba(20,83,116,.12);
    --logo-pink: #ded3d8;
    --bs-body-font-family: 'Schibsted Grotesk',sans-serif;
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #1a1a1a;
    --mut: #5b6b76;
    --ink: #0f1d26;
    --pink: #ded3d8;
    --navtop: calc(var(--nav) + env(safe-area-inset-top))
}
html,body
{
	overflow-x:hide;
}
.cond {
    font-family: 'Oswald',sans-serif;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.01em
}

.accent-color {
    color: var(--accent)
}

.mini {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .76rem;
    font-weight: 600
}

html.lenis {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important
}

body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y
}

img {
    display: block
}
/* NAV */
:root {
    --nav: 78px;
    --navtop: calc(var(--nav) + env(safe-area-inset-top))
}

@media(max-width:991px) {
    :root {
        --nav: 64px
    }
}

html {
    scroll-padding-top: var(--navtop);
    scrollbar-gutter: stable
}

body {
    padding-top: var(--navtop)
}

.navbar {
    padding: 0;
    background: var(--primary);
    height: var(--navtop);
    border-bottom: 1px solid rgba(221,68,26,.2);
    transition: all .4s cubic-bezier(.16,1,.3,1);
    z-index: 90
}

    .navbar.scrolled {
        background: rgba(20,83,116,.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 12px 35px rgba(0,0,0,.2)
    }

    .navbar > .container-xl {
        height: var(--nav)
    }

    .navbar .nav-link {
        color: #fff;
        font-weight: 500;
        font-size: .92rem;
        padding: .8rem 1rem;
        transition: .25s
    }

        .navbar .nav-link:hover {
            color: var(--logo-pink)
        }

.caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 6px;
    transition: .25s
}

.dropdown-menu {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: .6rem;
    min-width: 240px;
    margin-top: 0;
    box-shadow: 0 25px 60px rgba(0,0,0,.15)
}

.dropdown-item {
    color: #333;
    border-radius: 10px;
    padding: .6rem .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    transition: .2s
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: var(--accent);
        color: #fff
    }

.pillb {
    border: 1px solid rgba(222,211,216,.4);
    border-radius: 50px;
    padding: .5rem 1.25rem;
    color: #fff;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: .3s;
    background: rgba(222,211,216,.08)
}

    .pillb:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent)
    }

@media(min-width:992px) {
    .dropdown {
        position: relative
    }

        .dropdown:hover > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu {
            display: block;
            animation: dd .22s cubic-bezier(.16,1,.3,1) both
        }

        .dropdown:hover > .nav-link .caret {
            transform: rotate(-135deg)
        }

    .dropdown-submenu {
        position: relative
    }

        .dropdown-submenu > .dropdown-menu {
            top: -.5rem;
            left: calc(100% - 8px)
        }

        .dropdown-submenu > .dropdown-item .caret {
            transform: rotate(-45deg)
        }
}

@keyframes dd {
    from {
        opacity: 0;
        transform: translateY(10px)
    }
}

@media(max-width:991px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 30px 60px rgba(0,0,0,.15);
        padding: 1.2rem 1.5rem;
        max-height: calc(100svh - var(--navtop));
        overflow-y: auto
    }

        .navbar-collapse .nav-link {
            color: #111 !important
        }

    .dropdown-menu {
        position: static;
        display: none;
        border: 0;
        background: transparent;
        padding: 0 0 0 1rem;
        box-shadow: none
    }

    .open > .dropdown-menu {
        display: block
    }

    .open > .nav-link .caret, .open > .dropdown-item .caret {
        transform: rotate(-135deg)
    }

    .navbar-collapse .pillb {
        color: #fff;
        background: var(--accent);
        border-color: var(--accent);
        display: inline-block;
        margin-top: .4rem
    }
}
/* HERO */
.stage {
    position: relative;
    height: calc(100vh - var(--navtop));
    height: calc(100svh - var(--navtop));
    overflow: hidden;
    background: #f5f7f8
}

.layer {
    position: absolute;
    inset: 0
}

.crt {
    z-index: 5;
    background: #f5f7f8;
    overflow: hidden;
    transform-origin: center
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.6s cubic-bezier(.16,1,.3,1),transform 8s cubic-bezier(.16,1,.3,1)
}

    .hero-slide-bg.on {
        opacity: 1;
        transform: scale(1)
    }

    .hero-slide-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(245,247,248,.3) 0%,rgba(245,247,248,.2) 45%,rgba(245,247,248,.1) 100%)
}

@media(max-width:991px) {
    .hero-overlay {
        background: linear-gradient(180deg,rgba(245,247,248,.3) 0%,rgba(245,247,248,.2) 100%)
    }
}

.hero-content-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 4;
    padding: 0 5vw
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--logo-pink);
    border: 1px solid rgba(221,68,26,.3);
    padding: .4rem 1.2rem;
    border-radius: 50px;
    color: var(--primary);
    margin-bottom: 1.2rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .78rem
}

.hero-title {
    font-size: clamp(3.2rem,8.5vw,8.5rem);
    font-weight: 700;
    color: #111;
    line-height: .95;
    margin-bottom: 1.2rem
}

.hero-controls {
    position: absolute;
    bottom: 2.5rem;
    right: 3rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 1.5rem
}

.hero-dots {
    display: flex;
    gap: .5rem
}

    .hero-dots i {
        width: 36px;
        height: 3px;
        background: rgba(0,0,0,.2);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
        cursor: pointer
    }

        .hero-dots i.on::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--accent);
            transform-origin: left;
            animation: fill 5s linear
        }

@keyframes fill {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.hcount {
    color: #111;
    font-family: Oswald;
    font-size: 1.2rem;
    letter-spacing: .1em;
    position: absolute;
    bottom: 2.5rem;
    left: 5vw;
    z-index: 6
}

.flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 10
}

/* =========================================================
   SHARED HELPERS FOR NEW SECTIONS
   ========================================================= */
.w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .12em
}

.wi {
    display: inline-block;
    will-change: transform
}

.kick {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem 1.1rem;
    border: 1px solid rgba(20,83,116,.2);
    border-radius: 50px;
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--primary);
    background: rgba(255,255,255,.7)
}

    .kick i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px rgba(221,68,26,.18)
    }

/* =========================================================
   ABOUT US  (light) – circle expands
   ========================================================= */
/* Ensure text containers don't collapse or hide unexpectedly */
.ab-wrap, 
.ab-lead, 
.ab-p, 
.ab-kick {
    opacity: 1;
    visibility: visible;
}

/* Ensure the wrapper displays correctly */
.w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.wi {
    display: inline-block;
    will-change: transform, opacity;
}
.ab {
    position: relative;
    background: #fff;
    padding: clamp(5rem,11vw,9rem) 0;
    overflow: hidden;
    isolation: isolate
}

.ab-circle {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(110% 80% at 20% 0%,#dcecf7 0%,#eef5fa 50%,#f8fbfd 100%);
    -webkit-clip-path: circle(140vmax at 50% 18%);
    clip-path: circle(140vmax at 50% 18%);
    will-change: clip-path
}

.ab-dots {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .55;
    background-image: radial-gradient(rgba(20,83,116,.16) 1px,transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(60% 50% at 85% 30%,#000,transparent);
    mask-image: radial-gradient(60% 50% at 85% 30%,#000,transparent)
}

.ab-title {
    font-size: clamp(2.8rem,7vw,6.4rem);
    font-weight: 700;
    margin: 1.2rem 0 1.8rem;
    color: #0f1d26
}

.ab-lead {
    font-size: clamp(1.15rem,1.8vw,1.45rem);
    line-height: 1.55;
    color: #1c2b36;
    max-width: 38rem;
    margin-bottom: 1.2rem;
    font-weight: 500
}

.ab-p {
    color: #5b6b76;
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 36rem;
    margin-bottom: 1.4rem
}

.ab-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.8rem
}

.ab-tag {
    padding: .4rem 1rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(20,83,116,.16);
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary);
    box-shadow: 0 6px 16px rgba(20,83,116,.06)
}

.ab-link {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.9rem;
    border-radius: 50px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: .92rem;
    transition: .35s;
    position: relative;
    overflow: hidden
}

    .ab-link::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--accent);
        transform: translateY(101%);
        transition: transform .4s cubic-bezier(.16,1,.3,1);
        z-index: 0
    }

    .ab-link span, .ab-link {
        z-index: 1
    }

        .ab-link > * {
            position: relative;
            z-index: 1
        }

        .ab-link:hover {
            color: #fff;
            box-shadow: 0 16px 34px rgba(221,68,26,.32)
        }

            .ab-link:hover::before {
                transform: none
            }

        .ab-link .arr {
            transition: transform .3s
        }

        .ab-link:hover .arr {
            transform: translateX(5px)
        }

        .ab-link.ghost {
            background: transparent;
            color: var(--primary);
            border: 1.5px solid var(--primary)
        }

            .ab-link.ghost:hover {
                color: #fff;
                border-color: var(--accent)
            }

.ab-visual {
    position: relative;
    max-width: 520px;
    margin: 0 auto
}

.ab-ring {
    position: absolute;
    inset: -8%;
    border: 1px dashed rgba(20,83,116,.35);
    border-radius: 50%;
    pointer-events: none
}

    .ab-ring::after {
        content: "";
        position: absolute;
        top: 7%;
        left: 50%;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 18px rgba(221,68,26,.7)
    }

.ab-frame {
    position: relative;
    border-radius: 200px 200px 32px 32px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 40px 80px rgba(20,83,116,.22);
    border: 6px solid #fff
}

    .ab-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.ab-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 20px 45px rgba(20,83,116,.18)
}

    .ab-float .ic2 {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(221,68,26,.12)
    }

    .ab-float svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: var(--accent);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .ab-float b {
        display: block;
        font-size: .95rem;
        line-height: 1.2;
        color: #0f1d26
    }

    .ab-float small {
        color: #6a7a85;
        font-size: .74rem
    }

.ab-f1 {
    left: -8%;
    top: 16%
}

.ab-f2 {
    right: -6%;
    bottom: 14%
}

.ab-badge {
    position: absolute;
    right: 4%;
    top: -5%;
    width: clamp(92px,13vw,120px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: 0 18px 40px rgba(221,68,26,.4);
    border: 4px solid #fff
}

    .ab-badge b {
        font: 700 clamp(1.5rem,3vw,1.9rem)/1 Oswald
    }

    .ab-badge small {
        font-size: .62rem;
        letter-spacing: .14em;
        text-transform: uppercase
    }

.ab-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: clamp(3.5rem,7vw,6rem);
    background: #fff;
    border: 1px solid rgba(20,83,116,.12);
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(20,83,116,.1);
    overflow: hidden
}

.ab-stat {
    padding: clamp(1.4rem,3vw,2.4rem) 1rem;
    text-align: center;
    border-right: 1px solid rgba(20,83,116,.1)
}

    .ab-stat:last-child {
        border-right: 0
    }

    .ab-stat b {
        display: block;
        font: 600 clamp(2.2rem,5vw,4rem)/1 Oswald;
        color: var(--primary)
    }

        .ab-stat b sup {
            color: var(--accent);
            font-size: .5em;
            top: -.7em
        }

    .ab-stat small {
        color: #6a7a85;
        font-size: .85rem
    }

.ab-edu {
    position: relative;
    margin-top: clamp(3.5rem,7vw,6rem);
    padding: clamp(1.8rem,5vw,4.2rem);
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(20,83,116,.12);
    box-shadow: 0 40px 90px rgba(20,83,116,.12);
    -webkit-clip-path: inset(0 0 0 0 round 32px);
    clip-path: inset(0 0 0 0 round 32px)
}

    .ab-edu::before {
        content: "";
        position: absolute;
        right: -90px;
        top: -90px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(221,68,26,.14),transparent 70%)
    }

    .ab-edu h3 {
        font-size: clamp(2rem,4vw,3.2rem);
        color: var(--primary);
        margin: .9rem 0 .4rem
    }

    .ab-edu .sub {
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 1.3rem
    }

    .ab-edu p {
        color: #5b6b76;
        font-size: 1.05rem;
        line-height: 1.75
    }

    .ab-edu img {
        width: 100%;
        border-radius: 24px;
        aspect-ratio: 7/5;
        object-fit: cover;
        box-shadow: 0 24px 55px rgba(20,83,116,.2)
    }

@media(max-width:767px) {
    .ab-f1 {
        left: -2%
    }

    .ab-f2 {
        right: -2%
    }

    .ab-stat small {
        font-size: .72rem
    }

    .ab-ring {
        inset: -4%
    }
}

/* =========================================================
   WHY CHOOSE US (light) – trapezium expands
   ========================================================= */
.wy {
    position: relative;
    background: #e8eff5;
    padding: clamp(5rem,11vw,9rem) 0;
    overflow: hidden;
    isolation: isolate
}

.wy-trap {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(165deg,#ffffff 0%,#f6f9fc 55%,#fff4ef 100%);
    -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    will-change: clip-path
}

.wy-slash {
    position: absolute;
    z-index: -1;
    top: -10%;
    right: -6%;
    width: 30%;
    height: 130%;
    background: linear-gradient(180deg,rgba(221,68,26,.10),rgba(221,68,26,0));
    transform: skewX(-14deg);
    pointer-events: none
}

    .wy-slash.b {
        right: auto;
        left: -12%;
        width: 22%;
        background: linear-gradient(180deg,rgba(20,83,116,.09),rgba(20,83,116,0))
    }

.wy-title {
    font-size: clamp(2.8rem,7vw,6rem);
    font-weight: 700;
    color: #0f1d26;
    margin: 1rem 0 0
}

.wy-sub {
    color: #5b6b76;
    max-width: 34rem;
    margin: 1.2rem auto 0;
    font-size: 1.1rem
}

.wy-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(2.2rem,3.5vw,3rem) clamp(1.2rem,2.5vw,2rem);
    margin-top: clamp(3.5rem,6vw,5rem)
}

@media(max-width:991px) {
    .wy-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .wy-grid {
        grid-template-columns: 1fr
    }
}

.wy-card {
    position: relative;
    padding-top: 26px;
    perspective: 900px
}

.wy-tab {
    position: absolute;
    top: 0;
    left: 7%;
    right: 7%;
    height: 52px;
    z-index: 2;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    font: 600 1.05rem Oswald;
    letter-spacing: .06em;
    text-transform: uppercase;
    -webkit-clip-path: polygon(0 0,100% 0,92% 100%,8% 100%);
    clip-path: polygon(0 0,100% 0,92% 100%,8% 100%);
    transition: background .35s;
    box-shadow: 0 10px 24px rgba(20,83,116,.3)
}

.wy-card:hover .wy-tab {
    background: var(--accent)
}

.wy-in {
    position: relative;
    height: 100%;
    padding: calc(52px + 1.7rem) 1.7rem 2rem;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(20,83,116,.12);
    box-shadow: 0 20px 50px rgba(20,83,116,.08);
    transform-style: preserve-3d;
    will-change: transform;
    transition: border-color .3s,box-shadow .3s
}

    .wy-in::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s;
        background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(221,68,26,.1),transparent 60%)
    }

    .wy-in:hover {
        border-color: rgba(221,68,26,.5);
        box-shadow: 0 30px 60px rgba(221,68,26,.14)
    }

        .wy-in:hover::before {
            opacity: 1
        }

.wy-ico {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(20,83,116,.1),rgba(221,68,26,.12));
    margin-bottom: 1.1rem
}

    .wy-ico svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: var(--primary);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.wy-in p {
    margin: 0;
    color: #5b6b76;
    font-size: 1rem;
    line-height: 1.65
}

.wy-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,var(--accent),transparent);
    transform-origin: left
}

/* SPLIT SERVICES */
.split {
    position: relative;
    background: #f8f9fa;
    overflow: hidden;
    transform: translateZ(0);
    touch-action: pan-y
}

.sp-in {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr
}

.txts, .imgs {
    position: relative;
    overflow: hidden;
    height: 100%
}

.tx, .im {
    position: absolute;
    inset: 0;
    will-change: transform
}

.tx {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem,6vw,8rem);
    background: radial-gradient(40% 40% at 0% 0%,rgba(222,211,216,.25),transparent 70%),#f8f9fa
}

    .tx .n {
        color: var(--accent);
        font-size: 1rem;
        letter-spacing: .2em;
        font-weight: 600
    }

    .tx h3 {
        font-size: clamp(2.5rem,6vw,5.5rem);
        font-weight: 600;
        margin: .5rem 0 1rem;
        color: #111
    }

    .tx p {
        color: #555;
        max-width: 38rem;
        font-size: 1.1rem
    }

.tg {
    display: inline-block;
    margin: .25rem .3rem 0 0;
    padding: .4rem 1rem;
    border: 1px solid #dcdcdc;
    border-radius: 50px;
    background: var(--logo-pink);
    font-size: .82rem;
    color: #222;
    font-weight: 500
}

.more {
    color: #111;
    text-decoration: none;
    margin-top: 1.5rem;
    display: inline-block;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 3px;
    font-weight: 600;
    width: fit-content
}

.im {
    background: linear-gradient(145deg,#e0e0e0,#cfcfcf)
}

    .im img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.95) brightness(.95)
    }

    .im span {
        position: absolute;
        left: 2.5rem;
        bottom: 2.5rem;
        font-size: clamp(1.8rem,3.5vw,2.8rem);
        color: #fff;
        text-shadow: 0 4px 20px rgba(0,0,0,.6)
    }

.cnt {
    position: absolute;
    right: 3rem;
    top: 2rem;
    z-index: 5;
    font-size: 1rem;
    letter-spacing: .2em;
    color: #555
}

@media(min-width:992px) {
    .split {
        height: calc(100vh - var(--navtop));
        height: calc(100svh - var(--navtop))
    }

    .sp-in {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important
    }
}

@media(max-width:991px) {
    .split {
        height: auto;
        min-height: 100svh
    }

    .sp-in {
        display: flex;
        flex-direction: column;
        height: auto
    }

    .imgs {
        height: 50svh;
        order: -1
    }

    .txts {
        height: auto
    }

    .tx {
        position: relative;
        inset: auto;
        padding: 2rem 1.5rem;
        transform: none !important
    }

    .im {
        position: relative;
        inset: auto;
        height: 100%;
        transform: none !important
    }

    .cnt {
        top: 1rem;
        right: 1rem
    }
}
/* PROCESS */
.proc {
    background: #fff;
    padding: clamp(5rem,10vw,8rem) 0;
    border-top: 1px solid #eaeaea
}

.pline {
    height: 2px;
    background: #e0e0e0;
    margin: 2.5rem 0
}

    .pline i {
        display: block;
        height: 100%;
        background: var(--accent);
        transform: scaleX(1);
        transform-origin: left
    }

.step {
    padding: 2.5rem 2rem;
    border: 1px solid #eaeaea;
    border-radius: 20px;
    height: 100%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    transition: .3s
}

    .step:hover {
        transform: translateY(-6px);
        border-color: var(--accent);
        box-shadow: 0 20px 40px rgba(221,68,26,.12)
    }

.sn {
    font-size: 3rem;
    font-family: Oswald;
    color: var(--accent);
    display: block;
    margin-bottom: .5rem;
    font-weight: 700
}

.step h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: .8rem;
    color: #111
}

.step p {
    color: #555;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5
}
/* TESTIMONIALS */
.tm {
    position: relative;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    transform: translateZ(0)
}

    .tm h2 {
        font-size: clamp(2.2rem,4.5vw,4.5rem);
        font-weight: 600;
        color: #111
    }

.gv {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #dcdcdc;
    border-radius: 18px;
    padding: 1rem 1.4rem;
    background: #fff;
    margin: 1.2rem 0 1rem
}

    .gv b {
        font-size: 2.2rem;
        font-family: Oswald
    }

    .gv .st {
        color: #f5b301;
        letter-spacing: 2px
    }

.gb {
    list-style: none;
    padding: 0;
    margin: 0
}

    .gb li {
        padding: .3rem 0;
        color: #444
    }

        .gb li::before {
            content: "✓";
            display: inline-grid;
            place-items: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(221,68,26,.15);
            color: var(--accent);
            font-size: .65rem;
            margin-right: .7rem
        }

.deck {
    position: relative;
    height: min(58vh,420px)
}

.tc {
    position: absolute;
    inset: 0;
    background: #fff;
    color: #111;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: clamp(1.3rem,3vw,2.4rem);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    will-change: transform
}

    .tc q {
        font-size: clamp(1.05rem,2vw,1.45rem);
        line-height: 1.4;
        quotes: none;
        color: #222
    }

    .tc .st {
        color: #f5b301;
        letter-spacing: 2px
    }

.av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--primary),var(--accent));
    display: inline-block;
    margin-right: .8rem;
    vertical-align: middle
}

.vf {
    font-size: .75rem;
    color: #1a7f37;
    background: #e6f6ea;
    border-radius: 50px;
    padding: .2rem .7rem
}

@media(min-width:992px) {
    .tm {
        height: calc(100vh - var(--navtop));
        height: calc(100svh - var(--navtop));
        overflow: hidden
    }
}

@media(max-width:991px) {
    .tm {
        height: calc(100vh - var(--navtop));
        height: calc(100svh - var(--navtop));
        overflow: hidden;
        align-items: flex-start;
        padding-top: 2rem
    }

    .gb {
        display: none
    }

    .deck {
        height: 44svh;
        margin-top: .8rem
    }
}
/* CLIENTELE */
.cl {
    background: #f8f9fa;
    padding: clamp(5rem,10vw,8rem) 0
}

.cells {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    overflow: hidden;
    margin: 3rem 0 3.5rem;
    background: #fff
}

@media(min-width:768px) {
    .cells {
        grid-template-columns: repeat(4,1fr)
    }
}

.cells > div {
    padding: clamp(1.5rem,3.5vw,2.8rem) 1rem;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    text-align: center
}

.cells b {
    display: block;
    font: 600 clamp(2.4rem,5vw,4.2rem) Oswald;
    color: #111
}

.cells small {
    color: #666;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: .8rem
}

.mqr {
    overflow: hidden;
    margin-top: 1.2rem;
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

.trk {
    display: flex;
    width: max-content;
    animation: lft 40s linear infinite
}

    .trk.r {
        animation-direction: reverse
    }

.mqr:hover .trk {
    animation-play-state: paused
}

@keyframes lft {
    to {
        transform: translateX(-50%)
    }
}

.lg {
    margin-right: 1.2rem;
    min-width: 200px;
    padding: 1.4rem 1.8rem;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: #fff;
    color: #555;
    font: 500 1.3rem Oswald;
    text-transform: uppercase;
    text-align: center;
    transition: .3s
}

    .lg:hover {
        color: #111;
        border-color: var(--accent);
        transform: translateY(-4px);
        background: rgba(221,68,26,.05)
    }
/* INDUSTRIES */
.ind {
    background: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem
}

.itrack {
    display: flex;
    gap: 2.5vw;
    padding: 0 50vw;
    width: max-content;
    align-items: center
}

.ic {
    flex: 0 0 clamp(240px,65vw,480px);
    aspect-ratio: 4/5;
    max-height: 60svh;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    color: #fff;
    font-size: clamp(1.25rem,2.5vw,1.9rem);
    transform: scale(.8);
    opacity: .5;
    will-change: transform
}

    .ic img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .ic::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,rgba(0,0,0,.85),transparent 55%)
    }

    .ic span {
        position: relative;
        z-index: 1
    }

.ind {
    height: calc(100vh - var(--navtop));
    height: calc(100svh - var(--navtop));
    transform: translateZ(0)
}
/* FAQ & CONTACT */
.faq {
    background: #f0f2f5;
    color: #111;
    padding: clamp(5rem,10vw,8rem) 0
}

    .faq h2 {
        font-size: clamp(2.2rem,4.5vw,3.8rem);
        font-weight: 600
    }

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: #dcdcdc;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--accent);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-color: #111
}

.accordion-button {
    font-weight: 500;
    font-size: 1.1rem
}

.ask {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 18px;
    padding: 1.6rem;
    margin-top: 1.8rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.04)
}

.contact {
    background: #f8f9fa;
    padding: clamp(5rem,10vw,8rem) 0
}

.ci {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0
}

    .ci li {
        padding: 1rem 0;
        border-top: 1px solid #e0e0e0;
        display: flex;
        flex-direction: column
    }

    .ci small {
        color: #666;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-size: .72rem
    }

    .ci a, .ci span {
        color: #111;
        text-decoration: none;
        font-weight: 500;
        transition: .2s
    }

        .ci a:hover {
            color: var(--accent)
        }

.enq {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: clamp(1.5rem,3.5vw,2.5rem);
    box-shadow: 0 15px 40px rgba(0,0,0,.05)
}

    .enq .form-control, .enq .form-select {
        border: 1px solid #dcdcdc;
        border-radius: 12px;
        padding: .9rem 1.1rem;
        font-size: 16px;
        background-color: #fff;
        color: #111
    }

        .enq .form-control:focus, .enq .form-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 .2rem rgba(221,68,26,.15);
            background-color: #fff;
            color: #111
        }

.btn-send {
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 50px;
    padding: .95rem 2.2rem;
    font-weight: 600;
    transition: .3s;
    min-height: 50px
}

    .btn-send:hover {
        background: var(--accent-hover)
    }
/* FOOTER & DOCK */
footer {
    background: radial-gradient(50% 60% at 0% 0%,rgba(221,68,26,.1),transparent 70%),#eceff1;
    padding: clamp(5rem,9vw,7rem) 0 3rem;
    overflow: hidden;
    border-top: 1px solid #dcdcdc
}

    footer a.l {
        color: #666;
        text-decoration: none;
        display: block;
        padding: .3rem 0;
        transition: .2s
    }

        footer a.l:hover {
            color: #111
        }

.wm {
    font: 700 clamp(4rem,21vw,20rem)/.8 Oswald;
    white-space: nowrap;
    text-align: center;
    color: #ded3d8;
    margin-top: 3.5rem;
    transform: translateY(22%);
    user-select: none
}

.dock {
    position: fixed;
    right: max(14px,env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: .6rem
}

    .dock a, .dock button {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: #111;
        border: 1px solid #ddd;
        box-shadow: 0 10px 25px rgba(0,0,0,.1);
        transition: .3s;
        text-decoration: none
    }

    .dock svg {
        width: 22px;
        height: 22px;
        fill: currentColor
    }

    .dock a:hover {
        transform: scale(1.1);
        border-color: var(--accent)
    }

    .dock .d-wa {
        background: #25D366;
        border-color: #25D366;
        color: #fff;
        animation: pulse 2.4s infinite
    }

    .dock .d-call {
        background: var(--accent);
        border-color: #25D366;
        color: #fff
    }

    .dock .d-ig {
        background: linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);
        color: #fff
    }

    .dock .d-in {
        background: #0a66c2;
        color: #fff
    }

    .dock .d-fb {
        background: #1877f2;
        color: #fff
    }

    .dock a span, .dock button span {
        position: absolute;
        right: 60px;
        background: #111;
        color: #fff;
        font-size: .78rem;
        padding: .35rem .7rem;
        border-radius: 8px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: .25s;
        box-shadow: 0 5px 15px rgba(0,0,0,.3)
    }

    .dock a:hover span, .dock button:hover span {
        opacity: 1
    }

    .dock .d-top {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #ddd;
        background: #fff;
        color: #111;
        box-shadow: 0 8px 22px rgba(0,0,0,.18);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: .3s;
        z-index: 100;
        pointer-events: auto
    }

        .dock .d-top.show {
            opacity: 1;
            visibility: visible;
            transform: none
        }

        .dock .d-top:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent)
        }

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,.5)
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37,211,102,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37,211,102,0)
    }
}

@media(max-width:767px) {
    .dock {
        top: auto;
        bottom: max(14px,env(safe-area-inset-bottom));
        transform: none;
        right: max(12px,env(safe-area-inset-right));
        flex-direction: row;
        background: rgba(255,255,255,.95);
        padding: .4rem;
        border-radius: 50px;
        backdrop-filter: blur(12px);
        border: 1px solid #ddd
    }

        .dock .d-sec {
            display: none
        }

        .dock a, .dock button {
            width: 42px;
            height: 42px
        }

        .dock .d-top {
            width: 42px;
            height: 42px
        }
}

@media(prefers-reduced-motion:reduce) {
    .ab-circle, .wy-trap {
        clip-path: none !important
    }
}






/***============Inner Page Start=============***/
/* PAGE BANNER + BREADCRUMB */
.pg-banner {
    position: relative;
    background: #e3ecf3;
    padding: clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,7vw,5.5rem);
    overflow: hidden;
    isolation: isolate
}

.pg-trap {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(165deg,#fff 0%,#f4f8fb 55%,#fff1ea 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%)
}

.pg-slash {
    position: absolute;
    z-index: -1;
    top: -20%;
    right: -5%;
    width: 26%;
    height: 150%;
    background: linear-gradient(180deg,rgba(221,68,26,.12),transparent);
    transform: skewX(-14deg)
}

.crumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    padding: .45rem 1.1rem;
    margin: 0 0 1.4rem;
    width: fit-content;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--line);
    border-radius: 50px;
    font-size: .84rem
}

    .crumbs li {
        display: flex;
        align-items: center;
        color: var(--mut)
    }

        .crumbs li + li::before {
            content: "/";
            margin: 0 .6rem;
            color: #b5c0c8
        }

    .crumbs a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600
    }

        .crumbs a:hover {
            color: var(--accent)
        }

    .crumbs [aria-current] {
        color: var(--ink);
        font-weight: 600
    }

.pg-title {
    font-size: clamp(2.8rem,7.5vw,6.2rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0
}

.pg-sub {
    color: var(--mut);
    font-size: clamp(1.02rem,1.5vw,1.2rem);
    max-width: 40rem;
    margin: 1.2rem 0 0
}

/* SECTIONS */
.sec {
    padding: clamp(4rem,9vw,7.5rem) 0
}

    .sec.alt {
        background: #f5f8fb
    }

.kick {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem 1.1rem;
    border: 1px solid rgba(20,83,116,.2);
    border-radius: 50px;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--primary);
    background: rgba(255,255,255,.8)
}

    .kick i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px rgba(221,68,26,.18)
    }

.ttl {
    font-size: clamp(2.1rem,4.6vw,3.8rem);
    font-weight: 600;
    color: var(--ink);
    margin: 1rem 0 1rem
}

.txt {
    color: var(--mut);
    font-size: 1.06rem;
    line-height: 1.75
}

.btn-p, .btn-o {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    border: 1.5px solid var(--primary);
    transition: .35s
}

.btn-p {
    background: var(--primary);
    color: #fff
}

    .btn-p:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(221,68,26,.3)
    }

.btn-o {
    background: transparent;
    color: var(--primary)
}

    .btn-o:hover {
        background: var(--primary);
        color: #fff
    }

.cardp {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(1.5rem,3vw,2.2rem);
    box-shadow: 0 20px 50px rgba(20,83,116,.07);
    height: 100%;
    transition: .35s
}

    .cardp:hover {
        transform: translateY(-6px);
        border-color: rgba(221,68,26,.45);
        box-shadow: 0 28px 60px rgba(221,68,26,.12)
    }

.ic-b {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(20,83,116,.1),rgba(221,68,26,.12));
    color: var(--primary);
    font-size: 1.7rem;
    margin-bottom: 1.1rem
}

.cardp h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .6rem
}

.cardp p {
    color: var(--mut);
    margin: 0;
    line-height: 1.65
}

.imgf {
    border-radius: 200px 200px 28px 28px;
    overflow: hidden;
    box-shadow: 0 36px 70px rgba(20,83,116,.2);
    border: 6px solid #fff
}

    .imgf.sq {
        border-radius: 28px
    }

    .imgf img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.tag {
    display: inline-block;
    margin: .25rem .3rem 0 0;
    padding: .35rem .9rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: .8rem;
    font-weight: 600;
    color: var(--primary)
}

.stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: 0 26px 60px rgba(20,83,116,.09);
    overflow: hidden
}

    .stats > div {
        padding: 1.6rem 1rem;
        text-align: center;
        border-right: 1px solid var(--line)
    }

        .stats > div:last-child {
            border: 0
        }

    .stats b {
        display: block;
        font: 600 clamp(2rem,4.4vw,3.4rem)/1 Oswald;
        color: var(--primary)
    }

    .stats small {
        color: var(--mut)
    }

.cta {
    background: linear-gradient(135deg,var(--primary),var(--primary-dark));
    color: #fff;
    border-radius: 32px;
    padding: clamp(2rem,6vw,4.5rem);
    position: relative;
    overflow: hidden
}

    .cta::after {
        content: "";
        position: absolute;
        right: -8%;
        top: -40%;
        width: 34%;
        height: 180%;
        background: rgba(221,68,26,.28);
        transform: skewX(-14deg)
    }

    .cta h2 {
        font-size: clamp(2rem,4.4vw,3.4rem);
        position: relative;
        z-index: 1
    }

    .cta p, .cta a {
        position: relative;
        z-index: 1
    }

    .cta .btn-p {
        background: var(--accent);
        border-color: var(--accent)
    }

        .cta .btn-p:hover {
            background: #fff;
            color: var(--accent);
            border-color: #fff
        }

/* FILTER CHIPS */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 2.2rem
}

    .chips button {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--primary);
        padding: .5rem 1.2rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: .88rem;
        transition: .25s
    }

        .chips button:hover {
            border-color: var(--accent)
        }

        .chips button.on {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary)
        }

/* GALLERY / VIDEO / PORTFOLIO */
.masonry {
    columns: 3 260px;
    column-gap: 1rem
}

.ph {
    position: relative;
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: 20px;
    overflow: hidden;
    cursor: zoom-in;
    background: #dfe8ee
}

    .ph img {
        width: 100%;
        transition: transform .8s cubic-bezier(.16,1,.3,1)
    }

    .ph:hover img {
        transform: scale(1.07)
    }

    .ph span, .vd .cap, .pf .cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2.5rem 1.2rem 1rem;
        color: #fff;
        font-weight: 600;
        background: linear-gradient(to top,rgba(10,24,33,.8),transparent);
        transform: translateY(100%);
        transition: .4s
    }

    .ph:hover span, .vd:hover .cap, .pf:hover .cap {
        transform: none
    }

.vd, .pf {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: #dfe8ee;
    aspect-ratio: 16/10;
    box-shadow: 0 18px 45px rgba(20,83,116,.12)
}

.pf {
    aspect-ratio: 4/3
}

    .vd img, .pf img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s cubic-bezier(.16,1,.3,1)
    }

    .vd:hover img, .pf:hover img {
        transform: scale(1.07)
    }

.play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    box-shadow: 0 0 0 10px rgba(255,255,255,.25);
    transition: .3s
}

.vd:hover .play {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1)
}

.vd .dur {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(10,24,33,.75);
    color: #fff;
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 50px
}

.pf .cap {
    transform: none;
    padding-top: 3.5rem
}

    .pf .cap small {
        display: block;
        color: var(--pink);
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: .7rem
    }

.lb {
    position: fixed;
    inset: 0;
    background: rgba(8,22,31,.94);
    display: none;
    place-items: center;
    z-index: 200;
    padding: 1rem
}

    .lb.on {
        display: grid
    }

.lb-box {
    width: min(94vw,1100px)
}

    .lb-box img {
        max-height: 82vh;
        margin: auto;
        border-radius: 14px;
        width: auto
    }

    .lb-box iframe {
        width: 100%;
        aspect-ratio: 16/9;
        border: 0;
        border-radius: 14px
    }

.lb button {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 1.4rem;
    display: grid;
    place-items: center
}

    .lb button:hover {
        background: var(--accent)
    }

.lb .x {
    top: 16px;
    right: 16px
}

.lb .pv {
    left: 14px;
    top: 50%
}

.lb .nx {
    right: 14px;
    top: 50%
}

/* TEAM */
.tm-c {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(20,83,116,.08)
}

    .tm-c .pic {
        aspect-ratio: 4/5;
        overflow: hidden;
        position: relative
    }

    .tm-c img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s
    }

    .tm-c:hover img {
        transform: scale(1.06)
    }

    .tm-c .soc {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 14px;
        display: flex;
        justify-content: center;
        gap: .5rem;
        transform: translateY(160%);
        transition: .4s
    }

    .tm-c:hover .soc {
        transform: none
    }

.soc a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.15)
}

    .soc a:hover {
        background: var(--accent);
        color: #fff
    }

.tm-c .inf {
    padding: 1.1rem 1.3rem 1.3rem
}

.tm-c h3 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--ink);
    font-weight: 600
}

.tm-c small {
    color: var(--accent);
    font-weight: 600
}

/* DESK */
.desk-pic {
    position: sticky;
    top: calc(var(--navtop) + 24px)
}

    .desk-pic .imgf {
        aspect-ratio: 4/5
    }

.desk-name {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.1rem 1.4rem;
    margin: -2.2rem 1.2rem 0;
    position: relative;
    box-shadow: 0 20px 45px rgba(20,83,116,.12)
}

    .desk-name b {
        display: block;
        font: 600 1.5rem Oswald;
        text-transform: uppercase;
        color: var(--ink)
    }

    .desk-name small {
        color: var(--accent);
        font-weight: 600
    }

.quote {
    font: 500 clamp(1.4rem,2.6vw,2.1rem)/1.35 'Schibsted Grotesk',sans-serif;
    color: var(--primary);
    border-left: 4px solid var(--accent);
    padding-left: 1.4rem;
    margin: 0 0 2rem
}

.sign {
    font: italic 600 2.2rem 'Oswald',cursive;
    color: var(--primary);
    margin-top: 1.5rem
}

/* TIMELINE / LIST */
.tl {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--line)
}

    .tl > div {
        position: relative;
        padding: 0 0 2rem 1.2rem
    }

        .tl > div::before {
            content: "";
            position: absolute;
            left: -2.55rem;
            top: .35rem;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 5px rgba(221,68,26,.18)
        }

    .tl b {
        font: 600 1.6rem Oswald;
        color: var(--primary)
    }

    .tl p {
        margin: .2rem 0 0;
        color: var(--mut)
    }

.svc-b {
    padding: clamp(3rem,6vw,5rem) 0;
    border-bottom: 1px solid var(--line)
}

    .svc-b:last-of-type {
        border: 0
    }

    .svc-b ul {
        list-style: none;
        padding: 0;
        margin: 1.2rem 0
    }

    .svc-b li {
        padding: .4rem 0 .4rem 1.8rem;
        position: relative;
        color: #35444e
    }

        .svc-b li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: .45rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(221,68,26,.15);
            color: var(--accent);
            font-size: .62rem;
            display: grid;
            place-items: center
        }

.job {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(20,83,116,.06)
}

    .job summary {
        list-style: none;
        cursor: pointer;
        padding: 1.3rem 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: .6rem 1.2rem;
        align-items: center;
        justify-content: space-between
    }

        .job summary::-webkit-details-marker {
            display: none
        }

    .job h3 {
        font-size: 1.25rem;
        margin: 0;
        font-weight: 600;
        color: var(--ink)
    }

    .job .meta {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap
    }

        .job .meta span {
            font-size: .78rem;
            padding: .25rem .8rem;
            border-radius: 50px;
            background: #eef4f8;
            color: var(--primary);
            font-weight: 600
        }

    .job[open] {
        border-color: rgba(221,68,26,.5)
    }

    .job .bd {
        padding: 0 1.5rem 1.5rem;
        color: var(--mut)
    }

/* CONTACT / FORMS */
.form-control, .form-select {
    border: 1px solid #d7e0e6;
    border-radius: 12px;
    padding: .9rem 1.1rem;
    font-size: 16px
}

    .form-control:focus, .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 .2rem rgba(221,68,26,.15)
    }

.enq {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(1.5rem,3.5vw,2.6rem);
    box-shadow: 0 24px 60px rgba(20,83,116,.09)
}

.btn-send {
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 50px;
    padding: .95rem 2.2rem;
    font-weight: 600;
    transition: .3s;
    min-height: 50px
}

    .btn-send:hover {
        background: var(--accent-hover)
    }

.mapw {
    border-radius: 26px;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 26px 60px rgba(20,83,116,.15);
    aspect-ratio: 16/7;
    min-height: 280px
}

    .mapw iframe {
        width: 100%;
        height: 100%;
        border: 0
    }
/***============Inner Page End===============***/