:root{
  --ink:#221318;--muted:#6f6266;--orange:#f58220;--gold:#ffb347;--wine:#8f3438;
  --wine-dark:#652126;--paper:#fffdf9;--soft:#fff6ea;--line:#eadfd8;--white:#fff;
  --shadow:0 24px 70px rgba(72,31,24,.12);--radius:24px;--container:1160px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:20px;top:20px;background:#fff;padding:10px;z-index:999}.topbar{border-bottom:1px solid var(--line);font-size:13px;background:#fff}.topbar-inner{display:flex;justify-content:space-between;gap:18px;padding:8px 0;color:var(--muted)}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(234,223,216,.8)}.nav-wrap{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand img{height:58px;width:auto;mix-blend-mode:multiply}.main-nav{display:flex;align-items:center;gap:8px}.main-nav>a{padding:10px 13px;border-radius:12px;font-weight:700;font-size:14px}.main-nav>a:hover,.main-nav>a.active{background:var(--soft);color:var(--wine)}.menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font-size:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 20px;font-weight:800;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn-dark{background:var(--wine-dark)!important;color:#fff!important;box-shadow:0 10px 30px rgba(101,33,38,.22)}.btn-primary{background:linear-gradient(135deg,var(--orange),var(--gold));color:#3c1d0a}.btn-outline{border:1px solid var(--line);background:#fff}.btn-small{padding:10px 14px!important}.hero{position:relative;overflow:hidden;padding:82px 0 70px;background:radial-gradient(circle at 10% 20%,#fff0db 0,transparent 32%),radial-gradient(circle at 90% 10%,#f4dadb 0,transparent 28%),linear-gradient(180deg,#fffdf9,#fff)}.hero:before{content:"";position:absolute;width:420px;height:420px;border:80px solid rgba(245,130,32,.07);border-radius:50%;left:-200px;bottom:-240px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.75);font-weight:800;color:var(--wine);font-size:13px}.hero h1,.page-hero h1{font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-.055em;margin:20px 0}.gradient-text{background:linear-gradient(100deg,var(--wine-dark),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:19px;color:var(--muted);max-width:700px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.trust-row span{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:999px;font-size:13px;font-weight:700}.hero-art img{border-radius:34px;box-shadow:var(--shadow)}.stats{margin-top:-30px;position:relative;z-index:2}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 18px 50px rgba(72,31,24,.08)}.stat strong{font-size:34px;display:block;line-height:1.1}.stat span{color:var(--muted)}.section{padding:86px 0}.section-soft{background:var(--soft);border-block:1px solid var(--line)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}.section-head h2,.page-hero h2{font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-.04em;margin:0}.section-head p{color:var(--muted);max-width:640px;margin:8px 0 0}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 15px 45px rgba(72,31,24,.06);transition:.25s}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.card-media{height:210px;display:grid;place-items:center;background:linear-gradient(135deg,#fff1dd,#f8d9da);font-size:74px}.card-body{padding:24px}.card h3{margin:0 0 10px;font-size:21px}.card p{color:var(--muted);margin:0 0 16px}.link-arrow{color:var(--wine);font-weight:900}.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 18px 50px rgba(72,31,24,.07)}.check-list{list-style:none;padding:0;margin:20px 0}.check-list li{padding:9px 0 9px 34px;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--wine);font-weight:900}.cta{border-radius:30px;background:linear-gradient(135deg,var(--wine-dark),var(--wine));color:#fff;padding:42px;display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:var(--shadow)}.cta h2{margin:0 0 8px;font-size:34px}.page-hero{padding:72px 0 54px;background:linear-gradient(180deg,var(--soft),var(--paper))}.page-hero h1{font-size:clamp(42px,5vw,66px);max-width:920px}.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.service-item{padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff}.service-item .icon{font-size:36px}.service-item h3{margin:10px 0 8px}.service-item p{color:var(--muted)}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step}.timeline .step{counter-increment:step;background:#fff;border:1px solid var(--line);padding:22px;border-radius:20px}.timeline .step:before{content:counter(step);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--wine);color:#fff;font-weight:900;margin-bottom:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:900}.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff;color:var(--ink);font:inherit;outline:none}.input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(245,130,32,.12)}textarea{min-height:140px;resize:vertical}.verification-box{max-width:780px;margin:0 auto}.result{margin-top:22px;border-radius:22px;padding:26px;border:1px solid var(--line);background:#fff}.result.active{border-color:#9acb9a;background:#f5fff5}.result.expired,.result.suspended{border-color:#efb0b0;background:#fff5f5}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}.badge.active{background:#e8f8e8;color:#216d2d}.badge.expired,.badge.suspended{background:#fde7e7;color:#9b2424}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:900px}.table th,.table td{padding:14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;background:#fff9f0}.alert{margin-top:18px;padding:14px 18px;border-radius:14px;border:1px solid var(--line)}.alert-success{background:#effcef;color:#286730}.alert-error{background:#fff0f0;color:#8c2525}.footer{border-top:1px solid var(--line);background:#fff}.footer-main{padding:48px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-brand img{height:54px;width:auto;mix-blend-mode:multiply}.footer-brand p{color:var(--muted);max-width:440px}.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-weight:800}.footer-bottom{border-top:1px solid var(--line);padding:18px 0 28px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.login-shell{min-height:75vh;display:grid;place-items:center;padding:50px 0}.login-card{width:min(460px,calc(100% - 30px));background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow)}.admin-top{padding:32px 0}.admin-actions{display:flex;gap:10px;flex-wrap:wrap}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}.kpi strong{font-size:30px;display:block}.muted{color:var(--muted)}.danger{color:#a02222}.nowrap{white-space:nowrap}
@media(max-width:900px){.topbar{display:none}.nav-wrap{height:72px}.brand img{height:48px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:20px;right:20px;top:72px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.hero-grid,.split{grid-template-columns:1fr}.hero{padding-top:55px}.hero-art{order:-1}.stats-grid,.card-grid{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.timeline{grid-template-columns:1fr 1fr}.service-list{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.container{width:min(100% - 26px,var(--container))}.hero h1,.page-hero h1{font-size:42px}.section{padding:62px 0}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.timeline{grid-template-columns:1fr}.cta,.footer-main,.footer-bottom{flex-direction:column;align-items:flex-start}.kpi-grid{grid-template-columns:1fr}}
/* =========================================================
   PREMIUM GLASS NAVIGATION — GSYSTEM CERTIFICATION
   ========================================================= */

:root {
    --glass-background: rgba(255, 255, 255, 0.62);
    --glass-background-mobile: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(255, 255, 255, 0.88);
    --glass-shadow:
        0 22px 60px rgba(76, 32, 27, 0.10),
        0 7px 20px rgba(76, 32, 27, 0.06);

    --nav-text: #28191b;
    --nav-muted: #6f5f61;
    --nav-wine: #7b2228;
    --nav-wine-dark: #641a20;
    --nav-orange: #f58220;
    --nav-soft: rgba(255, 240, 222, 0.78);
}


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

.topbar {
    position: relative;
    z-index: 80;

    width: 100%;
    min-height: 42px;

    background: rgba(255, 255, 255, 0.80);
    border-bottom: 1px solid rgba(120, 80, 70, 0.08);

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

.topbar-inner {
    min-height: 42px;

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

    gap: 20px;

    padding-top: 7px;
    padding-bottom: 7px;

    color: #6e5f61;
    font-size: 13px;
    font-weight: 500;
}

.topbar-email {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #6e5f61;

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

.topbar-email:hover {
    color: var(--nav-wine);
    transform: translateY(-1px);
}

.topbar-email-icon {
    width: 25px;
    height: 25px;

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

    color: var(--nav-wine);

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
}

.topbar-tagline {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #65595a;
}

.topbar-tagline span {
    color: var(--nav-orange);
}


/* ================================
   SITE HEADER
   ================================ */

.site-header {
    position: absolute;
    z-index: 70;

    top: 42px;
    left: 0;
    right: 0;

    width: 100%;

    padding: 16px 0;

    background: transparent;
    border: 0;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* ================================
   GLASS NAVBAR CONTAINER
   ================================ */

.glass-navbar {
    position: relative;

    width: 100%;
    min-height: 80px;

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

    gap: 28px;

    padding: 10px 22px 10px 25px;

    overflow: visible;

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

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.74) 0%,
            rgba(255, 255, 255, 0.54) 46%,
            rgba(255, 245, 241, 0.64) 100%
        );

    box-shadow: var(--glass-shadow);

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

    isolation: isolate;
}

/* Kilau kaca */
.glass-navbar::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.14) 42%,
            rgba(255, 255, 255, 0.02) 66%
        );
}

/* Pantulan diagonal halus */
.glass-navbar::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: -70%;
    left: 27%;

    width: 190px;
    height: 240%;

    pointer-events: none;

    opacity: 0.30;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.85),
        transparent
    );

    transform: rotate(37deg);
}


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

.glass-navbar .brand {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;

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

    max-width: 150px;

    padding: 0;

    border-radius: 0;

    background: transparent;

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

.glass-navbar .brand:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.glass-navbar .brand img {
    display: block;

    width: auto;
    height: 48px;
    max-width: 145px;

    object-fit: contain;

    border-radius: 0;

    background: transparent;

    mix-blend-mode: multiply;
}


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

.glass-navbar .main-nav {
    position: relative;
    z-index: 2;

    flex: 1;

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

    gap: 4px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;
}

.glass-navbar .main-nav > a {
    position: relative;

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

    min-height: 42px;

    padding: 9px 14px;

    color: var(--nav-text);

    border: 1px solid transparent;
    border-radius: 13px;

    background: transparent;

    font-size: 14px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;

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

.glass-navbar .main-nav > a:hover {
    color: var(--nav-wine);

    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.78);

    transform: translateY(-1px);

    box-shadow:
        0 8px 22px rgba(92, 39, 33, 0.06);
}

.glass-navbar .main-nav > a.active {
    color: var(--nav-wine);

    background:
        linear-gradient(
            135deg,
            rgba(255, 246, 232, 0.94),
            rgba(255, 237, 218, 0.74)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 8px 24px rgba(130, 68, 41, 0.06);
}


/* ================================
   VERIFY BUTTON
   ================================ */

.glass-navbar .main-nav > .nav-verify-button {
    min-height: 46px;

    margin-left: 8px;

    padding: 11px 18px;

    gap: 8px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--nav-wine) 0%,
            var(--nav-wine-dark) 100%
        );

    box-shadow:
        0 14px 28px rgba(108, 31, 37, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    overflow: hidden;
}

.glass-navbar .main-nav > .nav-verify-button::before {
    content: "";

    position: absolute;

    top: -90%;
    left: -30%;

    width: 35%;
    height: 280%;

    opacity: 0;

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

    transform: rotate(25deg);

    transition:
        left 0.5s ease,
        opacity 0.4s ease;
}

.glass-navbar .main-nav > .nav-verify-button:hover {
    color: #ffffff;

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

    background:
        linear-gradient(
            135deg,
            #8b2930 0%,
            #661b21 100%
        );

    transform: translateY(-2px);

    box-shadow:
        0 18px 36px rgba(108, 31, 37, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.glass-navbar .main-nav > .nav-verify-button:hover::before {
    left: 120%;
    opacity: 1;
}

.glass-navbar .main-nav > .nav-verify-button svg {
    flex: 0 0 auto;

    transition: transform 0.22s ease;
}

.glass-navbar .main-nav > .nav-verify-button:hover svg {
    transform: translateX(2px);
}


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

.glass-navbar .menu-toggle {
    position: relative;
    z-index: 5;

    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 13px;

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

    box-shadow:
        0 8px 24px rgba(82, 35, 31, 0.08);

    cursor: pointer;
}

.glass-navbar .menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 999px;

    background: var(--nav-wine);

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

.glass-navbar .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.glass-navbar .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.glass-navbar .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ================================
   HEADER SPACING FOR HERO
   ================================ */

/*
   Header dibuat absolute agar tampak mengambang di atas hero.
   Tambahan padding ini mencegah konten hero tertutup navbar.
*/

.hero {
    padding-top: 185px;
}

.page-hero {
    padding-top: 175px;
}


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

@media (max-width: 1050px) {

    .glass-navbar {
        gap: 16px;

        padding-left: 19px;
        padding-right: 16px;
    }

    .glass-navbar .brand {
        max-width: 130px;
    }

    .glass-navbar .brand img {
        height: 43px;
        max-width: 128px;
    }

    .glass-navbar .main-nav {
        gap: 1px;
    }

    .glass-navbar .main-nav > a {
        padding-left: 10px;
        padding-right: 10px;

        font-size: 13px;
    }

    .glass-navbar .main-nav > .nav-verify-button {
        padding-left: 14px;
        padding-right: 14px;
    }

}


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

@media (max-width: 900px) {

    .topbar {
        display: block;
    }

    .topbar-inner {
        min-height: 38px;

        font-size: 12px;
    }

    .topbar-tagline {
        display: none;
    }

    .site-header {
        top: 38px;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .glass-navbar {
        min-height: 68px;

        padding: 9px 11px 9px 16px;

        border-radius: 18px;
    }

    .glass-navbar .brand {
        max-width: 125px;
    }

    .glass-navbar .brand img {
        height: 42px;
        max-width: 120px;
    }

    .glass-navbar .menu-toggle {
        display: block;
    }

    .glass-navbar .main-nav {
        position: absolute;
        z-index: 10;

        top: calc(100% + 12px);
        left: 0;
        right: 0;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        border: 1px solid rgba(255, 255, 255, 0.92);
        border-radius: 19px;

        background: var(--glass-background-mobile);

        box-shadow:
            0 24px 60px rgba(75, 31, 27, 0.16);

        backdrop-filter: blur(24px) saturate(145%);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
    }

    .glass-navbar .main-nav.open {
        display: flex;
    }

    .glass-navbar .main-nav > a {
        width: 100%;
        min-height: 44px;

        justify-content: flex-start;

        padding: 11px 14px;

        border-radius: 12px;

        font-size: 14px;
    }

    .glass-navbar .main-nav > .nav-verify-button {
        justify-content: center;

        min-height: 48px;

        margin-top: 5px;
        margin-left: 0;
    }

    .hero {
        padding-top: 150px;
    }

    .page-hero {
        padding-top: 145px;
    }

}


/* ================================
   SMALL MOBILE RESPONSIVE
   ================================ */

@media (max-width: 600px) {

    .topbar-inner {
        justify-content: center;
    }

    .topbar-email-icon {
        width: 22px;
        height: 22px;
    }

    .site-header .container {
        width: calc(100% - 22px);
    }

    .glass-navbar {
        min-height: 62px;

        padding-left: 13px;
        padding-right: 9px;

        border-radius: 16px;
    }

    .glass-navbar .brand {
        max-width: 108px;
    }

    .glass-navbar .brand img {
        height: 37px;
        max-width: 105px;
    }

    .glass-navbar .menu-toggle {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }

    .hero {
        padding-top: 135px;
    }

    .page-hero {
        padding-top: 132px;
    }

}

/* ================================
   FIXED GLASS HEADER
   ================================ */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.site-header {
    position: fixed;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 999;

    width: 100%;

    padding: 16px 0;

    background: transparent;
    border: 0;
    box-shadow: none;
}

.hero {
    padding-top: 220px;
}

.page-hero {
    padding-top: 210px;
}

@media (max-width: 900px) {
    .site-header {
        top: 38px;
    }

    .hero {
        padding-top: 185px;
    }

    .page-hero {
        padding-top: 180px;
    }
}

@media (max-width: 600px) {
    .hero {
        padding-top: 170px;
    }

    .page-hero {
        padding-top: 165px;
    }
}

/* =========================================================
   PREMIUM HERO PHOTO — GSYSTEM CERTIFICATION
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(255,219,166,.58) 0%, rgba(255,219,166,.18) 29%, transparent 49%),
        radial-gradient(circle at 92% 15%, rgba(236,185,194,.56) 0%, rgba(236,185,194,.17) 31%, transparent 53%),
        linear-gradient(125deg, #fff9ef 0%, #fffdf9 48%, #fff6f5 100%);
}
.hero::after {
    content:"";
    position:absolute;
    z-index:0;
    top:145px;
    right:-190px;
    width:540px;
    height:540px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(245,130,32,.14) 0%,rgba(143,52,56,.06) 46%,transparent 72%);
    filter:blur(16px);
    pointer-events:none;
}
.hero-grid{position:relative;z-index:2}
.hero-copy{position:relative;z-index:3}
.why-title{margin-top:18px;font-size:clamp(36px,4vw,46px);line-height:1.1;letter-spacing:-.04em}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:520px;perspective:1200px}
.hero-photo-glow{position:absolute;width:88%;height:79%;border-radius:46px;background:radial-gradient(circle at 38% 32%,rgba(255,183,74,.36),transparent 58%),radial-gradient(circle at 76% 72%,rgba(143,52,56,.23),transparent 60%);filter:blur(40px);opacity:.9;pointer-events:none}
.hero-photo-frame{position:relative;width:100%;max-width:680px;padding:10px;overflow:visible;border:1px solid rgba(255,255,255,.84);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(255,255,255,.34));box-shadow:0 38px 90px rgba(86,37,31,.18),0 15px 35px rgba(86,37,31,.10),inset 0 1px 0 rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);transform:rotateY(-2.2deg) rotateX(.8deg);transition:transform .45s ease,box-shadow .45s ease}
.hero-photo-frame:hover{transform:rotateY(0) rotateX(0) translateY(-8px);box-shadow:0 48px 112px rgba(86,37,31,.22),0 20px 44px rgba(86,37,31,.13),inset 0 1px 0 rgba(255,255,255,.96)}
.hero-photo{display:block;width:100%;height:470px;object-fit:contain;object-position:center;border-radius:24px;filter:saturate(.98) contrast(1.03) brightness(1.02)}
.hero-photo-overlay{position:absolute;inset:10px;border-radius:24px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%,rgba(74,25,28,.05))}
.hero-photo-shine{position:absolute;inset:10px;overflow:hidden;border-radius:24px;pointer-events:none}
.hero-photo-shine::before{content:"";position:absolute;top:-65%;left:-48%;width:34%;height:230%;opacity:.29;background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);transform:rotate(28deg);transition:left .88s ease,opacity .6s ease}
.hero-photo-frame:hover .hero-photo-shine::before{left:125%;opacity:.56}
.hero-floating-badge{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;min-width:178px;padding:12px 15px;color:#351d20;border:1px solid rgba(255,255,255,.90);border-radius:17px;background:linear-gradient(135deg,rgba(255,255,255,.91),rgba(255,248,239,.72));box-shadow:0 18px 40px rgba(80,33,29,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;font-weight:850;animation:heroFloat 4.5s ease-in-out infinite}
.hero-floating-badge small{display:block;margin-top:2px;color:#776466;font-size:10px;font-weight:650}
.hero-floating-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:#fff;border-radius:12px;background:linear-gradient(135deg,#f58220,#a43d37);box-shadow:0 8px 20px rgba(150,57,46,.21);font-size:18px;font-weight:900}
.hero-floating-badge-top{top:44px;left:-38px}
.hero-floating-badge-bottom{right:-34px;bottom:44px;animation-delay:-2.2s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(min-width:901px){.hero-grid{grid-template-columns:minmax(0,.95fr) minmax(500px,1.05fr);gap:62px}}
@media(max-width:1050px){.hero-photo{height:420px}.hero-floating-badge-top{left:-15px}.hero-floating-badge-bottom{right:-12px}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{order:-1;min-height:auto;margin-bottom:18px}.hero-photo-frame{max-width:720px;transform:none}.hero-photo-frame:hover{transform:translateY(-5px)}.hero-photo{height:400px}.hero-floating-badge{min-width:155px;padding:10px 12px}.hero-floating-badge-top{top:22px;left:18px}.hero-floating-badge-bottom{right:18px;bottom:24px}}
@media(max-width:600px){.hero-photo-frame{padding:7px;border-radius:23px}.hero-photo{height:290px;border-radius:18px}.hero-photo-overlay,.hero-photo-shine{inset:7px;border-radius:18px}.hero-floating-badge{display:none}}

/* =========================================================
   PREMIUM SERVICE CARD IMAGES
   ========================================================= */

.service-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(234, 223, 216, 0.92);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 253, 249, 0.96)
        );

    box-shadow:
        0 20px 50px rgba(72, 31, 24, 0.08);

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

.service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(245, 130, 32, 0.28);

    box-shadow:
        0 30px 70px rgba(72, 31, 24, 0.14);
}

.service-card .card-media {
    position: relative;

    height: 245px;

    display: block;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fff4e5,
            #f9dddd
        );
}

