@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

/* =========================================================
   ROOT
========================================================= */

:root {
    --black: #050505;
    --white: #ffffff;

    --text: #111111;
    --muted: rgba(20, 20, 20, 0.60);

    --glass:
        rgba(255, 255, 255, 0.16);

    --glass-light:
        rgba(255, 255, 255, 0.25);

    --glass-dark:
        rgba(0, 0, 0, 0.08);

    --glass-border:
        rgba(255, 255, 255, 0.45);

    --glass-border-dark:
        rgba(0, 0, 0, 0.10);

    --shadow:
        0 30px 80px rgba(0, 0, 0, 0.12);

    --blur:
        blur(28px) saturate(150%);
}


/* =========================================================
   DARK MODE
========================================================= */

html.dark-mode {
    --text: #ffffff;

    --muted:
        rgba(255, 255, 255, 0.60);

    --glass:
        rgba(255, 255, 255, 0.08);

    --glass-light:
        rgba(255, 255, 255, 0.12);

    --glass-dark:
        rgba(0, 0, 0, 0.18);

    --glass-border:
        rgba(255, 255, 255, 0.16);

    --glass-border-dark:
        rgba(255, 255, 255, 0.09);

    --shadow:
        0 35px 90px rgba(0, 0, 0, 0.38);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    overflow-x: hidden;

    font-family: "Inter", sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(255, 255, 255, 0.95),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 18%,
            rgba(210, 210, 210, 0.70),
            transparent 32%
        ),

        radial-gradient(
            circle at 50% 80%,
            rgba(240, 240, 240, 0.75),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #eeeeee,
            #ffffff 45%,
            #dcdcdc
        );

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


/* background light blob */

body::before {
    content: "";

    position: fixed;

    width: 620px;
    height: 620px;

    top: 8%;
    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.95),
            rgba(190, 190, 190, 0.22) 45%,
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;

    z-index: -2;

    animation:
        floatingBackground 13s ease-in-out infinite;
}


body::after {
    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    left: -180px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.85),
            rgba(140, 140, 140, 0.18) 45%,
            transparent 72%
        );

    filter: blur(22px);

    pointer-events: none;

    z-index: -2;

    animation:
        floatingBackgroundTwo 16s ease-in-out infinite;
}


html.dark-mode body {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(90, 90, 90, 0.28),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(255, 255, 255, 0.09),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 85%,
            rgba(120, 120, 120, 0.16),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #030303,
            #111111 50%,
            #050505
        );
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;

    letter-spacing: -0.04em;

    color: var(--text);
}


a {
    text-decoration: none;
}


/* =========================================================
   REUSABLE LIQUID GLASS
========================================================= */

.dashboard-card,
.floating-card,
.trust-card,
.service-card,
.solution-card,
.benefit-icon,
.theme-toggle,
.main-header,
.advisor-box {
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.24),
            rgba(255, 255, 255, 0.08)
        );

    border:
        1px solid var(--glass-border);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.65),

        inset 0 -1px 0
        rgba(255, 255, 255, 0.10),

        var(--shadow);

    backdrop-filter:
        var(--blur);

    -webkit-backdrop-filter:
        var(--blur);
}


/* glossy reflection */

.dashboard-card::before,
.floating-card::before,
.trust-card::before,
.service-card::before,
.solution-card::before,
.advisor-box::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            130deg,
            rgba(255, 255, 255, 0.46),
            transparent 25%,
            transparent 65%,
            rgba(255, 255, 255, 0.08)
        );

    opacity: 0.58;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
    padding: 8px 0;

    color:
        rgba(255, 255, 255, 0.74);

    background:
        rgba(0, 0, 0, 0.82);

    backdrop-filter:
        blur(20px);

    font-size: 0.864rem;
}


.top-bar-content {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   NAVBAR
========================================================= */

/* =========================================================
   LIQUID GLASS HEADER
========================================================= */

.header-wrapper {
    top: 14px;

    z-index: 1000;

    padding: 0 18px;

    background: transparent;
}


/* Main glass navbar */

.liquid-glass-navbar {
    position: relative;

    min-height: 76px;

    padding: 10px 14px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.07)
        );

    border:
        1px solid rgba(255, 255, 255, 0.45);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.75),

        inset 0 -1px 0
        rgba(255, 255, 255, 0.10),

        0 20px 55px
        rgba(0, 0, 0, 0.10);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);

    overflow: hidden;
}


/* Glass shine */

.liquid-glass-navbar::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.55),
            transparent 20%,
            transparent 70%,
            rgba(255, 255, 255, 0.10)
        );

    opacity: 0.5;
}


/* Extra glass reflection */

.liquid-glass-navbar::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 100px;

    top: -70px;
    left: 25%;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.55),
            transparent 68%
        );

    filter: blur(10px);

    opacity: 0.5;
}


/* Make content stay above reflections */

.liquid-glass-navbar > * {
    position: relative;

    z-index: 2;
}


/* =========================================================
   LOGO
========================================================= */

.brand {
    display: flex;

    align-items: center;

    gap: 11px;
}


.brand:hover {
    color: inherit;
}


.brand-logo {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(10, 10, 10, 0.92),
            rgba(35, 35, 35, 0.75)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.25),

        0 8px 24px
        rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(15px);
}


.brand-text {
    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand-text strong {
    color: var(--text);

    font-size: 1.128rem;

    font-weight: 800;

    letter-spacing: 0.05em;
}


.brand-text small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 0.672rem;

    font-weight: 700;

    letter-spacing: 0.18em;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.navbar-nav {
    gap: 5px;
}


.nav-link {
    position: relative;

    padding:
        10px 15px !important;

    border-radius: 13px;

    color: var(--muted);

    font-size: 1.008rem;

    font-weight: 600;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.nav-link:hover {
    color: var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    transform:
        translateY(-1px);
}


/* Active page */

.nav-link.active {
    color: var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.32);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.40);
}


/* Remove old underline */

.nav-link.active::after {
    display: none;
}


/* =========================================================
   GET QUOTE GLASS BUTTON
========================================================= */

.nav-buttons {
    display: flex;

    align-items: center;
}


.glass-quote-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding:
        0 18px;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.88),
            rgba(25, 25, 25, 0.72)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18),

        0 10px 26px
        rgba(0, 0, 0, 0.16);

    backdrop-filter:
        blur(20px);

    transition:
        0.25s ease;
}


.glass-quote-button:hover {
    color: white;

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            145deg,
            rgba(20, 20, 20, 0.95),
            rgba(45, 45, 45, 0.80)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.25),

        0 15px 35px
        rgba(0, 0, 0, 0.20);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.custom-toggler {
    width: 44px;
    height: 44px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.36) !important;

    border-radius: 13px;

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

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.35);

    backdrop-filter:
        blur(18px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .header-wrapper {
        top: 8px;

        padding: 0 8px;
    }


    .liquid-glass-navbar {
        border-radius: 20px;

        padding: 9px 12px;
    }


    .navbar-collapse {
        margin-top: 12px;

        padding: 15px;

        border-radius: 18px;

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

        border:
            1px solid
            rgba(255, 255, 255, 0.26);

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);
    }


    .navbar-nav {
        gap: 3px;
    }


    .nav-link {
        margin: 2px 0;
    }


    .nav-buttons {
        margin-top: 12px;
    }


    .glass-quote-button {
        width: 100%;
    }

}


html.dark-mode .main-header {
    background:
        rgba(10, 10, 10, 0.42);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.10);
}


.navbar {
    min-height: 78px;
}


.brand {
    display: flex;

    align-items: center;

    gap: 11px;
}


.brand-logo {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: white;

    background:
        rgba(0, 0, 0, 0.86);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.25),

        0 12px 30px
        rgba(0, 0, 0, 0.16);
}


html.dark-mode .brand-logo {
    color: black;

    background:
        rgba(255, 255, 255, 0.93);
}


.brand-text {
    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand-text strong {
    color: var(--text);

    font-size: 1.128rem;

    letter-spacing: 0.05em;
}


.brand-text small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 0.696rem;

    letter-spacing: 0.18em;
}


.nav-link {
    margin: 0 5px;

    color: var(--muted);

    font-weight: 600;

    font-size: 1.02rem;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.nav-link:hover,
.nav-link.active {
    color: var(--text);

    transform:
        translateY(-1px);
}


.nav-buttons {
    display: flex;

    align-items: center;

    gap: 10px;
}


.theme-toggle {
    width: 43px;
    height: 43px;

    border-radius: 14px;

    color: var(--text);

    cursor: pointer;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    border-radius: 14px;

    font-weight: 700;

    transition:
        0.25s ease;
}


.btn-black,
.btn-dark-custom {
    padding: 12px 21px;

    background:
        rgba(5, 5, 5, 0.90);

    color: white;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.15),

        0 12px 28px
        rgba(0, 0, 0, 0.15);

    backdrop-filter:
        blur(15px);
}


.btn-black:hover,
.btn-dark-custom:hover {
    color: white;

    background:
        rgba(25, 25, 25, 0.94);

    transform:
        translateY(-2px);
}


.btn-light-custom,
.btn-white {
    padding: 12px 21px;

    color: var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.60),

        0 12px 30px
        rgba(0, 0, 0, 0.07);

    backdrop-filter:
        blur(20px);
}


.btn-light-custom:hover,
.btn-white:hover {
    color: var(--text);

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

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
    position: relative;

    padding:
        105px 0 105px;

    overflow: hidden;

    background: transparent;
}


.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 14px;

    border-radius:
        999px;

    color: var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.50);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.60);

    backdrop-filter:
        blur(22px);

    font-size:
        0.816rem;

    font-weight:
        800;

    letter-spacing:
        0.10em;
}


.hero-title {
    margin:
        25px 0 22px;

    max-width:
        720px;

    font-size:
        clamp(
            3.85rem,
            6.6vw,
            6.49rem
        );

    font-weight:
        800;

    line-height:
        0.96;
}


.hero-title span {
    color: transparent;

    -webkit-text-stroke:
        1.2px var(--text);
}


.hero-description {
    max-width:
        640px;

    color: var(--muted);

    font-size:
        1.248rem;

    line-height:
        1.8;
}


.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top:
        28px;
}


.hero-features {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top:
        38px;
}


.hero-features span {
    color: var(--muted);

    font-size:
        0.924rem;

    font-weight:
        600;
}


.hero-features i {
    margin-right:
        5px;

    color:
        var(--text);
}


/* =========================================================
   DASHBOARD GLASS
========================================================= */

.dashboard-wrapper {
    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;
}


.dashboard-card {
    width: 100%;

    max-width: 515px;

    padding: 27px;

    border-radius:
        30px;

    z-index: 2;

    transition:
        transform 0.25s ease;
}


.dashboard-card:hover {
    transform:
        translateY(-5px);
}


.dashboard-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.dashboard-header small {
    color: var(--muted);

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;
}


.dashboard-header h3 {
    margin:
        5px 0 0;

    font-size:
        1.44rem;
}


.dashboard-top-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius:
        16px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.42);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.45);

    backdrop-filter:
        blur(20px);
}


/* dark central card */

.protection-card {
    position: relative;

    margin-top: 22px;

    padding: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 22px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.82),
            rgba(20, 20, 20, 0.68)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    backdrop-filter:
        blur(25px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);
}


.protection-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -45px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.20),
            transparent 70%
        );
}


.protection-card span,
.protection-card strong,
.protection-card small {
    display: block;
}


.protection-card span,
.protection-card small {
    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.78rem;
}


.protection-card strong {
    margin:
        5px 0 2px;

    font-size:
        1.416rem;
}


.score-circle {
    width: 72px;
    height: 72px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        6px solid
        rgba(255, 255, 255, 0.85);

    color: white;

    font-size:
        0.936rem;

    font-weight:
        800;

    box-shadow:
        inset 0 0 20px
        rgba(255, 255, 255, 0.06),

        0 0 25px
        rgba(255, 255, 255, 0.10);
}


/* dashboard glass cells */

.dashboard-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top:
        14px;
}


.dashboard-item {
    padding:
        16px;

    border-radius:
        18px;

    color:
        var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.40);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.45);

    backdrop-filter:
        blur(20px);

    transition:
        0.22s ease;
}


html.dark-mode .dashboard-item {
    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(255, 255, 255, 0.12);
}


.dashboard-item:hover {
    color: var(--text);

    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, 0.22);
}


.dashboard-item i {
    display: block;

    margin-bottom:
        13px;

    font-size:
        1.15rem;
}


.dashboard-item span,
.dashboard-item strong {
    display: block;
}


.dashboard-item span {
    color: var(--muted);

    font-size:
        0.732rem;
}


.dashboard-item strong {
    margin-top:
        2px;

    font-size:
        0.936rem;
}


/* advisor */

.advisor-box {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-top:
        14px;

    padding:
        14px;

    border-radius:
        18px;

    color:
        var(--text);
}


.advisor-avatar {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius:
        50%;

    color: white;

    background:
        rgba(0, 0, 0, 0.82);

    font-size:
        0.816rem;

    font-weight:
        800;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);
}


.advisor-text {
    flex: 1;
}


.advisor-text small,
.advisor-text strong {
    display: block;
}


.advisor-text small {
    color: var(--muted);

    font-size:
        0.708rem;
}


.advisor-text strong {
    margin-top:
        2px;

    font-size:
        0.9rem;
}


/* =========================================================
   FLOATING GLASS CARDS
========================================================= */

.floating-card {
    z-index: 4;

    padding:
        14px 16px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius:
        19px;

    animation:
        floatGlass
        5s ease-in-out infinite;
}


.float-left {
    position: absolute;

    left: -10px;

    top: 115px;
}


.float-right {
    position: absolute;

    right: -10px;

    bottom: 90px;

    animation-delay:
        -2s;
}


.floating-card > i {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius:
        13px;

    color: var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.35);
}


.floating-card small,
.floating-card strong {
    display: block;
}


.floating-card small {
    color:
        var(--muted);

    font-size:
        0.684rem;
}


.floating-card strong {
    font-size:
        0.876rem;
}


/* =========================================================
   TRUST
========================================================= */

.trust-section {
    position: relative;

    z-index: 3;

    margin-top:
        -35px;
}


.trust-card {
    display: grid;

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

    overflow: hidden;

    border-radius:
        24px;
}


.trust-item {
    padding:
        25px;

    text-align: center;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.25);
}


.trust-item:last-child {
    border-right: none;
}


.trust-item strong,
.trust-item span {
    display: block;
}


.trust-item strong {
    font-size:
        1.128rem;
}


.trust-item span {
    margin-top:
        4px;

    color: var(--muted);

    font-size:
        0.792rem;
}


/* =========================================================
   SECTIONS
========================================================= */

.services-section,
.solutions-section,
.why-section,
.consultation-section {
    padding:
        95px 0;
}


.section-heading {
    max-width:
        760px;

    margin:
        0 auto 45px;

    text-align:
        center;
}


.section-label {
    color: var(--text);

    font-size:
        0.768rem;

    font-weight:
        800;

    letter-spacing:
        0.17em;
}


.section-heading h2,
.why-title {
    margin:
        12px 0 15px;

    font-size:
        clamp(
            2.64rem,
            4.95vw,
            4.29rem
        );

    font-weight:
        800;

    line-height:
        1.04;
}


.section-heading p,
.why-description {
    color:
        var(--muted);

    line-height:
        1.8;
}


/* ================================
   LIQUID GLASS SERVICE CARDS
================================ */

.service-card {
    position: relative;

    display: block;

    height: 100%;

    min-height: 360px;

    padding: 30px;

    overflow: hidden;

    border-radius: 26px;

    color: var(--text);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.08)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.48);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.70),

        inset 0 -1px 0
        rgba(255, 255, 255, 0.08),

        0 20px 55px
        rgba(0, 0, 0, 0.07);

    backdrop-filter:
        blur(28px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Glass reflection */

.service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            130deg,
            rgba(255, 255, 255, 0.50),
            transparent 24%,
            transparent 68%,
            rgba(255, 255, 255, 0.08)
        );

    opacity: 0.45;
}


/* Make content appear above glass */

.service-card > * {
    position: relative;

    z-index: 2;
}


.service-card:hover {
    color: var(--text);

    transform:
        translateY(-8px);

    border-color:
        rgba(255, 255, 255, 0.75);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.85),

        0 28px 70px
        rgba(0, 0, 0, 0.12);
}


/* ================================
   CARD NUMBER
================================ */

.card-number {
    position: absolute;

    top: 23px;
    right: 25px;

    color: var(--muted);

    font-size: 0.744rem;

    font-weight: 700;

    letter-spacing: 0.10em;
}


/* ================================
   SERVICE ICON
================================ */

.service-icon {
    width: 57px;
    height: 57px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.08)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.60);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.80),

        0 8px 20px
        rgba(0, 0, 0, 0.05);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    font-size: 1.45rem;
}


/* Make sure Bootstrap icon is visible */

.service-icon i {
    display: inline-block !important;

    color: #111111 !important;

    opacity: 1 !important;

    font-size: 1.45rem !important;

    line-height: 1;
}


/* ================================
   CATEGORY
================================ */

.service-card > small {
    display: block;

    margin-top: 27px;

    color: var(--muted);

    font-size: 0.732rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}


/* ================================
   TITLE
================================ */

.service-card h3 {
    margin:
        9px 0 13px;

    color: var(--text);

    font-size: 1.704rem;

    line-height: 1.25;
}


/* ================================
   DESCRIPTION
================================ */

.service-card p {
    color: var(--muted);

    font-size: 1.008rem;

    line-height: 1.75;
}


/* ================================
   LINK
================================ */

.service-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    color: var(--text);

    font-size: 0.888rem;

    font-weight: 800;
}


.service-link i {
    transition:
        transform 0.2s ease;
}


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


/* dark transparent middle service */

.black-card {
    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.74),
            rgba(25, 25, 25, 0.58)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.black-card h3,
.black-card .service-link {
    color:
        white;
}


.black-card p,
.black-card > small {
    color:
        rgba(255, 255, 255, 0.58);
}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {
    background:
        rgba(255, 255, 255, 0.05);

    backdrop-filter:
        blur(10px);
}


.why-black-card {
    position: relative;

    overflow: hidden;

    min-height:
        370px;

    padding:
        40px;

    border-radius:
        30px;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.76),
            rgba(25, 25, 25, 0.55)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.20),

        0 35px 90px
        rgba(0, 0, 0, 0.20);

    backdrop-filter:
        blur(30px);
}


.why-black-card::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -100px;
    top: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.24),
            transparent 70%
        );
}


.why-black-card small {
    font-size:
        0.732rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        rgba(255, 255, 255, 0.58);
}


.why-black-card h2 {
    margin:
        18px 0 14px;

    color:
        white;

    font-size:
        2.53rem;
}


.why-black-card p {
    color:
        rgba(255, 255, 255, 0.60);

    line-height:
        1.8;
}


.progress-title {
    display: flex;

    justify-content:
        space-between;

    margin-top:
        35px;

    font-size:
        0.816rem;

    color:
        rgba(255, 255, 255, 0.75);
}


.custom-progress {
    height:
        8px;

    margin-top:
        9px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.12);
}


.custom-progress span {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            white,
            rgba(255, 255, 255, 0.45)
        );
}


/* benefits */

.benefit-item {
    display: flex;

    gap: 16px;

    margin-bottom:
        23px;
}


.benefit-icon {
    width: 49px;
    height: 49px;

    flex:
        0 0 49px;

    display: grid;

    place-items: center;

    border-radius:
        16px;
}


.benefit-item h5 {
    margin:
        2px 0 6px;

    font-size:
        1.152rem;
}


.benefit-item p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.96rem;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions-grid {
    display: grid;

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

    gap: 16px;
}


.solution-card {
    display: block;

    padding:
        25px;

    border-radius:
        23px;

    color:
        var(--text);

    transition:
        0.25s ease;
}


.solution-card:hover {
    color:
        var(--text);

    transform:
        translateY(-6px);

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, 0.13);
}


.solution-card > i {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius:
        15px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.40);

    font-size:
        1.15rem;
}


.solution-card h4 {
    margin:
        21px 0 9px;

    font-size:
        1.2rem;
}


.solution-card p {
    min-height:
        65px;

    color:
        var(--muted);

    font-size:
        0.924rem;

    line-height:
        1.7;
}


.solution-card > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--text);

    font-size:
        0.852rem;

    font-weight:
        800;
}


/* =========================================================
   CONSULTATION GLASS
========================================================= */

.consultation-card {
    position: relative;

    overflow: hidden;

    padding:
        48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-radius:
        30px;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.72),
            rgba(20, 20, 20, 0.52)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18),

        0 35px 90px
        rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(30px);
}


.consultation-card::before {
    content: "";

    position: absolute;

    width:
        330px;

    height:
        330px;

    right:
        -120px;

    top:
        -150px;

    border-radius:
        50%;

    border:
        42px solid
        rgba(255, 255, 255, 0.07);
}


.consultation-card small {
    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.732rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}


.consultation-card h2 {
    margin:
        8px 0 8px;

    color:
        white;

    font-size:
        2.255rem;
}


.consultation-card p {
    margin:
        0;

    max-width:
        650px;

    color:
        rgba(255, 255, 255, 0.62);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    margin-top:
        20px;

    color:
        rgba(255, 255, 255, 0.62);

    background:
        rgba(0, 0, 0, 0.86);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);

    backdrop-filter:
        blur(25px);
}


.footer-logo {
    display: flex;

    align-items: center;

    gap: 10px;
}


.footer-logo strong,
.footer-logo small {
    display: block;
}


.footer-logo strong {
    color:
        white;

    font-size:
        1.08rem;
}


.footer-logo small {
    color:
        rgba(255, 255, 255, 0.45);

    font-size:
        0.684rem;

    letter-spacing:
        0.16em;
}


.footer p {
    max-width:
        370px;

    margin-top:
        16px;

    font-size:
        0.936rem;

    line-height:
        1.7;
}


.footer h6 {
    color:
        white;
}


.footer a {
    display:
        block;

    margin:
        7px 0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.924rem;
}


.footer a:hover {
    color:
        white;
}


.footer-bottom {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 0 25px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    font-size:
        0.804rem;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-button {
    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        30;

    width:
        56px;

    height:
        56px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        rgba(0, 0, 0, 0.72);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18),

        0 18px 40px
        rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(22px);

    font-size:
        1.56rem;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes floatGlass {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }

}


@keyframes floatingBackground {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-45px, 35px);
    }

}


@keyframes floatingBackgroundTwo {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(55px, -30px);
    }

}


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

@media (max-width: 1199px) {

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

}


@media (max-width: 991px) {

    .navbar-collapse {
        padding:
            20px 0;
    }

    .nav-buttons {
        margin-top:
            15px;
    }

    .hero-section {
        padding-top:
            75px;
    }

    .dashboard-card {
        margin-top:
            25px;
    }

    .float-left {
        left:
            5%;
    }

    .float-right {
        right:
            5%;
    }

    .trust-card {
        grid-template-columns:
            1fr 1fr;
    }

    .trust-item:nth-child(2) {
        border-right:
            none;
    }

    .trust-item:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.20);
    }

    .consultation-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


@media (max-width: 767px) {

    .hero-section {
        padding:
            70px 0;
    }

    .hero-title {
        font-size:
            3.52rem;
    }

    .floating-card {
        display:
            none;
    }

    .dashboard-wrapper {
        min-height:
            auto;

        padding-top:
            30px;
    }

    .services-section,
    .solutions-section,
    .why-section,
    .consultation-section {
        padding:
            70px 0;
    }

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

    .footer-bottom {
        flex-direction:
            column;
    }

}