.service-card .card-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.96)
        contrast(1.03)
        brightness(1.02);

    transform: scale(1.001);

    transition:
        transform 0.65s ease,
        filter 0.45s ease;
}

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

    filter:
        saturate(1.02)
        contrast(1.05)
        brightness(1.03);
}

.service-card .card-media-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.00) 56%,
            rgba(101, 33, 38, 0.15) 100%
        );
}

.service-card .card-body {
    position: relative;

    padding: 26px 24px 28px;
}

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

    position: absolute;

    top: 0;
    left: 24px;

    width: 52px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--wine)
        );
}

.service-card h3 {
    min-height: 58px;

    margin: 0 0 10px;

    font-size: 21px;
    line-height: 1.35;
}

.service-card p {
    min-height: 78px;
}

.service-card .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

.service-card:hover .link-arrow {
    gap: 10px;
    color: var(--orange);
}

@media (max-width: 900px) {

    .service-card .card-media {
        height: 300px;
    }

    .service-card h3,
    .service-card p {
        min-height: auto;
    }

}

@media (max-width: 600px) {

    .service-card .card-media {
        height: 230px;
    }

    .service-card .card-body {
        padding: 24px 20px 25px;
    }

}

/* =========================================================
   PREMIUM PUBLIC VERIFICATION PANEL
   ========================================================= */

.verification-panel {
    padding: 0;
    overflow: hidden;

    border: 1px solid rgba(234, 223, 216, 0.94);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 252, 247, 0.96)
        );

    box-shadow:
        0 24px 64px rgba(72, 31, 24, 0.11);

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

.verification-panel:hover {
    transform: translateY(-7px);

    border-color: rgba(245, 130, 32, 0.30);

    box-shadow:
        0 34px 82px rgba(72, 31, 24, 0.16);
}

.verification-image-wrap {
    position: relative;
    height: 305px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fff5e7,
            #f6dddf
        );
}

.verification-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.97)
        contrast(1.03)
        brightness(1.01);

    transform: scale(1.001);

    transition:
        transform 0.70s ease,
        filter 0.45s ease;
}

.verification-panel:hover .verification-image {
    transform: scale(1.055);

    filter:
        saturate(1.02)
        contrast(1.05)
        brightness(1.03);
}

.verification-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.00) 52%,
            rgba(74, 25, 28, 0.22) 100%
        );
}

.verification-status-badge {
    position: absolute;
    left: 22px;
    bottom: 20px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 13px;

    color: #2f1a1d;

    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.91),
            rgba(255, 247, 237, 0.78)
        );

    box-shadow:
        0 16px 36px rgba(72, 31, 24, 0.18);

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

    font-size: 12px;
    font-weight: 850;
}

.verification-status-badge small {
    display: block;
    margin-top: 2px;

    color: #746064;

    font-size: 10px;
    font-weight: 650;
}

.verification-status-icon {
    flex: 0 0 auto;

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

    width: 34px;
    height: 34px;

    color: #ffffff;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    box-shadow:
        0 8px 20px rgba(143, 52, 56, 0.22);

    font-size: 17px;
    font-weight: 900;
}

.verification-content {
    padding: 27px 27px 30px;
}

.verification-content h3 {
    margin: 0 0 12px;

    font-size: 22px;
    line-height: 1.35;
}

.verification-content p {
    margin-bottom: 20px;
}

.verification-content .btn-primary {
    box-shadow:
        0 12px 28px rgba(245, 130, 32, 0.20);
}

@media (max-width: 900px) {
    .verification-image-wrap {
        height: 380px;
    }
}

@media (max-width: 600px) {
    .verification-image-wrap {
        height: 245px;
    }

    .verification-content {
        padding: 23px 20px 25px;
    }

    .verification-status-badge {
        left: 14px;
        bottom: 14px;

        padding: 9px 11px;
    }
}

/* =========================================================
   PREMIUM ABOUT PAGE
   ========================================================= */

.about-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 220px 0 90px;

    background: #fdf8f2;
}

.about-hero-bg {
    position: absolute;

    inset: 0;
}

.about-hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.90)
        contrast(1.02)
        brightness(0.92);
}

.about-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 250, 243, 0.98) 0%,
            rgba(255, 250, 243, 0.94) 34%,
            rgba(255, 250, 243, 0.72) 58%,
            rgba(255, 247, 244, 0.35) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(72, 31, 24, 0.08)
        );
}

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

    position: absolute;

    left: -180px;
    bottom: -260px;

    width: 500px;
    height: 500px;

    border: 85px solid rgba(245, 130, 32, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

.about-hero-inner {
    position: relative;
    z-index: 2;
}

.about-hero-copy {
    max-width: 760px;

    padding: 38px 42px;

    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 250, 243, 0.50)
        );

    box-shadow:
        0 28px 70px rgba(72, 31, 24, 0.13);

    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.about-eyebrow {
    margin-bottom: 18px;
}

.about-hero h1 {
    max-width: 700px;

    margin: 0;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.about-hero .lead {
    max-width: 680px;

    margin-top: 24px;

    color: #5f5054;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}

.about-hero-outline {
    background: rgba(255, 255, 255, 0.72);
}

.about-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 26px;
}

.about-trust-row span {
    padding: 8px 12px;

    border: 1px solid rgba(234, 223, 216, 0.90);
    border-radius: 999px;

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

    color: #55383c;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-overview {
    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fffaf4
        );
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 54px;
    align-items: start;
}

.about-intro-copy h2,
.about-mission-card h2,
.about-governance-card h2 {
    margin: 18px 0 18px;

    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.about-body-copy {
    max-width: 680px;

    color: var(--muted);

    font-size: 17px;
}

.about-metrics {
    display: grid;
    gap: 14px;
}

.about-metric {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;

    padding: 22px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 16px 42px rgba(72, 31, 24, 0.07);

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

.about-metric:hover {
    transform: translateY(-5px);

    box-shadow:
        0 24px 58px rgba(72, 31, 24, 0.11);
}

.about-metric-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    font-size: 18px;
    font-weight: 900;
}

.about-metric h3 {
    margin: 0 0 6px;

    font-size: 20px;
}

.about-metric p {
    margin: 0;

    color: var(--muted);
}


/* =========================================================
   MISSION & GOVERNANCE
   ========================================================= */

.about-principles {
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255, 224, 180, 0.30),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fffaf4,
            #fffdf9
        );
}

.about-principles-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 28px;
    align-items: stretch;
}

.about-mission-card,
.about-governance-card {
    border: 1px solid rgba(234, 223, 216, 0.92);
    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 252, 247, 0.96)
        );

    box-shadow:
        0 22px 60px rgba(72, 31, 24, 0.09);
}

.about-mission-card {
    padding: 36px;
}

.about-governance-card {
    padding: 30px;
}

.about-check-list {
    margin-top: 26px;
}

.about-governance-head p {
    color: var(--muted);
}

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    margin-top: 24px;
}

.about-value-card {
    padding: 22px;

    border: 1px solid var(--line);
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf4
        );

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

.about-value-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 130, 32, 0.30);

    box-shadow:
        0 18px 42px rgba(72, 31, 24, 0.10);
}

.about-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin-bottom: 14px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(245, 130, 32, 0.16),
            rgba(143, 52, 56, 0.14)
        );

    color: var(--wine);

    font-weight: 900;
}

.about-value-card h3 {
    margin: 0 0 8px;

    font-size: 18px;
}

.about-value-card p {
    margin: 0;

    color: var(--muted);
}


/* =========================================================
   HOW WE WORK
   ========================================================= */

.about-step-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.about-step {
    position: relative;

    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 16px 42px rgba(72, 31, 24, 0.07);

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

.about-step:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 58px rgba(72, 31, 24, 0.12);
}

.about-step::after {
    content: "";

    position: absolute;

    right: -34px;
    bottom: -34px;

    width: 96px;
    height: 96px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245, 130, 32, 0.17),
            transparent 70%
        );
}

.about-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    border-radius: 14px;

    background: var(--wine);

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;
}

.about-step h3 {
    margin: 0 0 8px;

    font-size: 21px;
}

.about-step p {
    margin: 0;

    color: var(--muted);
}


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

.about-cta {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(255, 183, 71, 0.24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--wine-dark),
            var(--wine)
        );
}

.about-cta::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -110px;

    width: 240px;
    height: 240px;

    border: 40px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.about-cta > * {
    position: relative;
    z-index: 2;
}

.about-cta-label {
    display: inline-block;

    margin-bottom: 8px;

    color: #ffd8b0;

    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* =========================================================
   RESPONSIVE ABOUT PAGE
   ========================================================= */

@media (max-width: 1000px) {

    .about-intro-grid,
    .about-principles-grid {
        grid-template-columns: 1fr;
    }

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

}

@media (max-width: 900px) {

    .about-hero {
        min-height: auto;

        padding-top: 175px;
        padding-bottom: 70px;
    }

    .about-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255, 250, 243, 0.88),
                rgba(255, 250, 243, 0.96)
            );
    }

    .about-hero-copy {
        max-width: 100%;

        padding: 32px;
    }

}

@media (max-width: 600px) {

    .about-hero {
        padding-top: 160px;
        padding-bottom: 52px;
    }

    .about-hero-copy {
        padding: 24px 20px;

        border-radius: 22px;
    }

    .about-hero h1 {
        font-size: 44px;
    }

    .about-trust-row {
        gap: 8px;
    }

    .about-trust-row span {
        width: 100%;
    }

    .about-mission-card,
    .about-governance-card {
        padding: 24px 20px;
    }

    .about-value-grid,
    .about-step-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PREMIUM CERTIFICATION STANDARDS SECTION
   ========================================================= */

.certification-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255, 220, 171, 0.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(143, 52, 56, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fff8ef 100%
        );

    border-top: 1px solid rgba(234, 223, 216, 0.85);
}

.certification-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 38px;
}

.certification-heading > div {
    max-width: 760px;
}

.certification-heading h2 {
    margin: 17px 0 12px;

    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.certification-heading p {
    max-width: 680px;

    margin: 0;

    color: var(--muted);

    font-size: 17px;
}

.certification-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    min-width: 142px;

    padding: 13px 17px;

    border: 1px solid var(--line);
    border-radius: 15px;

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

    color: var(--wine);

    font-weight: 850;

    box-shadow:
        0 12px 30px rgba(72, 31, 24, 0.07);

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

.certification-explore strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    font-size: 18px;
}

.certification-explore:hover {
    transform: translateY(-3px);

    border-color: rgba(245, 130, 32, 0.35);

    box-shadow:
        0 18px 40px rgba(72, 31, 24, 0.12);
}


/* Certification cards */

.certification-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.certification-card {
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(234, 223, 216, 0.94);
    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            rgba(255, 252, 247, 0.97)
        );

    box-shadow:
        0 18px 48px rgba(72, 31, 24, 0.07);

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

.certification-card:hover {
    transform: translateY(-8px);

    border-color: rgba(245, 130, 32, 0.32);

    box-shadow:
        0 30px 70px rgba(72, 31, 24, 0.14);
}

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

    position: absolute;
    z-index: 2;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--gold),
            var(--wine)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.38s ease;
}

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


/* Logo area */

.certification-logo {
    position: relative;

    height: 180px;

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

    padding: 28px;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 243, 224, 0.90),
            rgba(255, 255, 255, 0.98) 70%
        );

    border-bottom: 1px solid rgba(234, 223, 216, 0.80);
}

.certification-logo::after {
    content: "";

    position: absolute;

    width: 112px;
    height: 112px;

    border: 1px solid rgba(245, 130, 32, 0.12);
    border-radius: 50%;

    pointer-events: none;
}

.certification-logo img {
    position: relative;
    z-index: 2;

    width: auto;
    height: auto;

    max-width: 125px;
    max-height: 105px;

    object-fit: contain;

    transition:
        transform 0.42s ease,
        filter 0.35s ease;
}

.certification-card:hover .certification-logo img {
    transform: scale(1.08);

    filter:
        saturate(1.06)
        contrast(1.03);
}


/* Card body */

.certification-card-body {
    position: relative;

    padding: 24px 22px 26px;
}

.certification-number {
    position: absolute;

    top: -18px;
    right: 19px;

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

    width: 42px;
    height: 42px;

    border: 3px solid #ffffff;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(143, 52, 56, 0.20);

    font-size: 12px;
    font-weight: 900;
}

.certification-card h3 {
    min-height: 54px;

    margin: 2px 0 10px;

    font-size: 19px;
    line-height: 1.35;
}

.certification-card p {
    min-height: 120px;

    margin: 0 0 17px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}

.certification-link {
    display: inline-flex;
    align-items: center;

    color: var(--wine);

    font-size: 14px;
    font-weight: 900;

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

.certification-link:hover {
    color: var(--orange);

    transform: translateX(4px);
}


/* Featured ISO card */

.certification-card-featured {
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(245, 130, 32, 0.15),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #fff5e8
        );
}


/* Responsive */

@media (max-width: 1100px) {

    .certification-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 900px) {

    .certification-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .certification-card h3,
    .certification-card p {
        min-height: auto;
    }

}

@media (max-width: 600px) {

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

    .certification-logo {
        height: 190px;
    }

    .certification-card-body {
        padding: 23px 20px 25px;
    }

}

/* =========================================================
   PREMIUM OUR CLIENTS SECTION
   ========================================================= */

.clients-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255, 221, 171, 0.34),
            transparent 33%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(143, 52, 56, 0.11),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff8ef 0%,
            #fffdf9 100%
        );

    border-top: 1px solid rgba(234, 223, 216, 0.85);
}

.clients-section::before {
    content: "";

    position: absolute;

    top: -160px;
    right: -170px;

    width: 410px;
    height: 410px;

    border: 70px solid rgba(245, 130, 32, 0.05);
    border-radius: 50%;

    pointer-events: none;
}


/* Heading */

.clients-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 36px;

    margin-bottom: 40px;
}

.clients-heading > div:first-child {
    max-width: 760px;
}

.clients-heading h2 {
    margin: 17px 0 12px;

    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.clients-heading p {
    max-width: 680px;

    margin: 0;

    color: var(--muted);

    font-size: 17px;
}

.clients-heading-badge {
    min-width: 145px;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.86),
            rgba(255, 246, 234, 0.68)
        );

    box-shadow:
        0 18px 44px rgba(72, 31, 24, 0.10);

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

.clients-heading-badge span,
.clients-heading-badge small {
    display: block;

    color: var(--muted);

    font-size: 11px;
    font-weight: 750;
}

.clients-heading-badge strong {
    display: block;

    margin: 2px 0;

    color: var(--wine);

    font-size: 34px;
    line-height: 1.1;
}


/* Client cards */

.clients-grid {
    position: relative;
    z-index: 2;

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

    gap: 16px;
}

.client-card {
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(234, 223, 216, 0.94);
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            rgba(255, 252, 247, 0.97)
        );

    box-shadow:
        0 16px 42px rgba(72, 31, 24, 0.07);

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

.client-card:hover {
    transform: translateY(-8px);

    border-color: rgba(245, 130, 32, 0.32);

    box-shadow:
        0 28px 65px rgba(72, 31, 24, 0.13);
}

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

    position: absolute;
    z-index: 3;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--gold),
            var(--wine)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}

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


/* Logo */

.client-logo-wrap {
    position: relative;

    height: 175px;

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

    padding: 25px;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 242, 223, 0.90),
            #ffffff 72%
        );

    border-bottom: 1px solid rgba(234, 223, 216, 0.76);
}

.client-logo-wrap::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border: 1px solid rgba(245, 130, 32, 0.10);
    border-radius: 50%;

    pointer-events: none;
}

.client-logo-wrap img {
    position: relative;
    z-index: 2;

    width: auto;
    height: auto;

    max-width: 145px;
    max-height: 90px;

    object-fit: contain;

    filter:
        saturate(0.96)
        contrast(1.02);

    transition:
        transform 0.42s ease,
        filter 0.35s ease;
}

.client-card:hover .client-logo-wrap img {
    transform: scale(1.09);

    filter:
        saturate(1.07)
        contrast(1.04);
}


/* Body */

.client-card-body {
    min-height: 116px;

    padding: 20px 18px 22px;
}

.client-card-body h3 {
    margin: 0 0 7px;

    font-size: 16px;
    line-height: 1.35;
}

.client-card-body span {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}


/* Note */

.clients-note {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 26px;
    padding: 17px 20px;

    border: 1px solid rgba(234, 223, 216, 0.88);
    border-radius: 18px;

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

    box-shadow:
        0 12px 32px rgba(72, 31, 24, 0.06);

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

.clients-note-icon {
    flex: 0 0 auto;

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

    width: 35px;
    height: 35px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    font-weight: 900;
}

.clients-note p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
}


/* Responsive */

@media (max-width: 1150px) {

    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 900px) {

    .clients-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

}

@media (max-width: 600px) {

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

    .client-logo-wrap {
        height: 190px;
    }

    .client-card-body {
        min-height: auto;
    }

    .clients-note {
        align-items: flex-start;
    }

}

/* =========================================================
   ABOUT INTRO CONTENT REFINEMENT
   ========================================================= */

.about-title {
    max-width: 720px;

    margin: 18px 0 28px;

    font-size: clamp(48px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.052em;
}

.about-text {
    max-width: 720px;

    margin-top: 21px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.88;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 34px;
}

.about-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 17px;

    border: 1px solid rgba(230, 218, 210, 0.92);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fff9f0
        );

    color: var(--wine);

    box-shadow:
        0 10px 28px rgba(72, 31, 24, 0.07);

    font-size: 13px;
    font-weight: 850;

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

.about-tags span:hover {
    transform: translateY(-4px);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    box-shadow:
        0 16px 34px rgba(143, 52, 56, 0.17);
}


/* =========================================================
   ABOUT PRINCIPLE CARDS
   ========================================================= */

.about-metric {
    position: relative;

    grid-template-columns: 76px 1fr;
    align-items: center;

    min-height: 148px;

    padding: 23px 24px;

    overflow: hidden;

    border: 1px solid rgba(230, 218, 210, 0.94);
    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.99),
            rgba(255, 249, 241, 0.97)
        );

    box-shadow:
        0 18px 48px rgba(72, 31, 24, 0.08);

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

.about-metric::after {
    content: "";

    position: absolute;

    top: -46px;
    right: -46px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245, 130, 32, 0.13),
            transparent 68%
        );

    pointer-events: none;
}

.about-metric:hover {
    transform: translateY(-7px);

    border-color: rgba(245, 130, 32, 0.32);

    box-shadow:
        0 28px 66px rgba(72, 31, 24, 0.14);
}

.about-metric-number {
    position: relative;
    z-index: 2;

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

    width: 56px;
    height: 56px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    box-shadow:
        0 12px 28px rgba(143, 52, 56, 0.20);

    font-size: 14px;
    font-weight: 900;
}

.about-metric h3 {
    margin: 0 0 8px;

    color: var(--ink);

    font-size: 19px;
    line-height: 1.3;
}

.about-metric p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 600px) {

    .about-title {
        font-size: 42px;
    }

    .about-text {
        font-size: 16px;
    }

    .about-metric {
        grid-template-columns: 62px 1fr;

        min-height: auto;

        padding: 18px;
    }

    .about-metric-number {
        width: 48px;
        height: 48px;

        border-radius: 15px;
    }

    .about-metric h3 {
        font-size: 17px;
    }

}
/* =========================================================
   ABOUT OVERVIEW — BALANCED PREMIUM LAYOUT
   ========================================================= */