@media (max-width: 520px) {

    .top-bar {
        display:
            none;
    }

    .hero-title {
        font-size:
            2.97rem;
    }

    .hero-description {
        font-size:
            1.116rem;
    }

    .hero-buttons {
        flex-direction:
            column;
    }

    .hero-buttons .btn {
        width:
            100%;
    }

    .dashboard-card {
        padding:
            19px;

        border-radius:
            24px;
    }

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

    .trust-section {
        margin-top:
            10px;
    }

    .trust-card {
        grid-template-columns:
            1fr;
    }

    .trust-item {
        border-right:
            none !important;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.20);
    }

    .trust-item:last-child {
        border-bottom:
            none;
    }

    .section-heading h2,
    .why-title {
        font-size:
            2.53rem;
    }

    .why-black-card {
        padding:
            29px;
    }

    .consultation-card {
        padding:
            34px 25px;
    }

}
/* =========================================================
   LIQUID GLASS NAVIGATION
========================================================= */

.liquid-nav {
    position: relative;

    display: flex;
    align-items: center;

    padding: 5px;

    gap: 2px;

    border-radius: 999px;

    isolation: isolate;
}


/* Keep nav text above glass */

.liquid-nav .nav-item {
    position: relative;

    z-index: 3;
}


.liquid-nav .nav-link {
    position: relative;

    z-index: 3;

    padding: 10px 18px !important;

    border-radius: 999px;

    border: 1px solid transparent;

    color: var(--muted);

    background: transparent !important;

    box-shadow: none !important;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* Current page */

.liquid-nav .nav-link.active {
    color: var(--text);

    background: transparent !important;

    border-color: transparent !important;

    box-shadow: none !important;
}


/* Remove old active decoration */

.liquid-nav .nav-link.active::after {
    display: none;
}


/* Hover text */

.liquid-nav .nav-link:hover {
    color: var(--text);

    background: transparent !important;

    border-color: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   MOVING LIQUID GLASS LENS
========================================================= */

.liquid-nav-lens {
    position: absolute;

    z-index: 1;

    top: 50%;
    left: 0;

    width: 80px;
    height: 50px;

    opacity: 0;

    pointer-events: none;

    border-radius: 999px;

    transform:
        translate3d(0, -50%, 0);


    /* Real transparent glass */

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.24),
            rgba(255, 255, 255, 0.08) 45%,
            rgba(255, 255, 255, 0.045)
        );


    border:
        1px solid
        rgba(255, 255, 255, 0.55);


    backdrop-filter:
        blur(18px)
        saturate(190%)
        contrast(108%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(190%)
        contrast(108%);


    box-shadow:

        /* top highlight */
        inset 0 1px 0
        rgba(255, 255, 255, 0.90),

        /* bottom glass edge */
        inset 0 -1px 0
        rgba(255, 255, 255, 0.16),

        /* left refraction */
        inset 6px 0 14px
        rgba(255, 255, 255, 0.16),

        /* right refraction */
        inset -6px 0 14px
        rgba(0, 0, 0, 0.035),

        /* outer shadow */
        0 7px 25px
        rgba(0, 0, 0, 0.12),

        0 2px 7px
        rgba(0, 0, 0, 0.05);


    transition:

        left 0.38s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        ),

        width 0.38s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        ),

        height 0.25s ease,

        opacity 0.20s ease,

        filter 0.25s ease,

        transform 0.25s ease;
}


/* JS shows lens */

.liquid-nav-lens.is-visible {
    opacity: 1;
}


/* =========================================================
   GLASS TOP REFLECTION
========================================================= */

.liquid-nav-lens::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 9%;
    right: 9%;

    height: 43%;

    border-radius:
        999px 999px 55% 55%;


    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0.20) 45%,
            transparent
        );


    opacity: 0.55;

    filter: blur(0.3px);

    pointer-events: none;
}


/* =========================================================
   GLASS EDGE / REFRACTION
========================================================= */

.liquid-nav-lens::after {
    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    pointer-events: none;


    border:
        1px solid
        rgba(255, 255, 255, 0.16);


    box-shadow:

        inset 3px 0 7px
        rgba(255, 255, 255, 0.25),

        inset -3px 0 7px
        rgba(0, 0, 0, 0.05),

        inset 0 3px 8px
        rgba(255, 255, 255, 0.16);
}


/* =========================================================
   HOVERED NAV TEXT
========================================================= */

.liquid-nav .nav-link.liquid-hover {
    color: var(--text);

    transform:
        scale(1.04);
}


/* =========================================================
   CLICK / PRESS LIQUID EFFECT
========================================================= */

.liquid-nav-lens.lens-click {
    height: 55px;

    filter:
        brightness(1.06)
        saturate(1.08);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .liquid-nav {
        display: block;

        padding: 0;
    }


    .liquid-nav-lens {
        display: none;
    }


    .liquid-nav .nav-link {
        padding:
            11px 14px !important;

        border-radius: 13px;
    }


    .liquid-nav .nav-link.active {
        background:
            rgba(255, 255, 255, 0.18)
            !important;

        border:
            1px solid
            rgba(255, 255, 255, 0.28)
            !important;
    }
}

/* =========================================================
   INSURANCE PAGE
   Uses same Liquid Glass system as homepage
========================================================= */


/* =========================================================
   HERO
========================================================= */

.ins-hero {
    position: relative;

    padding:
        110px 0 100px;

    overflow: hidden;
}


.ins-hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -180px;
    top: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.85),
            rgba(180, 180, 180, 0.14) 45%,
            transparent 70%
        );

    filter:
        blur(22px);

    pointer-events: none;
}



.ins-hero-title {
    margin:
        14px 0 22px;

    max-width:
        680px;

    font-size:
        clamp(
            4.18rem,
            6.82vw,
            6.6rem
        );

    font-weight:
        800;

    line-height:
        0.95;

    letter-spacing:
        -0.065em;
}


.ins-hero-title span {
    color: transparent;

    -webkit-text-stroke:
        1.2px var(--text);
}


.ins-hero-description {
    max-width:
        600px;

    color:
        var(--muted);

    font-size:
        1.2rem;

    line-height:
        1.8;
}


.ins-hero-buttons {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        28px;
}


.ins-hero-points {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        38px;
}


.ins-hero-points span {
    color:
        var(--muted);

    font-size:
        0.9rem;

    font-weight:
        600;
}


.ins-hero-points i {
    margin-right:
        5px;

    color:
        var(--text);
}



/* =========================================================
   HERO VISUAL
========================================================= */

.ins-hero-visual {
    position:
        relative;

    min-height:
        570px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}



/* MAIN LIQUID GLASS */

.ins-overview-card {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        500px;

    padding:
        30px;

    overflow:
        hidden;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.065)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.78),

        inset 0 -1px 0
        rgba(255, 255, 255, 0.08),

        0 32px 85px
        rgba(0, 0, 0, 0.11);

    backdrop-filter:
        blur(30px)
        saturate(165%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(165%);
}


.ins-overview-card::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    pointer-events:
        none;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.52),
            transparent 25%,
            transparent 70%,
            rgba(255, 255, 255, 0.08)
        );

    opacity:
        0.42;
}


.ins-overview-card > * {
    position:
        relative;

    z-index:
        2;
}



.ins-overview-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;
}


.ins-overview-header small {
    color:
        var(--muted);

    font-size:
        0.696rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}


.ins-overview-header h3 {
    max-width:
        330px;

    margin:
        7px 0 0;

    font-size:
        2.09rem;

    line-height:
        1.15;
}



.ins-overview-shield {
    width:
        54px;

    height:
        54px;

    flex:
        0 0 54px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        18px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.68);

    font-size:
        1.56rem;
}



/* OVERVIEW MINI CARDS */

.ins-overview-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        11px;

    margin-top:
        35px;
}


.ins-overview-item {
    padding:
        17px;

    border-radius:
        18px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.40);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.45);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.ins-overview-item i {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--text);

    font-size:
        1.15rem;
}


.ins-overview-item span,
.ins-overview-item strong {
    display:
        block;
}


.ins-overview-item span {
    color:
        var(--muted);

    font-size:
        0.72rem;
}


.ins-overview-item strong {
    margin-top:
        2px;

    color:
        var(--text);

    font-size:
        0.936rem;
}



/* REVIEW ROW */

.ins-review-row {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        12px;

    padding:
        14px;

    border-radius:
        18px;

    color:
        var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.38);

    transition:
        0.25s ease;
}


.ins-review-row:hover {
    color:
        var(--text);

    background:
        rgba(255, 255, 255, 0.19);
}


.ins-review-icon {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.45);
}


.ins-review-row > div:nth-child(2) {
    flex:
        1;
}


.ins-review-row small,
.ins-review-row strong {
    display:
        block;
}


.ins-review-row small {
    color:
        var(--muted);

    font-size:
        0.672rem;

    letter-spacing:
        0.10em;
}


.ins-review-row strong {
    margin-top:
        3px;

    font-size:
        0.888rem;
}



/* =========================================================
   FLOATING GLASS
========================================================= */

.ins-floating {
    position:
        absolute;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 15px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.23),
            rgba(255, 255, 255, 0.07)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.52);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.75),

        0 18px 45px
        rgba(0, 0, 0, 0.09);

    backdrop-filter:
        blur(25px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(160%);

    animation:
        insFloat 5s ease-in-out infinite;
}


.ins-floating > i {
    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.42);
}


.ins-floating small,
.ins-floating strong {
    display:
        block;
}


.ins-floating small {
    color:
        var(--muted);

    font-size:
        0.66rem;
}


.ins-floating strong {
    color:
        var(--text);

    font-size:
        0.84rem;
}


.ins-floating-left {
    left:
        -5px;

    top:
        120px;
}


.ins-floating-right {
    right:
        -4px;

    bottom:
        95px;

    animation-delay:
        -2.5s;
}


@keyframes insFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}



/* =========================================================
   SERVICES
========================================================= */

.ins-services {
    padding:
        100px 0 110px;
}


.ins-section-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        48px;
}


.ins-section-heading h2 {
    max-width:
        620px;

    margin:
        10px 0 0;

    font-size:
        clamp(
            2.97rem,
            5.5vw,
            4.84rem
        );

    line-height:
        1;
}


.ins-section-heading > p {
    max-width:
        400px;

    margin:
        0;

    color:
        var(--muted);

    line-height:
        1.75;
}



/* =========================================================
   INSURANCE CARDS
========================================================= */

.ins-service-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        330px;

    padding:
        27px;

    overflow:
        hidden;

    border-radius:
        25px;

    color:
        var(--text);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.06)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.52);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.72),

        inset 0 -1px 0
        rgba(255, 255, 255, 0.06),

        0 18px 55px
        rgba(0, 0, 0, 0.065);

    backdrop-filter:
        blur(27px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(27px)
        saturate(160%);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.ins-service-card::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    pointer-events:
        none;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.45),
            transparent 25%,
            transparent 72%,
            rgba(255, 255, 255, 0.07)
        );

    opacity:
        0.38;
}


.ins-service-card > * {
    position:
        relative;

    z-index:
        2;
}


.ins-service-card:hover {
    color:
        var(--text);

    transform:
        translateY(-7px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.82),

        0 30px 75px
        rgba(0, 0, 0, 0.11);
}



.ins-card-number {
    position:
        absolute;

    right:
        24px;

    top:
        22px;

    color:
        var(--muted);

    font-size:
        0.72rem;

    font-weight:
        700;
}



.ins-card-icon {
    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.65);

    font-size:
        1.3rem;
}


.ins-card-icon i {
    color:
        var(--text) !important;

    opacity:
        1 !important;
}



.ins-card-category {
    margin-top:
        25px;

    color:
        var(--muted);

    font-size:
        0.696rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}



.ins-service-card h3 {
    margin:
        8px 0 11px;

    color:
        var(--text);

    font-size:
        1.62rem;
}



.ins-service-card p {
    color:
        var(--muted);

    font-size:
        0.96rem;

    line-height:
        1.75;
}



.ins-card-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        auto;

    padding-top:
        20px;

    color:
        var(--text);

    font-size:
        0.864rem;

    font-weight:
        800;
}


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


.ins-service-card:hover
.ins-card-link i {
    transform:
        rotate(45deg);
}



/* =========================================================
   PROCESS
========================================================= */

.ins-process {
    padding:
        80px 0 95px;
}


.ins-process-glass {
    padding:
        45px;

    border-radius:
        29px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.19),
            rgba(255, 255, 255, 0.06)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.50);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.72),

        0 25px 70px
        rgba(0, 0, 0, 0.07);

    backdrop-filter:
        blur(28px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);
}


.ins-process-heading {
    text-align:
        center;
}


.ins-process-heading h2 {
    margin:
        10px 0 0;

    font-size:
        clamp(
            2.53rem,
            4.4vw,
            3.96rem
        );
}


.ins-process-steps {
    display:
        grid;

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

    align-items:
        center;

    gap:
        20px;

    margin-top:
        42px;
}


.ins-process-step {
    display:
        flex;

    gap:
        14px;

    align-items:
        flex-start;
}


.ins-process-step > span {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.48);

    font-size:
        0.744rem;

    font-weight:
        800;
}


.ins-process-step h4 {
    margin:
        1px 0 5px;

    font-size:
        1.14rem;
}


.ins-process-step p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.888rem;

    line-height:
        1.6;
}


.ins-process-arrow {
    color:
        var(--muted);

    font-size:
        1.2rem;
}



/* =========================================================
   FINAL CTA
========================================================= */

.ins-help {
    padding:
        70px 0 120px;
}


.ins-help-glass {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        46px;

    border-radius:
        29px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.07)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.75),

        0 28px 75px
        rgba(0, 0, 0, 0.08);

    backdrop-filter:
        blur(30px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(160%);
}


.ins-help-glass > div > span {
    color:
        var(--muted);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}


.ins-help-glass h2 {
    max-width:
        620px;

    margin:
        8px 0 9px;

    font-size:
        2.475rem;
}


.ins-help-glass p {
    max-width:
        620px;

    margin:
        0;

    color:
        var(--muted);
}



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

@media (max-width: 991px) {

    .ins-section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .ins-floating {
        display:
            none;
    }


    .ins-process-steps {
        grid-template-columns:
            1fr;
    }


    .ins-process-arrow {
        transform:
            rotate(90deg);

        margin-left:
            18px;
    }


    .ins-help-glass {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


@media (max-width: 767px) {

    .ins-hero {
        padding:
            75px 0;
    }


    .ins-hero-title {
        font-size:
            3.41rem;
    }


    .ins-hero-visual {
        min-height:
            auto;

        margin-top:
            30px;
    }


    .ins-overview-card {
        padding:
            22px;

        border-radius:
            25px;
    }


    .ins-overview-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .ins-services {
        padding:
            75px 0;
    }


    .ins-process-glass {
        padding:
            30px 24px;
    }


    .ins-help-glass {
        padding:
            32px 24px;
    }

}

/* =========================================================
   FINAL LIQUID GLASS NAV OVERRIDE
   KEEP THIS AT VERY BOTTOM OF STYLE.CSS
========================================================= */


/* NAV CONTAINER */

.liquid-nav {
    position: relative !important;

    display: flex;

    align-items: center;

    gap: 2px;

    padding: 5px;

    border-radius: 999px;

    isolation: isolate;
}


/* NAV ITEMS ABOVE GLASS */

.liquid-nav .nav-item {
    position: relative;

    z-index: 3;
}


/* NAV TEXT */

.liquid-nav .nav-link {
    position: relative;

    z-index: 3;

    padding:
        10px 18px !important;

    margin: 0 !important;

    border-radius: 999px;

    color: var(--muted);

    background:
        transparent !important;

    border:
        1px solid transparent !important;

    box-shadow:
        none !important;

    transition:
        color 0.22s ease,
        transform 0.22s ease !important;
}


/* CURRENT PAGE */

.liquid-nav .nav-link.active {
    color:
        var(--text) !important;

    background:
        transparent !important;

    border-color:
        transparent !important;

    box-shadow:
        none !important;

    transform:
        none;
}


/* REMOVE OLD ACTIVE EFFECT */

.liquid-nav .nav-link.active::after {
    display: none !important;
}


/* NORMAL HOVER */

.liquid-nav .nav-link:hover {
    color:
        var(--text) !important;

    background:
        transparent !important;

    border-color:
        transparent !important;

    box-shadow:
        none !important;
}


/* HOVERED TEXT */

.liquid-nav .nav-link.liquid-hover {
    color:
        var(--text) !important;

    transform:
        scale(1.04) !important;
}


/* =========================================================
   ACTUAL LIQUID GLASS LENS
========================================================= */

#liquidNavLens.liquid-nav-lens {
    display: block;

    position: absolute !important;

    z-index: 1;

    top: 50% !important;

    left: 0;

    width: 80px;

    height: 50px;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: none;

    border-radius:
        999px;


    transform:
        translateY(-50%);


    /* TRANSPARENT GLASS */

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.27) 0%,
            rgba(255,255,255,0.13) 40%,
            rgba(255,255,255,0.055) 100%
        ) !important;


    /* GLASS EDGE */

    border:
        1px solid
        rgba(255,255,255,0.62) !important;


    /* LIQUID BLUR */

    backdrop-filter:
        blur(18px)
        saturate(190%)
        contrast(108%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(190%)
        contrast(108%) !important;


    /* REFRACTION / DEPTH */

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.95),

        inset 0 -1px 0
        rgba(255,255,255,0.16),

        inset 7px 0 14px
        rgba(255,255,255,0.15),

        inset -7px 0 14px
        rgba(0,0,0,0.035),

        0 8px 25px
        rgba(0,0,0,0.12),

        0 2px 7px
        rgba(0,0,0,0.05) !important;


    /* APPLE-LIKE MOVEMENT */

    transition:

        left
        0.40s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        ),

        width
        0.40s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        ),

        height
        0.20s ease,

        filter
        0.20s ease !important;
}


/* ALWAYS ALLOW JS VISIBLE CLASS */

#liquidNavLens.liquid-nav-lens.is-visible {
    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   TOP GLASS REFLECTION
========================================================= */

#liquidNavLens.liquid-nav-lens::before {
    content: "";

    position: absolute;

    top: 3px;

    left: 9%;

    right: 9%;

    height: 42%;

    border-radius:
        999px 999px 60% 60%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.78),
            rgba(255,255,255,0.20) 52%,
            transparent
        );

    opacity: 0.56;

    pointer-events: none;
}


/* =========================================================
   GLASS REFRACTIVE EDGE
========================================================= */

#liquidNavLens.liquid-nav-lens::after {
    content: "";

    position: absolute;

    inset: -1px;

    border-radius:
        inherit;

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,0.14);

    box-shadow:

        inset 3px 0 7px
        rgba(255,255,255,0.25),

        inset -3px 0 7px
        rgba(0,0,0,0.05),

        inset 0 3px 8px
        rgba(255,255,255,0.14);
}


/* =========================================================
   CLICK SQUISH
========================================================= */

#liquidNavLens.liquid-nav-lens.lens-click {
    height: 55px;

    filter:
        brightness(1.07)
        saturate(1.10);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .liquid-nav {
        display: block;
        padding: 0;
    }


    #liquidNavLens.liquid-nav-lens {
        display: none !important;
    }


    .liquid-nav .nav-link {
        padding:
            11px 14px !important;
    }


    .liquid-nav .nav-link.active {
        background:
            rgba(255,255,255,0.18)
            !important;

        border:
            1px solid
            rgba(255,255,255,0.28)
            !important;
    }

}

/* =========================================================
   FINANCE PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.fin-hero {
    position: relative;
    padding: 110px 0 105px;
    overflow: hidden;
}


.fin-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -190px;
    top: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.92),
            rgba(185,185,185,.15) 45%,
            transparent 70%
        );

    filter: blur(24px);

    pointer-events: none;
}


.fin-hero::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -220px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.75),
            rgba(170,170,170,.10) 48%,
            transparent 72%
        );

    filter: blur(30px);

    pointer-events: none;
}


.fin-hero-content,
.fin-visual {
    position: relative;
    z-index: 2;
}


.fin-eyebrow {
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border-radius: 999px;

    background: rgba(255,255,255,.15);

    border:
        1px solid rgba(255,255,255,.55);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.65);

    backdrop-filter: blur(20px);

    font-size: 0.768rem;
    font-weight: 800;
    letter-spacing: .16em;

    color: var(--text);
}


.fin-hero-title {
    max-width: 720px;

    margin: 25px 0 22px;

    font-size:
        clamp(3.74rem, 6.6vw, 6.38rem);

    font-weight: 800;

    line-height: .97;

    letter-spacing: -.055em;
}


.fin-hero-title span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px var(--text);
}


.fin-hero-description {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 1.2rem;

    line-height: 1.85;
}


.fin-hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


.fin-hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 36px;
}


.fin-hero-points span {
    color: var(--muted);

    font-size: 0.876rem;

    font-weight: 600;
}


.fin-hero-points i {
    margin-right: 5px;

    color: var(--text);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.fin-visual {
    position: relative;

    min-height: 580px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.fin-overview-card {
    position: relative;

    width: 100%;
    max-width: 510px;

    padding: 28px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.24),
            rgba(255,255,255,.075)
        );

    border:
        1px solid rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.80),

        inset 0 -1px 0
        rgba(255,255,255,.10),

        0 30px 80px
        rgba(0,0,0,.11);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);

    z-index: 2;
}


.fin-overview-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.55),
            transparent 22%,
            transparent 70%,
            rgba(255,255,255,.08)
        );

    opacity: .46;
}


.fin-overview-card > * {
    position: relative;
    z-index: 2;
}


.fin-overview-header {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.fin-overview-header small {
    color: var(--muted);

    font-size: 0.696rem;

    font-weight: 700;

    letter-spacing: .13em;
}


.fin-overview-header h3 {
    margin: 5px 0 0;

    font-size: 1.464rem;
}


.fin-overview-icon {
    width: 49px;
    height: 49px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: rgba(255,255,255,.16);

    border:
        1px solid rgba(255,255,255,.48);

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

    backdrop-filter: blur(20px);
}


.fin-score-card {
    margin-top: 23px;

    padding: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 22px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0,0,0,.84),
            rgba(25,25,25,.68)
        );

    border:
        1px solid rgba(255,255,255,.16);

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

    overflow: hidden;
}


.fin-score-card small,
.fin-score-card strong,
.fin-score-card span {
    display: block;
}


.fin-score-card small {
    color: rgba(255,255,255,.50);

    font-size: 0.684rem;

    letter-spacing: .12em;
}


.fin-score-card strong {
    margin: 6px 0 3px;

    font-size: 1.32rem;
}


.fin-score-card span {
    color: rgba(255,255,255,.56);

    font-size: 0.792rem;
}


.fin-score-circle {
    width: 69px;
    height: 69px;

    flex: 0 0 69px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        5px solid rgba(255,255,255,.84);

    font-size: 1.56rem;

    box-shadow:
        inset 0 0 20px
        rgba(255,255,255,.08);
}


.fin-overview-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 14px;
}


.fin-overview-item {
    padding: 17px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.115);

    border:
        1px solid rgba(255,255,255,.43);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.50);

    backdrop-filter: blur(20px);

    transition:
        transform .25s ease,
        background .25s ease;
}


.fin-overview-item:hover {
    transform: translateY(-4px);

    background:
        rgba(255,255,255,.22);
}


.fin-overview-item i {
    display: block;

    margin-bottom: 14px;

    font-size: 1.15rem;
}


.fin-overview-item small,
.fin-overview-item strong {
    display: block;
}


.fin-overview-item small {
    color: var(--muted);

    font-size: 0.66rem;

    letter-spacing: .11em;
}


.fin-overview-item strong {
    margin-top: 4px;

    font-size: 0.9rem;
}


.fin-advisor-row {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;

    padding: 14px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.13);

    border:
        1px solid rgba(255,255,255,.42);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.50);

    backdrop-filter: blur(20px);
}


.fin-advisor-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: white;

    background:
        rgba(0,0,0,.84);
}


.fin-advisor-row small,
.fin-advisor-row strong {
    display: block;
}


.fin-advisor-row small {
    color: var(--muted);

    font-size: 0.648rem;

    letter-spacing: .10em;
}


.fin-advisor-row strong {
    margin-top: 3px;

    font-size: 0.864rem;
}


.fin-advisor-arrow {
    margin-left: auto;
}


/* =========================================================
   FLOATING GLASS
========================================================= */