.about-overview {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(245, 130, 32, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(143, 52, 56, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fff9f2 100%
        );
}

.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, 0.92fr);

    gap: 46px;

    align-items: stretch;
}


/* ================================
   LEFT CONTENT PANEL
   ================================ */

.about-intro-copy {
    position: relative;

    height: 100%;

    padding: 38px 40px;

    border: 1px solid rgba(235, 222, 213, 0.88);
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.86),
            rgba(255, 250, 243, 0.68)
        );

    box-shadow:
        0 24px 64px rgba(72, 31, 24, 0.08);

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

.about-intro-copy::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -70px;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245, 130, 32, 0.10),
            transparent 68%
        );

    pointer-events: none;
}

.about-intro-copy > * {
    position: relative;
    z-index: 2;
}

.about-title {
    max-width: 640px;

    margin: 20px 0 24px;

    font-size: clamp(44px, 4.3vw, 62px);
    line-height: 1.03;
    letter-spacing: -0.052em;
}

.about-intro-copy .lead {
    max-width: 680px;

    font-size: 17px;
    line-height: 1.78;
}

.about-text {
    max-width: 680px;

    margin-top: 18px;

    font-size: 15px;
    line-height: 1.82;
}


/* ================================
   RIGHT METRIC COLUMN
   ================================ */

.about-metrics {
    display: grid;

    grid-template-rows: repeat(3, minmax(0, 1fr));

    gap: 18px;

    height: 100%;
}

.about-metric {
    position: relative;

    display: grid;

    grid-template-columns: 76px minmax(0, 1fr);

    align-items: center;

    min-height: 0;
    height: 100%;

    padding: 28px 26px;

    overflow: hidden;

    border: 1px solid rgba(230, 218, 210, 0.94);
    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.99),
            rgba(255, 247, 237, 0.97)
        );

    box-shadow:
        0 20px 52px rgba(72, 31, 24, 0.09);

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

.about-metric::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--orange),
            var(--wine)
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}

.about-metric::after {
    content: "";

    position: absolute;

    top: -65px;
    right: -60px;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245, 130, 32, 0.14),
            transparent 70%
        );

    pointer-events: none;
}

.about-metric:hover {
    transform: translateY(-7px);

    border-color: rgba(245, 130, 32, 0.34);

    box-shadow:
        0 30px 72px rgba(72, 31, 24, 0.14);
}

.about-metric:hover::before {
    opacity: 1;
}

.about-metric-number {
    position: relative;
    z-index: 2;

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

    width: 58px;
    height: 58px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    box-shadow:
        0 14px 30px rgba(143, 52, 56, 0.22);

    font-size: 14px;
    font-weight: 900;
}

.about-metric > div {
    position: relative;
    z-index: 2;
}

.about-metric h3 {
    margin: 0 0 9px;

    color: var(--ink);

    font-size: 19px;
    line-height: 1.3;
}

.about-metric p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.72;
}


/* ================================
   ISO TAGS
   ================================ */

.about-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
    padding-top: 24px;

    border-top: 1px solid rgba(230, 218, 210, 0.82);
}

.about-tags span {
    padding: 9px 15px;

    border-radius: 999px;

    font-size: 12px;
}


/* ================================
   TABLET
   ================================ */

@media (max-width: 1000px) {

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-metrics {
        grid-template-rows: none;
        height: auto;
    }

    .about-metric {
        min-height: 145px;
    }

}


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

@media (max-width: 600px) {

    .about-intro-copy {
        padding: 26px 20px;

        border-radius: 23px;
    }

    .about-title {
        font-size: 40px;
    }

    .about-intro-copy .lead {
        font-size: 16px;
    }

    .about-text {
        font-size: 15px;
        line-height: 1.72;
    }

    .about-metric {
        grid-template-columns: 60px minmax(0, 1fr);

        min-height: auto;

        padding: 20px 18px;

        border-radius: 21px;
    }

    .about-metric-number {
        width: 48px;
        height: 48px;

        border-radius: 15px;
    }

    .about-metric h3 {
        font-size: 17px;
    }

    .about-tags span {
        padding: 8px 13px;

        font-size: 11px;
    }

}

/* =========================================================
   COMPACT ABOUT PRINCIPLE CARDS
   ========================================================= */

.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.92fr);

    gap: 30px;

    align-items: start;
}


/* Kolom kanan tidak dipaksa sama tinggi */
.about-metrics {
    display: grid;

    grid-template-rows: none;

    gap: 13px;

    height: auto;
}


/* Card dibuat compact */
.about-metric {
    position: relative;

    display: grid;

    grid-template-columns: 54px minmax(0, 1fr);

    align-items: center;

    min-height: auto;
    height: auto;

    padding: 18px 19px;

    overflow: hidden;

    border: 1px solid rgba(230, 218, 210, 0.94);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.99),
            rgba(255, 249, 241, 0.97)
        );

    box-shadow:
        0 13px 34px rgba(72, 31, 24, 0.07);

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

.about-metric:hover {
    transform: translateY(-4px);

    border-color: rgba(245, 130, 32, 0.30);

    box-shadow:
        0 20px 46px rgba(72, 31, 24, 0.11);
}


/* Aksen kecil di sebelah kiri */
.about-metric::before {
    content: "";

    position: absolute;

    top: 16px;
    bottom: 16px;
    left: 0;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--orange),
            var(--wine)
        );

    opacity: 0.75;
}


/* Hilangkan dekorasi besar penyebab ruang kosong */
.about-metric::after {
    width: 82px;
    height: 82px;

    top: -32px;
    right: -32px;

    opacity: 0.55;
}


/* Nomor lebih kecil */
.about-metric-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    box-shadow:
        0 9px 20px rgba(143, 52, 56, 0.18);

    font-size: 12px;
    font-weight: 900;
}


/* Isi teks */
.about-metric > div {
    min-width: 0;
}

.about-metric h3 {
    margin: 0 0 5px;

    color: var(--ink);

    font-size: 16px;
    line-height: 1.28;
    letter-spacing: -0.015em;
}

.about-metric p {
    margin: 0;

    color: var(--muted);

    font-size: 12.5px;
    line-height: 1.58;
}


/* Kolom kiri sedikit dirapikan */
.about-intro-copy {
    padding: 30px 31px;
}

.about-title {
    margin: 17px 0 20px;

    font-size: clamp(42px, 4vw, 58px);
    line-height: 1.03;
}

.about-intro-copy .lead {
    font-size: 15px;
    line-height: 1.72;
}

.about-text {
    margin-top: 16px;

    font-size: 13.5px;
    line-height: 1.74;
}

.about-tags {
    gap: 8px;

    margin-top: 23px;
    padding-top: 19px;
}

.about-tags span {
    padding: 7px 12px;

    font-size: 10.5px;
}


/* Tablet */
@media (max-width: 1000px) {

    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .about-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-metric {
        grid-template-columns: 46px 1fr;

        align-items: start;
    }

}


/* Mobile */
@media (max-width: 700px) {

    .about-metrics {
        grid-template-columns: 1fr;
    }

    .about-metric {
        grid-template-columns: 50px 1fr;

        padding: 17px;
    }

    .about-metric-number {
        width: 40px;
        height: 40px;
    }

    .about-metric h3 {
        font-size: 15px;
    }

    .about-metric p {
        font-size: 12px;
    }

}


/* ABOUT PAGE — BALANCED SIDE COLUMN */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:30px;align-items:start}.about-intro-copy{height:auto;padding:34px}.about-title{margin:18px 0 22px;font-size:clamp(44px,4.4vw,62px);line-height:1.03;letter-spacing:-.052em}.about-intro-copy .lead{font-size:15.5px;line-height:1.74}.about-text{margin-top:17px;font-size:14px;line-height:1.78}.about-tags{gap:8px;margin-top:24px;padding-top:20px}.about-tags span{padding:8px 13px;font-size:11px}.about-side-column{display:grid;gap:16px;min-width:0}.about-metrics{display:grid;gap:12px;height:auto}.about-metric{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:auto;height:auto;padding:18px 20px;border-radius:20px}.about-metric-number{width:42px;height:42px;border-radius:13px;font-size:12px}.about-metric h3{margin:0 0 5px;font-size:16px;line-height:1.28}.about-metric p{margin:0;font-size:12.5px;line-height:1.58}.about-highlights-card{padding:22px;border:1px solid rgba(230,218,210,.94);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,239,.96));box-shadow:0 18px 48px rgba(72,31,24,.08)}.about-side-heading{margin-bottom:16px}.about-side-heading .eyebrow{margin-bottom:10px}.about-side-heading h3{max-width:410px;margin:0;font-size:22px;line-height:1.25;letter-spacing:-.025em}.about-highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.about-highlight-item{display:flex;align-items:flex-start;gap:9px;min-height:58px;padding:12px;border:1px solid rgba(230,218,210,.8);border-radius:15px;background:rgba(255,255,255,.72)}.about-highlight-item span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--wine));color:#fff;font-size:11px;font-weight:900}.about-highlight-item p{margin:1px 0 0;color:var(--ink);font-size:12px;line-height:1.45;font-weight:750}.about-side-photo{position:relative;min-height:235px;margin:0;overflow:hidden;border:1px solid rgba(230,218,210,.92);border-radius:23px;background:#2d1719;box-shadow:0 22px 58px rgba(72,31,24,.13)}.about-side-photo img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;transition:transform .65s ease}.about-side-photo:hover img{transform:scale(1.055)}.about-side-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,17,20,.02) 35%,rgba(36,17,20,.82) 100%);pointer-events:none}.about-side-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}.about-side-photo figcaption span{display:block;margin-bottom:4px;color:#ffd4a5;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-side-photo figcaption strong{display:block;max-width:360px;font-size:18px;line-height:1.25}@media(max-width:1000px){.about-intro-grid{grid-template-columns:1fr}.about-side-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.about-metrics,.about-side-photo{grid-column:1/-1}}@media(max-width:700px){.about-side-column{grid-template-columns:1fr}.about-metrics,.about-side-photo{grid-column:auto}.about-highlights-grid{grid-template-columns:1fr}.about-intro-copy{padding:25px 20px}.about-title{font-size:40px}.about-side-photo img{height:225px}}


/* =========================================================
   ABOUT SIDE COLUMN — FINAL BALANCE
   ========================================================= */

.about-side-column {
    align-content: start;
}

.about-side-photo-balanced {
    margin-top: 0;
}

.about-side-photo-balanced img {
    height: 275px;
}

@media (max-width: 1000px) {
    .about-side-photo-balanced {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .about-side-photo-balanced {
        grid-column: auto;
    }

    .about-side-photo-balanced img {
        height: 225px;
    }
}
/* ABOUT PAGE — BALANCED SIDE COLUMN */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:30px;align-items:start}.about-intro-copy{height:auto;padding:34px}.about-title{margin:18px 0 22px;font-size:clamp(44px,4.4vw,62px);line-height:1.03;letter-spacing:-.052em}.about-intro-copy .lead{font-size:15.5px;line-height:1.74}.about-text{margin-top:17px;font-size:14px;line-height:1.78}.about-tags{gap:8px;margin-top:24px;padding-top:20px}.about-tags span{padding:8px 13px;font-size:11px}.about-side-column{display:grid;gap:16px;min-width:0}.about-metrics{display:grid;gap:12px;height:auto}.about-metric{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:auto;height:auto;padding:18px 20px;border-radius:20px}.about-metric-number{width:42px;height:42px;border-radius:13px;font-size:12px}.about-metric h3{margin:0 0 5px;font-size:16px;line-height:1.28}.about-metric p{margin:0;font-size:12.5px;line-height:1.58}.about-highlights-card{padding:22px;border:1px solid rgba(230,218,210,.94);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,239,.96));box-shadow:0 18px 48px rgba(72,31,24,.08)}.about-side-heading{margin-bottom:16px}.about-side-heading .eyebrow{margin-bottom:10px}.about-side-heading h3{max-width:410px;margin:0;font-size:22px;line-height:1.25;letter-spacing:-.025em}.about-highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.about-highlight-item{display:flex;align-items:flex-start;gap:9px;min-height:58px;padding:12px;border:1px solid rgba(230,218,210,.8);border-radius:15px;background:rgba(255,255,255,.72)}.about-highlight-item span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--wine));color:#fff;font-size:11px;font-weight:900}.about-highlight-item p{margin:1px 0 0;color:var(--ink);font-size:12px;line-height:1.45;font-weight:750}.about-side-photo{position:relative;min-height:235px;margin:0;overflow:hidden;border:1px solid rgba(230,218,210,.92);border-radius:23px;background:#2d1719;box-shadow:0 22px 58px rgba(72,31,24,.13)}.about-side-photo img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;transition:transform .65s ease}.about-side-photo:hover img{transform:scale(1.055)}.about-side-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,17,20,.02) 35%,rgba(36,17,20,.82) 100%);pointer-events:none}.about-side-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}.about-side-photo figcaption span{display:block;margin-bottom:4px;color:#ffd4a5;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-side-photo figcaption strong{display:block;max-width:360px;font-size:18px;line-height:1.25}@media(max-width:1000px){.about-intro-grid{grid-template-columns:1fr}.about-side-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.about-metrics,.about-side-photo{grid-column:1/-1}}@media(max-width:700px){.about-side-column{grid-template-columns:1fr}.about-metrics,.about-side-photo{grid-column:auto}.about-highlights-grid{grid-template-columns:1fr}.about-intro-copy{padding:25px 20px}.about-title{font-size:40px}.about-side-photo img{height:225px}}

/* =========================================================
   ABOUT OVERVIEW — FINAL EQUAL-HEIGHT ALIGNMENT
   ========================================================= */

.about-intro-grid {
    align-items: stretch;
}

.about-intro-copy {
    height: 100%;
}

.about-side-column {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(250px, 1fr);
    align-content: stretch;
}

.about-side-photo-fill {
    min-height: 250px;
    height: 100%;
    margin: 0;
}

.about-side-photo-fill img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    object-position: center;
}

/* Desktop: bottom of the image aligns with bottom of the left panel */
@media (min-width: 1001px) {
    .about-intro-grid {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(390px, 0.96fr);
    }

    .about-side-column {
        align-self: stretch;
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .about-side-column {
        height: auto;
        grid-template-rows: auto;
    }

    .about-side-photo-fill {
        grid-column: 1 / -1;
        height: 320px;
    }

    .about-side-photo-fill img {
        height: 320px;
        min-height: 0;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .about-side-photo-fill {
        grid-column: auto;
        height: 230px;
    }

    .about-side-photo-fill img {
        height: 230px;
    }
}
/* ABOUT PAGE — BALANCED SIDE COLUMN */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:30px;align-items:start}.about-intro-copy{height:auto;padding:34px}.about-title{margin:18px 0 22px;font-size:clamp(44px,4.4vw,62px);line-height:1.03;letter-spacing:-.052em}.about-intro-copy .lead{font-size:15.5px;line-height:1.74}.about-text{margin-top:17px;font-size:14px;line-height:1.78}.about-tags{gap:8px;margin-top:24px;padding-top:20px}.about-tags span{padding:8px 13px;font-size:11px}.about-side-column{display:grid;gap:16px;min-width:0}.about-metrics{display:grid;gap:12px;height:auto}.about-metric{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:auto;height:auto;padding:18px 20px;border-radius:20px}.about-metric-number{width:42px;height:42px;border-radius:13px;font-size:12px}.about-metric h3{margin:0 0 5px;font-size:16px;line-height:1.28}.about-metric p{margin:0;font-size:12.5px;line-height:1.58}.about-highlights-card{padding:22px;border:1px solid rgba(230,218,210,.94);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,239,.96));box-shadow:0 18px 48px rgba(72,31,24,.08)}.about-side-heading{margin-bottom:16px}.about-side-heading .eyebrow{margin-bottom:10px}.about-side-heading h3{max-width:410px;margin:0;font-size:22px;line-height:1.25;letter-spacing:-.025em}.about-highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.about-highlight-item{display:flex;align-items:flex-start;gap:9px;min-height:58px;padding:12px;border:1px solid rgba(230,218,210,.8);border-radius:15px;background:rgba(255,255,255,.72)}.about-highlight-item span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--wine));color:#fff;font-size:11px;font-weight:900}.about-highlight-item p{margin:1px 0 0;color:var(--ink);font-size:12px;line-height:1.45;font-weight:750}.about-side-photo{position:relative;min-height:235px;margin:0;overflow:hidden;border:1px solid rgba(230,218,210,.92);border-radius:23px;background:#2d1719;box-shadow:0 22px 58px rgba(72,31,24,.13)}.about-side-photo img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;transition:transform .65s ease}.about-side-photo:hover img{transform:scale(1.055)}.about-side-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,17,20,.02) 35%,rgba(36,17,20,.82) 100%);pointer-events:none}.about-side-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}.about-side-photo figcaption span{display:block;margin-bottom:4px;color:#ffd4a5;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-side-photo figcaption strong{display:block;max-width:360px;font-size:18px;line-height:1.25}@media(max-width:1000px){.about-intro-grid{grid-template-columns:1fr}.about-side-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.about-metrics,.about-side-photo{grid-column:1/-1}}@media(max-width:700px){.about-side-column{grid-template-columns:1fr}.about-metrics,.about-side-photo{grid-column:auto}.about-highlights-grid{grid-template-columns:1fr}.about-intro-copy{padding:25px 20px}.about-title{font-size:40px}.about-side-photo img{height:225px}}

/* =========================================================
   ABOUT OVERVIEW — NATURAL HEIGHT, NO EMPTY LEFT PANEL
   ========================================================= */

.about-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(390px, 0.96fr);
    gap: 30px;
    align-items: start;
}

/* Left card follows its actual content height */
.about-intro-copy {
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
}

/* Right column stacks naturally without forcing left card height */
.about-side-column {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    align-content: start;
    align-self: start;
}

/* Compact image with balanced proportion */
.about-side-photo-fill {
    min-height: 0;
    height: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
}

.about-side-photo-fill img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

/* Slightly tighter spacing at the bottom of the left card */
.about-tags {
    margin-bottom: 0;
}

/* Keep card proportions compact and consistent */
.about-highlights-card {
    padding: 21px;
}

.about-highlights-grid {
    gap: 9px;
}

.about-highlight-item {
    min-height: 54px;
    padding: 11px;
}

@media (max-width: 1000px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
    }

    .about-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        align-items: start;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: 1 / -1;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 700px) {
    .about-side-column {
        grid-template-columns: 1fr;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: auto;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 10;
    }
}
/* =========================================================
   ABOUT PHOTO — COMPACT HEIGHT
   ========================================================= */

.about-side-photo-fill {
    height: 190px !important;
    min-height: 190px !important;
    aspect-ratio: auto !important;
}

.about-side-photo-fill img {
    width: 100%;
    height: 190px !important;
    min-height: 190px !important;

    object-fit: cover;
    object-position: center 46%;
}

.about-side-photo-fill figcaption {
    left: 18px;
    right: 18px;
    bottom: 14px;
}

.about-side-photo-fill figcaption span {
    font-size: 9px;
}

.about-side-photo-fill figcaption strong {
    font-size: 16px;
}

/* Tablet */
@media (max-width: 1000px) {
    .about-side-photo-fill,
    .about-side-photo-fill img {
        height: 240px !important;
        min-height: 240px !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .about-side-photo-fill,
    .about-side-photo-fill img {
        height: 205px !important;
        min-height: 205px !important;
    }
}

/* ABOUT PAGE — BALANCED SIDE COLUMN */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:30px;align-items:start}.about-intro-copy{height:auto;padding:34px}.about-title{margin:18px 0 22px;font-size:clamp(44px,4.4vw,62px);line-height:1.03;letter-spacing:-.052em}.about-intro-copy .lead{font-size:15.5px;line-height:1.74}.about-text{margin-top:17px;font-size:14px;line-height:1.78}.about-tags{gap:8px;margin-top:24px;padding-top:20px}.about-tags span{padding:8px 13px;font-size:11px}.about-side-column{display:grid;gap:16px;min-width:0}.about-metrics{display:grid;gap:12px;height:auto}.about-metric{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:auto;height:auto;padding:18px 20px;border-radius:20px}.about-metric-number{width:42px;height:42px;border-radius:13px;font-size:12px}.about-metric h3{margin:0 0 5px;font-size:16px;line-height:1.28}.about-metric p{margin:0;font-size:12.5px;line-height:1.58}.about-highlights-card{padding:22px;border:1px solid rgba(230,218,210,.94);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,239,.96));box-shadow:0 18px 48px rgba(72,31,24,.08)}.about-side-heading{margin-bottom:16px}.about-side-heading .eyebrow{margin-bottom:10px}.about-side-heading h3{max-width:410px;margin:0;font-size:22px;line-height:1.25;letter-spacing:-.025em}.about-highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.about-highlight-item{display:flex;align-items:flex-start;gap:9px;min-height:58px;padding:12px;border:1px solid rgba(230,218,210,.8);border-radius:15px;background:rgba(255,255,255,.72)}.about-highlight-item span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--wine));color:#fff;font-size:11px;font-weight:900}.about-highlight-item p{margin:1px 0 0;color:var(--ink);font-size:12px;line-height:1.45;font-weight:750}.about-side-photo{position:relative;min-height:235px;margin:0;overflow:hidden;border:1px solid rgba(230,218,210,.92);border-radius:23px;background:#2d1719;box-shadow:0 22px 58px rgba(72,31,24,.13)}.about-side-photo img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;transition:transform .65s ease}.about-side-photo:hover img{transform:scale(1.055)}.about-side-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,17,20,.02) 35%,rgba(36,17,20,.82) 100%);pointer-events:none}.about-side-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}.about-side-photo figcaption span{display:block;margin-bottom:4px;color:#ffd4a5;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-side-photo figcaption strong{display:block;max-width:360px;font-size:18px;line-height:1.25}@media(max-width:1000px){.about-intro-grid{grid-template-columns:1fr}.about-side-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.about-metrics,.about-side-photo{grid-column:1/-1}}@media(max-width:700px){.about-side-column{grid-template-columns:1fr}.about-metrics,.about-side-photo{grid-column:auto}.about-highlights-grid{grid-template-columns:1fr}.about-intro-copy{padding:25px 20px}.about-title{font-size:40px}.about-side-photo img{height:225px}}

/* =========================================================
   ABOUT OVERVIEW — NATURAL HEIGHT, NO EMPTY LEFT PANEL
   ========================================================= */

.about-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(390px, 0.96fr);
    gap: 30px;
    align-items: start;
}

/* Left card follows its actual content height */
.about-intro-copy {
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
}

/* Right column stacks naturally without forcing left card height */
.about-side-column {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    align-content: start;
    align-self: start;
}

/* Compact image with balanced proportion */
.about-side-photo-fill {
    min-height: 0;
    height: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
}

.about-side-photo-fill img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

/* Slightly tighter spacing at the bottom of the left card */
.about-tags {
    margin-bottom: 0;
}

/* Keep card proportions compact and consistent */
.about-highlights-card {
    padding: 21px;
}

.about-highlights-grid {
    gap: 9px;
}

.about-highlight-item {
    min-height: 54px;
    padding: 11px;
}

@media (max-width: 1000px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
    }

    .about-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        align-items: start;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: 1 / -1;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 700px) {
    .about-side-column {
        grid-template-columns: 1fr;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: auto;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 10;
    }
}


/* =========================================================
   GOVERNANCE CARDS — APPLE / FLUENT PREMIUM STYLE
   ========================================================= */

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.about-value-card-premium {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 162px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,248,239,.74));
    box-shadow:
        0 18px 46px rgba(72,31,24,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        box-shadow .38s cubic-bezier(.2,.8,.2,1),
        border-color .38s ease;
}

.about-value-card-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,177,64,.20), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.06));
}

.about-value-card-premium::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    z-index: -1;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(245,130,32,.18), rgba(143,52,56,.05) 48%, transparent 72%);
    transition: transform .45s ease, opacity .45s ease;
}

.about-value-card-premium:hover {
    transform: translateY(-9px) scale(1.015);
    border-color: rgba(245,130,32,.30);
    box-shadow:
        0 32px 76px rgba(72,31,24,.16),
        0 12px 30px rgba(245,130,32,.10),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.about-value-card-premium:hover::after {
    transform: scale(1.22);
}

.about-value-icon-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,240,219,.74));
    box-shadow:
        0 16px 34px rgba(95,36,31,.13),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease;
}

.about-value-glow {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,176,56,.52), rgba(245,130,32,.22) 42%, transparent 72%);
    filter: blur(10px);
    opacity: .80;
    transition: transform .42s ease, opacity .42s ease;
}

.about-value-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 16px rgba(76,28,24,.20))
        saturate(1.04)
        contrast(1.02);
    transform: translateY(-3px);
    animation: aboutIconFloat 4.6s ease-in-out infinite;
    transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease;
}

.about-value-card-premium:nth-child(2) .about-value-image { animation-delay: -.8s; }
.about-value-card-premium:nth-child(3) .about-value-image { animation-delay: -1.6s; }
.about-value-card-premium:nth-child(4) .about-value-image { animation-delay: -2.4s; }

.about-value-card-premium:hover .about-value-icon-wrap {
    transform: translateY(-8px) rotate(-2deg);
    box-shadow:
        0 24px 46px rgba(95,36,31,.18),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.about-value-card-premium:hover .about-value-glow {
    transform: scale(1.22);
    opacity: 1;
}

.about-value-card-premium:hover .about-value-image {
    animation-play-state: paused;
    transform: translateY(-7px) scale(1.10) rotate(-3deg);
    filter:
        drop-shadow(0 18px 22px rgba(76,28,24,.26))
        saturate(1.10)
        contrast(1.04);
}

.about-value-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.about-value-card-premium h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.24;
    letter-spacing: -.022em;
}

.about-value-card-premium p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

@keyframes aboutIconFloat {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .about-value-image { animation: none; }
}

@media (max-width: 700px) {
    .about-value-grid {
        grid-template-columns: 1fr;
    }

    .about-value-card-premium {
        min-height: 136px;
        padding: 18px;
        border-radius: 21px;
    }

    .about-value-icon-wrap {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }

    .about-value-image {
        width: 67px;
        height: 67px;
    }

    .about-value-card-premium h3 {
        font-size: 18px;
    }

    .about-value-card-premium p {
        font-size: 13px;
    }
}

/* ABOUT PAGE — BALANCED SIDE COLUMN */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:30px;align-items:start}.about-intro-copy{height:auto;padding:34px}.about-title{margin:18px 0 22px;font-size:clamp(44px,4.4vw,62px);line-height:1.03;letter-spacing:-.052em}.about-intro-copy .lead{font-size:15.5px;line-height:1.74}.about-text{margin-top:17px;font-size:14px;line-height:1.78}.about-tags{gap:8px;margin-top:24px;padding-top:20px}.about-tags span{padding:8px 13px;font-size:11px}.about-side-column{display:grid;gap:16px;min-width:0}.about-metrics{display:grid;gap:12px;height:auto}.about-metric{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:auto;height:auto;padding:18px 20px;border-radius:20px}.about-metric-number{width:42px;height:42px;border-radius:13px;font-size:12px}.about-metric h3{margin:0 0 5px;font-size:16px;line-height:1.28}.about-metric p{margin:0;font-size:12.5px;line-height:1.58}.about-highlights-card{padding:22px;border:1px solid rgba(230,218,210,.94);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,239,.96));box-shadow:0 18px 48px rgba(72,31,24,.08)}.about-side-heading{margin-bottom:16px}.about-side-heading .eyebrow{margin-bottom:10px}.about-side-heading h3{max-width:410px;margin:0;font-size:22px;line-height:1.25;letter-spacing:-.025em}.about-highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.about-highlight-item{display:flex;align-items:flex-start;gap:9px;min-height:58px;padding:12px;border:1px solid rgba(230,218,210,.8);border-radius:15px;background:rgba(255,255,255,.72)}.about-highlight-item span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--wine));color:#fff;font-size:11px;font-weight:900}.about-highlight-item p{margin:1px 0 0;color:var(--ink);font-size:12px;line-height:1.45;font-weight:750}.about-side-photo{position:relative;min-height:235px;margin:0;overflow:hidden;border:1px solid rgba(230,218,210,.92);border-radius:23px;background:#2d1719;box-shadow:0 22px 58px rgba(72,31,24,.13)}.about-side-photo img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;transition:transform .65s ease}.about-side-photo:hover img{transform:scale(1.055)}.about-side-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,17,20,.02) 35%,rgba(36,17,20,.82) 100%);pointer-events:none}.about-side-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}.about-side-photo figcaption span{display:block;margin-bottom:4px;color:#ffd4a5;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-side-photo figcaption strong{display:block;max-width:360px;font-size:18px;line-height:1.25}@media(max-width:1000px){.about-intro-grid{grid-template-columns:1fr}.about-side-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.about-metrics,.about-side-photo{grid-column:1/-1}}@media(max-width:700px){.about-side-column{grid-template-columns:1fr}.about-metrics,.about-side-photo{grid-column:auto}.about-highlights-grid{grid-template-columns:1fr}.about-intro-copy{padding:25px 20px}.about-title{font-size:40px}.about-side-photo img{height:225px}}

/* =========================================================
   ABOUT OVERVIEW — NATURAL HEIGHT, NO EMPTY LEFT PANEL
   ========================================================= */

.about-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(390px, 0.96fr);
    gap: 30px;
    align-items: start;
}

/* Left card follows its actual content height */
.about-intro-copy {
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
}

/* Right column stacks naturally without forcing left card height */
.about-side-column {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    align-content: start;
    align-self: start;
}

/* Compact image with balanced proportion */
.about-side-photo-fill {
    min-height: 0;
    height: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
}

.about-side-photo-fill img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

/* Slightly tighter spacing at the bottom of the left card */
.about-tags {
    margin-bottom: 0;
}

/* Keep card proportions compact and consistent */
.about-highlights-card {
    padding: 21px;
}

.about-highlights-grid {
    gap: 9px;
}

.about-highlight-item {
    min-height: 54px;
    padding: 11px;
}

@media (max-width: 1000px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
    }

    .about-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        align-items: start;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: 1 / -1;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 700px) {
    .about-side-column {
        grid-template-columns: 1fr;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: auto;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 10;
    }
}


/* =========================================================
   GOVERNANCE CARDS — APPLE / FLUENT PREMIUM STYLE
   ========================================================= */

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.about-value-card-premium {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 162px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,248,239,.74));
    box-shadow:
        0 18px 46px rgba(72,31,24,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        box-shadow .38s cubic-bezier(.2,.8,.2,1),
        border-color .38s ease;
}

.about-value-card-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,177,64,.20), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.06));
}

.about-value-card-premium::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    z-index: -1;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(245,130,32,.18), rgba(143,52,56,.05) 48%, transparent 72%);
    transition: transform .45s ease, opacity .45s ease;
}

.about-value-card-premium:hover {
    transform: translateY(-9px) scale(1.015);
    border-color: rgba(245,130,32,.30);
    box-shadow:
        0 32px 76px rgba(72,31,24,.16),
        0 12px 30px rgba(245,130,32,.10),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.about-value-card-premium:hover::after {
    transform: scale(1.22);
}

.about-value-icon-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,240,219,.74));
    box-shadow:
        0 16px 34px rgba(95,36,31,.13),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease;
}

.about-value-glow {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,176,56,.52), rgba(245,130,32,.22) 42%, transparent 72%);
    filter: blur(10px);
    opacity: .80;
    transition: transform .42s ease, opacity .42s ease;
}

.about-value-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 16px rgba(76,28,24,.20))
        saturate(1.04)
        contrast(1.02);
    transform: translateY(-3px);
    animation: aboutIconFloat 4.6s ease-in-out infinite;
    transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease;
}

.about-value-card-premium:nth-child(2) .about-value-image { animation-delay: -.8s; }
.about-value-card-premium:nth-child(3) .about-value-image { animation-delay: -1.6s; }
.about-value-card-premium:nth-child(4) .about-value-image { animation-delay: -2.4s; }

.about-value-card-premium:hover .about-value-icon-wrap {
    transform: translateY(-8px) rotate(-2deg);
    box-shadow:
        0 24px 46px rgba(95,36,31,.18),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.about-value-card-premium:hover .about-value-glow {
    transform: scale(1.22);
    opacity: 1;
}

.about-value-card-premium:hover .about-value-image {
    animation-play-state: paused;
    transform: translateY(-7px) scale(1.10) rotate(-3deg);
    filter:
        drop-shadow(0 18px 22px rgba(76,28,24,.26))
        saturate(1.10)
        contrast(1.04);
}

.about-value-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.about-value-card-premium h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.24;
    letter-spacing: -.022em;
}

.about-value-card-premium p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

@keyframes aboutIconFloat {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .about-value-image { animation: none; }
}

@media (max-width: 700px) {
    .about-value-grid {
        grid-template-columns: 1fr;
    }

    .about-value-card-premium {
        min-height: 136px;
        padding: 18px;
        border-radius: 21px;
    }

    .about-value-icon-wrap {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }

    .about-value-image {
        width: 67px;
        height: 67px;
    }

    .about-value-card-premium h3 {
        font-size: 18px;
    }

    .about-value-card-premium p {
        font-size: 13px;
    }
}


/* =========================================================
   HOW WE WORK — PREMIUM IMAGE CARDS
   ========================================================= */

.about-journey {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(255, 202, 124, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(143, 52, 56, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff8ef 0%,
            #fffdf9 100%
        );
}

.about-journey::before {
    content: "";

    position: absolute;
    top: -170px;
    right: -150px;

    width: 390px;
    height: 390px;

    border: 72px solid rgba(245, 130, 32, 0.045);
    border-radius: 50%;

    pointer-events: none;
}

.about-journey-head {
    position: relative;
    z-index: 2;

    margin-bottom: 34px;
}

.about-journey-head > div {
    max-width: 820px;
}

.about-step-grid-premium {
    position: relative;
    z-index: 2;

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

    gap: 18px;
}

.about-step-premium {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-height: 390px;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 249, 241, 0.78)
        );

    box-shadow:
        0 20px 54px rgba(72, 31, 24, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);

    transition:
        transform 0.38s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.38s cubic-bezier(.2,.8,.2,1),
        border-color 0.38s ease;
}

.about-step-premium::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(255, 177, 64, 0.18),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.46),
            rgba(255, 255, 255, 0.05)
        );
}

.about-step-premium::after {
    content: "";

    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--gold),
            var(--wine)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.38s ease;
}

.about-step-premium:hover {
    transform: translateY(-10px) scale(1.012);

    border-color: rgba(245, 130, 32, 0.30);

    box-shadow:
        0 34px 82px rgba(72, 31, 24, 0.16),
        0 14px 34px rgba(245, 130, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.about-step-premium:hover::after {
    transform: scaleX(1);
}

.about-step-image-wrap {
    position: relative;

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

    height: 205px;
    padding: 22px 20px 8px;

    overflow: hidden;
}

.about-step-image-wrap::after {
    content: "";

    position: absolute;

    width: 138px;
    height: 138px;

    border: 1px solid rgba(245, 130, 32, 0.12);
    border-radius: 50%;

    pointer-events: none;
}

.about-step-glow {
    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 178, 66, 0.45),
            rgba(245, 130, 32, 0.18) 46%,
            transparent 72%
        );

    filter: blur(16px);

    opacity: 0.80;

    transition:
        transform 0.42s ease,
        opacity 0.42s ease;
}

.about-step-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 168px;
    height: 168px;

    object-fit: contain;

    filter:
        drop-shadow(0 16px 22px rgba(76, 28, 24, 0.20))
        saturate(1.04)
        contrast(1.02);

    animation: aboutStepFloat 5s ease-in-out infinite;

    transition:
        transform 0.44s cubic-bezier(.2,.8,.2,1),
        filter 0.44s ease;
}

.about-step-premium:nth-child(2) .about-step-image {
    animation-delay: -1s;
}

.about-step-premium:nth-child(3) .about-step-image {
    animation-delay: -2s;
}

.about-step-premium:nth-child(4) .about-step-image {
    animation-delay: -3s;
}

.about-step-premium:hover .about-step-glow {
    transform: scale(1.25);
    opacity: 1;
}

.about-step-premium:hover .about-step-image {
    animation-play-state: paused;

    transform:
        translateY(-7px)
        scale(1.08)
        rotate(-2deg);

    filter:
        drop-shadow(0 22px 28px rgba(76, 28, 24, 0.27))
        saturate(1.10)
        contrast(1.04);
}

.about-step-content {
    flex: 1;

    padding: 12px 24px 27px;
}

.about-step-premium h3 {
    margin: 0 0 10px;

    color: var(--ink);

    font-size: 23px;
    line-height: 1.22;
    letter-spacing: -0.026em;
}

.about-step-premium p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.72;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .about-step-image {
        animation: none;
    }
}

@media (max-width: 1100px) {
    .about-step-grid-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-step-premium {
        min-height: 365px;
    }
}

@media (max-width: 650px) {
    .about-step-grid-premium {
        grid-template-columns: 1fr;
    }

    .about-step-premium {
        min-height: auto;
    }

    .about-step-image-wrap {
        height: 190px;
    }

    .about-step-image {
        width: 154px;
        height: 154px;
    }
}
/* ABOUT PAGE — BALANCED SIDE COLUMN */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:30px;align-items:start}.about-intro-copy{height:auto;padding:34px}.about-title{margin:18px 0 22px;font-size:clamp(44px,4.4vw,62px);line-height:1.03;letter-spacing:-.052em}.about-intro-copy .lead{font-size:15.5px;line-height:1.74}.about-text{margin-top:17px;font-size:14px;line-height:1.78}.about-tags{gap:8px;margin-top:24px;padding-top:20px}.about-tags span{padding:8px 13px;font-size:11px}.about-side-column{display:grid;gap:16px;min-width:0}.about-metrics{display:grid;gap:12px;height:auto}.about-metric{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;min-height:auto;height:auto;padding:18px 20px;border-radius:20px}.about-metric-number{width:42px;height:42px;border-radius:13px;font-size:12px}.about-metric h3{margin:0 0 5px;font-size:16px;line-height:1.28}.about-metric p{margin:0;font-size:12.5px;line-height:1.58}.about-highlights-card{padding:22px;border:1px solid rgba(230,218,210,.94);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,239,.96));box-shadow:0 18px 48px rgba(72,31,24,.08)}.about-side-heading{margin-bottom:16px}.about-side-heading .eyebrow{margin-bottom:10px}.about-side-heading h3{max-width:410px;margin:0;font-size:22px;line-height:1.25;letter-spacing:-.025em}.about-highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.about-highlight-item{display:flex;align-items:flex-start;gap:9px;min-height:58px;padding:12px;border:1px solid rgba(230,218,210,.8);border-radius:15px;background:rgba(255,255,255,.72)}.about-highlight-item span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--wine));color:#fff;font-size:11px;font-weight:900}.about-highlight-item p{margin:1px 0 0;color:var(--ink);font-size:12px;line-height:1.45;font-weight:750}.about-side-photo{position:relative;min-height:235px;margin:0;overflow:hidden;border:1px solid rgba(230,218,210,.92);border-radius:23px;background:#2d1719;box-shadow:0 22px 58px rgba(72,31,24,.13)}.about-side-photo img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;transition:transform .65s ease}.about-side-photo:hover img{transform:scale(1.055)}.about-side-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,17,20,.02) 35%,rgba(36,17,20,.82) 100%);pointer-events:none}.about-side-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}.about-side-photo figcaption span{display:block;margin-bottom:4px;color:#ffd4a5;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-side-photo figcaption strong{display:block;max-width:360px;font-size:18px;line-height:1.25}@media(max-width:1000px){.about-intro-grid{grid-template-columns:1fr}.about-side-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.about-metrics,.about-side-photo{grid-column:1/-1}}@media(max-width:700px){.about-side-column{grid-template-columns:1fr}.about-metrics,.about-side-photo{grid-column:auto}.about-highlights-grid{grid-template-columns:1fr}.about-intro-copy{padding:25px 20px}.about-title{font-size:40px}.about-side-photo img{height:225px}}