.fin-floating {
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 16px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.28),
            rgba(255,255,255,.10)
        );

    border:
        1px solid rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.72),

        0 18px 45px
        rgba(0,0,0,.10);

    backdrop-filter:
        blur(24px)
        saturate(160%);

    animation:
        finFloat 5s ease-in-out infinite;
}


.fin-floating-left {
    left: -15px;

    top: 120px;
}


.fin-floating-right {
    right: -12px;

    bottom: 95px;

    animation-delay: -2.2s;
}


.fin-floating-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        rgba(255,255,255,.18);

    border:
        1px solid rgba(255,255,255,.44);
}


.fin-floating small,
.fin-floating strong {
    display: block;
}


.fin-floating small {
    color: var(--muted);

    font-size: 0.624rem;

    letter-spacing: .10em;
}


.fin-floating strong {
    margin-top: 2px;

    font-size: 0.84rem;
}


@keyframes finFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================================
   SERVICES
========================================================= */

.fin-services {
    padding: 100px 0;
}


.fin-section-heading {
    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;
}


.fin-section-heading > span {
    font-size: 0.732rem;

    font-weight: 800;

    letter-spacing: .17em;

    color: var(--text);
}


.fin-section-heading h2 {
    margin: 13px 0 16px;

    font-size:
        clamp(2.75rem, 4.4vw, 4.18rem);

    font-weight: 800;

    line-height: 1.04;
}


.fin-section-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: var(--muted);

    line-height: 1.8;
}


.fin-service-card {
    position: relative;

    display: block;

    height: 100%;

    min-height: 355px;

    padding: 30px;

    overflow: hidden;

    border-radius: 27px;

    color: var(--text);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.23),
            rgba(255,255,255,.075)
        );

    border:
        1px solid rgba(255,255,255,.50);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.72),

        0 20px 55px
        rgba(0,0,0,.07);

    backdrop-filter:
        blur(28px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.fin-service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            130deg,
            rgba(255,255,255,.55),
            transparent 23%,
            transparent 70%,
            rgba(255,255,255,.07)
        );

    opacity: .43;

    pointer-events: none;
}


.fin-service-card > * {
    position: relative;

    z-index: 2;
}


.fin-service-card:hover {
    color: var(--text);

    transform:
        translateY(-8px);

    border-color:
        rgba(255,255,255,.80);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.90),

        0 30px 75px
        rgba(0,0,0,.12);
}


.fin-card-number {
    position: absolute;

    top: 24px;
    right: 26px;

    color: var(--muted);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: .11em;
}


.fin-card-icon {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.33),
            rgba(255,255,255,.08)
        );

    border:
        1px solid rgba(255,255,255,.62);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.85);

    backdrop-filter: blur(20px);

    font-size: 1.4rem;
}


.fin-card-category {
    display: block;

    margin-top: 27px;

    color: var(--muted);

    font-size: 0.696rem;

    font-weight: 800;

    letter-spacing: .15em;
}


.fin-service-card h3 {
    margin: 9px 0 14px;

    color: var(--text);

    font-size: 1.656rem;

    line-height: 1.25;
}


.fin-service-card p {
    margin: 0;

    color: var(--muted);

    font-size: 0.984rem;

    line-height: 1.78;
}


.fin-card-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: var(--text);

    font-size: 0.864rem;

    font-weight: 800;
}


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


.fin-service-card:hover
.fin-card-link i {
    transform:
        translateX(4px);
}


/* =========================================================
   PROCESS
========================================================= */

.fin-process {
    padding: 30px 0 100px;
}


.fin-process-glass {
    position: relative;

    overflow: hidden;

    padding: 55px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.24),
            rgba(255,255,255,.075)
        );

    border:
        1px solid rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.78),

        0 30px 80px
        rgba(0,0,0,.09);

    backdrop-filter:
        blur(30px)
        saturate(165%);
}


.fin-process-heading {
    max-width: 650px;
}


.fin-process-heading span {
    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.fin-process-heading h2 {
    margin: 12px 0 0;

    font-size:
        clamp(2.2rem, 4.4vw, 3.52rem);

    font-weight: 800;
}


.fin-process-steps {
    display: grid;

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

    align-items: start;

    gap: 25px;

    margin-top: 55px;
}


.fin-process-step {
    display: flex;

    gap: 17px;
}


.fin-step-number {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: white;

    background:
        rgba(0,0,0,.88);

    font-size: 0.78rem;

    font-weight: 800;
}


.fin-process-step h4 {
    margin: 1px 0 8px;

    font-size: 1.2rem;
}


.fin-process-step p {
    margin: 0;

    color: var(--muted);

    font-size: 0.924rem;

    line-height: 1.7;
}


.fin-process-line {
    width: 45px;

    height: 1px;

    margin-top: 22px;

    background:
        rgba(0,0,0,.18);
}


/* =========================================================
   CTA
========================================================= */

.fin-help {
    padding: 0 0 105px;
}


.fin-help-glass {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding: 50px;

    border-radius: 31px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0,0,0,.79),
            rgba(24,24,24,.62)
        );

    border:
        1px solid rgba(255,255,255,.17);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.20),

        0 35px 90px
        rgba(0,0,0,.18);

    backdrop-filter: blur(30px);
}


.fin-help-glass::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -120px;
    top: -170px;

    border-radius: 50%;

    border:
        45px solid rgba(255,255,255,.065);

    pointer-events: none;
}


.fin-help-glass > * {
    position: relative;

    z-index: 2;
}


.fin-help-glass small {
    color: rgba(255,255,255,.50);

    font-size: 0.708rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.fin-help-glass h2 {
    margin: 9px 0 9px;

    color: white;

    font-size:
        clamp(1.98rem, 3.3vw, 2.86rem);
}


.fin-help-glass p {
    margin: 0;

    max-width: 650px;

    color:
        rgba(255,255,255,.58);

    line-height: 1.7;
}


.fin-help-button {
    flex: 0 0 auto;

    padding: 13px 20px;

    border-radius: 15px;

    color: #111;

    background:
        rgba(255,255,255,.92);

    border:
        1px solid rgba(255,255,255,.60);

    font-weight: 700;
}


.fin-help-button:hover {
    color: #111;

    background: white;

    transform:
        translateY(-2px);
}


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

@media (max-width: 991px) {

    .fin-hero {
        padding:
            80px 0 85px;
    }


    .fin-visual {
        min-height: 520px;

        margin-top: 20px;
    }


    .fin-floating-left {
        left: 10px;
    }


    .fin-floating-right {
        right: 10px;
    }


    .fin-process-steps {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .fin-process-line {
        display: none;
    }


    .fin-help-glass {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 767px) {

    .fin-hero-title {
        font-size:
            clamp(3.3rem, 15.4vw, 4.84rem);
    }


    .fin-visual {
        min-height: auto;

        padding:
            50px 0 80px;
    }


    .fin-floating {
        display: none;
    }


    .fin-overview-card {
        padding: 21px;
    }


    .fin-overview-grid {
        grid-template-columns: 1fr;
    }


    .fin-process-glass {
        padding: 35px 25px;
    }


    .fin-help-glass {
        padding: 35px 25px;
    }

}

/* =========================================================
   SOCSO / PERKESO PAGE
========================================================= */


/* HERO */

.soc-hero {
    position: relative;
    padding: 110px 0 105px;
    overflow: hidden;
}


.soc-hero::before {
    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    right: -190px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.92),
            rgba(185,185,185,.15) 45%,
            transparent 70%
        );

    filter: blur(24px);

    pointer-events: none;
}


.soc-hero-content,
.soc-visual {
    position: relative;
    z-index: 2;
}


.soc-eyebrow {
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border-radius: 999px;

    color: var(--text);

    background:
        rgba(255,255,255,.15);

    border:
        1px solid
        rgba(255,255,255,.55);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.65);

    backdrop-filter: blur(20px);

    font-size: 0.768rem;
    font-weight: 800;
    letter-spacing: .16em;
}


.soc-hero-title {
    margin: 25px 0 22px;

    max-width: 720px;

    font-size:
        clamp(3.74rem, 6.6vw, 6.38rem);

    font-weight: 800;

    line-height: .97;

    letter-spacing: -.055em;
}


.soc-hero-title span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px var(--text);
}


.soc-hero-description {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 1.2rem;

    line-height: 1.85;
}


.soc-hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


.soc-hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 36px;
}


.soc-hero-points span {
    color: var(--muted);

    font-size: 0.876rem;

    font-weight: 600;
}


.soc-hero-points i {
    margin-right: 5px;

    color: var(--text);
}



/* =========================================================
   OVERVIEW
========================================================= */

.soc-visual {
    min-height: 580px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.soc-overview-card {
    position: relative;

    width: 100%;
    max-width: 510px;

    padding: 28px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.24),
            rgba(255,255,255,.075)
        );

    border:
        1px solid
        rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.80),

        inset 0 -1px 0
        rgba(255,255,255,.10),

        0 30px 80px
        rgba(0,0,0,.11);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);

    z-index: 2;
}


.soc-overview-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.55),
            transparent 22%,
            transparent 70%,
            rgba(255,255,255,.08)
        );

    opacity: .46;
}


.soc-overview-card > * {
    position: relative;
    z-index: 2;
}


.soc-overview-header {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.soc-overview-header small {
    color: var(--muted);

    font-size: 0.696rem;

    font-weight: 700;

    letter-spacing: .13em;
}


.soc-overview-header h3 {
    margin: 5px 0 0;

    font-size: 1.464rem;
}


.soc-overview-icon {
    width: 49px;
    height: 49px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background:
        rgba(255,255,255,.16);

    border:
        1px solid
        rgba(255,255,255,.48);

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

    backdrop-filter: blur(20px);
}



/* DARK STATUS */

.soc-status-card {
    margin-top: 23px;

    padding: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 22px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0,0,0,.84),
            rgba(25,25,25,.68)
        );

    border:
        1px solid
        rgba(255,255,255,.16);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.20);
}


.soc-status-card small,
.soc-status-card strong,
.soc-status-card span {
    display: block;
}


.soc-status-card small {
    color:
        rgba(255,255,255,.50);

    font-size: 0.684rem;

    letter-spacing: .12em;
}


.soc-status-card strong {
    margin: 6px 0 3px;

    font-size: 1.32rem;
}


.soc-status-card span {
    color:
        rgba(255,255,255,.56);

    font-size: 0.792rem;
}


.soc-status-circle {
    width: 69px;
    height: 69px;

    flex: 0 0 69px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        5px solid
        rgba(255,255,255,.84);

    font-size: 1.8rem;
}



/* GRID */

.soc-overview-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 14px;
}


.soc-overview-item {
    padding: 17px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.115);

    border:
        1px solid
        rgba(255,255,255,.43);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.50);

    backdrop-filter: blur(20px);

    transition:
        transform .25s ease,
        background .25s ease;
}


.soc-overview-item:hover {
    transform:
        translateY(-4px);

    background:
        rgba(255,255,255,.22);
}


.soc-overview-item i {
    display: block;

    margin-bottom: 14px;

    font-size: 1.15rem;
}


.soc-overview-item small,
.soc-overview-item strong {
    display: block;
}


.soc-overview-item small {
    color: var(--muted);

    font-size: 0.66rem;

    letter-spacing: .11em;
}


.soc-overview-item strong {
    margin-top: 4px;

    font-size: 0.9rem;
}



/* SUPPORT ROW */

.soc-support-row {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;

    padding: 14px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.13);

    border:
        1px solid
        rgba(255,255,255,.42);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.50);

    backdrop-filter: blur(20px);
}


.soc-support-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: white;

    background:
        rgba(0,0,0,.84);
}


.soc-support-row small,
.soc-support-row strong {
    display: block;
}


.soc-support-row small {
    color: var(--muted);

    font-size: 0.648rem;

    letter-spacing: .10em;
}


.soc-support-row strong {
    margin-top: 3px;

    font-size: 0.864rem;
}


.soc-support-arrow {
    margin-left: auto;
}



/* =========================================================
   FLOATING GLASS
========================================================= */

.soc-floating {
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 16px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.28),
            rgba(255,255,255,.10)
        );

    border:
        1px solid
        rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.72),

        0 18px 45px
        rgba(0,0,0,.10);

    backdrop-filter:
        blur(24px)
        saturate(160%);

    animation:
        socFloat 5s ease-in-out infinite;
}


.soc-floating-left {
    left: -15px;
    top: 120px;
}


.soc-floating-right {
    right: -12px;
    bottom: 95px;

    animation-delay: -2.2s;
}


.soc-floating-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        rgba(255,255,255,.18);

    border:
        1px solid
        rgba(255,255,255,.44);
}


.soc-floating small,
.soc-floating strong {
    display: block;
}


.soc-floating small {
    color: var(--muted);

    font-size: 0.624rem;

    letter-spacing: .10em;
}


.soc-floating strong {
    margin-top: 2px;

    font-size: 0.84rem;
}


@keyframes socFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }

}



/* =========================================================
   SERVICES
========================================================= */

.soc-services {
    padding: 100px 0;
}


.soc-section-heading {
    max-width: 800px;

    margin:
        0 auto 50px;

    text-align: center;
}


.soc-section-heading > span {
    font-size: 0.732rem;

    font-weight: 800;

    letter-spacing: .17em;

    color: var(--text);
}


.soc-section-heading h2 {
    margin:
        13px 0 16px;

    font-size:
        clamp(2.75rem, 4.4vw, 4.18rem);

    font-weight: 800;

    line-height: 1.04;
}


.soc-section-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: var(--muted);

    line-height: 1.8;
}


.soc-service-card {
    position: relative;

    display: block;

    height: 100%;

    min-height: 355px;

    padding: 30px;

    overflow: hidden;

    border-radius: 27px;

    color: var(--text);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.23),
            rgba(255,255,255,.075)
        );

    border:
        1px solid
        rgba(255,255,255,.50);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.72),

        0 20px 55px
        rgba(0,0,0,.07);

    backdrop-filter:
        blur(28px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.soc-service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            130deg,
            rgba(255,255,255,.55),
            transparent 23%,
            transparent 70%,
            rgba(255,255,255,.07)
        );

    opacity: .43;

    pointer-events: none;
}


.soc-service-card > * {
    position: relative;
    z-index: 2;
}


.soc-service-card:hover {
    color: var(--text);

    transform:
        translateY(-8px);

    border-color:
        rgba(255,255,255,.80);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.90),

        0 30px 75px
        rgba(0,0,0,.12);
}


.soc-card-number {
    position: absolute;

    top: 24px;
    right: 26px;

    color: var(--muted);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: .11em;
}


.soc-card-icon {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.33),
            rgba(255,255,255,.08)
        );

    border:
        1px solid
        rgba(255,255,255,.62);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.85);

    backdrop-filter: blur(20px);

    font-size: 1.4rem;
}


.soc-card-category {
    display: block;

    margin-top: 27px;

    color: var(--muted);

    font-size: 0.696rem;

    font-weight: 800;

    letter-spacing: .15em;
}


.soc-service-card h3 {
    margin:
        9px 0 14px;

    color: var(--text);

    font-size: 1.656rem;

    line-height: 1.25;
}


.soc-service-card p {
    margin: 0;

    color: var(--muted);

    font-size: 0.984rem;

    line-height: 1.78;
}


.soc-card-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: var(--text);

    font-size: 0.864rem;

    font-weight: 800;
}


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


.soc-service-card:hover
.soc-card-link i {
    transform:
        translateX(4px);
}



/* =========================================================
   PROCESS
========================================================= */

.soc-process {
    padding:
        30px 0 100px;
}


.soc-process-glass {
    padding: 55px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.24),
            rgba(255,255,255,.075)
        );

    border:
        1px solid
        rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.78),

        0 30px 80px
        rgba(0,0,0,.09);

    backdrop-filter:
        blur(30px)
        saturate(165%);
}


.soc-process-heading {
    max-width: 680px;
}


.soc-process-heading span {
    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.soc-process-heading h2 {
    margin:
        12px 0 0;

    font-size:
        clamp(2.2rem, 4.4vw, 3.52rem);

    font-weight: 800;
}


.soc-process-steps {
    display: grid;

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

    align-items: start;

    gap: 25px;

    margin-top: 55px;
}


.soc-process-step {
    display: flex;

    gap: 17px;
}


.soc-step-number {
    width: 45px;
    height: 45px;

    flex:
        0 0 45px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: white;

    background:
        rgba(0,0,0,.88);

    font-size: 0.78rem;

    font-weight: 800;
}


.soc-process-step h4 {
    margin:
        1px 0 8px;

    font-size: 1.2rem;
}


.soc-process-step p {
    margin: 0;

    color: var(--muted);

    font-size: 0.924rem;

    line-height: 1.7;
}


.soc-process-line {
    width: 45px;

    height: 1px;

    margin-top: 22px;

    background:
        rgba(0,0,0,.18);
}



/* =========================================================
   CTA
========================================================= */

.soc-help {
    padding:
        0 0 105px;
}


.soc-help-glass {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 35px;

    padding: 50px;

    border-radius: 31px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0,0,0,.79),
            rgba(24,24,24,.62)
        );

    border:
        1px solid
        rgba(255,255,255,.17);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.20),

        0 35px 90px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(30px);
}


.soc-help-glass::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -120px;
    top: -170px;

    border-radius: 50%;

    border:
        45px solid
        rgba(255,255,255,.065);

    pointer-events: none;
}


.soc-help-glass > * {
    position: relative;
    z-index: 2;
}


.soc-help-glass small {
    color:
        rgba(255,255,255,.50);

    font-size: 0.708rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.soc-help-glass h2 {
    margin:
        9px 0 9px;

    color: white;

    font-size:
        clamp(1.98rem, 3.3vw, 2.86rem);
}


.soc-help-glass p {
    margin: 0;

    max-width: 650px;

    color:
        rgba(255,255,255,.58);

    line-height: 1.7;
}


.soc-help-button {
    flex: 0 0 auto;

    padding:
        13px 20px;

    border-radius: 15px;

    color: #111;

    background:
        rgba(255,255,255,.92);

    border:
        1px solid
        rgba(255,255,255,.60);

    font-weight: 700;
}


.soc-help-button:hover {
    color: #111;

    background: white;

    transform:
        translateY(-2px);
}



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

@media (max-width: 991px) {

    .soc-hero {
        padding:
            80px 0 85px;
    }


    .soc-visual {
        min-height: 520px;

        margin-top: 20px;
    }


    .soc-floating-left {
        left: 10px;
    }


    .soc-floating-right {
        right: 10px;
    }


    .soc-process-steps {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .soc-process-line {
        display: none;
    }


    .soc-help-glass {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 767px) {

    .soc-hero-title {
        font-size:
            clamp(3.3rem, 15.4vw, 4.84rem);
    }


    .soc-visual {
        min-height: auto;

        padding:
            50px 0 80px;
    }


    .soc-floating {
        display: none;
    }


    .soc-overview-card {
        padding: 21px;
    }


    .soc-overview-grid {
        grid-template-columns: 1fr;
    }


    .soc-process-glass {
        padding:
            35px 25px;
    }


    .soc-help-glass {
        padding:
            35px 25px;
    }

}

/* =========================================================
   LANGUAGE SELECTOR — CLEAN FINAL VERSION
   Matches the navbar glass material, but with stronger
   diffusion so content behind the dropdown is not readable.
========================================================= */

/* The dropdown needs to extend below the navbar. */
.liquid-glass-navbar {
    overflow: visible !important;
}

.navbar-collapse {
    overflow: visible !important;
}


/* =========================================================
   LANGUAGE WRAPPER
========================================================= */

.sp-language {
    position: relative;
    z-index: 9999;
    flex: 0 0 auto;
    margin-left: 18px;
}


/* =========================================================
   LANGUAGE BUTTON
   Uses the same material as the moving nav glass lens.
========================================================= */

.sp-language-button {
    position: relative;
    overflow: hidden;

    min-width: 108px;
    height: 50px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.62);

    color: var(--text);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.27) 0%,
            rgba(255,255,255,0.13) 40%,
            rgba(255,255,255,0.055) 100%
        );

    backdrop-filter:
        blur(18px)
        saturate(190%)
        contrast(108%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(190%)
        contrast(108%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(255,255,255,0.16),
        inset 7px 0 14px rgba(255,255,255,0.15),
        inset -7px 0 14px rgba(0,0,0,0.035),
        0 8px 25px rgba(0,0,0,0.12),
        0 2px 7px rgba(0,0,0,0.05);

    font-family: inherit;
    font-size: 0.948rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}

.sp-language-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.sp-language-button:focus {
    outline: none;
}


/* top reflection — same idea as the nav lens */

.sp-language-button::before {
    content: "";
    position: absolute;

    top: 3px;
    left: 9%;
    right: 9%;
    height: 42%;

    border-radius: 999px 999px 60% 60%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.78),
            rgba(255,255,255,0.20) 52%,
            transparent
        );

    opacity: 0.56;
    pointer-events: none;
}


/* refractive edge */

.sp-language-button::after {
    content: "";
    position: absolute;
    inset: -1px;

    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.14);

    box-shadow:
        inset 3px 0 7px rgba(255,255,255,0.25),
        inset -3px 0 7px rgba(0,0,0,0.05),
        inset 0 3px 8px rgba(255,255,255,0.14);

    pointer-events: none;
}

.sp-language-button > * {
    position: relative;
    z-index: 3;
}

.sp-language-button i {
    flex-shrink: 0;
}

#currentLanguage {
    display: inline-block;
    min-width: 30px;

    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}

.sp-language-arrow {
    margin-left: 1px;
    font-size: 0.62rem;

    transition:
        transform 0.25s cubic-bezier(.34,1.56,.64,1);
}

.sp-language.open .sp-language-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN GLASS
   Same visual family as navbar, but intentionally more
   frosted so objects behind become soft shapes only.
========================================================= */

.sp-language-menu {
    position: absolute;

    top: calc(100% + 14px);
    right: 0;

    width: 230px;
    padding: 10px;

    overflow: hidden;

    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.82);

    /*
       Thicker frosted glass:
       background shapes still influence the glass,
       but text/details behind it should no longer be readable.
    */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.76),
            rgba(245,245,245,0.52)
        );

    backdrop-filter:
        blur(72px)
        saturate(145%)
        brightness(1.04)
        contrast(92%);

    -webkit-backdrop-filter:
        blur(72px)
        saturate(145%)
        brightness(1.04)
        contrast(92%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        inset 0 -1px 0 rgba(255,255,255,0.20),
        inset 8px 0 18px rgba(255,255,255,0.12),
        inset -8px 0 18px rgba(0,0,0,0.025),
        0 20px 55px rgba(0,0,0,0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-7px) scale(0.97);
    transform-origin: top right;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.32s cubic-bezier(.34,1.56,.64,1);
}