/* =========================================================
   ABOUT OVERVIEW — NATURAL HEIGHT, NO EMPTY LEFT PANEL
   ========================================================= */

.about-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(390px, 0.96fr);
    gap: 30px;
    align-items: start;
}

/* Left card follows its actual content height */
.about-intro-copy {
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
}

/* Right column stacks naturally without forcing left card height */
.about-side-column {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    align-content: start;
    align-self: start;
}

/* Compact image with balanced proportion */
.about-side-photo-fill {
    min-height: 0;
    height: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
}

.about-side-photo-fill img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

/* Slightly tighter spacing at the bottom of the left card */
.about-tags {
    margin-bottom: 0;
}

/* Keep card proportions compact and consistent */
.about-highlights-card {
    padding: 21px;
}

.about-highlights-grid {
    gap: 9px;
}

.about-highlight-item {
    min-height: 54px;
    padding: 11px;
}

@media (max-width: 1000px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
    }

    .about-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        align-items: start;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: 1 / -1;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 700px) {
    .about-side-column {
        grid-template-columns: 1fr;
    }

    .about-metrics,
    .about-side-photo-fill {
        grid-column: auto;
    }

    .about-side-photo-fill {
        aspect-ratio: 16 / 10;
    }
}


/* =========================================================
   GOVERNANCE CARDS — APPLE / FLUENT PREMIUM STYLE
   ========================================================= */

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.about-value-card-premium {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 162px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,248,239,.74));
    box-shadow:
        0 18px 46px rgba(72,31,24,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        box-shadow .38s cubic-bezier(.2,.8,.2,1),
        border-color .38s ease;
}

.about-value-card-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,177,64,.20), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.06));
}

.about-value-card-premium::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    z-index: -1;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(245,130,32,.18), rgba(143,52,56,.05) 48%, transparent 72%);
    transition: transform .45s ease, opacity .45s ease;
}

.about-value-card-premium:hover {
    transform: translateY(-9px) scale(1.015);
    border-color: rgba(245,130,32,.30);
    box-shadow:
        0 32px 76px rgba(72,31,24,.16),
        0 12px 30px rgba(245,130,32,.10),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.about-value-card-premium:hover::after {
    transform: scale(1.22);
}

.about-value-icon-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,240,219,.74));
    box-shadow:
        0 16px 34px rgba(95,36,31,.13),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease;
}

.about-value-glow {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,176,56,.52), rgba(245,130,32,.22) 42%, transparent 72%);
    filter: blur(10px);
    opacity: .80;
    transition: transform .42s ease, opacity .42s ease;
}

.about-value-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 16px rgba(76,28,24,.20))
        saturate(1.04)
        contrast(1.02);
    transform: translateY(-3px);
    animation: aboutIconFloat 4.6s ease-in-out infinite;
    transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease;
}

.about-value-card-premium:nth-child(2) .about-value-image { animation-delay: -.8s; }
.about-value-card-premium:nth-child(3) .about-value-image { animation-delay: -1.6s; }
.about-value-card-premium:nth-child(4) .about-value-image { animation-delay: -2.4s; }

.about-value-card-premium:hover .about-value-icon-wrap {
    transform: translateY(-8px) rotate(-2deg);
    box-shadow:
        0 24px 46px rgba(95,36,31,.18),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.about-value-card-premium:hover .about-value-glow {
    transform: scale(1.22);
    opacity: 1;
}

.about-value-card-premium:hover .about-value-image {
    animation-play-state: paused;
    transform: translateY(-7px) scale(1.10) rotate(-3deg);
    filter:
        drop-shadow(0 18px 22px rgba(76,28,24,.26))
        saturate(1.10)
        contrast(1.04);
}

.about-value-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.about-value-card-premium h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.24;
    letter-spacing: -.022em;
}

.about-value-card-premium p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

@keyframes aboutIconFloat {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .about-value-image { animation: none; }
}

@media (max-width: 700px) {
    .about-value-grid {
        grid-template-columns: 1fr;
    }

    .about-value-card-premium {
        min-height: 136px;
        padding: 18px;
        border-radius: 21px;
    }

    .about-value-icon-wrap {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }

    .about-value-image {
        width: 67px;
        height: 67px;
    }

    .about-value-card-premium h3 {
        font-size: 18px;
    }

    .about-value-card-premium p {
        font-size: 13px;
    }
}


/* =========================================================
   HOW WE WORK — PREMIUM IMAGE CARDS
   ========================================================= */

.about-journey {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(255, 202, 124, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(143, 52, 56, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff8ef 0%,
            #fffdf9 100%
        );
}

.about-journey::before {
    content: "";

    position: absolute;
    top: -170px;
    right: -150px;

    width: 390px;
    height: 390px;

    border: 72px solid rgba(245, 130, 32, 0.045);
    border-radius: 50%;

    pointer-events: none;
}

.about-journey-head {
    position: relative;
    z-index: 2;

    margin-bottom: 34px;
}

.about-journey-head > div {
    max-width: 820px;
}

.about-step-grid-premium {
    position: relative;
    z-index: 2;

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

    gap: 18px;
}

.about-step-premium {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-height: 390px;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 249, 241, 0.78)
        );

    box-shadow:
        0 20px 54px rgba(72, 31, 24, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);

    transition:
        transform 0.38s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.38s cubic-bezier(.2,.8,.2,1),
        border-color 0.38s ease;
}

.about-step-premium::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(255, 177, 64, 0.18),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.46),
            rgba(255, 255, 255, 0.05)
        );
}

.about-step-premium::after {
    content: "";

    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--gold),
            var(--wine)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.38s ease;
}

.about-step-premium:hover {
    transform: translateY(-10px) scale(1.012);

    border-color: rgba(245, 130, 32, 0.30);

    box-shadow:
        0 34px 82px rgba(72, 31, 24, 0.16),
        0 14px 34px rgba(245, 130, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.about-step-premium:hover::after {
    transform: scaleX(1);
}

.about-step-image-wrap {
    position: relative;

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

    height: 205px;
    padding: 22px 20px 8px;

    overflow: hidden;
}

.about-step-image-wrap::after {
    content: "";

    position: absolute;

    width: 138px;
    height: 138px;

    border: 1px solid rgba(245, 130, 32, 0.12);
    border-radius: 50%;

    pointer-events: none;
}

.about-step-glow {
    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 178, 66, 0.45),
            rgba(245, 130, 32, 0.18) 46%,
            transparent 72%
        );

    filter: blur(16px);

    opacity: 0.80;

    transition:
        transform 0.42s ease,
        opacity 0.42s ease;
}

.about-step-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 168px;
    height: 168px;

    object-fit: contain;

    filter:
        drop-shadow(0 16px 22px rgba(76, 28, 24, 0.20))
        saturate(1.04)
        contrast(1.02);

    animation: aboutStepFloat 5s ease-in-out infinite;

    transition:
        transform 0.44s cubic-bezier(.2,.8,.2,1),
        filter 0.44s ease;
}

.about-step-premium:nth-child(2) .about-step-image {
    animation-delay: -1s;
}

.about-step-premium:nth-child(3) .about-step-image {
    animation-delay: -2s;
}

.about-step-premium:nth-child(4) .about-step-image {
    animation-delay: -3s;
}

.about-step-premium:hover .about-step-glow {
    transform: scale(1.25);
    opacity: 1;
}

.about-step-premium:hover .about-step-image {
    animation-play-state: paused;

    transform:
        translateY(-7px)
        scale(1.08)
        rotate(-2deg);

    filter:
        drop-shadow(0 22px 28px rgba(76, 28, 24, 0.27))
        saturate(1.10)
        contrast(1.04);
}

.about-step-content {
    flex: 1;

    padding: 12px 24px 27px;
}

.about-step-premium h3 {
    margin: 0 0 10px;

    color: var(--ink);

    font-size: 23px;
    line-height: 1.22;
    letter-spacing: -0.026em;
}

.about-step-premium p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.72;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .about-step-image {
        animation: none;
    }
}

@media (max-width: 1100px) {
    .about-step-grid-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-step-premium {
        min-height: 365px;
    }
}

@media (max-width: 650px) {
    .about-step-grid-premium {
        grid-template-columns: 1fr;
    }

    .about-step-premium {
        min-height: auto;
    }

    .about-step-image-wrap {
        height: 190px;
    }

    .about-step-image {
        width: 154px;
        height: 154px;
    }
}


/* =========================================================
   HOW WE WORK — IMAGE AS THE COMPLETE CARD
   ========================================================= */

.about-step-grid-image-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.about-step-image-card {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;

    border: 1px solid rgba(230, 218, 210, 0.92);
    border-radius: 24px;

    background: #fffaf4;

    box-shadow:
        0 18px 48px rgba(72, 31, 24, 0.10);

    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.about-step-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    border-radius: inherit;

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

.about-step-image-card img {
    display: block;
    width: 100%;
    height: 100%;

    aspect-ratio: 2 / 3;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        filter 0.45s ease;
}

.about-step-image-card:hover {
    transform: translateY(-9px);

    border-color: rgba(245, 130, 32, 0.34);

    box-shadow:
        0 30px 76px rgba(72, 31, 24, 0.17),
        0 12px 26px rgba(245, 130, 32, 0.08);
}

.about-step-image-card:hover img {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.02);
}

@media (max-width: 1100px) {
    .about-step-grid-image-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-step-image-card img {
        aspect-ratio: 3 / 4;
    }
}

@media (max-width: 620px) {
    .about-step-grid-image-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-step-image-card {
        max-width: 420px;
        margin-inline: auto;
    }

    .about-step-image-card img {
        aspect-ratio: 2 / 3;
    }
}

<?php
require __DIR__ . '/includes/bootstrap.php';

$pageTitle = 'Our Services — Gsystem Certification';
$activePage = 'services';

require __DIR__ . '/includes/header.php';
?>

<section class="services-hero">
    <div class="container services-hero-grid">
        <div class="services-hero-copy">
            <span class="eyebrow">Our services</span>
            <h1>Certification services built for <span class="gradient-text">clarity, confidence, and measurable outcomes.</span></h1>
            <p class="lead">Choose a route that matches your organization, industry, and certification scope. Every service includes clear requirements, structured checkpoints, and verifiable outcomes.</p>

            <div class="hero-actions">
                <a class="btn btn-dark" href="<?= e(base_url('contact.php')) ?>">Request a proposal</a>
                <a class="btn btn-outline" href="#process">See the process</a>
            </div>

            <div class="services-trust-row">
                <span>✓ Independent assessment</span>
                <span>✓ Qualified professionals</span>
                <span>✓ Verifiable outcomes</span>
            </div>
        </div>

        <div class="services-hero-visual">
            <div class="services-photo-glow" aria-hidden="true"></div>

            <div class="services-photo-frame">
                <img src="<?= e(base_url('assets/img/services-hero.webp')) ?>" alt="Professional auditor presenting certification documents to business executives" class="services-photo" loading="eager" fetchpriority="high">
                <div class="services-photo-overlay" aria-hidden="true"></div>
                <div class="services-photo-shine" aria-hidden="true"></div>

                <div class="services-floating-card services-floating-card-top">
                    <span class="services-floating-icon">✓</span>
                    <span>Independent Assessment<small>Impartial and evidence-based</small></span>
                </div>

                <div class="services-floating-card services-floating-card-bottom">
                    <span class="services-floating-icon">◎</span>
                    <span>Audit-Ready Process<small>Clear scope and checkpoints</small></span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section services-core">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">Core service lines</span>
                <h2>Specialized services for every certification pathway.</h2>
                <p>Programs can be adapted to your sector, organization size, operational risks, and applicable regulatory requirements.</p>
            </div>
        </div>

        <div class="services-card-grid">
            <article class="services-card">
                <div class="services-card-image">
                    <img src="<?= e(base_url('assets/img/inspection-bodies.webp')) ?>" alt="Inspection Bodies" loading="lazy">
                    <div class="services-card-overlay" aria-hidden="true"></div>
                </div>
                <div class="services-card-content">
                    <span class="services-card-label">Inspection</span>
                    <h3>Inspection Bodies</h3>
                    <p>Assessment frameworks, authorization, impartiality controls, method control, and evidence traceability.</p>
                    <a href="<?= e(base_url('contact.php')) ?>" class="link-arrow">Discuss this service →</a>
                </div>
            </article>

            <article class="services-card">
                <div class="services-card-image">
                    <img src="<?= e(base_url('assets/img/management-system-certification.webp')) ?>" alt="Management System Certification" loading="lazy">
                    <div class="services-card-overlay" aria-hidden="true"></div>
                </div>
                <div class="services-card-content">
                    <span class="services-card-label">Certification</span>
                    <h3>Management System Certification</h3>
                    <p>Audit program governance, competence criteria, decision rules, surveillance, and recertification support.</p>
                    <a href="<?= e(base_url('contact.php')) ?>" class="link-arrow">Discuss this service →</a>
                </div>
            </article>

            <article class="services-card">
                <div class="services-card-image services-card-image-personnel"><div class="services-card-symbol" aria-hidden="true">👤</div></div>
                <div class="services-card-content">
                    <span class="services-card-label">Personnel</span>
                    <h3>Personnel Certification</h3>
                    <p>Role analysis, examination methods, competence criteria, complaints handling, and certification decision governance.</p>
                    <a href="<?= e(base_url('contact.php')) ?>" class="link-arrow">Discuss this service →</a>
                </div>
            </article>

            <article class="services-card">
                <div class="services-card-image services-card-image-product"><div class="services-card-symbol" aria-hidden="true">📦</div></div>
                <div class="services-card-content">
                    <span class="services-card-label">Product</span>
                    <h3>Product Certification</h3>
                    <p>Scheme rules, sampling and testing approaches, process assessment, marking requirements, and misuse controls.</p>
                    <a href="<?= e(base_url('contact.php')) ?>" class="link-arrow">Discuss this service →</a>
                </div>
            </article>

            <article class="services-card">
                <div class="services-card-image">
                    <img src="<?= e(base_url('assets/img/testing-calibration.webp')) ?>" alt="Testing and Calibration Laboratories" loading="lazy">
                    <div class="services-card-overlay" aria-hidden="true"></div>
                </div>
                <div class="services-card-content">
                    <span class="services-card-label">Laboratory</span>
                    <h3>Testing &amp; Calibration Laboratories</h3>
                    <p>Measurement traceability, uncertainty, quality control, method validation, and technical review.</p>
                    <a href="<?= e(base_url('contact.php')) ?>" class="link-arrow">Discuss this service →</a>
                </div>
            </article>

            <article class="services-card">
                <div class="services-card-image services-card-image-documentation"><div class="services-card-symbol" aria-hidden="true">📚</div></div>
                <div class="services-card-content">
                    <span class="services-card-label">Readiness</span>
                    <h3>Documentation Toolkit</h3>
                    <p>Templates, records, evidence structures, and document controls designed to support review and surveillance.</p>
                    <a href="<?= e(base_url('contact.php')) ?>" class="link-arrow">Discuss this service →</a>
                </div>
            </article>
        </div>
    </div>
</section>

<section class="section section-soft services-benefits">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">Why Gsystem</span>
                <h2>Professional support from preparation to decision.</h2>
                <p>Our approach combines technical expertise, impartial governance, transparent communication, and audit-ready evidence.</p>
            </div>
        </div>

        <div class="services-benefit-grid">
            <article class="services-benefit-card"><span class="services-benefit-icon">🛡️</span><h3>Independent Certification</h3><p>Decisions are separated from commercial influence and supported by documented evidence.</p></article>
            <article class="services-benefit-card"><span class="services-benefit-icon">👨‍💼</span><h3>Qualified Auditors</h3><p>Competent professionals with sector knowledge, technical experience, and defined responsibilities.</p></article>
            <article class="services-benefit-card"><span class="services-benefit-icon">📄</span><h3>International Standards</h3><p>Structured approaches aligned with widely accepted management system and conformity frameworks.</p></article>
            <article class="services-benefit-card"><span class="services-benefit-icon">🌍</span><h3>Market Confidence</h3><p>Clear, traceable, and verifiable certification outcomes that strengthen stakeholder trust.</p></article>
        </div>
    </div>
</section>

<section id="process" class="section services-process">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">Our process</span>
                <h2>A predictable five-step certification journey.</h2>
                <p>From the initial discussion to the final decision, each stage has a clear purpose and expected outcome.</p>
            </div>
        </div>

        <div class="services-timeline">
            <article class="services-step"><span>01</span><h3>Discovery</h3><p>Scope, standards, business objectives, and certification requirements are mapped.</p></article>
            <article class="services-step"><span>02</span><h3>Gap Assessment</h3><p>Current readiness, available evidence, and priority gaps are reviewed.</p></article>
            <article class="services-step"><span>03</span><h3>Action Plan</h3><p>Prioritized improvements, responsibilities, and implementation milestones are defined.</p></article>
            <article class="services-step"><span>04</span><h3>Verification</h3><p>Evidence is verified, findings are reviewed, and required corrective actions are closed.</p></article>
            <article class="services-step"><span>05</span><h3>Decision</h3><p>The certification result is independently reviewed, finalized, and published where applicable.</p></article>
        </div>
    </div>
</section>

<section class="section services-cta-section">
    <div class="container">
        <div class="cta services-cta">
            <div>
                <span class="services-cta-label">Start with your scope</span>
                <h2>Not sure which service fits your organization?</h2>
                <p>Tell us your sector, target standard, current status, and preferred timeline. We will recommend the right pathway.</p>
            </div>
            <a class="btn btn-primary" href="<?= e(base_url('contact.php')) ?>">Request a consultation</a>
        </div>
    </div>
</section>

<?php require __DIR__ . '/includes/footer.php'; ?>
/* =========================================================
   OUR SERVICES — PREMIUM HERO ONLY
   Tempelkan di bagian PALING BAWAH style.css
   ========================================================= */

.services-hero-premium {
    position: relative;
    overflow: hidden;
    padding: 88px 0 92px;
    background:
        radial-gradient(circle at 7% 12%, rgba(255, 196, 104, 0.24), transparent 30%),
        radial-gradient(circle at 93% 12%, rgba(143, 52, 56, 0.13), transparent 32%),
        linear-gradient(135deg, #fff6e8 0%, #fffdf9 48%, #fff0ef 100%);
}

.services-hero-premium::before {
    content: "";
    position: absolute;
    left: -140px;
    bottom: -190px;
    width: 420px;
    height: 420px;
    border: 78px solid rgba(245, 130, 32, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.services-hero-premium::after {
    content: "";
    position: absolute;
    top: 70px;
    right: -110px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 52, 56, 0.09), transparent 68%);
    pointer-events: none;
}

.services-hero-premium-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(470px, 1.08fr);
    gap: 64px;
    align-items: center;
}