/* same diagonal shine as navbar */

.sp-language-menu::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    border-radius: inherit;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,0.68),
            rgba(255,255,255,0.16) 20%,
            transparent 70%,
            rgba(255,255,255,0.10)
        );

    opacity: 0.50;
    pointer-events: none;
}


/* same soft extra reflection as navbar, scaled to menu */

.sp-language-menu::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 80px;

    top: -55px;
    left: 20px;

    z-index: 1;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.55),
            transparent 68%
        );

    filter: blur(10px);
    opacity: 0.50;
    pointer-events: none;
}


.sp-language.open .sp-language-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0) scale(1);
}


/* =========================================================
   LANGUAGE OPTIONS
   One glass panel only — rows do NOT get their own blur.
========================================================= */

.sp-language-item {
    position: relative;
    z-index: 5;

    width: 100%;
    min-height: 50px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border: 1px solid transparent;
    border-radius: 14px;

    color: var(--text);
    background: transparent;

    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    font-family: inherit;
    font-size: 0.936rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.sp-language-item::before,
.sp-language-item::after {
    display: none;
}

.sp-language-item:hover {
    transform: translateX(2px);

    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.18);
}

.sp-language-item.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42);
}

.sp-language-item span,
.sp-language-item small {
    position: relative;
    z-index: 5;

    white-space: nowrap;
    word-break: keep-all;
}

.sp-language-item span {
    flex: 1;
    text-align: left;
}

.sp-language-item small {
    flex-shrink: 0;

    color: rgba(0,0,0,0.42);
    font-size: 0.756rem;
    font-weight: 700;
}


/* Old experimental distortion spans are no longer used. */
.glass-distort-1,
.glass-distort-2 {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .sp-language {
        width: 100%;
        margin: 14px 0 0;
    }

    .sp-language-button {
        width: 100%;
        justify-content: space-between;
    }

    .sp-language-menu {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        max-height: 0;

        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: none;
    }

    .sp-language.open .sp-language-menu {
        max-height: 200px;

        margin-top: 9px;
        padding: 10px;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;
    }
}


/* =========================================================
   UPDATED HOMEPAGE — NAV SECTION SUPPORT
========================================================= */

html {
    scroll-behavior: smooth;
}

#about,
#services,
#why-us,
#contact,
#careers,
#reach-us {
    scroll-margin-top: 115px;
}


/* =========================================================
   ABOUT
========================================================= */

.home-about-section {
    padding: 95px 0 55px;
}

.home-about-glass {
    padding: 52px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.24),
            rgba(255,255,255,0.08)
        );

    border:
        1px solid rgba(255,255,255,0.50);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 25px 70px rgba(0,0,0,0.08);

    backdrop-filter:
        blur(30px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(160%);
}

.home-about-title {
    margin: 14px 0 0;

    font-size:
        clamp(2.64rem, 4.95vw, 4.29rem);

    font-weight: 800;
    line-height: 1.04;
}

.home-about-text {
    color: var(--muted);
    line-height: 1.85;
}

.home-about-text + .home-about-text {
    margin-top: 12px;
}

.home-about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 28px;
}

.home-about-stats > div {
    padding: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.22),
            rgba(255,255,255,0.07)
        );

    border:
        1px solid rgba(255,255,255,0.42);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.home-about-stats strong,
.home-about-stats span {
    display: block;
}

.home-about-stats strong {
    font-size: 1.296rem;
}

.home-about-stats span {
    margin-top: 4px;

    color: var(--muted);

    font-size: 0.78rem;
}


/* =========================================================
   SERVICES — LIST CONTENT
========================================================= */

.service-points {
    margin: 0;
    padding: 0;

    list-style: none;

    color: var(--muted);

    font-size: 1.008rem;
    line-height: 1.8;
}

.service-points li {
    position: relative;

    padding-left: 15px;
}

.service-points li::before {
    content: "•";

    position: absolute;
    left: 0;

    color: var(--text);
}

.service-card {
    min-height: 385px;
}


/* =========================================================
   CONTACT
========================================================= */

.home-contact-section {
    padding: 75px 0 95px;
}

.home-contact-card {
    position: relative;

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

    gap: 40px;

    padding: 50px;

    overflow: hidden;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0,0,0,0.80),
            rgba(20,20,20,0.66)
        );

    border:
        1px solid rgba(255,255,255,0.16);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 30px 80px rgba(0,0,0,0.17);

    backdrop-filter:
        blur(30px);

    -webkit-backdrop-filter:
        blur(30px);
}

.home-contact-card::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    top: -190px;
    right: -90px;

    border-radius: 50%;

    border:
        50px solid rgba(255,255,255,0.055);

    pointer-events: none;
}

.home-contact-card > * {
    position: relative;
    z-index: 2;
}

.home-contact-card > div:first-child {
    max-width: 650px;
}

.home-contact-card small {
    color: rgba(255,255,255,0.55);

    font-size: 0.732rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.home-contact-card h2 {
    margin: 10px 0 12px;

    color: white;

    font-size:
        clamp(2.42rem, 4.4vw, 3.52rem);

    line-height: 1.04;
}

.home-contact-card p {
    margin: 0;

    color: rgba(255,255,255,0.62);

    line-height: 1.75;
}

.home-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    flex: 0 0 auto;
}

.home-contact-primary,
.home-contact-secondary {
    padding: 13px 18px;

    border-radius: 14px;

    font-weight: 700;
}

.home-contact-primary {
    color: #111;

    background: white;
}

.home-contact-primary:hover {
    color: #111;

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

    transform: translateY(-2px);
}

.home-contact-secondary {
    color: white;

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

    border:
        1px solid rgba(255,255,255,0.22);
}

.home-contact-secondary:hover {
    color: white;

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

    transform: translateY(-2px);
}


/* =========================================================
   CAREERS
========================================================= */

.home-careers-section {
    padding: 95px 0;
}

.career-card {
    height: 100%;

    padding: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.23),
            rgba(255,255,255,0.075)
        );

    border:
        1px solid rgba(255,255,255,0.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.70),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 20px 55px rgba(0,0,0,0.07);

    backdrop-filter:
        blur(28px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.career-card:hover {
    transform: translateY(-7px);

    border-color: rgba(255,255,255,0.72);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        0 28px 70px rgba(0,0,0,0.11);
}

.career-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.28),
            rgba(255,255,255,0.08)
        );

    border:
        1px solid rgba(255,255,255,0.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65);

    font-size: 1.25rem;
}

.career-card h4 {
    margin: 23px 0 10px;

    font-size: 1.38rem;
}

.career-card p {
    margin: 0;

    color: var(--muted);

    font-size: 0.972rem;
    line-height: 1.75;
}

.career-action {
    margin-top: 34px;

    text-align: center;
}


/* =========================================================
   REACH US
========================================================= */

.home-reach-section {
    padding: 35px 0 105px;
}

.home-reach-glass {
    padding: 52px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.24),
            rgba(255,255,255,0.08)
        );

    border:
        1px solid rgba(255,255,255,0.50);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 25px 70px rgba(0,0,0,0.08);

    backdrop-filter:
        blur(30px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(160%);
}

.home-reach-glass h2 {
    margin: 14px 0;

    font-size:
        clamp(2.53rem, 4.4vw, 3.96rem);

    font-weight: 800;
    line-height: 1.04;
}

.home-reach-glass p {
    margin: 0;

    color: var(--muted);

    line-height: 1.8;
}

.reach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}

.reach-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

    border-radius: 18px;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.20),
            rgba(255,255,255,0.07)
        );

    border:
        1px solid rgba(255,255,255,0.40);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.50);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        transform 0.22s ease,
        background 0.22s ease;
}

a.reach-item:hover {
    color: var(--text);

    transform: translateY(-3px);

    background:
        rgba(255,255,255,0.20);
}

.reach-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;
    place-items: center;

    border-radius: 14px;

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

    border:
        1px solid rgba(255,255,255,0.38);
}

.reach-item small,
.reach-item strong {
    display: block;
}

.reach-item small {
    color: var(--muted);

    font-size: 0.66rem;

    letter-spacing: 0.11em;
}

.reach-item strong {
    margin-top: 3px;

    font-size: 0.888rem;
}


/* =========================================================
   UPDATED HOMEPAGE RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .home-about-glass,
    .home-reach-glass {
        padding: 40px;
    }

    .home-contact-card {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 767px) {

    .home-about-section,
    .home-careers-section {
        padding: 75px 0;
    }

    .home-about-stats,
    .reach-grid {
        grid-template-columns: 1fr;
    }

    .home-about-glass,
    .home-contact-card,
    .home-reach-glass {
        padding: 30px 24px;
    }

    .home-contact-actions {
        width: 100%;
    }

    .home-contact-actions .btn {
        width: 100%;
    }

}
/* =========================================================
   OUR TEAM
========================================================= */

.team-section {
    width: 100%;
    margin-top: 105px;
}


/* =========================================================
   TEAM HEADING
========================================================= */

.team-heading {
    max-width: 700px;

    margin:
        0 auto 48px;

    text-align: center;
}


.team-heading h2 {
    margin:
        12px 0;

    font-size:
        clamp(2.64rem, 4.4vw, 3.96rem);

    font-weight: 800;

    line-height: 1.05;
}


.team-heading p {
    margin: 0;

    color: var(--muted);

    line-height: 1.7;
}



/* =========================================================
   TEAM — ONE HORIZONTAL ROW
========================================================= */

.team-grid {
    display: grid !important;

    /*
       Put every employee into columns,
       never create another row.
    */

    grid-auto-flow: column !important;

    grid-auto-columns:
        245px !important;

    grid-template-rows:
        auto !important;

    gap:
        22px;

    width:
        100%;

    max-width:
        100%;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    padding:
        8px 3px 30px;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x proximity;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0,0,0,.16)
        transparent;
}



/* =========================================================
   EMPLOYEE
========================================================= */

.team-member {
    width:
        245px;

    min-width:
        245px;

    max-width:
        245px;

    margin:
        0;

    scroll-snap-align:
        start;
}



/* =========================================================
   PHOTO
========================================================= */

.team-photo {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        0.88 / 1;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(245,245,245,.90),
            rgba(220,220,220,.70)
        );

    border:
        1px solid
        rgba(255,255,255,.78);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.95),

        0 18px 45px
        rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}



/* glass reflection */

.team-photo::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            transparent 35%,
            transparent 70%,
            rgba(255,255,255,.08)
        );
}



/* actual photo */

.team-photo img {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center top;

    transition:
        transform .4s ease;
}



/* =========================================================
   HOVER
========================================================= */

.team-member:hover
.team-photo {
    transform:
        translateY(-6px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,1),

        0 28px 65px
        rgba(0,0,0,.12);
}


.team-member:hover
.team-photo img {
    transform:
        scale(1.025);
}



/* =========================================================
   INFO
========================================================= */

.team-info {
    padding:
        20px 3px 0;
}


.team-info h3 {
    margin:
        0 0 7px;

    font-size:
        1.2rem;

    font-weight:
        800;

    line-height:
        1.35;
}


.team-role {
    min-height:
        42px;

    margin:
        0 0 17px;

    color:
        var(--muted);

    font-size:
        0.9rem;

    line-height:
        1.55;
}



/* =========================================================
   CONTACT
========================================================= */

.team-contact-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.team-contact-list a {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

    color:
        var(--text);

    font-size:
        0.816rem;

    line-height:
        1.4;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.team-contact-list a:hover {
    color:
        var(--text);

    opacity:
        .62;

    transform:
        translateX(2px);
}


.team-contact-list i {
    width:
        20px;

    min-width:
        20px;

    font-size:
        .9rem;
}


.team-contact-list span {
    min-width:
        0;

    overflow-wrap:
        anywhere;
}



/* =========================================================
   SCROLLBAR
========================================================= */

.team-grid::-webkit-scrollbar {
    height:
        7px;
}


.team-grid::-webkit-scrollbar-track {
    background:
        transparent;
}


.team-grid::-webkit-scrollbar-thumb {
    background:
        rgba(0,0,0,.16);

    border-radius:
        999px;
}


.team-grid::-webkit-scrollbar-thumb:hover {
    background:
        rgba(0,0,0,.30);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .team-grid {
        grid-auto-columns:
            235px !important;
    }


    .team-member {
        width:
            235px;

        min-width:
            235px;

        max-width:
            235px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .team-section {
        margin-top:
            75px;
    }


    .team-heading {
        margin-bottom:
            35px;
    }


    .team-grid {
        grid-auto-columns:
            230px !important;

        gap:
            16px;
    }


    .team-member {
        width:
            230px;

        min-width:
            230px;

        max-width:
            230px;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .team-grid {
        grid-auto-columns:
            82vw !important;
    }


    .team-member {
        width:
            82vw;

        min-width:
            82vw;

        max-width:
            82vw;
    }


    .team-role {
        min-height:
            auto;
    }

}

/* =========================================================
   SECUREPLUS ADVISOR SLIDER
========================================================= */

.advisor-team-section {
    width: 100%;
    max-width: 100%;

    margin-top: 105px;
}


/* =========================================================
   HEADING
========================================================= */

.advisor-team-heading {
    max-width: 700px;

    margin:
        0 auto 45px;

    text-align: center;
}


.advisor-team-heading h2 {
    margin:
        12px 0 10px;

    font-size:
        clamp(2.64rem, 4.4vw, 3.96rem);

    font-weight:
        800;

    line-height:
        1.05;
}


.advisor-team-heading p {
    margin: 0;

    color:
        var(--muted);

    line-height:
        1.7;
}



/* =========================================================
   SLIDER OUTER WRAPPER
========================================================= */

.advisor-slider-wrapper {
    position: relative;

    width: 100%;
    max-width: 100%;

    min-width: 0;
}



/* =========================================================
   HORIZONTAL TRACK
========================================================= */

.advisor-slider-track {
    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: flex-start;

    gap: 22px;

    width: 100%;

    min-width: 0;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    padding:
        10px 5px 28px;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x proximity;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0,0,0,.18)
        transparent;

    -webkit-overflow-scrolling:
        touch;
}



/* =========================================================
   EMPLOYEE CARD
========================================================= */

.advisor-card {
    display: block !important;

    flex:
        0 0 240px !important;

    width:
        240px !important;

    min-width:
        240px !important;

    max-width:
        240px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    scroll-snap-align:
        start;
}



/* =========================================================
   PHOTO
========================================================= */

.advisor-photo {
    position: relative;

    display: block;

    width:
        240px !important;

    height:
        300px !important;

    min-width:
        240px !important;

    max-width:
        240px !important;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(245,245,245,.92),
            rgba(220,220,220,.72)
        );

    border:
        1px solid
        rgba(255,255,255,.80);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.95),

        0 18px 45px
        rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}



.advisor-photo::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.25),
            transparent 35%,
            transparent 70%,
            rgba(255,255,255,.07)
        );
}



/* IMAGE SIZE IS LOCKED */

.advisor-photo img {
    display:
        block !important;

    width:
        240px !important;

    height:
        300px !important;

    min-width:
        240px !important;

    max-width:
        240px !important;

    object-fit:
        cover !important;

    object-position:
        center top !important;
}



/* =========================================================
   HOVER
========================================================= */

.advisor-card:hover
.advisor-photo {
    transform:
        translateY(-5px);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.13);
}



/* =========================================================
   INFORMATION
========================================================= */

.advisor-info {
    width:
        240px;

    padding:
        18px 3px 0;
}


.advisor-info h3 {
    margin:
        0 0 6px;

    font-size:
        1.14rem;

    font-weight:
        800;

    line-height:
        1.35;
}


.advisor-role {
    min-height:
        40px;

    margin:
        0 0 14px;

    color:
        var(--muted);

    font-size:
        0.864rem;

    line-height:
        1.5;
}



/* =========================================================
   CONTACT
========================================================= */

.advisor-contact {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    width:
        100%;

    min-width:
        0;

    margin-top:
        9px;

    color:
        var(--text);

    font-size:
        0.78rem;

    line-height:
        1.4;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.advisor-contact:hover {
    color:
        var(--text);

    opacity:
        .6;

    transform:
        translateX(2px);
}


.advisor-contact i {
    flex:
        0 0 18px;

    width:
        18px;
}


.advisor-contact span {
    min-width:
        0;

    overflow-wrap:
        anywhere;
}



/* =========================================================
   LEFT / RIGHT BUTTONS
========================================================= */

.advisor-slider-btn {
    position:
        absolute;

    top:
        130px;

    z-index:
        10;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius:
        50%;

    color:
        var(--text);

    background:
        rgba(255,255,255,.55);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.13);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    cursor:
        pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.advisor-slider-btn:hover {
    transform:
        scale(1.08);

    background:
        rgba(255,255,255,.82);
}


.advisor-slider-prev {
    left:
        -22px;
}


.advisor-slider-next {
    right:
        -22px;
}



/* =========================================================
   SCROLLBAR
========================================================= */

.advisor-slider-track::-webkit-scrollbar {
    height:
        7px;
}


.advisor-slider-track::-webkit-scrollbar-track {
    background:
        rgba(0,0,0,.04);

    border-radius:
        999px;
}


.advisor-slider-track::-webkit-scrollbar-thumb {
    background:
        rgba(0,0,0,.20);

    border-radius:
        999px;
}


.advisor-slider-track::-webkit-scrollbar-thumb:hover {
    background:
        rgba(0,0,0,.35);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .advisor-card {
        flex-basis:
            225px !important;

        width:
            225px !important;

        min-width:
            225px !important;

        max-width:
            225px !important;
    }


    .advisor-photo,
    .advisor-photo img {
        width:
            225px !important;

        min-width:
            225px !important;

        max-width:
            225px !important;

        height:
            285px !important;
    }


    .advisor-info {
        width:
            225px;
    }


    .advisor-slider-prev {
        left:
            5px;
    }


    .advisor-slider-next {
        right:
            5px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .advisor-team-section {
        margin-top:
            75px;
    }


    .advisor-slider-track {
        gap:
            16px;
    }


    .advisor-card {
        flex-basis:
            210px !important;

        width:
            210px !important;

        min-width:
            210px !important;

        max-width:
            210px !important;
    }


    .advisor-photo,
    .advisor-photo img {
        width:
            210px !important;

        min-width:
            210px !important;

        max-width:
            210px !important;

        height:
            270px !important;
    }


    .advisor-info {
        width:
            210px;
    }


    .advisor-slider-btn {
        width:
            40px;

        height:
            40px;

        top:
            115px;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .advisor-card {
        flex-basis:
            78vw !important;

        width:
            78vw !important;

        min-width:
            78vw !important;

        max-width:
            78vw !important;
    }


    .advisor-photo,
    .advisor-photo img {
        width:
            78vw !important;

        min-width:
            78vw !important;

        max-width:
            78vw !important;

        height:
            360px !important;
    }


    .advisor-info {
        width:
            78vw;
    }

}

/* Hide team scrollbar but keep scrolling */
.team-scroll-hidden {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Older Edge */
}

.team-scroll-hidden::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Edge */
}

.team-scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.team-scroll-hidden::-webkit-scrollbar {
    display: none;
}
/* Hide employee scrollbar */
.team-scroll-hidden {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.team-scroll-hidden::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Prevent whole webpage horizontal scrollbar */
html,
body {
    overflow-x: hidden !important;
}
/* HIDE ONLY EMPLOYEE HORIZONTAL SCROLLBAR */
.team-scroll-hidden {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.team-scroll-hidden::-webkit-scrollbar {
    height: 0 !important;
    width: 0 !important;
    display: none !important;
}

.team-scroll-hidden::-webkit-scrollbar-track {
    display: none !important;
}

.team-scroll-hidden::-webkit-scrollbar-thumb {
    display: none !important;
}
.
/* ===== FIX I~LIFE LOGO ===== */

.navbar .navbar-brand.brand {
    height: 70px !important;
    width: 170px !important;
    min-width: 170px !important;

    padding: 0 !important;
    margin: 0 25px 0 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow: hidden !important;
}

.navbar .navbar-brand.brand > img.ilife-logo {
    width: 150px !important;
    height: 65px !important;

    max-width: 150px !important;
    max-height: 65px !important;

    object-fit: contain !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Navbar 不准被 logo 撑大 */
.liquid-glass-navbar {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;

    padding: 6px 20px !important;
    overflow: visible !important;
}
/* =========================================================
   I~LIFE WILL PLANNING PAGE
   WHITE + I~LIFE RED
========================================================= */

:root {
    --ilife-red: #D74034;
    --ilife-red-dark: #B92F26;
    --ilife-red-soft: #FFF3F2;

    --will-white: #FFFFFF;
    --will-off-white: #FAFAFA;

    --will-black: #171717;
    --will-text: #2C2C2C;
    --will-grey: #707070;
    --will-light-grey: #A0A0A0;

    --will-border: #E9E9E9;
}


/* PAGE */

.will-page {
    background: var(--will-white);
    color: var(--will-black);
    overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.will-hero {
    position: relative;
    padding: 120px 0 110px;
    min-height: 820px;
    background: #fff;
    overflow: hidden;
}

.will-hero-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
}

.will-decoration-one {
    width: 430px;
    height: 430px;
    right: -160px;
    top: 40px;
    background: rgba(215, 64, 52, .09);
}

.will-decoration-two {
    width: 260px;
    height: 260px;
    left: 5%;
    bottom: -150px;
    background: rgba(215, 64, 52, .045);
}


/* Breadcrumb */

.will-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 60px;
    font-size: 13.2px;
    color: #aaa;
}

.will-breadcrumb a {
    color: #888;
    text-decoration: none;
}

.will-breadcrumb a:hover {
    color: var(--ilife-red);
}

.will-breadcrumb strong {
    color: var(--will-black);
}


/* Small label */

.will-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.will-label span {
    width: 28px;
    height: 2px;
    background: var(--ilife-red);
}


/* Hero title */

.will-hero h1 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(77px, 7.7vw, 123.2px);
    line-height: .9;
    letter-spacing: -6px;
    font-weight: 650;
}

.will-hero h1 span {
    display: block;
    color: var(--ilife-red);
}


/* Hero text */

.will-hero-lead {
    max-width: 630px;
    margin-top: 38px;
    margin-bottom: 0;
    font-size: 24px;
    line-height: 1.55;
    color: #333;
}

.will-hero-description {
    max-width: 630px;
    margin-top: 15px;
    font-size: 16.8px;
    line-height: 1.8;
    color: var(--will-grey);
}


/* Buttons */

.will-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}

.will-btn-primary,
.will-btn-outline {
    min-height: 58px;
    padding: 0 23px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-decoration: none;
    font-size: 15.6px;
    font-weight: 600;
    transition: .3s ease;
}

.will-btn-primary {
    background: var(--ilife-red);
    color: white;
    box-shadow: 0 14px 30px rgba(215, 64, 52, .20);
}

.will-btn-primary:hover {
    color: white;
    background: var(--ilife-red-dark);
    transform: translateY(-3px);
}

.will-btn-outline {
    border: 1px solid var(--will-border);
    color: var(--will-black);
    background: white;
}

.will-btn-outline:hover {
    color: var(--ilife-red);
    border-color: rgba(215,64,52,.25);
    transform: translateY(-3px);
}


/* Hero small points */

.will-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 40px;
    font-size: 13.2px;
    color: #777;
}

.will-hero-points span {
    display: flex;
    gap: 7px;
    align-items: center;
}

.will-hero-points i {
    color: var(--ilife-red);
}


/* =========================================================
   HERO CARD
========================================================= */

.will-hero-card {
    position: relative;
    min-height: 535px;
    padding: 38px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 30px 80px rgba(0,0,0,.08);
}

.will-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 38px;
    width: 80px;
    height: 4px;
    background: var(--ilife-red);
}

.will-hero-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--ilife-red);
    font-size: 22px;
}

.will-hero-card > small {
    display: block;
    margin-top: 45px;
    font-size: 9.6px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #999;
}

.will-hero-card h2 {
    max-width: 390px;
    margin-top: 12px;
    font-size: 39.6px;
    line-height: 1.08;
    letter-spacing: -2px;
}

.will-hero-card > p {
    max-width: 370px;
    color: #777;
    line-height: 1.75;
    font-size: 15.6px;
}

.will-question-list {
    margin-top: 28px;
    border-top: 1px solid var(--will-border);
}

.will-question-list > div {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--will-border);
}

.will-question-list span {
    font-size: 10.8px;
    color: var(--ilife-red);
    font-weight: 700;
}

.will-question-list strong {
    font-size: 14.4px;
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.will-section {
    padding: 115px 0;
    background: white;
}

.will-light-section {
    background: #fafafa;
}

.will-section-index {
    font-size: 99px;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -7px;
    color: rgba(215,64,52,.09);
}

.will-section-name {
    margin-bottom: 20px;
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #777;
}

.will-title {
    margin: 0;
    font-size: clamp(52.8px, 5.5vw, 82.5px);
    line-height: .98;
    letter-spacing: -4px;
}

.will-title span {
    display: block;
    color: var(--ilife-red);
}

.will-large-text {
    max-width: 820px;
    margin-top: 42px;
    font-size: 26.4px;
    line-height: 1.6;
    color: #333;
}

.will-text {
    max-width: 720px;
    margin-top: 20px;
    color: var(--will-grey);
    font-size: 16.8px;
    line-height: 1.85;
}


/* =========================================================
   WHAT IS A WILL
========================================================= */

.will-definition-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 55px;
}

.will-definition-row > div {
    padding: 28px 0;
    border-top: 1px solid var(--will-border);
}

.will-definition-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ilife-red);
    background: var(--ilife-red-soft);
    font-size: 19px;
}

.will-definition-row small {
    color: var(--ilife-red);
    font-size: 9.6px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.will-definition-row h3 {
    margin-top: 10px;
    font-size: 22.8px;
}

.will-definition-row p {
    color: #777;
    font-size: 14.4px;
    line-height: 1.7;
}


/* =========================================================
   HEADING
========================================================= */

.will-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 60px;
}

.will-heading > p {
    max-width: 410px;
    margin: 0;
    color: #777;
    font-size: 15.6px;
    line-height: 1.8;
}


/* =========================================================
   REASONS
========================================================= */

.will-reasons {
    border-top: 1px solid var(--will-border);
}

.will-reason-row {
    min-height: 138px;
    display: grid;
    grid-template-columns: 45px 62px 1fr;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid var(--will-border);
}

.will-reason-row > span {
    color: #aaa;
    font-size: 10.8px;
}

.will-reason-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--ilife-red-soft);
    color: var(--ilife-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.will-reason-row h3 {
    margin: 0;
    font-size: 24px;
}

.will-reason-row p {
    max-width: 680px;
    margin: 7px 0 0;
    color: #777;
    font-size: 14.4px;
    line-height: 1.7;
}


/* =========================================================
   ASSETS
========================================================= */

.will-assets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.will-asset {
    min-height: 280px;
    padding: 28px;
    border-radius: 20px;
    border: 1px solid var(--will-border);
    background: white;
    transition: .3s ease;
}

.will-asset:hover {
    border-color: rgba(215,64,52,.25);
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0,0,0,.05);
}

.will-asset > span {
    color: #aaa;
    font-size: 9.6px;
}

.will-asset > i {
    display: block;
    margin-top: 50px;
    color: var(--ilife-red);
    font-size: 26px;
}

.will-asset h3 {
    margin-top: 25px;
    font-size: 24px;
}

.will-asset p {
    color: #777;
    font-size: 14.4px;
    line-height: 1.7;
}


/* =========================================================
   WHO
========================================================= */

.will-who-list {
    border-top: 1px solid var(--will-border);
}

.will-who-list > div {
    min-height: 108px;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--will-border);
}

.will-who-list > div > i {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ilife-red-soft);
    color: var(--ilife-red);
    font-size: 18px;
}

.will-who-list strong {
    display: block;
    font-size: 16.8px;
}

.will-who-list small {
    display: block;
    max-width: 570px;
    margin-top: 5px;
    color: #777;
    line-height: 1.65;
    font-size: 13.2px;
}


/* =========================================================
   EXECUTOR
========================================================= */

.executor-box {
    padding: 38px;
    border-radius: 24px;
    border: 1px solid var(--will-border);
    background: white;
    box-shadow: 0 24px 65px rgba(0,0,0,.06);
}

.executor-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--ilife-red);
    color: white;
    font-size: 22px;
}

.executor-box small {
    display: block;
    margin-top: 35px;
    color: var(--ilife-red);
    font-size: 9.6px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.executor-box h3 {
    max-width: 420px;
    margin-top: 8px;
    font-size: 32.4px;
    line-height: 1.2;
}

.executor-tasks {
    margin-top: 30px;
    border-top: 1px solid var(--will-border);
}

.executor-tasks > div {
    min-height: 52px;
    display: flex;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--will-border);
    font-size: 14.4px;
}

.executor-tasks span {
    color: var(--ilife-red);
    font-size: 9.6px;
}


/* =========================================================
   NO WILL
========================================================= */

.will-no-will {
    padding: 120px 0;
    background: #171717;
    color: white;
}

.white-label {
    color: #aaa;
}

.will-no-will h2 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(57.2px, 6.05vw, 90.2px);
    line-height: .96;
    letter-spacing: -4px;
}

.will-no-will-lead {
    font-size: 22.8px;
    color: white;
}

.will-no-will-text {
    max-width: 580px;
    color: #aaa;
    font-size: 15.6px;
    line-height: 1.85;
}

.will-no-will-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 60px;
}

.will-no-will-grid > div {
    min-height: 270px;
    padding: 28px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
}

.will-no-will-grid span {
    color: #777;
    font-size: 9.6px;
}

.will-no-will-grid i {
    display: block;
    margin-top: 45px;
    color: var(--ilife-red);
    font-size: 26px;
}

.will-no-will-grid h3 {
    margin-top: 25px;
    font-size: 22.8px;
}

.will-no-will-grid p {
    color: #999;
    font-size: 14.4px;
    line-height: 1.7;
}

.will-information-note {
    margin-top: 15px;
    padding: 19px 22px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    display: flex;
    gap: 12px;
    color: #888;
    font-size: 12px;
}

.will-information-note i {
    color: var(--ilife-red);
}


/* =========================================================
   REVIEW
========================================================= */

.will-review-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--will-border);
    border-bottom: 1px solid var(--will-border);
}

.will-review-grid > div {
    min-height: 200px;
    padding: 27px 20px;
    border-right: 1px solid var(--will-border);
}

.will-review-grid > div:last-child {
    border-right: 0;
}

.will-review-grid span {
    color: var(--ilife-red);
    font-size: 10.8px;
}

.will-review-grid h3 {
    margin-top: 42px;
    font-size: 20.4px;
}

.will-review-grid p {
    color: #777;
    font-size: 13.2px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.will-process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.will-process > div {
    min-height: 270px;
    padding: 26px;
    border-radius: 20px;
    background: white;
    border: 1px solid var(--will-border);
    display: flex;
    flex-direction: column;
}

.will-process span {
    color: #aaa;
    font-size: 9.6px;
}

.will-process i {
    margin-top: 42px;
    color: var(--ilife-red);
    font-size: 25px;
}

.will-process h3 {
    margin-top: auto;
    font-size: 20.4px;
}

.will-process p {
    color: #777;
    font-size: 13.2px;
    line-height: 1.65;
}


/* =========================================================
   FAQ
========================================================= */

.will-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--will-border);
    border-radius: 0;
    background: transparent;
}

.will-accordion .accordion-item:first-child {
    border-top: 1px solid var(--will-border);
}

.will-accordion .accordion-button {
    padding: 27px 0;
    background: transparent;
    color: var(--will-black);
    box-shadow: none;
    font-size: 19.2px;
    font-weight: 550;
}

.will-accordion .accordion-button:not(.collapsed) {
    color: var(--ilife-red);
    background: transparent;
}

.will-accordion .accordion-button:focus {
    box-shadow: none;
}

.will-accordion .accordion-body {
    max-width: 700px;
    padding: 0 60px 28px 0;
    color: #777;
    font-size: 15.6px;
    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.will-cta {
    padding: 60px 0 110px;
    background: white;
}

.will-cta-box {
    min-height: 430px;
    padding: 55px;
    border-radius: 28px;
    background: var(--ilife-red);
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}

.will-cta-box h2 {
    max-width: 750px;
    margin: 15px 0 0;
    font-size: clamp(60.5px, 6.6vw, 96.8px);
    line-height: .9;
    letter-spacing: -5px;
}

.will-cta-box h2 span {
    display: block;
    color: white;
    opacity: .72;
}

.will-cta-box p {
    max-width: 520px;
    margin-top: 25px;
    color: rgba(255,255,255,.78);
    font-size: 15.6px;
    line-height: 1.8;
}

.will-cta-box > a {
    min-height: 60px;
    padding: 0 24px;
    flex-shrink: 0;
    border-radius: 15px;
    background: white;
    color: var(--ilife-red);
    display: flex;
    gap: 17px;
    align-items: center;
    text-decoration: none;
    font-size: 15.6px;
    font-weight: 700;
}

.will-cta-box > a:hover {
    color: var(--ilife-red-dark);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.will-disclaimer {
    padding: 0 0 45px;
}

.will-disclaimer p {
    max-width: 920px;
    margin: auto;
    text-align: center;
    color: #aaa;
    font-size: 10.8px;
    line-height: 1.8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .will-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .will-definition-row {
        grid-template-columns: 1fr;
    }

    .will-assets-grid {
        grid-template-columns: 1fr 1fr;
    }

    .will-no-will-grid {
        grid-template-columns: 1fr;
    }

    .will-review-grid {
        grid-template-columns: 1fr 1fr;
    }

    .will-process {
        grid-template-columns: 1fr 1fr;
    }

    .will-cta-box {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .will-hero {
        min-height: auto;
        padding: 60px 0 70px;
    }

    .will-breadcrumb {
        margin-bottom: 40px;
    }

    .will-hero h1 {
        font-size: 64.9px;
        letter-spacing: -3px;
    }

    .will-actions {
        flex-direction: column;
    }

    .will-btn-primary,
    .will-btn-outline {
        width: 100%;
        justify-content: space-between;
    }

    .will-hero-points {
        flex-direction: column;
        gap: 10px;
    }

    .will-section {
        padding: 80px 0;
    }

    .will-section-index {
        font-size: 71.5px;
        margin-bottom: 25px;
    }

    .will-title {
        letter-spacing: -2.5px;
    }

    .will-assets-grid,
    .will-review-grid,
    .will-process {
        grid-template-columns: 1fr;
    }

    .will-reason-row {
        grid-template-columns: 35px 52px 1fr;
        gap: 13px;
    }

    .will-no-will {
        padding: 85px 0;
    }

    .will-no-will h2 {
        letter-spacing: -3px;
    }

    .will-cta-box {
        min-height: 500px;
        padding: 32px;
        border-radius: 22px;
    }

    .will-cta-box h2 {
        font-size: 59.4px;
        letter-spacing: -3px;
    }

    .will-cta-box > a {
        width: 100%;
        justify-content: space-between;
    }

}

/* =========================================================
   FORCE SECTION 06 TO WHITE
========================================================= */

.will-page .will-no-will {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #171717 !important;
}

.will-page .will-no-will h2 {
    color: #171717 !important;
}

.will-page .will-no-will .white-label,
.will-page .will-no-will .will-section-name {
    color: #777777 !important;
}

.will-page .will-no-will-lead {
    color: #222222 !important;
}

.will-page .will-no-will-text {
    color: #707070 !important;
}


/* SECTION 06 CARDS */

.will-page .will-no-will-grid > div {
    background: #ffffff !important;

    border: 1px solid #e9e9e9 !important;

    color: #171717 !important;

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, .045) !important;
}

.will-page .will-no-will-grid h3 {
    color: #171717 !important;
}

.will-page .will-no-will-grid p {
    color: #707070 !important;
}

.will-page .will-no-will-grid span {
    color: #999999 !important;
}

.will-page .will-no-will-grid i {
    color: #D74034 !important;
}


/* INFO BOX */

.will-page .will-information-note {
    background: #fff5f4 !important;

    border:
        1px solid
        rgba(215, 64, 52, .14) !important;

    color: #707070 !important;
}

.will-page .will-information-note i {
    color: #D74034 !important;
}


/* ALSO FORCE WHITE WHEN DARK MODE IS ACTIVE */

html.dark-mode .will-page .will-no-will {
    background: #ffffff !important;
    color: #171717 !important;
}

html.dark-mode .will-page .will-no-will h2,
html.dark-mode .will-page .will-no-will-grid h3 {
    color: #171717 !important;
}

html.dark-mode .will-page .will-no-will-grid > div {
    background: #ffffff !important;
}
/* =========================================================
   KEEP EXISTING HEADER DESIGN
   ONLY MAKE IT FOLLOW ON SCROLL
========================================================= */

.header-wrapper {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 99999 !important;

    /* keep your original spacing */
    padding: 0 18px !important;

    /* do not change existing design */
    background: transparent !important;
}


/* Prevent page content hiding behind fixed header */

body {
    padding-top: 105px;
}


/* Mobile */

@media (max-width: 991px) {

    .header-wrapper {
        top: 8px !important;
        padding: 0 8px !important;
    }

    body {
        padding-top: 95px;
    }

}

/* =========================================================
   I~LIFE LOGO RED THEME
   KEEP ALL LIQUID GLASS TRANSPARENCY
========================================================= */

:root {

    /* MAIN LOGO-STYLE RED */
    --ilife-red: #E31E2D;

    /* DARKER RED */
    --ilife-red-dark: #C81725;

    /* LIGHT TRANSPARENT RED */
    --ilife-red-soft:
        rgba(227, 30, 45, 0.08);

}


/* =========================================================
   GENERAL ACCENT COLOUR
========================================================= */

.section-label,
.card-number,
.service-card > small,
.service-link {

    color:
        var(--ilife-red) !important;

}


/* =========================================================
   HERO
========================================================= */

.hero-badge {

    color:
        var(--ilife-red) !important;

    background:
        rgba(227, 30, 45, 0.08) !important;

    border-color:
        rgba(227, 30, 45, 0.20) !important;

}


.hero-features i {

    color:
        var(--ilife-red) !important;

}



/* =========================================================
   PRIMARY BUTTON
   TRANSPARENCY KEPT
========================================================= */

.btn-black,
.btn-dark-custom {

    color:
        #ffffff !important;

    background:
        rgba(227, 30, 45, 0.90) !important;

    border-color:
        rgba(227, 30, 45, 0.30) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.18),

        0 12px 28px
        rgba(227,30,45,0.18) !important;

}


.btn-black:hover,
.btn-dark-custom:hover {

    color:
        #ffffff !important;

    background:
        rgba(200, 23, 37, 0.94) !important;

}



/* =========================================================
   LIGHT BUTTON
========================================================= */

.btn-light-custom,
.btn-white {

    color:
        var(--ilife-red) !important;

}


.btn-light-custom:hover,
.btn-white:hover {

    color:
        var(--ilife-red-dark) !important;

}



/* =========================================================
   NAVIGATION
   KEEP EXISTING NAVBAR GLASS
========================================================= */

.liquid-nav .nav-link:hover,
.liquid-nav .nav-link.active {

    color:
        var(--ilife-red) !important;

}


/* MOVING GLASS LENS */

#liquidNavLens.liquid-nav-lens {

    background:
        linear-gradient(
            145deg,

            rgba(227, 30, 45, 0.16)
            0%,

            rgba(227, 30, 45, 0.08)
            40%,

            rgba(227, 30, 45, 0.035)
            100%

        ) !important;


    border-color:
        rgba(227, 30, 45, 0.30) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.95),

        inset 0 -1px 0
        rgba(255,255,255,0.16),

        inset 7px 0 14px
        rgba(255,255,255,0.15),

        inset -7px 0 14px
        rgba(227,30,45,0.025),

        0 8px 25px
        rgba(227,30,45,0.10),

        0 2px 7px
        rgba(0,0,0,0.05)

        !important;

}



/* =========================================================
   LANGUAGE BUTTON
   KEEP LIQUID GLASS TRANSPARENCY
========================================================= */

.sp-language-button {

    color:
        var(--ilife-red) !important;


    background:
        linear-gradient(

            145deg,

            rgba(255,255,255,0.27)
            0%,

            rgba(227,30,45,0.07)
            40%,

            rgba(255,255,255,0.055)
            100%

        ) !important;


    border-color:
        rgba(227,30,45,0.25) !important;

}


/* LANGUAGE DROPDOWN HOVER */

.sp-language-item:hover {

    background:
        rgba(227,30,45,0.08) !important;

    border-color:
        rgba(227,30,45,0.15) !important;

}


/* SELECTED LANGUAGE */

.sp-language-item.active {

    color:
        var(--ilife-red) !important;

    background:
        rgba(227,30,45,0.10) !important;

    border-color:
        rgba(227,30,45,0.20) !important;

}


/* LANGUAGE CODE */

.sp-language-item.active small {

    color:
        var(--ilife-red) !important;

}



/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-top-icon {

    color:
        var(--ilife-red) !important;

}


/* DASHBOARD ITEMS */

.dashboard-item i {

    color:
        var(--ilife-red) !important;

}


.dashboard-item:hover {

    background:
        rgba(227,30,45,0.08) !important;

    border-color:
        rgba(227,30,45,0.16) !important;

}



/* =========================================================
   MAIN DASHBOARD CARD
   BLACK → LOGO RED
   SAME ALPHA / TRANSPARENCY
========================================================= */

.protection-card {

    background:

        linear-gradient(

            145deg,

            rgba(227,30,45,0.82),

            rgba(200,23,37,0.68)

        ) !important;


    border-color:
        rgba(255,255,255,0.18) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.20),

        0 20px 45px
        rgba(227,30,45,0.20)

        !important;

}


.protection-card span,
.protection-card strong,
.protection-card small {

    color:
        #ffffff !important;

}



/* =========================================================
   ADVISOR
========================================================= */

.advisor-avatar {

    background:
        rgba(227,30,45,0.82) !important;

}


.advisor-box:hover {

    border-color:
        rgba(227,30,45,0.20) !important;

}



/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card > i {

    color:
        var(--ilife-red) !important;


    background:
        rgba(227,30,45,0.08) !important;


    border-color:
        rgba(227,30,45,0.18) !important;

}



/* =========================================================
   TRUST / QUICK OVERVIEW
========================================================= */

.trust-item strong {

    color:
        var(--ilife-red) !important;

}


/* KEEP ORIGINAL GLASS */

.trust-card {

    border-color:
        rgba(227,30,45,0.10) !important;

}



/* =========================================================
   ABOUT
   KEEP GLASS TRANSPARENCY
========================================================= */

.home-about-glass {

    border-color:
        rgba(227,30,45,0.12) !important;

}


.home-about-stats > div {

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,0.22),

            rgba(227,30,45,0.045)

        ) !important;


    border-color:
        rgba(227,30,45,0.15) !important;

}


.home-about-stats strong {

    color:
        var(--ilife-red) !important;

}



/* =========================================================
   TEAM
========================================================= */

.team-heading .section-label {

    color:
        var(--ilife-red) !important;

}


.team-scroll-hidden article a i {

    color:
        var(--ilife-red) !important;

}


.team-scroll-hidden article a:hover {

    color:
        var(--ilife-red) !important;

}



/* =========================================================
   SERVICES
   KEEP ORIGINAL LIQUID GLASS
========================================================= */

.service-card {

    border-color:
        rgba(227,30,45,0.10) !important;

}


.service-card:hover {

    border-color:
        rgba(227,30,45,0.35) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.85),

        0 28px 70px
        rgba(227,30,45,0.10)

        !important;

}



/* SERVICE ICON */

.service-icon {

    color:
        var(--ilife-red) !important;


    background:

        linear-gradient(

            145deg,

            rgba(227,30,45,0.12),

            rgba(255,255,255,0.08)

        ) !important;


    border-color:
        rgba(227,30,45,0.20) !important;

}


.service-icon i {

    color:
        var(--ilife-red) !important;

}



/* SERVICE LIST DOT */

.service-points li::before {

    color:
        var(--ilife-red) !important;

}



/* =========================================================
   BLACK SERVICE CARD
   KEEP IT DARK BUT ADD RED TINT
========================================================= */

.service-card.black-card {

    background:

        linear-gradient(

            145deg,

            rgba(227,30,45,0.74),

            rgba(120,10,20,0.58)

        ) !important;

}


.service-card.black-card h3,
.service-card.black-card .service-link {

    color:
        #ffffff !important;

}


.service-card.black-card p,
.service-card.black-card > small {

    color:
        rgba(255,255,255,0.65) !important;

}



/* =========================================================
   WHY US
   BLACK → LOGO RED
   SAME TRANSPARENCY
========================================================= */

.why-black-card {

    background:

        linear-gradient(

            145deg,

            rgba(227,30,45,0.76),

            rgba(200,23,37,0.55)

        ) !important;


    border-color:
        rgba(255,255,255,0.17) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.20),

        0 35px 90px
        rgba(227,30,45,0.20)

        !important;

}


.why-black-card h2 {

    color:
        #ffffff !important;

}


.why-black-card p {

    color:
        rgba(255,255,255,0.68) !important;

}


.why-black-card small {

    color:
        rgba(255,255,255,0.62) !important;

}



/* WHY US ICONS */

.benefit-icon {

    color:
        var(--ilife-red) !important;


    background:
        rgba(227,30,45,0.08) !important;


    border-color:
        rgba(227,30,45,0.16) !important;

}



/* =========================================================
   CONTACT
   SAME TRANSPARENCY
========================================================= */

.home-contact-card {

    background:

        linear-gradient(

            145deg,

            rgba(227,30,45,0.80),

            rgba(200,23,37,0.66)

        ) !important;


    border-color:
        rgba(255,255,255,0.18) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.20),

        0 30px 80px
        rgba(227,30,45,0.20)

        !important;

}


.home-contact-card h2 {

    color:
        #ffffff !important;

}


.home-contact-card p {

    color:
        rgba(255,255,255,0.68) !important;

}


.home-contact-card small {

    color:
        rgba(255,255,255,0.62) !important;

}



/* CONTACT WHITE BUTTON */

.home-contact-primary {

    color:
        var(--ilife-red) !important;

}


.home-contact-primary:hover {

    color:
        var(--ilife-red-dark) !important;

}



/* =========================================================
   CAREERS
========================================================= */

.career-card:hover {

    border-color:
        rgba(227,30,45,0.30) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.84),

        0 28px 70px
        rgba(227,30,45,0.09)

        !important;

}


.career-icon {

    color:
        var(--ilife-red) !important;


    background:

        linear-gradient(

            145deg,

            rgba(227,30,45,0.12),

            rgba(255,255,255,0.08)

        ) !important;


    border-color:
        rgba(227,30,45,0.18) !important;

}