.services-hero-premium-copy h1 {
    max-width: 720px;
    margin: 22px 0 24px;
    font-size: clamp(54px, 5.4vw, 82px);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.services-hero-premium-copy .lead {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.75;
}

.services-hero-premium-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.services-hero-premium-trust span {
    padding: 9px 13px;
    border: 1px solid rgba(230, 218, 210, 0.88);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(72, 31, 24, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.services-hero-premium-visual { position: relative; }

.services-hero-premium-glow {
    position: absolute;
    inset: 8% 6%;
    border-radius: 40px;
    background: radial-gradient(circle at 50% 50%, rgba(245, 130, 32, 0.24), transparent 64%);
    filter: blur(38px);
    pointer-events: none;
}

.services-hero-premium-frame {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 34px 86px rgba(72, 31, 24, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.services-hero-premium-image {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 26px;
    transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.7s ease;
}

.services-hero-premium-frame:hover .services-hero-premium-image {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.02);
}

.services-hero-premium-overlay {
    position: absolute;
    inset: 10px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(53, 20, 23, 0.02) 42%, rgba(53, 20, 23, 0.34) 100%);
    pointer-events: none;
}

.services-hero-premium-shine {
    position: absolute;
    top: 24px;
    left: 28px;
    width: 44%;
    height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    filter: blur(24px);
    transform: rotate(-12deg);
    pointer-events: none;
}

.services-hero-premium-badge {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    box-shadow: 0 18px 44px rgba(72, 31, 24, 0.17);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.services-hero-premium-badge-top { top: 32px; left: -38px; }
.services-hero-premium-badge-bottom { right: -34px; bottom: 34px; }

.services-hero-premium-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--orange), var(--wine));
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(143, 52, 56, 0.22);
}

.services-hero-premium-badge > span:last-child {
    font-size: 12px;
    font-weight: 850;
    line-height: 1.28;
}

.services-hero-premium-badge small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 650;
}

@media (max-width: 1100px) {
    .services-hero-premium-grid { grid-template-columns: 1fr; }
    .services-hero-premium-copy { max-width: 800px; }
    .services-hero-premium-visual { max-width: 800px; }
}

@media (max-width: 700px) {
    .services-hero-premium { padding: 70px 0 64px; }
    .services-hero-premium-grid { gap: 36px; }
    .services-hero-premium-copy h1 { font-size: 46px; }
    .services-hero-premium-image { height: 340px; }
    .services-hero-premium-badge { position: static; margin-top: 10px; }
    .services-hero-premium-frame { display: flex; flex-direction: column; }
}
/* =========================================================
   SERVICES HERO — FULL BACKGROUND PREMIUM
   ========================================================= */

.services-cover-hero {
    position: relative;
    min-height: 690px;
    overflow: hidden;

    display: flex;
    align-items: center;

    background: #3f211e;
}

.services-cover-background {
    position: absolute;
    inset: 0;
}

.services-cover-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 48%;

    transform: scale(1.015);
}

.services-cover-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(43, 20, 18, 0.88) 0%,
            rgba(70, 33, 25, 0.70) 42%,
            rgba(79, 40, 30, 0.24) 70%,
            rgba(79, 40, 30, 0.08) 100%
        );
}

.services-cover-gradient {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 205, 132, 0.12) 0%,
            transparent 34%,
            rgba(44, 20, 18, 0.28) 100%
        );
}

.services-cover-content {
    position: relative;
    z-index: 3;

    width: 100%;
}

.services-cover-copy {
    max-width: 690px;

    padding: 86px 0 78px;
}

.services-cover-eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    color: #fff7ed;

    font-size: 20px;
    font-weight: 800;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.28);
}

.services-cover-copy h1 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: clamp(54px, 5vw, 78px);
    line-height: 1.04;
    letter-spacing: -0.055em;

    text-shadow:
        0 5px 28px rgba(0, 0, 0, 0.30);
}

.services-cover-copy p {
    max-width: 680px;

    margin: 0;

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

    font-size: 18px;
    line-height: 1.78;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.28);
}

.services-cover-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 29px;
}

.services-cover-primary {
    border: 1px solid rgba(255, 199, 139, 0.68);

    background:
        linear-gradient(
            135deg,
            #8f252b,
            #a83a31
        );

    color: #ffffff;

    box-shadow:
        0 15px 34px rgba(79, 17, 22, 0.30);
}

.services-cover-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 21px 43px rgba(79, 17, 22, 0.40);
}

.services-cover-secondary {
    border: 1px solid rgba(255, 255, 255, 0.88);

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

    color: #2a1718;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.14);

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

.services-cover-secondary:hover {
    background: #ffffff;

    transform: translateY(-3px);
}

.services-cover-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 25px;
}

.services-cover-trust span {
    color: rgba(255, 255, 255, 0.95);

    font-size: 13px;
    font-weight: 750;

    text-shadow:
        0 2px 11px rgba(0, 0, 0, 0.32);
}

/* Tablet */

@media (max-width: 1000px) {

    .services-cover-hero {
        min-height: 650px;
    }

    .services-cover-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(43, 20, 18, 0.88) 0%,
                rgba(70, 33, 25, 0.67) 58%,
                rgba(79, 40, 30, 0.24) 100%
            );
    }

    .services-cover-copy {
        max-width: 650px;
    }

}

/* Mobile */

@media (max-width: 700px) {

    .services-cover-hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .services-cover-image {
        object-position: 62% center;
    }

    .services-cover-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(43, 20, 18, 0.16) 0%,
                rgba(43, 20, 18, 0.50) 40%,
                rgba(43, 20, 18, 0.94) 100%
            );
    }

    .services-cover-copy {
        max-width: none;

        padding: 210px 0 52px;
    }

    .services-cover-eyebrow {
        font-size: 16px;
    }

    .services-cover-copy h1 {
        font-size: 45px;
        line-height: 1.02;
    }

    .services-cover-copy p {
        font-size: 15px;
        line-height: 1.68;
    }

    .services-cover-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-cover-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .services-cover-trust {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

}


/* =========================================================
   SERVICES HERO — PROPORTIONAL CONTAINER ALIGNMENT
   Letakkan di bagian PALING BAWAH style.css
   ========================================================= */

.services-cover-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 570px;
    overflow: hidden;

    background: #3f211e;
}

/* Gambar tetap memenuhi seluruh lebar hero */
.services-cover-background {
    position: absolute;
    inset: 0;
}

.services-cover-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 47%;
}

/* Overlay dibuat lebih lembut */
.services-cover-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(39, 17, 17, 0.88) 0%,
            rgba(55, 25, 22, 0.76) 27%,
            rgba(66, 31, 25, 0.46) 50%,
            rgba(66, 31, 25, 0.12) 78%,
            rgba(66, 31, 25, 0.05) 100%
        );
}

.services-cover-gradient {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 204, 135, 0.10) 0%,
            transparent 38%,
            rgba(38, 17, 17, 0.24) 100%
        );
}

/* Bagian penting:
   konten hero mengikuti lebar konten halaman */
.services-cover-content {
    position: relative;
    z-index: 3;

    width: min(calc(100% - 48px), 1120px);
    max-width: 1120px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 0;
    padding-left: 0;
}

.services-cover-copy {
    width: 100%;
    max-width: 590px;

    padding: 72px 0 68px;
}

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

    margin-bottom: 17px;
    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;

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

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

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

.services-cover-copy h1 {
    max-width: 580px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(48px, 4.5vw, 67px);
    line-height: 1.01;
    letter-spacing: -0.052em;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.30);
}

.services-cover-copy p {
    max-width: 550px;

    margin: 0;

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

    font-size: 16px;
    line-height: 1.72;

    text-shadow:
        0 3px 14px rgba(0, 0, 0, 0.28);
}

.services-cover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 25px;
}

.services-cover-actions .btn {
    min-height: 48px;
    padding: 13px 20px;
}

.services-cover-primary {
    border: 1px solid rgba(255, 196, 138, 0.60);

    background:
        linear-gradient(
            135deg,
            #83262c,
            #a03b31
        );

    color: #ffffff;

    box-shadow:
        0 14px 30px rgba(65, 14, 18, 0.30);
}

.services-cover-secondary {
    border: 1px solid rgba(255, 255, 255, 0.88);

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

    color: #281719;

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

.services-cover-primary:hover,
.services-cover-secondary:hover {
    transform: translateY(-3px);
}

.services-cover-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;

    margin-top: 21px;
}

.services-cover-trust span {
    color: rgba(255, 255, 255, 0.94);

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

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.30);
}

/* Laptop dengan layar sangat lebar */
@media (min-width: 1440px) {
    .services-cover-content {
        width: min(calc(100% - 64px), 1120px);
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .services-cover-hero {
        min-height: 590px;
    }

    .services-cover-content {
        width: min(calc(100% - 40px), 920px);
    }

    .services-cover-copy {
        max-width: 570px;
    }

    .services-cover-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(39, 17, 17, 0.88) 0%,
                rgba(55, 25, 22, 0.72) 50%,
                rgba(55, 25, 22, 0.22) 100%
            );
    }
}

/* HP */
@media (max-width: 700px) {
    .services-cover-hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .services-cover-content {
        width: calc(100% - 32px);
    }

    .services-cover-image {
        object-position: 64% center;
    }

    .services-cover-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(40, 18, 18, 0.10) 0%,
                rgba(40, 18, 18, 0.42) 36%,
                rgba(40, 18, 18, 0.94) 100%
            );
    }

    .services-cover-copy {
        max-width: none;
        padding: 220px 0 44px;
    }

    .services-cover-copy h1 {
        max-width: 100%;

        font-size: 43px;
        line-height: 1.02;
    }

    .services-cover-copy p {
        max-width: 100%;

        font-size: 15px;
        line-height: 1.65;
    }

    .services-cover-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .services-cover-actions .btn {
        display: flex;
        justify-content: center;

        width: 100%;
    }

    .services-cover-trust {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

/* =========================================================
   SERVICES HERO — LOWER CONTENT POSITION
   ========================================================= */

/* Beri ruang lebih besar di bawah navbar */
.services-cover-hero {
    min-height: 610px;
    padding-top: 54px;
}

/* Turunkan seluruh kelompok teks */
.services-cover-copy {
    padding-top: 118px;
    padding-bottom: 68px;
}

/* Sedikit rapikan lebar judul */
.services-cover-copy h1 {
    max-width: 600px;
}

/* Layar desktop besar */
@media (min-width: 1200px) {
    .services-cover-copy {
        padding-top: 132px;
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .services-cover-hero {
        padding-top: 42px;
    }

    .services-cover-copy {
        padding-top: 110px;
    }
}

/* HP */
@media (max-width: 700px) {
    .services-cover-hero {
        padding-top: 24px;
    }

    .services-cover-copy {
        padding-top: 250px;
        padding-bottom: 46px;
    }
}

/* =========================================================
   SERVICES PAGE — PREMIUM FINAL
   Tempelkan di bagian PALING BAWAH style.css
   ========================================================= */

.services-cover-hero {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #351716;
}

.services-cover-background {
    position: absolute;
    inset: 0;
}

.services-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
}

.services-cover-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(37, 15, 15, 0.90) 0%,
            rgba(54, 23, 21, 0.76) 30%,
            rgba(66, 31, 25, 0.48) 52%,
            rgba(66, 31, 25, 0.14) 78%,
            rgba(66, 31, 25, 0.05) 100%
        );
}

.services-cover-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 205, 132, 0.09) 0%,
            transparent 38%,
            rgba(35, 15, 15, 0.25) 100%
        );
}

.services-cover-content {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 48px), 1120px);
    max-width: 1120px;
    margin-inline: auto;
}

.services-cover-copy {
    max-width: 600px;
    padding: 145px 0 72px;
}

.services-cover-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.services-cover-copy h1 {
    max-width: 600px;
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(50px, 4.6vw, 68px);
    line-height: 1.01;
    letter-spacing: -0.052em;
    text-shadow: 0 5px 25px rgba(0,0,0,.30);
}

.services-cover-accent {
    color: #ffc67f;
}

.services-cover-copy p {
    max-width: 550px;
    margin: 0;
    color: rgba(255,255,255,.90);
    font-size: 16px;
    line-height: 1.72;
    text-shadow: 0 3px 14px rgba(0,0,0,.28);
}

.services-cover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.services-cover-actions .btn {
    min-height: 48px;
    padding: 13px 20px;
}

.services-cover-primary {
    border: 1px solid rgba(255,196,138,.60);
    background: linear-gradient(135deg, #81252b, #a13b31);
    color: #fff;
    box-shadow: 0 14px 30px rgba(65,14,18,.30);
}

.services-cover-secondary {
    border: 1px solid rgba(255,255,255,.88);
    background: rgba(255,255,255,.94);
    color: #281719;
    box-shadow: 0 12px 28px rgba(0,0,0,.13);
}

.services-cover-primary:hover,
.services-cover-secondary:hover {
    transform: translateY(-3px);
}

.services-cover-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 21px;
}

.services-cover-trust span {
    color: rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 750;
    text-shadow: 0 2px 10px rgba(0,0,0,.30);
}

.services-core-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,188,89,.12), transparent 28%),
        linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%);
}

.services-core-section::before {
    content: "";
    position: absolute;
    top: 90px;
    right: -140px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    border: 65px solid rgba(245,130,32,.035);
    pointer-events: none;
}

.services-section-head {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin-bottom: 36px;
}

.services-section-head h2 {
    margin: 12px 0 12px;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.services-section-head p {
    max-width: 720px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.72;
}

.services-premium-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.services-premium-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 470px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,248,239,.82));
    box-shadow:
        0 20px 54px rgba(72,31,24,.09),
        inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        box-shadow .38s ease,
        border-color .38s ease;
}

.services-premium-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,177,64,.18), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.06));
}

.services-premium-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange), var(--wine));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.services-premium-card:hover {
    transform: translateY(-10px);
    border-color: rgba(245,130,32,.30);
    box-shadow:
        0 34px 82px rgba(72,31,24,.16),
        0 12px 28px rgba(245,130,32,.08),
        inset 0 1px 0 rgba(255,255,255,.98);
}

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

.services-premium-visual {
    position: relative;
    height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 20px 0;
}

.services-card-glow {
    position: absolute;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,179,68,.38), rgba(245,130,32,.16) 48%, transparent 72%);
    filter: blur(20px);
    transition: transform .42s ease, opacity .42s ease;
}

.services-premium-visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: 205px;
    height: 205px;
    object-fit: contain;
    filter:
        drop-shadow(0 18px 24px rgba(76,28,24,.20))
        saturate(1.04)
        contrast(1.02);
    animation: servicesIconFloat 5.2s ease-in-out infinite;
    transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease;
}

.services-premium-card:nth-child(2) img { animation-delay: -1s; }
.services-premium-card:nth-child(3) img { animation-delay: -2s; }
.services-premium-card:nth-child(4) img { animation-delay: -3s; }
.services-premium-card:nth-child(5) img { animation-delay: -4s; }
.services-premium-card:nth-child(6) img { animation-delay: -5s; }

.services-premium-card:hover .services-card-glow {
    transform: scale(1.20);
}

.services-premium-card:hover img {
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.06);
    filter:
        drop-shadow(0 24px 30px rgba(76,28,24,.26))
        saturate(1.08)
        contrast(1.04);
}

.services-premium-body {
    padding: 12px 25px 28px;
}

.services-card-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(245,130,32,.10);
    color: var(--wine);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.services-premium-card h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.services-premium-card p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.72;
}

.services-card-link {
    display: inline-flex;
    color: var(--wine);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    transition: transform .25s ease, color .25s ease;
}

.services-card-link:hover {
    transform: translateX(4px);
    color: var(--orange);
}

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

.services-process-section {
    background:
        radial-gradient(circle at 90% 10%, rgba(143,52,56,.07), transparent 28%),
        linear-gradient(180deg, #fff6eb, #fffaf5);
}

.services-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.services-process-card {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.90);
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    box-shadow:
        0 16px 42px rgba(72,31,24,.08),
        inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .32s ease, box-shadow .32s ease;
}

.services-process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 58px rgba(72,31,24,.13);
}

.services-process-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 17px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--orange), var(--wine));
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(143,52,56,.20);
}

.services-process-card h3 {
    margin: 0 0 9px;
    font-size: 18px;
}

.services-process-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.65;
}

.services-cta {
    background:
        radial-gradient(circle at 85% 15%, rgba(255,193,99,.18), transparent 26%),
        linear-gradient(135deg, var(--wine), #a54830);
}

.services-cta,
.services-cta h2,
.services-cta p {
    color: #fff;
}

.services-cta-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #ffd8ad;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (max-width: 1100px) {
    .services-premium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .services-cover-hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .services-cover-content {
        width: calc(100% - 32px);
    }

    .services-cover-image {
        object-position: 65% center;
    }

    .services-cover-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(40,18,18,.10) 0%,
                rgba(40,18,18,.42) 36%,
                rgba(40,18,18,.94) 100%
            );
    }

    .services-cover-copy {
        max-width: none;
        padding: 250px 0 46px;
    }

    .services-cover-copy h1 {
        max-width: 100%;
        font-size: 43px;
    }

    .services-cover-copy p {
        max-width: 100%;
        font-size: 15px;
    }

    .services-cover-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .services-cover-actions .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .services-cover-trust {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .services-premium-grid,
    .services-process-grid {
        grid-template-columns: 1fr;
    }

    .services-premium-card {
        min-height: auto;
    }

    .services-premium-visual {
        height: 220px;
    }

    .services-premium-visual img {
        width: 185px;
        height: 185px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-premium-visual img {
        animation: none;
    }
}

/* =========================================================
   SERVICES — COMPACT PREMIUM CORE SERVICE CARDS
   Tempel di bagian PALING BAWAH style.css
   ========================================================= */

/* HERO tetap proporsional */
.services-cover-hero {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #351716;
}

.services-cover-background {
    position: absolute;
    inset: 0;
}

.services-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
}

.services-cover-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(37,15,15,.90) 0%,
            rgba(54,23,21,.76) 30%,
            rgba(66,31,25,.46) 52%,
            rgba(66,31,25,.10) 82%,
            rgba(66,31,25,.03) 100%
        );
}

.services-cover-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,205,132,.08), transparent 38%, rgba(35,15,15,.22));
}

.services-cover-content {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 48px), 1120px);
    margin-inline: auto;
}

.services-cover-copy {
    max-width: 600px;
    padding: 145px 0 72px;
}

.services-cover-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.services-cover-copy h1 {
    margin: 0 0 20px;
    max-width: 600px;
    color: #fff;
    font-size: clamp(50px, 4.6vw, 68px);
    line-height: 1.01;
    letter-spacing: -.052em;
}

.services-cover-accent {
    color: #ffc67f;
}

.services-cover-copy p {
    max-width: 550px;
    margin: 0;
    color: rgba(255,255,255,.90);
    font-size: 16px;
    line-height: 1.72;
}

.services-cover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.services-cover-actions .btn {
    min-height: 48px;
    padding: 13px 20px;
}

.services-cover-primary {
    border: 1px solid rgba(255,196,138,.60);
    background: linear-gradient(135deg, #81252b, #a13b31);
    color: #fff;
}

.services-cover-secondary {
    border: 1px solid rgba(255,255,255,.88);
    background: rgba(255,255,255,.94);
    color: #281719;
}

.services-cover-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 21px;
}

.services-cover-trust span {
    color: rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 750;
}


/* CORE SERVICES COMPACT */
.services-core-compact {
    background:
        radial-gradient(circle at 10% 8%, rgba(255,188,89,.10), transparent 28%),
        linear-gradient(180deg, #fffdf9 0%, #fff9f2 100%);
}

.services-compact-head {
    max-width: 820px;
    margin-bottom: 28px;
}

.services-compact-head h2 {
    margin: 12px 0 10px;
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.06;
    letter-spacing: -.04em;
}

.services-compact-head p {
    max-width: 720px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.services-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.services-compact-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 18px;
    align-items: center;

    min-height: 156px;
    padding: 18px 22px;

    border: 1px solid rgba(229,214,203,.90);
    border-radius: 22px;

    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,249,242,.90));

    box-shadow:
        0 14px 34px rgba(72,31,24,.06),
        inset 0 1px 0 rgba(255,255,255,.96);

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

.services-compact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245,130,32,.28);
    box-shadow:
        0 22px 50px rgba(72,31,24,.12),
        0 8px 18px rgba(245,130,32,.06);
}

.services-compact-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 86px;
    height: 86px;

    border-radius: 22px;

    background:
        radial-gradient(circle at 50% 50%, rgba(255,187,80,.16), transparent 70%),
        rgba(255,248,238,.76);
}

.services-compact-icon img {
    display: block;

    width: 78px;
    height: 78px;

    object-fit: contain;

    filter:
        drop-shadow(0 9px 14px rgba(76,28,24,.16))
        saturate(1.03);

    transition: transform .34s ease;
}