/* =========================================================
   REACH US
========================================================= */

.home-reach-glass {

    border-color:
        rgba(227,30,45,0.12) !important;

}


.reach-icon {

    color:
        var(--ilife-red) !important;


    background:
        rgba(227,30,45,0.08) !important;


    border-color:
        rgba(227,30,45,0.18) !important;

}


a.reach-item:hover {

    background:
        rgba(227,30,45,0.08) !important;


    border-color:
        rgba(227,30,45,0.18) !important;

}



/* =========================================================
   FOOTER
========================================================= */

.footer {

    border-top:
        3px solid
        var(--ilife-red) !important;

}



/* =========================================================
   WHATSAPP FLOATING BUTTON
========================================================= */

.whatsapp-button {
    color: #ffffff !important;

    background: rgba(37, 211, 102, 0.90) !important;

    border:
        1px solid
        rgba(255,255,255,0.28) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 18px 40px rgba(37,211,102,0.30) !important;

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.whatsapp-button:hover {
    color: #ffffff !important;

    background:
        rgba(18, 140, 126, 0.95) !important;

    transform:
        translateY(-2px);
}


/* =========================================================
   RED LINKS / ICON HOVER
========================================================= */

.service-link:hover,
.team-scroll-hidden article a:hover {

    color:
        var(--ilife-red-dark) !important;

}



/* =========================================================
   KEEP GLASS REFLECTIONS
========================================================= */

.dashboard-card::before,
.floating-card::before,
.trust-card::before,
.service-card::before,
.solution-card::before,
.advisor-box::before {

    /* DON'T REMOVE ORIGINAL TRANSPARENT GLASS SHINE */

    opacity:
        0.58;

}

/* =========================================================
   CAREER APPLICATION PAGE
========================================================= */

.career-application-page {
    background: #fff;
    color: #171717;
}


/* =========================================================
   HERO
========================================================= */

.career-application-hero {
    position: relative;

    padding:
        70px 0
        100px;

    overflow: hidden;
}


.career-application-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    top: -180px;

    border-radius: 50%;

    background:
        rgba(227,30,45,.07);

    filter:
        blur(40px);
}


.career-application-breadcrumb {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 65px;

    font-size: 0.864rem;
}


.career-application-breadcrumb a {
    color: #707070;

    text-decoration: none;
}


.career-application-breadcrumb span {
    color: #aaa;
}


.career-application-breadcrumb strong {
    color: #171717;
}


.career-application-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color:
        var(--ilife-red, #E31E2D);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: .16em;
}