.services-compact-card:hover .services-compact-icon img {
    transform: translateY(-4px) scale(1.06);
}

.services-compact-copy h3 {
    margin: 0 0 8px;

    color: var(--ink);

    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.018em;
}

.services-compact-copy p {
    margin: 0;

    color: var(--muted);

    font-size: 12.5px;
    line-height: 1.62;
}


/* Tablet */
@media (max-width: 900px) {
    .services-compact-grid {
        grid-template-columns: 1fr;
    }
}


/* HP */
@media (max-width: 620px) {
    .services-cover-hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .services-cover-content {
        width: calc(100% - 32px);
    }

    .services-cover-image {
        object-position: 65% center;
    }

    .services-cover-copy {
        padding: 250px 0 46px;
    }

    .services-cover-copy h1 {
        font-size: 43px;
    }

    .services-cover-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .services-cover-trust {
        display: grid;
        grid-template-columns: 1fr;
    }

    .services-compact-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        min-height: 138px;
        padding: 15px 17px;
        border-radius: 19px;
    }

    .services-compact-icon {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }

    .services-compact-icon img {
        width: 66px;
        height: 66px;
    }

    .services-compact-copy h3 {
        font-size: 16px;
    }

    .services-compact-copy p {
        font-size: 12px;
    }
}

/* =========================================================
   GSYSTEM SERVICES — APPLE / FLUENT PREMIUM
   ========================================================= */


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

.services-cover-hero {
    position: relative;

    min-height: 610px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #351716;
}


.services-cover-background {
    position: absolute;
    inset: 0;
}


.services-cover-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 47%;
}


.services-cover-overlay {
    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(37, 15, 15, 0.91) 0%,
            rgba(54, 23, 21, 0.78) 30%,
            rgba(66, 31, 25, 0.48) 52%,
            rgba(66, 31, 25, 0.14) 80%,
            rgba(66, 31, 25, 0.04) 100%
        );
}


.services-cover-gradient {
    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(255, 205, 132, 0.08) 0%,
            transparent 38%,
            rgba(35, 15, 15, 0.26) 100%
        );
}


.services-cover-content {
    position: relative;
    z-index: 3;

    width: min(calc(100% - 48px), 1120px);

    margin-inline: auto;
}


.services-cover-copy {
    max-width: 600px;

    padding-top: 150px;
    padding-bottom: 72px;
}


.services-cover-eyebrow {
    display: inline-flex;

    margin-bottom: 18px;

    padding: 8px 14px;

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

    border-radius: 999px;

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

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

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


.services-cover-copy h1 {
    max-width: 600px;

    margin: 0 0 21px;

    color: #ffffff;

    font-size: clamp(50px, 4.5vw, 68px);

    line-height: 1.01;

    letter-spacing: -0.052em;

    text-shadow:
        0 6px 28px rgba(0,0,0,.32);
}


.services-cover-accent {
    display: block;

    color: #ffc77f;
}


.services-cover-copy p {
    max-width: 550px;

    margin: 0;

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

    font-size: 16px;

    line-height: 1.72;
}


.services-cover-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 26px;
}


.services-cover-actions .btn {
    min-height: 48px;

    padding: 13px 21px;
}


.services-cover-primary {
    border: 1px solid rgba(255,196,138,.65);

    background:

        linear-gradient(
            135deg,
            #81252b,
            #a23b31
        );

    color: #ffffff;

    box-shadow:
        0 15px 32px rgba(65,14,18,.31);
}


.services-cover-secondary {
    border: 1px solid rgba(255,255,255,.90);

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

    color: #281719;

    box-shadow:
        0 12px 28px rgba(0,0,0,.14);
}


.services-cover-primary:hover,
.services-cover-secondary:hover {
    transform: translateY(-3px);
}


.services-cover-trust {
    display: flex;

    flex-wrap: wrap;

    gap: 9px 17px;

    margin-top: 22px;
}


.services-cover-trust span {
    color: rgba(255,255,255,.95);

    font-size: 12px;

    font-weight: 750;
}



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

.services-core-premium {
    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 8% 8%,
            rgba(255,190,91,.11),
            transparent 27%
        ),

        linear-gradient(
            180deg,
            #fffdf9,
            #fff8f0
        );
}


.services-core-premium::after {
    content: "";

    position: absolute;

    top: 140px;
    right: -180px;

    width: 400px;
    height: 400px;

    border: 75px solid rgba(245,130,32,.035);

    border-radius: 50%;

    pointer-events: none;
}


.services-core-heading {
    position: relative;

    z-index: 2;

    max-width: 820px;

    margin-bottom: 34px;
}


.services-core-heading h2 {
    margin: 13px 0 12px;

    font-size: clamp(36px, 3.8vw, 52px);

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.services-core-heading p {
    max-width: 700px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}



/* =========================================================
   SERVICE GRID
   ========================================================= */

.services-fluent-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}



/* =========================================================
   SERVICE CARD
   ========================================================= */

.services-fluent-card {
    position: relative;

    isolation: isolate;

    min-height: 345px;

    padding: 24px;

    overflow: hidden;

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

    border-radius: 26px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(255,248,239,.84)
        );

    box-shadow:

        0 18px 48px
        rgba(72,31,24,.08),

        inset 0 1px 0
        rgba(255,255,255,.98);

    backdrop-filter:
        blur(18px) saturate(125%);

    -webkit-backdrop-filter:
        blur(18px) saturate(125%);

    transition:

        transform .38s
        cubic-bezier(.2,.8,.2,1),

        box-shadow .38s ease,

        border-color .38s ease;
}


.services-fluent-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:

        radial-gradient(
            circle at 50% 12%,
            rgba(255,177,64,.18),
            transparent 35%
        );
}


.services-fluent-card::after {
    content: "";

    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 0;

    height: 3px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,
            var(--orange),
            var(--wine)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .35s ease;
}


.services-fluent-card:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(245,130,32,.30);

    box-shadow:

        0 32px 72px
        rgba(72,31,24,.15),

        0 12px 26px
        rgba(245,130,32,.08),

        inset 0 1px 0
        rgba(255,255,255,.98);
}


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



/* =========================================================
   IMAGE
   ========================================================= */

.services-fluent-visual {
    position: relative;

    display: flex;

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

    height: 128px;

    margin-bottom: 6px;
}


.services-fluent-glow {
    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,179,68,.38),
            rgba(245,130,32,.15) 50%,
            transparent 74%
        );

    filter: blur(17px);

    transition:
        transform .4s ease;
}


.services-fluent-visual img {
    position: relative;

    z-index: 2;

    display: block;

    width: 118px;
    height: 118px;

    object-fit: contain;

    filter:

        drop-shadow(
            0 13px 17px
            rgba(76,28,24,.19)
        )

        saturate(1.04);

    transition:

        transform .42s
        cubic-bezier(.2,.8,.2,1),

        filter .42s ease;
}


.services-fluent-card:hover
.services-fluent-glow {
    transform: scale(1.25);
}


.services-fluent-card:hover
.services-fluent-visual img {
    transform:
        translateY(-7px)
        scale(1.08);

    filter:

        drop-shadow(
            0 18px 23px
            rgba(76,28,24,.25)
        )

        saturate(1.08);
}



/* =========================================================
   CARD TEXT
   ========================================================= */

.services-fluent-body {
    position: relative;

    z-index: 3;
}


.services-fluent-label {
    display: inline-flex;

    margin-bottom: 9px;

    padding: 6px 10px;

    border-radius: 999px;

    background:
        rgba(245,130,32,.10);

    color: var(--wine);

    font-size: 9px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.services-fluent-body h3 {
    margin: 0 0 9px;

    color: var(--ink);

    font-size: 19px;

    line-height: 1.25;

    letter-spacing: -.022em;
}


.services-fluent-body p {
    margin: 0 0 16px;

    color: var(--muted);

    font-size: 12.5px;

    line-height: 1.65;
}


.services-fluent-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--wine);

    font-size: 11px;

    font-weight: 850;

    text-decoration: none;
}


.services-fluent-link span {
    transition:
        transform .25s ease;
}


.services-fluent-link:hover span {
    transform:
        translateX(4px);
}



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

.services-process-premium {
    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(143,52,56,.07),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #fff5e9,
            #fffaf5
        );
}


.services-process-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0,1fr));

    gap: 14px;
}


.services-process-card {
    padding: 22px;

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

    border-radius: 22px;

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

    box-shadow:
        0 16px 42px
        rgba(72,31,24,.08);

    transition:
        transform .32s ease,
        box-shadow .32s ease;
}


.services-process-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 24px 58px
        rgba(72,31,24,.13);
}


.services-process-number {
    display: inline-flex;

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

    width: 42px;
    height: 42px;

    margin-bottom: 17px;

    border-radius: 13px;

    background:

        linear-gradient(
            135deg,
            var(--orange),
            var(--wine)
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 10px 22px
        rgba(143,52,56,.20);
}


.services-process-card h3 {
    margin: 0 0 9px;

    font-size: 18px;
}


.services-process-card p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.65;
}



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

.services-premium-cta {
    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(255,193,99,.18),
            transparent 26%
        ),

        linear-gradient(
            135deg,
            var(--wine),
            #a54830
        );
}


.services-premium-cta,
.services-premium-cta h2,
.services-premium-cta p {
    color: #ffffff;
}


.services-cta-kicker {
    display: inline-block;

    margin-bottom: 9px;

    color: #ffd8ad;

    font-size: 10px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .services-fluent-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .services-process-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}



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

@media (max-width: 650px) {

    .services-cover-hero {
        min-height: 640px;

        align-items: flex-end;
    }


    .services-cover-content {
        width:
            calc(100% - 32px);
    }


    .services-cover-image {
        object-position:
            65% center;
    }


    .services-cover-overlay {
        background:

            linear-gradient(
                180deg,
                rgba(40,18,18,.10) 0%,
                rgba(40,18,18,.43) 36%,
                rgba(40,18,18,.95) 100%
            );
    }


    .services-cover-copy {
        max-width: none;

        padding:
            250px 0 46px;
    }


    .services-cover-copy h1 {
        font-size: 43px;
    }


    .services-cover-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .services-cover-actions .btn {
        display: flex;

        justify-content: center;

        width: 100%;
    }


    .services-cover-trust {
        display: grid;

        grid-template-columns: 1fr;
    }


    .services-fluent-grid,
    .services-process-grid {
        grid-template-columns: 1fr;
    }


    .services-fluent-card {
        min-height: 320px;
    }


    .services-fluent-visual {
        height: 115px;
    }


    .services-fluent-visual img {
        width: 105px;
        height: 105px;
    }

}

/* =========================================================
   PERBESAR ICON CORE SERVICE LINES
   ========================================================= */

.services-fluent-visual {
    position: relative;

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

    height: 175px;

    margin-bottom: 8px;
}

.services-fluent-glow {
    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 179, 68, 0.42),
            rgba(245, 130, 32, 0.17) 50%,
            transparent 74%
        );

    filter: blur(19px);

    transition:
        transform 0.4s ease;
}

.services-fluent-visual img {
    position: relative;
    z-index: 2;

    display: block;

    width: 170px;
    height: 170px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 16px 22px
            rgba(76, 28, 24, 0.21)
        )
        saturate(1.05);

    transition:
        transform 0.42s cubic-bezier(.2,.8,.2,1),
        filter 0.42s ease;
}

.services-fluent-card:hover
.services-fluent-glow {
    transform: scale(1.18);
}

.services-fluent-card:hover
.services-fluent-visual img {
    transform:
        translateY(-7px)
        scale(1.07);

    filter:
        drop-shadow(
            0 21px 27px
            rgba(76, 28, 24, 0.27)
        )
        saturate(1.09);
}

/* sedikit tambah tinggi card supaya proporsional */
.services-fluent-card {
    min-height: 385px;
}

/* Tablet */
@media (max-width: 1050px) {
    .services-fluent-visual {
        height: 160px;
    }

    .services-fluent-visual img {
        width: 150px;
        height: 150px;
    }
}

/* HP */
@media (max-width: 650px) {
    .services-fluent-card {
        min-height: 350px;
    }

    .services-fluent-visual {
        height: 150px;
    }

    .services-fluent-visual img {
        width: 142px;
        height: 142px;
    }
}

/* =========================================================
   GSYSTEM SERVICES — FINAL PREMIUM
   Tempel di PALING BAWAH style.css
   ========================================================= */

/* ---------- HERO ---------- */

.services-cover-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #351716;
}

.services-cover-background {
    position: absolute;
    inset: 0;
}

.services-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
}

.services-cover-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(37,15,15,.91) 0%,
            rgba(54,23,21,.78) 30%,
            rgba(66,31,25,.48) 52%,
            rgba(66,31,25,.14) 80%,
            rgba(66,31,25,.04) 100%
        );
}

.services-cover-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,205,132,.08) 0%,
            transparent 38%,
            rgba(35,15,15,.26) 100%
        );
}

.services-cover-content {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 48px), 1120px);
    margin-inline: auto;
}

.services-cover-copy {
    max-width: 600px;
    padding: 150px 0 72px;
}

.services-cover-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.services-cover-copy h1 {
    max-width: 600px;
    margin: 0 0 21px;
    color: #fff;
    font-size: clamp(50px,4.5vw,68px);
    line-height: 1.01;
    letter-spacing: -.052em;
}

.services-cover-accent {
    display: block;
    color: #ffc77f;
}

.services-cover-copy p {
    max-width: 550px;
    margin: 0;
    color: rgba(255,255,255,.91);
    font-size: 16px;
    line-height: 1.72;
}

.services-cover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.services-cover-actions .btn {
    min-height: 48px;
    padding: 13px 21px;
}

.services-cover-primary {
    border: 1px solid rgba(255,196,138,.65);
    background: linear-gradient(135deg,#81252b,#a23b31);
    color: #fff;
    box-shadow: 0 15px 32px rgba(65,14,18,.31);
}

.services-cover-secondary {
    border: 1px solid rgba(255,255,255,.90);
    background: rgba(255,255,255,.95);
    color: #281719;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

.services-cover-primary:hover,
.services-cover-secondary:hover {
    transform: translateY(-3px);
}

.services-cover-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 17px;
    margin-top: 22px;
}

.services-cover-trust span {
    color: rgba(255,255,255,.95);
    font-size: 12px;
    font-weight: 750;
}


/* ---------- CORE SERVICES ---------- */

.services-core-premium {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 8%,rgba(255,190,91,.11),transparent 27%),
        linear-gradient(180deg,#fffdf9,#fff8f0);
}

.services-core-heading {
    max-width: 820px;
    margin-bottom: 34px;
}

.services-core-heading h2 {
    margin: 13px 0 12px;
    font-size: clamp(36px,3.8vw,52px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.services-core-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

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

.services-fluent-card {
    min-height: 385px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.90);
    border-radius: 26px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,248,239,.84));
    box-shadow:
        0 18px 48px rgba(72,31,24,.08),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        box-shadow .38s ease,
        border-color .38s ease;
}

.services-fluent-card:hover {
    transform: translateY(-9px);
    border-color: rgba(245,130,32,.30);
    box-shadow: 0 32px 72px rgba(72,31,24,.15);
}

.services-fluent-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    margin-bottom: 8px;
}

.services-fluent-glow {
    position: absolute;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background:
        radial-gradient(circle,rgba(255,179,68,.42),rgba(245,130,32,.17) 50%,transparent 74%);
    filter: blur(19px);
}

.services-fluent-visual img {
    position: relative;
    z-index: 2;
    width: 170px;
    height: 170px;
    object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(76,28,24,.21));
    transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

.services-fluent-card:hover .services-fluent-visual img {
    transform: translateY(-7px) scale(1.07);
}

.services-fluent-label,
.process-story-kicker {
    display: inline-flex;
    margin-bottom: 9px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(245,130,32,.10);
    color: var(--wine);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.services-fluent-body h3 {
    margin: 0 0 9px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.022em;
}

.services-fluent-body p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.65;
}

.services-fluent-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--wine);
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}


/* ---------- OUR PROCESS STORY ---------- */

.services-process-story {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%,rgba(255,188,86,.16),transparent 26%),
        radial-gradient(circle at 92% 18%,rgba(143,52,56,.08),transparent 28%),
        linear-gradient(180deg,#fff6eb 0%,#fffaf6 100%);
}

.services-process-story::before {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 68px solid rgba(245,130,32,.035);
    pointer-events: none;
}

.process-story-heading {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin-bottom: 38px;
}

.process-story-heading h2 {
    margin: 13px 0 12px;
    font-size: clamp(38px,4vw,54px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.process-story-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.process-story-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 18px;
}

.process-story-card {
    grid-column: span 2;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 28px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,248,239,.86));
    box-shadow:
        0 20px 52px rgba(72,31,24,.09),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        box-shadow .38s ease,
        border-color .38s ease;
}

.process-story-card:hover {
    transform: translateY(-9px);
    border-color: rgba(245,130,32,.28);
    box-shadow:
        0 34px 76px rgba(72,31,24,.15),
        0 10px 24px rgba(245,130,32,.07);
}

.process-story-card-featured {
    background:
        radial-gradient(circle at 50% 8%,rgba(255,181,72,.14),transparent 34%),
        linear-gradient(145deg,#fff,#fff5e9);
}

.process-story-card-wide {
    grid-column: 2 / span 4;
    display: grid;
    grid-template-columns: minmax(0,1.18fr) minmax(260px,.82fr);
    align-items: stretch;
}

.process-story-image {
    position: relative;
    height: 245px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%,rgba(255,190,89,.15),transparent 64%);
}

.process-story-card-wide .process-story-image {
    height: 100%;
    min-height: 300px;
}

.process-story-glow {
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 200px;
    height: 100px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,rgba(245,130,32,.18),transparent 70%);
    filter: blur(20px);
}

.process-story-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    height: 238px;
    object-fit: contain;
    object-position: center bottom;
    transition:
        transform .46s cubic-bezier(.2,.8,.2,1),
        filter .46s ease;
}

.process-story-card-wide .process-story-image img {
    height: 295px;
    max-width: 590px;
}

.process-story-card:hover .process-story-image img {
    transform: translateY(-7px) scale(1.025);
    filter: drop-shadow(0 18px 24px rgba(72,31,24,.12));
}

.process-story-content {
    padding: 22px 24px 28px;
}

.process-story-card-wide .process-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px;
}

.process-story-content h3 {
    margin: 0 0 9px;
    color: var(--ink);
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.process-story-content p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.68;
}


/* ---------- CTA ---------- */

.services-premium-cta {
    background:
        radial-gradient(circle at 85% 15%,rgba(255,193,99,.18),transparent 26%),
        linear-gradient(135deg,var(--wine),#a54830);
}

.services-premium-cta,
.services-premium-cta h2,
.services-premium-cta p {
    color: #fff;
}

.services-cta-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: #ffd8ad;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1050px) {
    .services-fluent-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .process-story-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .process-story-card,
    .process-story-card-wide {
        grid-column: auto;
    }

    .process-story-card-wide {
        display: block;
    }

    .process-story-card-wide .process-story-image {
        min-height: 245px;
    }

    .process-story-card-wide .process-story-content {
        padding: 22px 24px 28px;
    }
}

@media (max-width: 650px) {
    .services-cover-hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .services-cover-content {
        width: calc(100% - 32px);
    }

    .services-cover-image {
        object-position: 65% center;
    }

    .services-cover-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(40,18,18,.10) 0%,
                rgba(40,18,18,.43) 36%,
                rgba(40,18,18,.95) 100%
            );
    }

    .services-cover-copy {
        max-width: none;
        padding: 250px 0 46px;
    }

    .services-cover-copy h1 {
        font-size: 43px;
    }

    .services-cover-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .services-cover-actions .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .services-cover-trust {
        display: grid;
        grid-template-columns: 1fr;
    }

    .services-fluent-grid,
    .process-story-grid {
        grid-template-columns: 1fr;
    }

    .services-fluent-card {
        min-height: 350px;
    }

    .services-fluent-visual {
        height: 150px;
    }

    .services-fluent-visual img {
        width: 142px;
        height: 142px;
    }

    .process-story-image,
    .process-story-card-wide .process-story-image {
        height: 220px;
        min-height: 220px;
    }

    .process-story-image img,
    .process-story-card-wide .process-story-image img {
        width: 100%;
        height: 215px;
    }
}