.career-application-label > span {
    width: 32px;
    height: 2px;

    background:
        var(--ilife-red, #E31E2D);
}


.career-application-hero h1 {
    max-width: 700px;

    margin-bottom: 30px;

    font-size:
        clamp(3.3rem, 6.6vw, 6.82rem);

    line-height: .95;

    letter-spacing: -.055em;

    font-weight: 700;
}


.career-application-hero h1 span {
    display: block;

    color:
        var(--ilife-red, #E31E2D);
}


.career-application-lead {
    max-width: 640px;

    color: #707070;

    font-size: 1.296rem;

    line-height: 1.8;
}


.career-application-points {
    display: flex;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 35px;
}


.career-application-points span {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 0.912rem;
    font-weight: 600;
}


.career-application-points i {
    color:
        var(--ilife-red, #E31E2D);
}



/* =========================================================
   HERO CARD
========================================================= */

.career-application-hero-card {
    padding: 42px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.22)
        );

    border:
        1px solid
        rgba(227,30,45,.14);

    backdrop-filter:
        blur(35px);

    -webkit-backdrop-filter:
        blur(35px);

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


.career-application-hero-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 30px;

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

    border-radius: 18px;

    color:
        var(--ilife-red, #E31E2D);

    background:
        rgba(227,30,45,.08);
}


.career-application-hero-icon i {
    font-size: 1.4rem;
}


.career-application-hero-card > small {
    color:
        var(--ilife-red, #E31E2D);

    font-size: 0.744rem;
    font-weight: 800;

    letter-spacing: .16em;
}


.career-application-hero-card h2 {
    margin:
        15px 0 18px;

    font-size: 2.2rem;

    line-height: 1.15;
}


.career-application-hero-card p {
    color: #707070;

    line-height: 1.7;
}


.career-application-hero-card > a {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 18px;

    color:
        var(--ilife-red, #E31E2D);

    text-decoration: none;

    font-size: 0.912rem;
    font-weight: 700;
}



/* =========================================================
   FORM SECTION
========================================================= */

.career-application-section {
    padding:
        100px 0 120px;

    background: #fafafa;
}


.career-application-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 50px;

    margin-bottom: 55px;
}


.career-application-section-name {
    margin-bottom: 15px;

    color:
        var(--ilife-red, #E31E2D);

    font-size: 0.744rem;
    font-weight: 800;

    letter-spacing: .16em;
}


.career-application-heading h2 {
    margin: 0;

    font-size:
        clamp(2.64rem, 5.5vw, 4.73rem);

    line-height: 1;

    letter-spacing: -.045em;
}


.career-application-heading h2 span {
    color:
        var(--ilife-red, #E31E2D);
}


.career-application-heading > p {
    max-width: 350px;

    color: #707070;

    line-height: 1.7;
}



/* =========================================================
   MAIN FORM
========================================================= */

.career-application-form {
    padding:
        55px;

    border-radius: 32px;

    background:
        rgba(255,255,255,.70);

    border:
        1px solid
        rgba(227,30,45,.12);

    backdrop-filter:
        blur(30px);

    -webkit-backdrop-filter:
        blur(30px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.06);
}



/* =========================================================
   FORM SECTION
========================================================= */

.career-application-form-section {
    padding-bottom: 50px;

    margin-bottom: 50px;

    border-bottom:
        1px solid
        #e9e9e9;
}


.career-application-form-title {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 35px;
}


.career-application-form-title > span {
    width: 46px;
    height: 46px;

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

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background:
        var(--ilife-red, #E31E2D);

    font-size: 0.816rem;
    font-weight: 700;
}


.career-application-form-title small {
    display: block;

    margin-bottom: 3px;

    color:
        var(--ilife-red, #E31E2D);

    font-size: 0.684rem;
    font-weight: 800;

    letter-spacing: .14em;
}


.career-application-form-title h3 {
    margin: 0;

    font-size: 1.5rem;
}



/* =========================================================
   INPUTS
========================================================= */

.career-application-form label {
    display: block;

    margin-bottom: 9px;

    color: #333;

    font-size: 0.912rem;
    font-weight: 600;
}


.career-application-form label span {
    color:
        var(--ilife-red, #E31E2D);
}


.career-application-form input,
.career-application-form select,
.career-application-form textarea {
    width: 100%;

    padding:
        14px 16px;

    border:
        1px solid #dedede;

    border-radius: 12px;

    outline: none;

    color: #171717;

    background:
        rgba(255,255,255,.78);

    font-size: 1.056rem;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.career-application-form textarea {
    resize: vertical;

    min-height: 150px;
}


.career-application-form input:focus,
.career-application-form select:focus,
.career-application-form textarea:focus {
    border-color:
        rgba(227,30,45,.55);

    box-shadow:
        0 0 0 4px
        rgba(227,30,45,.07);
}



/* =========================================================
   UPLOAD
========================================================= */

.career-application-upload {
    position: relative;

    min-height: 160px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 30px;

    border:
        1px dashed
        rgba(227,30,45,.38);

    border-radius: 20px;

    background:
        rgba(227,30,45,.025);
}


.career-application-upload > i {
    color:
        var(--ilife-red, #E31E2D);

    font-size: 2rem;
}


.career-application-upload strong {
    display: block;

    margin-bottom: 5px;
}


.career-application-upload span {
    color: #858585;

    font-size: 0.9rem;
}


.career-application-upload input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    opacity: 0;
}



/* =========================================================
   CONSENT
========================================================= */

.career-application-consent {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 35px;
}


.career-application-consent input {
    width: 18px;
    height: 18px;

    margin-top: 2px;

    flex-shrink: 0;
}


.career-application-consent label {
    max-width: 850px;

    margin: 0;

    color: #707070;

    font-weight: 400;

    line-height: 1.6;
}



/* =========================================================
   SUBMIT
========================================================= */

.career-application-submit {
    display: flex;
    align-items: center;

    gap: 25px;
}


.career-application-submit button {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding:
        15px 22px;

    border: 0;

    border-radius: 999px;

    color: white;

    background:
        var(--ilife-red, #E31E2D);

    font-size: 0.936rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}


.career-application-submit button:hover {
    background:
        var(--ilife-red-dark, #C81725);

    transform:
        translateY(-2px);
}


.career-application-submit small {
    color: #888;

    font-size: 0.84rem;
}



/* =========================================================
   SUCCESS / ERROR
========================================================= */

.career-application-success,
.career-application-error {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 30px;

    padding: 18px 20px;

    border-radius: 15px;
}


.career-application-success {
    background:
        rgba(39,174,96,.08);

    color: #198754;
}


.career-application-error {
    background:
        rgba(227,30,45,.08);

    color:
        var(--ilife-red, #E31E2D);
}


.career-application-success i,
.career-application-error i {
    font-size: 1.3rem;
}


.career-application-success strong,
.career-application-error strong {
    display: block;
}


.career-application-success span,
.career-application-error span {
    display: block;

    margin-top: 2px;

    font-size: 0.9rem;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .career-application-heading {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 767px) {

    .career-application-hero {
        padding:
            45px 0 75px;
    }


    .career-application-breadcrumb {
        margin-bottom: 45px;
    }


    .career-application-hero h1 {
        font-size:
            clamp(3.3rem, 15.4vw, 5.17rem);
    }


    .career-application-points {
        flex-direction: column;

        gap: 12px;
    }


    .career-application-hero-card {
        padding: 30px;
    }


    .career-application-section {
        padding:
            75px 0;
    }


    .career-application-form {
        padding:
            30px 22px;
    }


    .career-application-submit {
        align-items: flex-start;

        flex-direction: column;
    }


    .career-application-submit button {
        width: 100%;

        justify-content: space-between;
    }

}

/* =========================================================
   I~LIFE ADMIN DASHBOARD
========================================================= */

.ilife-admin-body {
    margin: 0;

    background:
        #f6f6f6;

    color:
        #171717;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.ilife-admin-layout {
    min-height:
        100vh;

    display:
        flex;
}



/* =========================================================
   SIDEBAR
========================================================= */

.ilife-admin-sidebar {
    position:
        fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width:
        250px;

    padding:
        30px 20px;

    display:
        flex;

    flex-direction:
        column;

    background:
        rgba(255,255,255,.90);

    border-right:
        1px solid
        rgba(0,0,0,.065);

    backdrop-filter:
        blur(30px);

    -webkit-backdrop-filter:
        blur(30px);

    z-index:
        10;
}



.ilife-admin-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        0 9px 30px;
}


.ilife-admin-brand-icon {
    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    color:
        white;

    background:
        #E31E2D;

    font-size:
        .8rem;

    font-weight:
        800;
}


.ilife-admin-brand strong {
    display:
        block;

    font-size:
        1.2rem;
}


.ilife-admin-brand small {
    display:
        block;

    margin-top:
        2px;

    color:
        #999;

    font-size:
        0.624rem;

    letter-spacing:
        .15em;
}



/* NAVIGATION */

.ilife-admin-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.ilife-admin-nav a,
.ilife-admin-sidebar-bottom a {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        47px;

    padding:
        11px 14px;

    border-radius:
        13px;

    color:
        #676767;

    text-decoration:
        none;

    font-size:
        0.912rem;

    font-weight:
        600;

    transition:
        background .25s ease,
        color .25s ease;
}


.ilife-admin-nav a:hover,
.ilife-admin-nav a.active {
    color:
        #E31E2D;

    background:
        rgba(227,30,45,.075);
}


.ilife-admin-nav i,
.ilife-admin-sidebar-bottom i {
    width:
        20px;

    text-align:
        center;

    font-size:
        1rem;
}


.ilife-admin-nav-badge {
    margin-left:
        auto;

    min-width:
        22px;

    height:
        22px;

    padding:
        0 6px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    color:
        white;

    background:
        #E31E2D;

    font-size:
        0.672rem;
}


.ilife-admin-sidebar-bottom {
    margin-top:
        auto;
}


.ilife-admin-sidebar-bottom a:hover {
    color:
        #E31E2D;

    background:
        rgba(227,30,45,.06);
}



/* =========================================================
   MAIN
========================================================= */

.ilife-admin-main {
    width:
        calc(100% - 250px);

    min-height:
        100vh;

    margin-left:
        250px;

    padding:
        44px;
}



/* =========================================================
   TOPBAR
========================================================= */

.ilife-admin-topbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        38px;
}


.ilife-admin-topbar > div:first-child > small {
    color:
        #E31E2D;

    font-size:
        0.672rem;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.ilife-admin-topbar h1 {
    margin:
        5px 0 8px;

    font-size:
        clamp(2.53rem, 4.4vw, 4.07rem);

    line-height:
        1;

    letter-spacing:
        -.045em;
}


.ilife-admin-topbar p {
    margin:
        0;

    color:
        #858585;

    font-size:
        0.96rem;
}


.ilife-admin-profile {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    text-align:
        right;
}


.ilife-admin-profile strong,
.ilife-admin-profile small {
    display:
        block;
}


.ilife-admin-profile strong {
    font-size:
        0.888rem;
}


.ilife-admin-profile small {
    margin-top:
        2px;

    color:
        #999;

    font-size:
        0.72rem;
}


.ilife-admin-profile-icon {
    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #E31E2D;

    background:
        rgba(227,30,45,.08);
}



/* =========================================================
   PRIMARY STATS
========================================================= */

.ilife-admin-stats {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

    margin-bottom:
        25px;
}


.ilife-admin-stat-card {
    padding:
        24px;

    display:
        block;

    border-radius:
        22px;

    color:
        inherit;

    text-decoration:
        none;

    background:
        rgba(255,255,255,.88);

    border:
        1px solid
        rgba(0,0,0,.055);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.025);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.ilife-admin-stat-card:hover {
    color:
        inherit;

    transform:
        translateY(-3px);

    border-color:
        rgba(227,30,45,.16);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.06);
}


.ilife-admin-stat-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.ilife-admin-stat-icon {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    color:
        #E31E2D;

    background:
        rgba(227,30,45,.075);
}


.ilife-admin-stat-top > span {
    color:
        #9a9a9a;

    font-size:
        0.648rem;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.ilife-admin-stat-card > strong {
    display:
        block;

    margin:
        22px 0 3px;

    color:
        #E31E2D;

    font-size:
        2.53rem;

    line-height:
        1;
}


.ilife-admin-stat-card > p {
    margin:
        0;

    color:
        #858585;

    font-size:
        0.804rem;
}



/* =========================================================
   DASHBOARD GRID
========================================================= */

.ilife-admin-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, .8fr);

    gap:
        20px;
}


.ilife-admin-panel {
    border-radius:
        23px;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid
        rgba(0,0,0,.055);

    overflow:
        hidden;
}


.ilife-admin-panel-header {
    padding:
        24px 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        #efefef;
}


.ilife-admin-panel-header small {
    color:
        #E31E2D;

    font-size:
        0.648rem;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


.ilife-admin-panel-header h2 {
    margin:
        4px 0 0;

    font-size:
        1.44rem;
}


.ilife-admin-panel-header > a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #E31E2D;

    text-decoration:
        none;

    font-size:
        0.804rem;

    font-weight:
        700;
}



/* =========================================================
   RECENT APPLICATIONS
========================================================= */

.ilife-admin-recent-list {
    padding:
        8px 0;
}


.ilife-admin-application-row {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        15px 24px;

    color:
        inherit;

    text-decoration:
        none;

    border-bottom:
        1px solid
        #f2f2f2;

    transition:
        background .2s ease;
}


.ilife-admin-application-row:last-child {
    border-bottom:
        0;
}


.ilife-admin-application-row:hover {
    color:
        inherit;

    background:
        rgba(227,30,45,.025);
}


.ilife-admin-applicant-avatar {
    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #E31E2D;

    background:
        rgba(227,30,45,.08);

    font-size:
        0.936rem;

    font-weight:
        800;
}


.ilife-admin-applicant-info {
    min-width:
        0;

    flex:
        1;
}


.ilife-admin-applicant-info strong {
    display:
        block;

    color:
        #282828;

    font-size:
        0.9rem;
}


.ilife-admin-applicant-info span {
    display:
        block;

    margin-top:
        3px;

    color:
        #999;

    font-size:
        0.744rem;
}


.ilife-admin-applicant-status {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.ilife-admin-applicant-status small {
    color:
        #aaa;

    font-size:
        0.696rem;
}



/* STATUS PILLS */

.ilife-admin-status {
    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        #f2f2f2;

    color:
        #666;

    font-size:
        0.672rem;

    font-weight:
        700;
}


.ilife-status-new {
    color:
        #E31E2D;

    background:
        rgba(227,30,45,.075);
}


.ilife-status-reviewed {
    color:
        #6c757d;

    background:
        rgba(108,117,125,.09);
}


.ilife-status-shortlisted {
    color:
        #0d6efd;

    background:
        rgba(13,110,253,.08);
}


.ilife-status-interview {
    color:
        #9a6800;

    background:
        rgba(255,193,7,.10);
}


.ilife-status-hired {
    color:
        #198754;

    background:
        rgba(25,135,84,.09);
}


.ilife-status-rejected {
    color:
        #707070;

    background:
        rgba(90,90,90,.08);
}



/* =========================================================
   QUICK ACTIONS
========================================================= */

.ilife-admin-action-list {
    padding:
        8px 0;
}


.ilife-admin-action-list > a {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 22px;

    color:
        inherit;

    text-decoration:
        none;

    border-bottom:
        1px solid
        #f2f2f2;
}


.ilife-admin-action-list > a:last-child {
    border-bottom:
        0;
}


.ilife-admin-action-list > a:hover {
    background:
        rgba(227,30,45,.025);
}


.ilife-admin-action-list > a > div {
    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    color:
        #E31E2D;

    background:
        rgba(227,30,45,.07);
}


.ilife-admin-action-list > a > span {
    flex:
        1;
}


.ilife-admin-action-list strong,
.ilife-admin-action-list small {
    display:
        block;
}


.ilife-admin-action-list strong {
    color:
        #333;

    font-size:
        0.84rem;
}


.ilife-admin-action-list small {
    margin-top:
        3px;

    color:
        #999;

    font-size:
        0.696rem;
}


.ilife-admin-action-list > a > i {
    color:
        #bbb;

    font-size:
        .72rem;
}



/* =========================================================
   SECONDARY STATS
========================================================= */

.ilife-admin-secondary-stats {
    margin-top:
        20px;

    display:
        grid;

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

    gap:
        18px;
}


.ilife-admin-secondary-stats > div {
    padding:
        20px 22px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border-radius:
        19px;

    background:
        rgba(255,255,255,.83);

    border:
        1px solid
        rgba(0,0,0,.05);
}


.ilife-admin-secondary-stats > div > i {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    color:
        #E31E2D;

    background:
        rgba(227,30,45,.07);
}


.ilife-admin-secondary-stats small,
.ilife-admin-secondary-stats strong {
    display:
        block;
}


.ilife-admin-secondary-stats small {
    color:
        #999;

    font-size:
        0.648rem;

    font-weight:
        800;

    letter-spacing:
        .1em;
}


.ilife-admin-secondary-stats strong {
    margin-top:
        3px;

    font-size:
        1.56rem;
}



/* =========================================================
   EMPTY
========================================================= */

.ilife-admin-empty {
    padding:
        65px 25px;

    text-align:
        center;
}


.ilife-admin-empty i {
    display:
        block;

    margin-bottom:
        12px;

    color:
        #ccc;

    font-size:
        2rem;
}


.ilife-admin-empty strong,
.ilife-admin-empty span {
    display:
        block;
}


.ilife-admin-empty strong {
    color:
        #444;

    font-size:
        0.936rem;
}


.ilife-admin-empty span {
    margin-top:
        4px;

    color:
        #999;

    font-size:
        0.78rem;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

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


    .ilife-admin-grid {
        grid-template-columns:
            1fr;
    }

}



/* =========================================================
   MOBILE SIDEBAR
========================================================= */

@media (max-width: 850px) {

    .ilife-admin-sidebar {
        width:
            78px;

        padding:
            26px 11px;
    }


    .ilife-admin-brand {
        justify-content:
            center;

        padding-left:
            0;

        padding-right:
            0;
    }


    .ilife-admin-brand > div:not(.ilife-admin-brand-icon) {
        display:
            none;
    }


    .ilife-admin-nav a,
    .ilife-admin-sidebar-bottom a {
        justify-content:
            center;

        padding-left:
            0;

        padding-right:
            0;
    }


    .ilife-admin-nav a span,
    .ilife-admin-sidebar-bottom a span {
        display:
            none;
    }


    .ilife-admin-nav-badge {
        position:
            absolute;

        top:
            3px;

        right:
            3px;
    }


    .ilife-admin-main {
        width:
            calc(100% - 78px);

        margin-left:
            78px;

        padding:
            30px 22px;
    }

}



/* =========================================================
   PHONE
========================================================= */

@media (max-width: 600px) {

    .ilife-admin-sidebar {
        display:
            none;
    }


    .ilife-admin-main {
        width:
            100%;

        margin-left:
            0;

        padding:
            24px 15px;
    }


    .ilife-admin-profile {
        display:
            none;
    }


    .ilife-admin-stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            12px;
    }


    .ilife-admin-stat-card {
        padding:
            18px;
    }


    .ilife-admin-stat-card > strong {
        font-size:
            1.98rem;
    }


    .ilife-admin-application-row {
        padding:
            14px 16px;
    }


    .ilife-admin-applicant-status small {
        display:
            none;
    }


    .ilife-admin-secondary-stats {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   I~LIFE ADMIN LOGIN
========================================================= */

.ilife-admin-login-body {
    margin: 0;

    min-height: 100vh;

    background: #f7f7f7;

    color: #171717;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.ilife-admin-login-page {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(420px, 1.05fr)
        minmax(420px, .95fr);
}



/* =========================================================
   LEFT SIDE
========================================================= */

.ilife-admin-login-brand {
    position: relative;

    overflow: hidden;

    padding: 65px;

    display: flex;

    background:
        linear-gradient(
            145deg,
            #E31E2D,
            #B81020
        );

    color: white;
}


.ilife-admin-login-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ilife-admin-login-decoration.decoration-one {
    width: 460px;
    height: 460px;

    top: -170px;
    right: -170px;

    background:
        rgba(255,255,255,.07);

    filter:
        blur(5px);
}


.ilife-admin-login-decoration.decoration-two {
    width: 380px;
    height: 380px;

    left: -170px;
    bottom: -140px;

    background:
        rgba(255,255,255,.05);

    filter:
        blur(10px);
}



.ilife-admin-login-brand-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 660px;

    min-height: 100%;

    display: flex;

    flex-direction: column;
}



/* LOGO */

.ilife-admin-login-logo {
    display: inline-block;

    align-self: flex-start;
}


.ilife-admin-login-logo img {
    max-width: 150px;
    max-height: 70px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);
}



/* MAIN TEXT */

.ilife-admin-login-brand-text {
    margin: auto 0;
}


.ilife-admin-login-brand-text > small {
    display: block;

    margin-bottom: 22px;

    color:
        rgba(255,255,255,.68);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: .18em;
}


.ilife-admin-login-brand-text h1 {
    max-width: 630px;

    margin:
        0 0 28px;

    color: white;

    font-size:
        clamp(3.85rem, 6.6vw, 7.48rem);

    line-height: .92;

    letter-spacing: -.06em;
}


.ilife-admin-login-brand-text h1 span {
    display: block;

    color:
        rgba(255,255,255,.60);
}


.ilife-admin-login-brand-text p {
    max-width: 510px;

    margin: 0;

    color:
        rgba(255,255,255,.70);

    font-size: 1.116rem;

    line-height: 1.8;
}



/* FEATURES */

.ilife-admin-login-features {
    display: grid;

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

    gap: 12px;

    margin-top: 50px;
}


.ilife-admin-login-features > div {
    padding: 18px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid
        rgba(255,255,255,.13);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.ilife-admin-login-features i {
    display: block;

    margin-bottom: 17px;

    color: white;

    font-size: 1.15rem;
}


.ilife-admin-login-features strong,
.ilife-admin-login-features small {
    display: block;
}


.ilife-admin-login-features strong {
    color: white;

    font-size: 0.816rem;
}


.ilife-admin-login-features small {
    margin-top: 4px;

    color:
        rgba(255,255,255,.57);

    font-size: 0.672rem;

    line-height: 1.5;
}



/* =========================================================
   RIGHT SIDE
========================================================= */

.ilife-admin-login-form-side {
    position: relative;

    padding:
        60px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    background:
        #fafafa;
}


.ilife-admin-login-box {
    width: 100%;
    max-width: 430px;

    padding: 45px;

    border-radius: 28px;

    background:
        rgba(255,255,255,.74);

    border:
        1px solid
        rgba(0,0,0,.065);

    backdrop-filter:
        blur(30px);

    -webkit-backdrop-filter:
        blur(30px);

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



/* MOBILE LOGO */

.ilife-admin-login-mobile-logo {
    display: none;

    margin-bottom: 35px;
}


.ilife-admin-login-mobile-logo img {
    max-width: 130px;
}



/* HEADING */

.ilife-admin-login-label {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #E31E2D;

    font-size: 0.696rem;

    font-weight: 800;

    letter-spacing: .15em;
}


.ilife-admin-login-label span {
    width: 25px;
    height: 2px;

    background: #E31E2D;
}


.ilife-admin-login-heading h2 {
    margin:
        0 0 10px;

    color: #171717;

    font-size:
        2.75rem;

    letter-spacing:
        -.04em;
}


.ilife-admin-login-heading p {
    margin: 0;

    color: #858585;

    font-size: 0.912rem;

    line-height: 1.7;
}



/* =========================================================
   ERROR
========================================================= */

.ilife-admin-login-error {
    margin-top: 25px;

    padding:
        13px 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 12px;

    color: #C81725;

    background:
        rgba(227,30,45,.07);

    border:
        1px solid
        rgba(227,30,45,.10);

    font-size: 0.816rem;
}



/* =========================================================
   FORM
========================================================= */

.ilife-admin-login-form {
    margin-top: 32px;
}


.ilife-admin-login-field {
    margin-bottom: 22px;
}


.ilife-admin-login-field label {
    display: block;

    margin-bottom: 8px;

    color: #444;

    font-size: 0.804rem;

    font-weight: 700;
}


.ilife-admin-login-field > div {
    position: relative;
}


.ilife-admin-login-field > div > i:first-child {
    position: absolute;

    top: 50%;
    left: 16px;

    transform:
        translateY(-50%);

    z-index: 2;

    color: #999;

    font-size: .9rem;
}


.ilife-admin-login-field input {
    width: 100%;
    height: 52px;

    box-sizing: border-box;

    padding:
        0 48px
        0 45px;

    border:
        1px solid #dedede;

    border-radius: 13px;

    outline: none;

    color: #171717;

    background:
        rgba(255,255,255,.80);

    font-size: 0.936rem;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.ilife-admin-login-field input:focus {
    border-color:
        rgba(227,30,45,.45);

    box-shadow:
        0 0 0 4px
        rgba(227,30,45,.06);
}



/* PASSWORD EYE */

.ilife-admin-password-toggle {
    position: absolute;

    top: 50%;
    right: 13px;

    transform:
        translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: transparent;

    color: #888;

    cursor: pointer;
}



/* =========================================================
   LOGIN BUTTON
========================================================= */

.ilife-admin-login-button {
    width: 100%;
    height: 52px;

    margin-top: 7px;

    padding:
        0 19px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 999px;

    color: white;

    background:
        #E31E2D;

    box-shadow:
        0 14px 30px
        rgba(227,30,45,.18);

    font-size: 0.864rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}


.ilife-admin-login-button:hover {
    background:
        #C81725;

    transform:
        translateY(-2px);
}



/* =========================================================
   BACK
========================================================= */

.ilife-admin-login-back {
    margin-top: 28px;

    text-align: center;
}


.ilife-admin-login-back a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #858585;

    text-decoration: none;

    font-size: 0.768rem;
}


.ilife-admin-login-back a:hover {
    color: #E31E2D;
}



/* =========================================================
   COPYRIGHT
========================================================= */

.ilife-admin-login-copyright {
    position: absolute;

    bottom: 22px;

    margin: 0;

    color: #aaa;

    font-size: 0.66rem;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .ilife-admin-login-page {
        grid-template-columns:
            1fr 1fr;
    }


    .ilife-admin-login-brand {
        padding:
            45px;
    }


    .ilife-admin-login-features {
        grid-template-columns:
            1fr;
    }


    .ilife-admin-login-form-side {
        padding:
            35px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ilife-admin-login-page {
        display: block;
    }


    .ilife-admin-login-brand {
        display: none;
    }


    .ilife-admin-login-form-side {
        min-height:
            100vh;

        padding:
            30px 20px 70px;
    }


    .ilife-admin-login-box {
        padding:
            32px 25px;
    }


    .ilife-admin-login-mobile-logo {
        display: block;
    }


    .ilife-admin-login-heading h2 {
        font-size:
            2.31rem;
    }

}

/* =========================================================
   ADMIN PORTAL ENTRANCE
========================================================= */

.footer-admin-entry {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        8px 13px;

    border-radius:
        999px;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.05);

    border:
        1px solid
        rgba(255,255,255,.10);

    text-decoration:
        none;

    font-size:
        0.78rem;

    transition:
        .25s ease;
}


.footer-admin-entry i {
    font-size:
        .8rem;
}


.footer-admin-entry:hover {
    color:
        #ffffff;

    background:
        rgba(227,30,45,.18);

    border-color:
        rgba(227,30,45,.30);

    transform:
        translateY(-1px);
}


/* FOOTER BOTTOM */

.footer-bottom {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}


.footer-bottom > div {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}


/* MOBILE */

@media (max-width: 767px) {

    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}
/* =========================================================
   FIX ADMIN LOGIN TOP BLANK SPACE
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}

.ilife-admin-login-body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    overflow-x: hidden;
}

.ilife-admin-login-page {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr);
    align-items: stretch;
}

.ilife-admin-login-page,
.ilife-admin-login-page section,
.ilife-admin-login-page main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ilife-admin-login-brand,
.ilife-admin-login-form-side {
    margin: 0 !important;
}

.ilife-admin-login-form-side {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* if some global website spacing affects main */
main.ilife-admin-login-page {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   VIEW PROFILE LINK
========================================================= */
.view-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -1px 0 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text, #111);
    font-size: 0.816rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}

.view-profile-link span {
    font-size: 0.984rem;
    line-height: 1;
    transition: transform .2s ease;
}

.view-profile-link:hover {
    color: var(--text, #111);
    opacity: .65;
    transform: translateX(1px);
}

.view-profile-link:hover span {
    transform: translateX(3px);
}

/* =========================================================
   WEALTH CRAFTER PROFILE PAGE
========================================================= */
.profile-page {
    padding: 70px 0 90px;
    background: #f7f7f4;
}

.profile-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.profile-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    color: var(--text, #111);
    text-decoration: none;
    font-size: 0.936rem;
    font-weight: 700;
}

.profile-back:hover {
    opacity: .65;
}

.profile-hero-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 42px;
    align-items: center;
    padding: 42px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 30px;
    box-shadow: 0 18px 55px rgba(0,0,0,.07);
}

.profile-photo {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center top;
    border-radius: 24px;
}

.profile-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.816rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #777;
}

.profile-name {
    margin: 0 0 8px;
    font-size: clamp(2.2rem, 4.4vw, 3.85rem);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.04em;
}

.profile-role {
    margin-bottom: 20px;
    font-size: 1.14rem;
    color: #777;
}

.profile-intro {
    max-width: 650px;
    margin-bottom: 22px;
    font-size: 1.14rem;
    line-height: 1.8;
    color: #555;
}

.profile-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #f3f3f0;
    color: #111;
    text-decoration: none;
    font-size: 0.864rem;
    font-weight: 700;
}

.profile-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.profile-info-card {
    min-height: 220px;
    padding: 28px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 24px;
}

.profile-info-card .profile-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #f1f1ee;
    font-size: 1rem;
}

.profile-info-card h2 {
    margin-bottom: 10px;
    font-size: 1.26rem;
    font-weight: 800;
}

.profile-info-card p {
    margin: 0;
    color: #666;
    font-size: 0.984rem;
    line-height: 1.75;
}

.profile-placeholder {
    margin-top: 22px;
    padding: 25px 28px;
    border-radius: 22px;
    border: 1px dashed rgba(0,0,0,.18);
    background: rgba(255,255,255,.65);
    color: #777;
    font-size: 0.936rem;
    line-height: 1.7;
}

@media (max-width: 767.98px) {
    .profile-page {
        padding: 45px 0 65px;
    }

    .profile-hero-card {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 25px;
        border-radius: 24px;
    }

    .profile-photo {
        height: 330px;
    }

    .profile-sections {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMIN CAREER APPLICATIONS
========================================================= */

.ilife-career-admin-success {
    margin-bottom: 22px;

    padding: 14px 17px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 13px;

    color: #198754;

    background:
        rgba(25,135,84,.08);

    font-size: 0.864rem;
}


/* =========================================================
   STATS
========================================================= */

.ilife-career-admin-stats {
    display: grid;

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

    gap: 18px;

    margin-bottom: 24px;
}


.ilife-career-admin-stats > a {
    padding: 23px;

    border-radius: 21px;

    color: inherit;

    text-decoration: none;

    background:
        rgba(255,255,255,.88);

    border:
        1px solid
        rgba(0,0,0,.055);

    transition:
        .25s ease;
}


.ilife-career-admin-stats > a:hover {
    color: inherit;

    transform:
        translateY(-3px);

    border-color:
        rgba(227,30,45,.18);
}


.ilife-career-admin-stats small {
    display: block;

    color: #999;

    font-size: 0.648rem;
    font-weight: 800;

    letter-spacing: .12em;
}


.ilife-career-admin-stats strong {
    display: block;

    margin:
        9px 0 4px;

    color: #E31E2D;

    font-size: 2.2rem;
}


.ilife-career-admin-stats span {
    color: #888;

    font-size: 0.792rem;
}



/* =========================================================
   SEARCH
========================================================= */

.ilife-career-admin-tools {
    margin-bottom: 20px;
}


.ilife-career-admin-tools form {
    display: flex;

    gap: 10px;
}


.ilife-career-admin-search {
    position: relative;

    flex: 1;
}


.ilife-career-admin-search i {
    position: absolute;

    left: 15px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #999;
}


.ilife-career-admin-search input,
.ilife-career-admin-tools select {
    height: 46px;

    box-sizing: border-box;

    border:
        1px solid #e1e1e1;

    border-radius: 12px;

    outline: none;

    background: white;

    font-size: 0.864rem;
}


.ilife-career-admin-search input {
    width: 100%;

    padding:
        0 15px 0 42px;
}


.ilife-career-admin-tools select {
    min-width: 150px;

    padding:
        0 13px;
}


.ilife-career-admin-tools button,
.ilife-career-admin-reset {
    height: 46px;

    padding:
        0 18px;

    display: inline-flex;

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

    border-radius: 12px;

    font-size: 0.84rem;
    font-weight: 700;
}


.ilife-career-admin-tools button {
    border: 0;

    color: white;

    background: #E31E2D;
}


.ilife-career-admin-reset {
    color: #555;

    text-decoration: none;

    background: white;

    border:
        1px solid #e1e1e1;
}



/* =========================================================
   PANEL
========================================================= */

.ilife-career-admin-panel {
    overflow: hidden;

    border-radius: 22px;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid
        rgba(0,0,0,.055);
}


.ilife-career-admin-panel-head {
    padding: 23px 25px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid #ededed;
}


.ilife-career-admin-panel-head small {
    color: #E31E2D;

    font-size: 0.648rem;
    font-weight: 800;

    letter-spacing: .13em;
}


.ilife-career-admin-panel-head h2 {
    margin: 4px 0 0;

    font-size: 1.38rem;
}


.ilife-career-admin-panel-head > span {
    color: #999;

    font-size: 0.78rem;
}



/* =========================================================
   TABLE
========================================================= */

.ilife-career-admin-table-wrap {
    overflow-x: auto;
}


.ilife-career-admin-table {
    width: 100%;

    min-width: 1000px;

    border-collapse: collapse;
}


.ilife-career-admin-table th {
    padding: 14px 19px;

    text-align: left;

    color: #999;

    background: #fafafa;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: .09em;
}


.ilife-career-admin-table td {
    padding: 17px 19px;

    border-top:
        1px solid #f0f0f0;

    vertical-align: middle;

    color: #5f5f5f;

    font-size: 0.828rem;
}


.ilife-career-admin-table tbody tr:hover {
    background:
        rgba(227,30,45,.018);
}



/* =========================================================
   PERSON
========================================================= */

.ilife-career-admin-person {
    min-width: 220px;

    display: flex;

    align-items: center;

    gap: 11px;
}


.ilife-career-admin-person > div {
    width: 41px;
    height: 41px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    color: #E31E2D;

    background:
        rgba(227,30,45,.08);

    font-weight: 800;
}


.ilife-career-admin-person strong,
.ilife-career-admin-person small {
    display: block;
}


.ilife-career-admin-person strong {
    margin-bottom: 3px;

    color: #272727;

    font-size: 0.864rem;
}


.ilife-career-admin-person small {
    color: #999;

    font-size: 0.708rem;
}


.ilife-career-admin-date strong,
.ilife-career-admin-date small {
    display: block;
}


.ilife-career-admin-date strong {
    color: #555;

    font-size: 0.804rem;
}


.ilife-career-admin-date small {
    margin-top: 2px;

    color: #aaa;

    font-size: 0.672rem;
}



/* =========================================================
   STATUS
========================================================= */

.ilife-career-admin-status {
    padding: 7px 10px;

    border:
        1px solid #dedede;

    border-radius: 999px;

    outline: none;

    background: white;

    font-size: 0.744rem;

    cursor: pointer;
}


.ilife-career-admin-status.status-new {
    color: #E31E2D;
}


.ilife-career-admin-status.status-reviewed {
    color: #6c757d;
}


.ilife-career-admin-status.status-shortlisted {
    color: #0d6efd;
}


.ilife-career-admin-status.status-interview {
    color: #9b6a00;
}


.ilife-career-admin-status.status-hired {
    color: #198754;
}


.ilife-career-admin-status.status-rejected {
    color: #777;
}



/* =========================================================
   CV / VIEW
========================================================= */

.ilife-career-admin-cv {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #E31E2D;

    text-decoration: none;

    font-weight: 700;
}


.ilife-career-admin-view {
    width: 35px;
    height: 35px;

    display: inline-flex;

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

    border-radius: 10px;

    color: #E31E2D;

    background:
        rgba(227,30,45,.07);

    text-decoration: none;
}



/* =========================================================
   EMPTY
========================================================= */

.ilife-career-admin-empty {
    padding:
        65px 20px !important;

    text-align: center;
}


.ilife-career-admin-empty i {
    display: block;

    margin-bottom: 10px;

    color: #ccc;

    font-size: 2rem;
}


.ilife-career-admin-empty strong,
.ilife-career-admin-empty span {
    display: block;
}


.ilife-career-admin-empty strong {
    color: #444;
}


.ilife-career-admin-empty span {
    margin-top: 4px;

    color: #999;
}



/* =========================================================
   DETAILS
========================================================= */

.ilife-career-admin-details {
    margin-top: 22px;

    padding: 28px;

    border-radius: 22px;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid
        rgba(0,0,0,.055);
}


.ilife-career-admin-details-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;
}


.ilife-career-admin-details-head small {
    color: #E31E2D;

    font-size: 0.648rem;
    font-weight: 800;

    letter-spacing: .12em;
}


.ilife-career-admin-details-head h2 {
    margin: 4px 0 0;

    font-size: 1.8rem;
}


.ilife-career-admin-details-head > a {
    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 50%;

    color: #777;

    background: #f2f2f2;

    text-decoration: none;
}


.ilife-career-admin-detail-grid {
    display: grid;

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

    gap: 12px;
}


.ilife-career-admin-detail-grid > div {
    padding: 16px;

    border-radius: 13px;

    background: #fafafa;
}


.ilife-career-admin-detail-grid small {
    display: block;

    margin-bottom: 5px;

    color: #999;

    font-size: 0.612rem;

    letter-spacing: .1em;
}


.ilife-career-admin-detail-grid strong {
    color: #333;

    font-size: 0.84rem;
}



/* MESSAGE */

.ilife-career-admin-message {
    margin-top: 22px;

    padding:
        20px 0;

    border-top:
        1px solid #eee;

    border-bottom:
        1px solid #eee;
}


.ilife-career-admin-message small {
    color: #E31E2D;

    font-size: 0.636rem;

    font-weight: 800;

    letter-spacing: .11em;
}


.ilife-career-admin-message p {
    margin:
        10px 0 0;

    max-width: 900px;

    color: #666;

    font-size: 0.864rem;

    line-height: 1.7;
}



/* DETAIL BUTTONS */

.ilife-career-admin-detail-actions {
    margin-top: 20px;

    display: flex;

    gap: 10px;
}


.ilife-career-admin-detail-actions a {
    padding:
        10px 15px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    border-radius: 999px;

    color: #555;

    background: #f2f2f2;

    text-decoration: none;

    font-size: 0.792rem;

    font-weight: 700;
}


.ilife-career-admin-detail-actions a.primary {
    color: white;

    background: #E31E2D;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .ilife-career-admin-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .ilife-career-admin-detail-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .ilife-career-admin-tools form {
        flex-direction: column;
    }


    .ilife-career-admin-tools select {
        width: 100%;
    }


    .ilife-career-admin-reset {
        width: 100%;

        box-sizing: border-box;
    }


    .ilife-career-admin-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .ilife-career-admin-detail-grid {
        grid-template-columns:
            1fr;
    }


    .ilife-career-admin-detail-actions {
        flex-direction: column;
    }


    .ilife-career-admin-detail-actions a {
        justify-content: center;
    }

}


/* =========================================================
   RESPONSIVE POLISH — ALL DEVICES
   Keeps the existing desktop design, while improving
   tablet and mobile spacing, sizing and overflow.
========================================================= */

/* Prevent accidental horizontal overflow on narrow screens */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

/* Main Bootstrap containers get comfortable side spacing */
@media (max-width: 1199.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 1.5rem;
    }

    .team-heading {
        max-width: 650px;
    }
}

/* -------------------------
   TABLET
------------------------- */
@media (max-width: 991.98px) {

    .liquid-glass-navbar {
        margin-left: 12px;
        margin-right: 12px;
    }

    .hero-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-title {
        font-size: clamp(2.64rem, 6.6vw, 3.96rem);
    }

    .hero-description {
        max-width: 680px;
    }

    .team-section,
    .advisor-team-section {
        margin-top: 80px;
    }

    /* Employee cards stay in one horizontal row,
       but become slightly narrower on tablets. */
    .team-grid {
        gap: 18px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .team-member {
        scroll-snap-align: start;
    }

    /* Profile page */
    .profile-shell {
        width: min(100% - 32px, 1100px);
    }

    .profile-hero-card {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 28px;
        padding: 32px;
    }

    .profile-photo {
        height: 310px;
    }

    .profile-name {
        font-size: clamp(2.09rem, 5.5vw, 3.3rem);
    }

    .profile-sections {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .profile-info-card {
        padding: 23px;
    }
}

/* -------------------------
   MOBILE
------------------------- */
@media (max-width: 767.98px) {

    .liquid-glass-navbar {
        margin-left: 8px;
        margin-right: 8px;
        border-radius: 18px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .brand-text strong {
        font-size: 0.984rem;
    }

    .brand-text small {
        font-size: 0.576rem;
        letter-spacing: .13em;
    }

    .hero-section {
        min-height: auto;
        padding-top: 55px;
        padding-bottom: 55px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 11vw, 3.3rem);
        line-height: 1.05;
    }

    .hero-description {
        font-size: 1.008rem;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-wrap: wrap;
        gap: 9px;
    }

    .hero-buttons .btn {
        min-height: 42px;
    }

    .team-section,
    .advisor-team-section {
        margin-top: 65px;
    }

    .team-heading {
        padding: 0 14px;
        margin-bottom: 28px;
    }

    .team-heading h2 {
        font-size: clamp(2.2rem, 9.9vw, 2.97rem);
    }

    .team-heading p {
        font-size: 0.984rem;
        line-height: 1.65;
    }

    /* On phones, one employee card uses most of the screen.
       Users can swipe horizontally to see the other employees. */
    .team-grid {
        grid-auto-columns: 82vw !important;
        gap: 14px;
        padding-top: 5px;
        padding-bottom: 22px;
        padding-left: 4px;
        padding-right: 4px;
        scroll-snap-type: x mandatory;
    }

    .team-member {
        width: 82vw !important;
        min-width: 82vw !important;
        max-width: 82vw !important;
        scroll-snap-align: center;
    }

    .team-photo {
        border-radius: 23px;
    }

    .team-name {
        font-size: 1.2rem;
    }

    .team-role {
        font-size: 0.816rem;
    }

    .view-profile-link {
        font-size: 0.816rem;
        min-height: 28px;
    }

    .team-contact-list {
        gap: 7px;
    }

    .team-contact-list a {
        font-size: 0.804rem;
    }

    /* Profile page */
    .profile-page {
        padding: 32px 0 55px;
    }

    .profile-shell {
        width: min(100% - 24px, 1100px);
    }

    .profile-back {
        margin-bottom: 17px;
        font-size: 0.864rem;
    }

    .profile-hero-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 20px;
        border-radius: 23px;
    }

    .profile-photo {
        width: 100%;
        height: min(390px, 92vw);
        min-height: 280px;
        border-radius: 19px;
    }

    .profile-eyebrow {
        font-size: 0.696rem;
        letter-spacing: .1em;
    }

    .profile-name {
        font-size: clamp(1.98rem, 9.9vw, 2.86rem);
        line-height: 1.05;
    }

    .profile-role {
        margin-bottom: 14px;
        font-size: 0.984rem;
    }

    .profile-intro {
        margin-bottom: 17px;
        font-size: 0.984rem;
        line-height: 1.7;
    }

    .profile-contact {
        gap: 7px;
    }

    .profile-contact a {
        padding: 8px 11px;
        font-size: 0.792rem;
    }

    .profile-sections {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 14px;
    }

    .profile-info-card {
        min-height: 0;
        padding: 21px;
        border-radius: 20px;
    }

    .profile-info-card .profile-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
        border-radius: 12px;
    }

    .profile-info-card h2 {
        font-size: 1.176rem;
    }

    .profile-info-card p {
        font-size: 0.936rem;
        line-height: 1.7;
    }

    .profile-placeholder {
        margin-top: 14px;
        padding: 19px 20px;
        border-radius: 18px;
        font-size: 0.864rem;
        line-height: 1.65;
    }
}

/* -------------------------
   VERY SMALL PHONES
------------------------- */
@media (max-width: 380px) {

    .brand-text small {
        display: none;
    }

    .hero-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .team-grid {
        grid-auto-columns: 88vw !important;
    }

    .team-member {
        width: 88vw !important;
        min-width: 88vw !important;
        max-width: 88vw !important;
    }

    .profile-shell {
        width: calc(100% - 18px);
    }

    .profile-hero-card {
        padding: 16px;
    }

    .profile-photo {
        min-height: 245px;
    }

    .profile-contact a {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* -------------------------
   LANDSCAPE PHONES
------------------------- */
@media (max-width: 767.98px) and (orientation: landscape) {

    .profile-hero-card {
        grid-template-columns: 190px minmax(0, 1fr);
        align-items: center;
    }

    .profile-photo {
        height: 270px;
        min-height: 0;
    }
}
/* =========================================================
   ADMIN EMPLOYEE MANAGEMENT
========================================================= */

.employee-admin-grid {
    display: grid;

    grid-template-columns:
        minmax(320px, .75fr)
        minmax(500px, 1.25fr);

    gap: 22px;
}


.employee-admin-form-card,
.employee-admin-list-card {
    padding: 28px;

    border-radius: 23px;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid
        rgba(0,0,0,.055);
}


.employee-admin-heading {
    margin-bottom: 28px;
}


.employee-admin-heading small {
    color: #E31E2D;

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: .14em;
}


.employee-admin-heading h2 {
    margin:
        5px 0 0;

    font-size: 1.62rem;
}



/* FORM */

.employee-admin-field {
    margin-bottom: 19px;
}


.employee-admin-field label {
    display: block;

    margin-bottom: 7px;

    color: #555;

    font-size: 0.804rem;

    font-weight: 700;
}


.employee-admin-field input {
    width: 100%;

    min-height: 46px;

    box-sizing: border-box;

    padding:
        10px 13px;

    border:
        1px solid #dedede;

    border-radius: 11px;

    outline: none;

    background: #fff;

    font-size: 0.9rem;
}


.employee-admin-field input:focus {
    border-color:
        rgba(227,30,45,.45);

    box-shadow:
        0 0 0 4px
        rgba(227,30,45,.05);
}


.employee-admin-field > small {
    display: block;

    margin-top: 7px;

    color: #999;

    font-size: 0.696rem;
}


.employee-admin-preview {
    width: 120px;
    height: 150px;

    display: block;

    margin-bottom: 12px;

    border-radius: 15px;

    object-fit: cover;
}



/* CHECKBOX */

.employee-admin-checkbox {
    display: flex;

    align-items: center;

    gap: 8px;

    margin:
        8px 0 25px;

    color: #666;

    font-size: 0.816rem;
}


.employee-admin-checkbox input {
    width: 17px;
    height: 17px;
}



/* BUTTON */

.employee-admin-buttons {
    display: flex;

    align-items: center;

    gap: 10px;
}


.employee-admin-buttons button,
.employee-admin-buttons a {
    min-height: 43px;

    padding:
        0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 0.804rem;

    font-weight: 700;
}


.employee-admin-buttons button {
    border: 0;

    color: white;

    background: #E31E2D;
}


.employee-admin-buttons a {
    color: #555;

    background: #eee;
}



/* =========================================================
   LIST
========================================================= */

.employee-admin-list {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.employee-admin-row {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px;

    border-radius: 16px;

    background: #fafafa;

    border:
        1px solid #eeeeee;
}


.employee-admin-photo {
    width: 62px;
    height: 72px;

    flex-shrink: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #bbb;

    background: #eee;
}


.employee-admin-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;
}


.employee-admin-info {
    min-width: 0;

    flex: 1;
}


.employee-admin-info strong,
.employee-admin-info span,
.employee-admin-info small {
    display: block;
}


.employee-admin-info strong {
    color: #222;

    font-size: 0.912rem;
}


.employee-admin-info span {
    margin-top: 3px;

    color: #666;

    font-size: 0.78rem;
}


.employee-admin-info small {
    margin-top: 5px;

    color: #aaa;

    font-size: 0.66rem;
}



/* ACTIONS */

.employee-admin-actions {
    display: flex;

    gap: 6px;
}


.employee-admin-actions form {
    margin: 0;
}


.employee-admin-actions a,
.employee-admin-actions button {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 10px;

    cursor: pointer;

    text-decoration: none;
}


.employee-admin-actions .edit {
    color: #E31E2D;

    background:
        rgba(227,30,45,.07);
}


.employee-admin-actions .delete {
    color: #c62828;

    background:
        rgba(198,40,40,.07);
}



/* MESSAGE */

.employee-admin-success,
.employee-admin-error {
    margin-bottom: 22px;

    padding: 14px 17px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 13px;

    font-size: 0.84rem;
}


.employee-admin-success {
    color: #198754;

    background:
        rgba(25,135,84,.08);
}


.employee-admin-error {
    color: #E31E2D;

    background:
        rgba(227,30,45,.08);
}



/* EMPTY */

.employee-admin-empty {
    padding: 60px 20px;

    text-align: center;
}


.employee-admin-empty i {
    display: block;

    margin-bottom: 12px;

    color: #ccc;

    font-size: 2rem;
}


.employee-admin-empty strong,
.employee-admin-empty span {
    display: block;
}


.employee-admin-empty span {
    margin-top: 5px;

    color: #999;

    font-size: 0.78rem;
}



/* RESPONSIVE */

@media (max-width: 1050px) {

    .employee-admin-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .employee-admin-form-card,
    .employee-admin-list-card {
        padding: 20px;
    }

}

.employee-admin-field textarea {
    width: 100%;
    min-height: 120px;

    box-sizing: border-box;

    padding: 12px 13px;

    border:
        1px solid #dedede;

    border-radius: 11px;

    outline: none;

    resize: vertical;

    background: #fff;

    font-size: 0.9rem;
}

.employee-admin-field textarea:focus {
    border-color:
        rgba(227,30,45,.45);

    box-shadow:
        0 0 0 4px
        rgba(227,30,45,.05);
}

/* =========================================================
   EMPLOYEE PROFILE DETAIL TEXTAREAS
========================================================= */

.employee-admin-field textarea {
    width: 100%;
    min-height: 120px;

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #dedede;
    border-radius: 11px;

    outline: none;

    background: #fff;

    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;

    resize: vertical;
}

.employee-admin-field textarea:focus {
    border-color: rgba(227, 30, 45, .45);

    box-shadow:
        0 0 0 4px
        rgba(227, 30, 45, .05);
}


/* VIEW PROFILE BUTTON */

.employee-admin-actions .view {
    color: #555;

    background:
        rgba(0, 0, 0, .05);
}
/* ======================================================================
   I~LIFE HOME FINAL — PREMIUM EDITORIAL RED / WHITE
   Scoped to .il-home-final so the existing liquid-glass navbar stays intact.
   ====================================================================== */

.il-home-final {
    --il-red: #e31b23;
    --il-red-deep: #bc0f16;
    --il-ink: #111111;
    --il-cream: #f8f6f3;
    --il-line: rgba(17, 17, 17, .10);
    --il-muted: #6d6d6d;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 6%, rgba(227, 27, 35, .055), transparent 22%),
        linear-gradient(180deg, #fbfaf8 0%, #ffffff 40%, #faf9f7 100%);
}

.il-home-final > section {
    position: relative;
    z-index: 1;
}

.ilf-hero {
    padding: 82px 0 76px;
    overflow: hidden;
}

.ilf-hero::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    top: -120px;
    border-radius: 50%;
    border: 78px solid rgba(227, 27, 35, .035);
    pointer-events: none;
}

.ilf-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--il-red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ilf-eyebrow > span {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--il-red);
}

.ilf-eyebrow-center {
    justify-content: center;
}

.ilf-hero-title {
    margin: 20px 0 22px;
    max-width: 680px;
    color: var(--il-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.96rem, 6.38vw, 6.765rem);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .94;
}

.ilf-hero-title em {
    color: var(--il-red);
    font-style: normal;
}

.ilf-hero-text {
    max-width: 620px;
    margin: 0;
    color: var(--il-muted);
    font-size: 1.2rem;
    line-height: 1.8;
}

.ilf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.ilf-btn {
    min-height: 48px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    font-size: 0.936rem;
    font-weight: 800;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.ilf-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--il-red), var(--il-red-deep));
    border: 1px solid var(--il-red);
    box-shadow: 0 12px 28px rgba(227, 27, 35, .18);
}

.ilf-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 17px 36px rgba(227, 27, 35, .24);
}

.ilf-btn-secondary {
    color: var(--il-ink);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(17,17,17,.13);
}

.ilf-btn-secondary:hover {
    color: var(--il-red);
    transform: translateY(-2px);
    background: #fff;
}

.ilf-hero-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 38px;
    max-width: 650px;
}

.ilf-hero-benefits > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ilf-hero-benefits > div > span {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--il-red);
    background: rgba(227,27,35,.07);
    border: 1px solid rgba(227,27,35,.12);
}

.ilf-hero-benefits p {
    margin: 0;
    color: #767676;
    font-size: 0.792rem;
    line-height: 1.55;
}

.ilf-hero-benefits strong {
    display: block;
    margin-bottom: 2px;
    color: var(--il-ink);
    font-size: 0.84rem;
}

.ilf-hero-visual {
    position: relative;
    min-height: 600px;
    display: grid;
    place-items: center;
}

.ilf-visual-glow {
    position: absolute;
    inset: 7% 3% 5% 9%;
    border-radius: 44% 56% 46% 54% / 58% 43% 57% 42%;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(229,223,217,.62)),
        radial-gradient(circle at 70% 30%, rgba(227,27,35,.12), transparent 35%);
    box-shadow: inset 0 0 80px rgba(255,255,255,.95);
    transform: rotate(-4deg);
}

.ilf-main-planner {
    position: relative;
    z-index: 2;
    width: min(520px, 92%);
    padding: 28px;
    border-radius: 28px;
    background: rgba(255,255,255,.87);
    border: 1px solid rgba(17,17,17,.09);
    box-shadow: 0 35px 90px rgba(35,30,28,.16);
    backdrop-filter: blur(18px);
}

.ilf-planner-header,
.ilf-planner-score,
.ilf-planner-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ilf-planner-header small,
.ilf-planner-score small,
.ilf-planner-footer small,
.ilf-planner-rows small {
    color: #8a8a8a;
    font-size: 0.696rem;
    letter-spacing: .06em;
}

.ilf-planner-header h3 {
    margin: 6px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.86rem;
    font-weight: 500;
    letter-spacing: -.03em;
}

.ilf-planner-header > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--il-red);
    background: rgba(227,27,35,.07);
}

.ilf-planner-score {
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #ef3a42, #c9131a);
    box-shadow: 0 16px 36px rgba(201,19,26,.2);
}

.ilf-planner-score small {
    color: rgba(255,255,255,.72);
}

.ilf-planner-score strong {
    display: block;
    margin-top: 4px;
    font-size: 1.104rem;
}

.ilf-score-ring {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,.9);
    font-size: 0.936rem;
    font-weight: 800;
}

.ilf-planner-rows {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.ilf-planner-rows > a {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    color: var(--il-ink);
    background: #fff;
    border: 1px solid var(--il-line);
    transition: transform .2s ease, border-color .2s ease;
}

.ilf-planner-rows > a:hover {
    color: var(--il-ink);
    transform: translateX(4px);
    border-color: rgba(227,27,35,.28);
}

.ilf-row-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--il-red);
    background: rgba(227,27,35,.065);
}

.ilf-planner-rows strong,
.ilf-planner-rows small {
    display: block;
}

.ilf-planner-rows strong {
    margin-top: 2px;
    font-size: 0.924rem;
}

.ilf-planner-footer {
    margin-top: 12px;
    padding: 13px 14px;
    color: var(--il-ink);
    border-radius: 14px;
    background: #f5f3f1;
}

.ilf-planner-footer:hover {
    color: var(--il-red);
}

.ilf-advisor-dot {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--il-red);
    font-size: 0.744rem;
    font-weight: 800;
}

.ilf-planner-footer > div {
    flex: 1;
}

.ilf-planner-footer small,
.ilf-planner-footer strong {
    display: block;
}

.ilf-planner-footer strong {
    margin-top: 2px;
    font-size: 0.864rem;
}

.ilf-float-card {
    position: absolute;
    z-index: 4;
    min-width: 175px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 17px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(17,17,17,.08);
    box-shadow: 0 20px 50px rgba(35,30,28,.12);
    backdrop-filter: blur(18px);
}

.ilf-float-card > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--il-red);
    background: rgba(227,27,35,.07);
}

.ilf-float-card small,
.ilf-float-card strong {
    display: block;
}

.ilf-float-card small {
    color: #8a8a8a;
    font-size: 0.66rem;
}

.ilf-float-card strong {
    margin-top: 2px;
    color: var(--il-ink);
    font-size: 0.84rem;
}

.ilf-float-one { left: -6px; top: 135px; }
.ilf-float-two { right: -8px; bottom: 95px; }

.ilf-proof {
    padding: 0 0 92px;
}

.ilf-proof-shell {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    border: 1px solid var(--il-line);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 55px rgba(30,25,23,.06);
}

.ilf-proof-quote {
    position: relative;
    min-height: 150px;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ce1118, #ec252d);
}

.ilf-proof-quote i { font-size: 1.45rem; }
.ilf-proof-quote p { max-width: 250px; margin: 8px 0 0; font-family: Georgia, serif; font-size: 1.224rem; line-height: 1.45; }

.ilf-proof-stat {
    min-height: 150px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-left: 1px solid var(--il-line);
}

.ilf-proof-stat strong {
    color: var(--il-ink);
    font-family: Georgia, serif;
    font-size: 2.2rem;
    font-weight: 500;
}

.ilf-proof-stat span { margin-top: 5px; color: #777; font-size: 0.84rem; }

.ilf-life-stage,
.ilf-services {
    padding: 92px 0;
}

.ilf-life-stage {
    background: #fff;
    border-top: 1px solid rgba(17,17,17,.05);
    border-bottom: 1px solid rgba(17,17,17,.05);
}

.ilf-section-head {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.ilf-section-head h2 {
    margin: 14px 0 12px;
    color: var(--il-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.585rem, 4.4vw, 4.07rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.03;
}

.ilf-section-head p { margin: 0; color: #777; font-size: 1.08rem; }

.ilf-stage-card {
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--il-line);
    box-shadow: 0 16px 42px rgba(30,25,23,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.ilf-stage-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 55px rgba(30,25,23,.11);
}

.ilf-stage-visual {
    position: relative;
    height: 132px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 75% 25%, rgba(255,255,255,.35), transparent 28%),
        linear-gradient(135deg, #d8161d, #ef4047);
}

.ilf-stage-visual::before,
.ilf-stage-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28);
}

.ilf-stage-visual::before { width: 150px; height: 150px; right: -65px; bottom: -80px; }
.ilf-stage-visual::after { width: 88px; height: 88px; left: -35px; top: -42px; }
.ilf-stage-visual i { position: relative; z-index: 2; font-size: 2.15rem; }
.ilf-stage-visual span { position: absolute; z-index: 2; right: 16px; top: 13px; font-size: 0.756rem; font-weight: 800; letter-spacing: .1em; }

.stage-two { background: linear-gradient(135deg, #f0b8b5, #d93339); }
.stage-three { background: linear-gradient(135deg, #b60d14, #e31b23); }
.stage-four { background: linear-gradient(135deg, #333, #101010); }

.ilf-stage-body { position: relative; padding: 22px 21px 23px; }
.ilf-stage-body small { color: var(--il-red); font-size: 0.696rem; font-weight: 800; letter-spacing: .12em; }
.ilf-stage-body h3 { margin: 8px 0 13px; color: var(--il-ink); font-family: Georgia, serif; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.ilf-stage-body ul { margin: 0; padding: 0; list-style: none; color: #777; font-size: 0.84rem; line-height: 1.8; }
.ilf-stage-body a { position: absolute; right: 18px; bottom: 18px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--il-red); border: 1px solid rgba(227,27,35,.25); }
.ilf-stage-body a:hover { color: #fff; background: var(--il-red); }

/* Keep the staff section visually identical to the user's current working version. */
.il-home-final .home-about-section {
    padding-top: 96px;
    padding-bottom: 100px;
}

.il-home-final .team-section {
    width: 100%;
    margin-top: 105px;
}

.il-home-final .team-heading {
    max-width: 700px;
    margin: 0 auto 48px;
    text-align: center;
}

.il-home-final .team-scroll-hidden {
    padding-top: 4px;
}

.il-home-final .team-scroll-hidden article {
    width: 230px !important;
}

.il-home-final .team-scroll-hidden article img {
    width: 230px !important;
    height: 290px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 26px !important;
}

.ilf-services {
    background: #faf9f7;
}

.ilf-service-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.25fr) minmax(0, 1.05fr);
    gap: 16px;
    align-items: stretch;
}

.ilf-service-middle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ilf-service-card {
    position: relative;
    min-height: 100%;
    padding: 28px;
    display: flex;
    flex-direction: column;
    color: var(--il-ink);
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--il-line);
    box-shadow: 0 14px 38px rgba(30,25,23,.055);
    transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease;
}

.ilf-service-card:hover {
    color: var(--il-ink);
    transform: translateY(-5px);
    border-color: rgba(227,27,35,.2);
    box-shadow: 0 22px 52px rgba(30,25,23,.11);
}

.ilf-service-primary,
.ilf-service-dark {
    min-height: 360px;
    justify-content: flex-end;
}

.ilf-service-primary {
    color: #fff;
    background:
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(145deg, #b80e15, #e31b23 62%, #ee3a41);
    border-color: transparent;
}

.ilf-service-primary:hover,
.ilf-service-primary h3,
.ilf-service-primary small,
.ilf-service-primary p,
.ilf-service-primary span { color: #fff; }

.ilf-service-dark {
    color: #fff;
    background:
        radial-gradient(circle at 70% 12%, rgba(255,255,255,.1), transparent 25%),
        linear-gradient(145deg, #2d2d2d, #111);
    border-color: rgba(255,255,255,.08);
}

.ilf-service-dark:hover,
.ilf-service-dark h3,
.ilf-service-dark small,
.ilf-service-dark p,
.ilf-service-dark span { color: #fff; }

.ilf-service-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--il-red);
    background: rgba(227,27,35,.07);
    font-size: 1.15rem;
}

.ilf-service-primary .ilf-service-icon,
.ilf-service-dark .ilf-service-icon {
    color: var(--il-red);
    background: #fff;
}

.ilf-service-card small {
    display: block;
    margin-top: 24px;
    color: #8a8a8a;
    font-size: 0.672rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.ilf-service-card h3 {
    margin: 7px 0 10px;
    color: var(--il-ink);
    font-family: Georgia, serif;
    font-size: 1.62rem;
    font-weight: 500;
    letter-spacing: -.025em;
}

.ilf-service-card p {
    margin: 0;
    color: #737373;
    font-size: 0.864rem;
    line-height: 1.7;
}

.ilf-service-card > span {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    font-weight: 700;
}

.ilf-service-small {
    min-height: 172px;
    padding: 22px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: start;
    gap: 15px;
}

.ilf-service-small small { margin-top: 1px; }
.ilf-service-small h3 { margin: 4px 0 6px; font-size: 1.344rem; }
.ilf-card-arrow { align-self: center; color: #777; font-size: .9rem; }

/* Bring the existing sections into the same red / editorial language without changing their HTML. */
.il-home-final .section-label,
.il-home-final .home-contact-card > div > small,
.il-home-final .why-black-card > small {
    color: var(--il-red);
}

.il-home-final .home-about-title,
.il-home-final .why-title,
.il-home-final .section-heading h2,
.il-home-final .home-contact-card h2,
.il-home-final .home-reach-glass h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.04em;
}

.il-home-final .why-black-card {
    background: linear-gradient(145deg, #b90d14, #e31b23);
    border-color: rgba(255,255,255,.18);
}

.il-home-final .why-black-card > small,
.il-home-final .why-black-card h2,
.il-home-final .why-black-card p,
.il-home-final .why-black-card .progress-title { color: #fff; }

.il-home-final .benefit-icon,
.il-home-final .career-icon,
.il-home-final .reach-icon {
    color: var(--il-red);
}

.il-home-final .home-contact-primary,
.il-home-final .btn-dark-custom {
    color: #fff;
    background: var(--il-red);
    border-color: var(--il-red);
}

.il-home-final .home-contact-primary:hover,
.il-home-final .btn-dark-custom:hover {
    color: #fff;
    background: var(--il-red-deep);
}

@media (max-width: 1199px) {
    .ilf-hero-title { font-size: clamp(3.52rem, 5.94vw, 5.5rem); }
    .ilf-float-one { left: 0; }
    .ilf-float-two { right: 0; }
}

@media (max-width: 991px) {
    .ilf-hero { padding-top: 58px; }
    .ilf-hero-visual { min-height: 560px; margin-top: 5px; }
    .ilf-proof-shell { grid-template-columns: repeat(3, 1fr); }
    .ilf-proof-quote { grid-column: 1 / -1; min-height: 120px; }
    .ilf-proof-stat { border-top: 1px solid var(--il-line); }
    .ilf-service-bento { grid-template-columns: 1fr; }
    .ilf-service-primary, .ilf-service-dark { min-height: 270px; }
    .il-home-final .home-about-section { padding-top: 78px; }
}

@media (max-width: 767px) {
    .ilf-hero { padding: 44px 0 52px; }
    .ilf-hero-title { font-size: clamp(3.3rem, 15.4vw, 4.675rem); }
    .ilf-hero-benefits { grid-template-columns: 1fr; gap: 12px; }
    .ilf-hero-visual { min-height: 520px; }
    .ilf-main-planner { width: 100%; padding: 20px; }
    .ilf-float-card { display: none; }
    .ilf-proof { padding-bottom: 70px; }
    .ilf-proof-shell { grid-template-columns: 1fr; }
    .ilf-proof-quote, .ilf-proof-stat { grid-column: auto; border-left: 0; }
    .ilf-proof-stat { min-height: 105px; }
    .ilf-life-stage, .ilf-services { padding: 72px 0; }
    .ilf-service-middle { grid-template-columns: 1fr; }
    .ilf-service-small { min-height: 160px; }
    .il-home-final .team-section { margin-top: 80px; }
}

@media (max-width: 575px) {
    .ilf-hero-title { font-size: clamp(3.135rem, 16.5vw, 4.125rem); }
    .ilf-hero-actions { flex-direction: column; }
    .ilf-btn { width: 100%; }
    .ilf-hero-visual { min-height: 480px; }
    .ilf-planner-score { padding: 16px; }
    .ilf-planner-rows > a { grid-template-columns: 38px 1fr auto; }
    .ilf-row-icon { width: 38px; height: 38px; }
    .ilf-section-head h2 { font-size: 2.695rem; }
    .ilf-service-small { grid-template-columns: 44px 1fr; }
    .ilf-service-small .ilf-service-icon { width: 44px; height: 44px; }
    .ilf-card-arrow { display: none; }
}