/* =========================================================
   OUR PROCESS — BACKGROUND IMAGE CARDS
   ========================================================= */

.services-process-bg {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(245, 130, 32, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(143, 52, 56, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff8ef 0%,
            #fffdf9 100%
        );
}


/* Heading */

.process-bg-heading {
    max-width: 820px;

    margin-bottom: 34px;
}

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

    font-size: clamp(
        38px,
        4vw,
        54px
    );

    line-height: 1.04;

    letter-spacing: -0.045em;
}

.process-bg-heading p {
    max-width: 700px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


/* GRID */

.process-bg-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* CARD */

/* =========================================
   PROCESS CARD — NATURAL PHOTO COLOR
   ========================================= */

.process-bg-card {
    position: relative;

    min-height: 355px;

    overflow: hidden;

    border: 1px solid rgba(226, 213, 202, 0.90);

    border-radius: 28px;

    background: #f7efe6;

    box-shadow:
        0 20px 52px rgba(72, 31, 24, 0.11);

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease;
}


/* FOTO */

.process-bg-photo {
    position: absolute;
    inset: 0;

    background-image: var(--process-image);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    opacity: 1;

    filter:
        saturate(0.98)
        contrast(1.02)
        brightness(1.01);

    transform: scale(1.02);

    transition:
        transform 0.55s cubic-bezier(.2,.8,.2,1),
        filter 0.45s ease;
}


/* OVERLAY — lebih natural */

.process-bg-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,

            rgba(255, 250, 244, 0.00) 0%,

            rgba(255, 248, 240, 0.03) 38%,

            rgba(57, 29, 26, 0.17) 59%,

            rgba(43, 21, 20, 0.70) 81%,

            rgba(35, 16, 17, 0.92) 100%
        );
}


/* warm light, bukan burgundy overlay */

.process-bg-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 75% 12%,
            rgba(255, 188, 92, 0.11),
            transparent 34%
        );
}


/* TEXT */

.process-bg-content {
    position: absolute;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 28px 25px;
}


.process-bg-kicker {
    display: inline-flex;

    margin-bottom: 10px;

    padding: 6px 10px;

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

    border-radius: 999px;

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

    color: #ffe0ba;

    font-size: 9px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.09em;

    backdrop-filter: blur(10px);

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


.process-bg-content h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 23px;

    line-height: 1.17;

    letter-spacing: -0.025em;

    text-shadow:
        0 3px 14px rgba(0, 0, 0, 0.34);
}


.process-bg-content p {
    max-width: 310px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.65;

    text-shadow:
        0 2px 10px rgba(0,0,0,0.22);
}


/* HOVER */

.process-bg-card:hover {
    transform: translateY(-9px);

    box-shadow:
        0 34px 76px rgba(72,31,24,0.18);
}


.process-bg-card:hover .process-bg-photo {
    transform: scale(1.07);

    filter:
        saturate(1.05)
        contrast(1.03)
        brightness(1.03);
}


/* gambar menjadi background */

.process-bg-photo {
    position: absolute;

    inset: 0;

    background-image:
        var(--process-image);

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center center;

    opacity: 0.82;

    transform:
        scale(1.02);

    transition:
        transform 0.55s
        cubic-bezier(.2,.8,.2,1),

        opacity 0.45s ease;
}


/* overlay untuk menjaga tulisan tetap jelas */

.process-bg-overlay {
    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(53, 22, 20, 0.05)
            0%,

            rgba(53, 22, 20, 0.12)
            30%,

            rgba(53, 22, 20, 0.70)
            72%,

            rgba(41, 17, 17, 0.94)
            100%
        );
}


/* sedikit cahaya premium */

.process-bg-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 70% 15%,
            rgba(255, 185, 79, 0.19),
            transparent 35%
        );
}


/* TEXT */

.process-bg-content {
    position: absolute;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        27px 25px 28px;
}


.process-bg-kicker {
    display: inline-flex;

    margin-bottom: 10px;

    padding:
        6px 10px;

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

    border-radius:
        999px;

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

    color:
        #ffd4a2;

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;

    backdrop-filter:
        blur(9px);

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


.process-bg-content h3 {
    margin:
        0 0 8px;

    color:
        #ffffff;

    font-size:
        23px;

    line-height:
        1.17;

    letter-spacing:
        -0.025em;

    text-shadow:
        0 3px 13px
        rgba(0,0,0,0.25);
}


.process-bg-content p {
    max-width:
        310px;

    margin:
        0;

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

    font-size:
        12px;

    line-height:
        1.65;
}


/* hover */

.process-bg-card:hover {
    transform:
        translateY(-9px);

    box-shadow:
        0 34px 76px
        rgba(72,31,24,0.18);
}


.process-bg-card:hover
.process-bg-photo {
    transform:
        scale(1.08);

    opacity:
        0.96;
}


/* certification decision dibuat lebih panjang */

.process-bg-card-decision {
    grid-column:
        span 2;
}


/* memberikan sedikit variasi tinggi */

.process-bg-card:nth-child(3) {
    min-height:
        390px;
}


/* Tablet */

@media (max-width: 1000px) {

    .process-bg-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .process-bg-card-decision {
        grid-column:
            auto;
    }

}


/* HP */

@media (max-width: 650px) {

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

    .process-bg-card,
    .process-bg-card:nth-child(3) {
        min-height:
            350px;
    }

    .process-bg-content {
        padding:
            24px 21px;
    }

    .process-bg-content h3 {
        font-size:
            21px;
    }

}

/* =========================================================
   OUR PROCESS — PREMIUM ART BACKGROUND FINAL
   ========================================================= */

.process-bg-card {
    position: relative;
    min-height: 365px;
    overflow: hidden;
    isolation: isolate;

    border: 1px solid rgba(226, 211, 197, .85);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #fffaf3 0%,
            #f8eee4 52%,
            #f3e5d9 100%
        );

    box-shadow:
        0 20px 52px rgba(70, 31, 25, .10);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}


/* =========================================================
   BLURRED BACKGROUND
   Mengisi ruang kosong memakai warna/gambar yang sama
   ========================================================= */

.process-bg-card::before {
    content: "";

    position: absolute;

    inset: -28px;

    z-index: -2;

    background-image: var(--process-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    filter:
        blur(28px)
        saturate(.72)
        brightness(1.10);

    opacity: .34;

    transform: scale(1.12);
}


/* Lapisan cream supaya blur tetap lembut */

.process-bg-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(255, 250, 243, .58) 0%,
            rgba(255, 247, 238, .38) 42%,
            rgba(71, 31, 27, .08) 66%,
            rgba(42, 18, 19, .36) 82%,
            rgba(31, 13, 15, .78) 100%
        );
}


/* =========================================================
   GAMBAR UTAMA
   ========================================================= */

.process-bg-photo {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-image: var(--process-image);
    background-repeat: no-repeat;

    /*
       CONTAIN agar kepala / badan tidak terpotong
    */
    background-size: contain;

    background-position: center top;

    opacity: .96;

    filter:
        saturate(.97)
        contrast(1.015)
        brightness(1.02);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}


/* =========================================================
   OVERLAY UNTUK TEKS
   ========================================================= */

.process-bg-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(32, 16, 16, 0) 0%,
            rgba(32, 16, 16, .01) 42%,
            rgba(42, 18, 19, .12) 59%,
            rgba(42, 18, 19, .53) 78%,
            rgba(29, 12, 14, .92) 100%
        );
}


/* =========================================================
   CONTENT
   ========================================================= */

.process-bg-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding:
        29px 26px 27px;
}


.process-bg-kicker {
    display: inline-flex;

    margin-bottom: 10px;

    padding:
        6px 10px;

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

    border-radius:
        999px;

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

    color:
        #ffe0b7;

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .11em;

    backdrop-filter:
        blur(9px);

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


.process-bg-content h3 {
    margin:
        0 0 8px;

    color:
        #fff;

    font-size:
        23px;

    line-height:
        1.15;

    letter-spacing:
        -.03em;

    text-shadow:
        0 3px 14px rgba(0,0,0,.28);
}


.process-bg-content p {
    max-width:
        330px;

    margin:
        0;

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

    font-size:
        12px;

    line-height:
        1.64;

    text-shadow:
        0 2px 10px rgba(0,0,0,.20);
}


/* =========================================================
   POSISI PER GAMBAR
   ========================================================= */

/* Discovery */
.process-bg-card:nth-child(1)
.process-bg-photo {
    background-size:
        auto 100%;

    background-position:
        center top;
}


/* Gap Assessment */
.process-bg-card:nth-child(2)
.process-bg-photo {
    background-size:
        auto 100%;

    background-position:
        center top;
}


/* Action Plan */
.process-bg-card:nth-child(3)
.process-bg-photo {
    background-size:
        auto 100%;

    background-position:
        center top;
}


/* Verification */
.process-bg-card:nth-child(4)
.process-bg-photo {
    background-size:
        auto 100%;

    background-position:
        center top;
}


/* =========================================================
   CARD 5 — CERTIFICATION DECISION
   ========================================================= */

.process-bg-card-decision {
    min-height:
        365px;

    background:
        linear-gradient(
            135deg,
            #fff8ef 0%,
            #f6eadd 48%,
            #ead6c6 100%
        );
}


/*
   PENTING:
   gambar ke-5 dibuat lebih kecil supaya
   kepala kiri dan kanan masuk semuanya.
*/

.process-bg-card-decision
.process-bg-photo {
    background-size:
        88% auto;

    background-position:
        center 8%;

    transform:
        scale(.96);
}


/* Background blur card 5 dibuat lebih lebar */

.process-bg-card-decision::before {
    background-size:
        cover;

    background-position:
        center center;

    filter:
        blur(30px)
        saturate(.68)
        brightness(1.08);

    opacity:
        .38;
}


/* Teks card 5 boleh lebih lebar */

.process-bg-card-decision
.process-bg-content p {
    max-width:
        520px;
}


/* =========================================================
   HOVER
   ========================================================= */

.process-bg-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 34px 74px rgba(70,31,25,.17);
}


.process-bg-card:hover
.process-bg-photo {
    transform:
        scale(1.025);

    filter:
        saturate(1.03)
        contrast(1.02)
        brightness(1.03);
}


/* Card #5 tetap jangan diperbesar berlebihan */

.process-bg-card-decision:hover
.process-bg-photo {
    transform:
        scale(.99);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .process-bg-card-decision
    .process-bg-photo {
        background-size:
            95% auto;

        background-position:
            center 10%;
    }

}


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

@media (max-width: 650px) {

    .process-bg-card,
    .process-bg-card-decision {
        min-height:
            355px;
    }


    .process-bg-photo {
        background-size:
            auto 100%;

        background-position:
            center top;
    }


    .process-bg-card-decision
    .process-bg-photo {
        background-size:
            auto 92%;

        background-position:
            center 10px;
    }


    .process-bg-content {
        padding:
            24px 21px 25px;
    }


    .process-bg-content h3 {
        font-size:
            21px;
    }

}
/* =========================================================
   GSYSTEM — PROCESS CARD FINAL FIX
   Fokus: Certification Decision memenuhi card 100%
   ========================================================= */


/* =========================================================
   SEMUA PROCESS CARD
   ========================================================= */

.process-bg-card {
    position: relative;

    min-height: 365px;

    overflow: hidden;

    isolation: isolate;

    border:
        1px solid rgba(224, 207, 191, 0.82);

    border-radius:
        28px;

    background:
        #f4e9df;

    box-shadow:
        0 20px 52px
        rgba(69, 30, 25, 0.10);

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* =========================================================
   FOTO UTAMA
   ========================================================= */

.process-bg-photo {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-image:
        var(--process-image);

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center center;

    opacity:
        1;

    filter:
        saturate(1)
        contrast(1.02)
        brightness(1);

    transform:
        scale(1.01);

    transition:
        transform 0.55s cubic-bezier(.2,.8,.2,1),
        filter 0.45s ease;
}


/* =========================================================
   GRADIENT BAWAH
   Supaya tulisan terbaca tanpa membuat foto terlalu gelap
   ========================================================= */

.process-bg-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(
            180deg,

            rgba(34, 16, 16, 0.00) 0%,

            rgba(34, 16, 16, 0.00) 34%,

            rgba(39, 18, 18, 0.06) 48%,

            rgba(43, 19, 19, 0.24) 63%,

            rgba(42, 18, 19, 0.60) 80%,

            rgba(29, 11, 14, 0.93) 100%
        );
}


/* subtle premium lighting */

.process-bg-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 82% 8%,
            rgba(255, 190, 103, 0.10),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            transparent 37%
        );
}


/* =========================================================
   CONTENT
   ========================================================= */

.process-bg-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding:
        29px 26px 27px;
}


.process-bg-kicker {
    display: inline-flex;

    align-items: center;

    margin-bottom:
        10px;

    padding:
        6px 11px;

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

    border-radius:
        999px;

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

    color:
        #ffe0b7;

    font-size:
        9px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(9px);

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


.process-bg-content h3 {
    margin:
        0 0 8px;

    color:
        #ffffff;

    font-size:
        23px;

    line-height:
        1.15;

    letter-spacing:
        -0.03em;

    text-shadow:
        0 3px 15px rgba(0,0,0,0.28);
}


.process-bg-content p {
    max-width:
        330px;

    margin:
        0;

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

    font-size:
        12px;

    line-height:
        1.64;

    text-shadow:
        0 2px 10px rgba(0,0,0,0.20);
}


/* =========================================================
   POSISI 4 GAMBAR PERTAMA
   ========================================================= */

.process-bg-card:nth-child(1)
.process-bg-photo {
    background-position:
        center 42%;
}


.process-bg-card:nth-child(2)
.process-bg-photo {
    background-position:
        center 45%;
}


.process-bg-card:nth-child(3)
.process-bg-photo {
    background-position:
        center 43%;
}


.process-bg-card:nth-child(4)
.process-bg-photo {
    background-position:
        center 40%;
}


/* =========================================================
   CARD 5 — CERTIFICATION DECISION
   INI BAGIAN UTAMA YANG DIPERBAIKI
   ========================================================= */

.process-bg-card-decision {
    min-height:
        365px;

    /*
       tetap gunakan background gelap-natural
       jika loading image sedikit lambat
    */

    background:
        linear-gradient(
            135deg,
            #dbc6b5,
            #f3e8dd
        );
}


/*
   KUNCI PERBAIKAN:

   cover = memenuhi seluruh card.
   Tidak ada ruang kosong kiri/kanan.

   center 43% menjaga wajah tetap masuk
   dan tidak terlalu memotong bagian atas.
*/

.process-bg-card-decision
.process-bg-photo {

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-size:
        cover !important;

    background-position:
        center 43% !important;

    background-repeat:
        no-repeat;

    transform:
        scale(1.015) !important;

    opacity:
        1;

    filter:
        saturate(1.01)
        contrast(1.02)
        brightness(1);
}


/*
   Gradient card #5 sedikit lebih ringan
   karena gambarnya lebar dan cukup terang.
*/

.process-bg-card-decision
.process-bg-overlay {

    background:

        linear-gradient(
            180deg,

            rgba(34,16,16,0.00) 0%,

            rgba(34,16,16,0.00) 35%,

            rgba(40,18,18,0.05) 49%,

            rgba(43,19,19,0.22) 64%,

            rgba(42,18,19,0.58) 81%,

            rgba(29,11,14,0.94) 100%
        );
}


/*
   Deskripsi card 5 boleh lebih lebar
   karena card memang dua kali lebih lebar.
*/

.process-bg-card-decision
.process-bg-content p {
    max-width:
        560px;
}


/* =========================================================
   GRID
   ========================================================= */

.process-bg-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap:
        18px;
}


/* tiga card atas */

.process-bg-card:nth-child(1),
.process-bg-card:nth-child(2),
.process-bg-card:nth-child(3) {
    grid-column:
        span 2;
}


/* Verification */

.process-bg-card:nth-child(4) {
    grid-column:
        span 2;
}


/*
   Certification Decision
   memakai sisa 4 kolom.
*/

.process-bg-card:nth-child(5) {
    grid-column:
        span 4;
}


/* =========================================================
   HOVER
   ========================================================= */

.process-bg-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(240, 136, 48, 0.27);

    box-shadow:
        0 34px 74px
        rgba(68, 30, 24, 0.17);
}


.process-bg-card:hover
.process-bg-photo {
    transform:
        scale(1.055);

    filter:
        saturate(1.05)
        contrast(1.025)
        brightness(1.02);
}


/*
   Card decision zoom sedikit saja,
   supaya kepala tidak terpotong saat hover.
*/

.process-bg-card-decision:hover
.process-bg-photo {

    transform:
        scale(1.035) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .process-bg-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .process-bg-card:nth-child(1),
    .process-bg-card:nth-child(2),
    .process-bg-card:nth-child(3),
    .process-bg-card:nth-child(4) {
        grid-column:
            auto;
    }


    .process-bg-card:nth-child(5) {
        grid-column:
            1 / -1;
    }


    .process-bg-card-decision
    .process-bg-photo {

        background-position:
            center 42% !important;
    }

}


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

@media (max-width: 650px) {

    .process-bg-grid {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .process-bg-card:nth-child(1),
    .process-bg-card:nth-child(2),
    .process-bg-card:nth-child(3),
    .process-bg-card:nth-child(4),
    .process-bg-card:nth-child(5) {

        grid-column:
            auto;
    }


    .process-bg-card,
    .process-bg-card-decision {

        min-height:
            350px;
    }


    .process-bg-card-decision
    .process-bg-photo {

        background-size:
            cover !important;

        background-position:
            center 42% !important;
    }


    .process-bg-content {

        padding:
            24px 21px 25px;
    }


    .process-bg-content h3 {

        font-size:
            21px;
    }


    .process-bg-content p,
    .process-bg-card-decision
    .process-bg-content p {

        max-width:
            100%;
    }

}

/* =========================================================
   PERBESAR ICON 3D — CORE SERVICE LINES
   ========================================================= */

.services-fluent-visual {
    position: relative;

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

    height: 225px;

    margin-bottom: 6px;
}


/* glow ikut diperbesar */

.services-fluent-glow {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 179, 68, 0.42),
            rgba(245, 130, 32, 0.16) 52%,
            transparent 74%
        );

    filter: blur(23px);

    transition:
        transform 0.4s ease;
}


/* icon utama */

.services-fluent-visual img {
    position: relative;

    z-index: 2;

    display: block;

    width: 215px;
    height: 215px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 25px
            rgba(76, 28, 24, 0.20)
        )
        saturate(1.05);

    transition:
        transform 0.42s cubic-bezier(.2,.8,.2,1),
        filter 0.42s ease;
}


/* hover */

.services-fluent-card:hover
.services-fluent-glow {
    transform: scale(1.18);
}


.services-fluent-card:hover
.services-fluent-visual img {
    transform:
        translateY(-8px)
        scale(1.06);

    filter:
        drop-shadow(
            0 24px 31px
            rgba(76, 28, 24, 0.26)
        )
        saturate(1.08);
}


/* sedikit tambah tinggi card supaya tetap proporsional */

.services-fluent-card {
    min-height: 425px;
}


/* tablet */

@media (max-width: 1050px) {

    .services-fluent-visual {
        height: 200px;
    }

    .services-fluent-visual img {
        width: 190px;
        height: 190px;
    }

}


/* mobile */

@media (max-width: 650px) {

    .services-fluent-card {
        min-height: 390px;
    }

    .services-fluent-visual {
        height: 180px;
    }

    .services-fluent-visual img {
        width: 170px;
        height: 170px;
    }

}