/* =========================================================
   KARYA INNOVATIVE — SERVICES PAGE
   CLEAN PRODUCTION CSS
   Version: Optimized
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
    --karya-black: #030303;
    --karya-black-2: #070707;
    --karya-panel: #0b0b0b;
    --karya-panel-2: #111111;

    --karya-gold: #FFBF00;
    --karya-gold-soft: #FFE39A;
    --karya-white: #FFFFFF;
    --karya-text: #EEEEEE;
    --karya-muted: #9A9A9A;

    --karya-border: rgba(255, 191, 0, 0.16);
    --karya-border-soft: rgba(255, 255, 255, 0.08);

    --container: 1180px;

    --ease: cubic-bezier(.22, 1, .36, 1);

    --section-space: clamp(90px, 9vw, 150px);
}


/* =========================================================
   02. BASE
========================================================= */

.services-page {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 191, 0, 0.035),
            transparent 34%
        ),
        var(--karya-black);

    color: var(--karya-text);

    font-family:
        "DM Sans",
        "Manrope",
        sans-serif;

    overflow-x: hidden;
}

.services-page *,
.services-page *::before,
.services-page *::after {
    box-sizing: border-box;
}

.services-page img {
    display: block;
    max-width: 100%;
}

.services-page a {
    color: inherit;
    text-decoration: none;
}

.services-page button,
.services-page input,
.services-page select,
.services-page textarea {
    font: inherit;
}

.services-page section {
    position: relative;
}

.services-page h1,
.services-page h2,
.services-page h3,
.services-page p {
    margin-top: 0;
}

.services-page ::selection {
    background: var(--karya-gold);
    color: var(--karya-black);
}


/* =========================================================
   03. CONTAINER
========================================================= */

.services-container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}


/* =========================================================
   04. GENERIC REVEAL
========================================================= */

.services-reveal {
    opacity: 1;
    transform: none;
}

.js .services-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .7s var(--ease),
        transform .7s var(--ease);
}

.js .services-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   05. HERO
========================================================= */

.kp01-hero {
    position: relative;

    min-height: clamp(720px, 88vh, 900px);

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 75% 48%,
            rgba(255, 191, 0, 0.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 65%,
            rgba(255, 191, 0, 0.035),
            transparent 25%
        ),
        var(--karya-black);
}


/* ---------------------------------------------------------
   Hero glow
--------------------------------------------------------- */

.kp01-hero-glow {
    position: absolute;

    width: 620px;
    height: 620px;

    right: 4%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 191, 0, 0.10) 0%,
            rgba(255, 191, 0, 0.045) 28%,
            transparent 68%
        );

    filter: blur(10px);

    pointer-events: none;

    z-index: -2;
}


/* ---------------------------------------------------------
   Hero grid
--------------------------------------------------------- */

.kp01-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .42;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent
        );

    pointer-events: none;

    z-index: -3;
}


/* ---------------------------------------------------------
   Hero inner
--------------------------------------------------------- */

.kp01-hero-inner {
    position: relative;

    width: min(
        calc(100% - 48px),
        1280px
    );

    min-height: 720px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(360px, .95fr)
        minmax(260px, .65fr)
        minmax(320px, .95fr);

    align-items: center;

    gap: 24px;
}


/* =========================================================
   06. HERO CONTENT
========================================================= */

.kp01-hero-content {
    position: relative;

    z-index: 8;

    max-width: 570px;

    padding-block: 90px;
}


/* eyebrow */

.kp01-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: var(--karya-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .22em;
    text-transform: uppercase;
}

.kp01-eyebrow span {
    width: 28px;
    height: 1px;

    background: var(--karya-gold);

    box-shadow:
        0 0 12px rgba(255,191,0,.65);
}


/* heading */

.kp01-hero-content h1 {
    margin: 0;

    font-size: clamp(
        54px,
        6.2vw,
        92px
    );

    line-height: .88;

    font-weight: 800;

    letter-spacing: -.055em;

    color: var(--karya-white);
}

.kp01-hero-content h1 span {
    color: var(--karya-gold);

    text-shadow:
        0 0 35px rgba(255,191,0,.12);
}


/* paragraph */

.kp01-hero-content > p {
    max-width: 510px;

    margin: 30px 0 0;

    color: var(--karya-muted);

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


/* =========================================================
   07. HERO BUTTONS
========================================================= */

.kp01-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 34px;
}

.kp01-btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 22px;

    border: 1px solid transparent;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;

    transition:
        transform .25s var(--ease),
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.kp01-btn:hover {
    transform: translateY(-2px);
}

.kp01-btn-primary {
    background: var(--karya-gold);
    color: var(--karya-black);

    box-shadow:
        0 12px 32px rgba(255,191,0,.12);
}

.kp01-btn-primary:hover {
    box-shadow:
        0 16px 42px rgba(255,191,0,.20);
}

.kp01-btn-primary strong {
    font-size: 16px;
    line-height: 1;
}

.kp01-btn-outline {
    border-color: rgba(255,255,255,.17);
    color: var(--karya-white);

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

.kp01-btn-outline:hover {
    border-color: rgba(255,191,0,.45);
    color: var(--karya-gold);
}


/* =========================================================
   08. HERO META
========================================================= */

.kp01-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;

    color: #777;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;
}

.kp01-meta i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--karya-gold);

    opacity: .75;
}


/* =========================================================
   09. HERO SERVICE CARDS
========================================================= */
/* =========================================================
   HERO — VERTICAL FLOATING SERVICE STACK
========================================================= */

.kp01-services {
    position: absolute;

    right: 40%;
    top: 55%;

    width: 255px;
    height: 530px;

    transform: translateY(-50%);

    z-index: 8;

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

    gap: 10px;

    pointer-events: none;
}


/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.kp01-service-card {
    position: relative;

    width: 255px;
    height: 82px;

    display: grid;

    grid-template-columns:
        28px
        42px
        1fr
        24px;

    align-items: center;

    gap: 10px;

    padding: 0 16px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            rgba(15,15,15,.94),
            rgba(8,8,8,.78)
        );

    color: var(--karya-white);

    text-decoration: none;

    box-shadow:
        0 16px 35px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(10px);

    overflow: hidden;

    pointer-events: auto;

    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* subtle gold line */

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

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 2px;

    background: var(--karya-gold);

    opacity: .35;

    transition:
        opacity .3s ease,
        box-shadow .3s ease;
}


/* hover */

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

    border-color:
        rgba(255,191,0,.34);

    background:
        linear-gradient(
            100deg,
            rgba(25,22,8,.96),
            rgba(10,10,10,.90)
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,.42),
        0 0 30px rgba(255,191,0,.055);
}

.kp01-service-card:hover::before {
    opacity: 1;

    box-shadow:
        0 0 14px rgba(255,191,0,.65);
}


/* ---------------------------------------------------------
   INDEX
--------------------------------------------------------- */

.kp01-card-index {
    color: #5f5f5f;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.kp01-card-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,191,0,.16);
    border-radius: 9px;

    background:
        rgba(255,191,0,.045);

    color: var(--karya-gold);

    font-size: 16px;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s var(--ease);
}

.kp01-service-card:hover .kp01-card-icon {
    background:
        rgba(255,191,0,.10);

    border-color:
        rgba(255,191,0,.34);

    transform: scale(1.06);
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.kp01-card-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.kp01-card-content strong {
    overflow: hidden;

    color: #e8e8e8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .11em;

    white-space: nowrap;
    text-overflow: ellipsis;

    transition:
        color .25s ease;
}

.kp01-card-content small {
    overflow: hidden;

    color: #656565;

    font-size: 9px;
    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;

    transition:
        color .25s ease;
}

.kp01-service-card:hover
.kp01-card-content strong {
    color: var(--karya-gold);
}

.kp01-service-card:hover
.kp01-card-content small {
    color: #8b8b8b;
}


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.kp01-card-arrow {
    color: #555;

    font-size: 16px;
    line-height: 1;

    transition:
        color .25s ease,
        transform .25s var(--ease);
}

.kp01-service-card:hover .kp01-card-arrow {
    color: var(--karya-gold);

    transform:
        translate(3px, -3px);
}


/* ---------------------------------------------------------
   REMOVE OLD CARD POSITIONING
--------------------------------------------------------- */

.kp01-service-card.card-one,
.kp01-service-card.card-two,
.kp01-service-card.card-three,
.kp01-service-card.card-four,
.kp01-service-card.card-five {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    rotate: none;
}


/* subtle stagger — still vertically aligned */

.kp01-service-card.card-one {
    transform: translateX(0);
}

.kp01-service-card.card-two {
    transform: translateX(0px);
}

.kp01-service-card.card-three {
    transform: translateX(0px);
}

.kp01-service-card.card-four {
    transform: translateX(0px);
}

.kp01-service-card.card-five {
    transform: translateX(0);
}


/* hover must preserve stagger */

.kp01-service-card.card-one:hover {
    transform: translateX(8px);
}

.kp01-service-card.card-two:hover {
    transform: translateX(24px);
}

.kp01-service-card.card-three:hover {
    transform: translateX(40px);
}

.kp01-service-card.card-four:hover {
    transform: translateX(24px);
}

.kp01-service-card.card-five:hover {
    transform: translateX(8px);
}

/* =========================================================
   10. KP01 PERSON
========================================================= */

.kp01-hero-person {
    position: absolute;

    right: -30px;
    bottom: 0;

    width: min(48vw, 600px);
    height: 92%;

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

    z-index: 5;

    pointer-events: none;
}

.kp01-person-glow {
    position: absolute;

    width: 75%;
    aspect-ratio: 1;

    right: 8%;
    bottom: 12%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,191,0,.13),
            transparent 66%
        );

    filter: blur(18px);

    opacity: .9;
}

.kp01-person-image {
    position: relative;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;

    z-index: 2;

    filter:
        drop-shadow(
            0 25px 50px rgba(0,0,0,.45)
        );
}


/* label */

.kp01-person-label {
    position: absolute;

    right: 8%;
    bottom: 13%;

    z-index: 4;

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

    padding: 9px 12px;

    border: 1px solid rgba(255,191,0,.20);
    border-radius: 999px;

    background: rgba(3,3,3,.72);

    color: #b7b7b7;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .15em;

    backdrop-filter: blur(8px);
}

.kp01-person-label span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--karya-gold);

    box-shadow:
        0 0 10px rgba(255,191,0,.8);
}


/* =========================================================
   11. HERO SCROLL
========================================================= */

.kp01-hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 12px;

    color: #666;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .20em;

    z-index: 10;
}

.kp01-hero-scroll i {
    position: relative;

    width: 42px;
    height: 1px;

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

.kp01-hero-scroll i::after {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 12px;
    height: 3px;

    background: var(--karya-gold);

    animation: karyaScroll 2s ease-in-out infinite;
}

@keyframes karyaScroll {
    0%,
    100% {
        transform: translateX(0);
        opacity: .5;
    }

    50% {
        transform: translateX(28px);
        opacity: 1;
    }
}


/* =========================================================
   12. ECOSYSTEM
========================================================= */

.services-ecosystem {
    min-height: 760px;

    display: flex;
    align-items: center;

    padding-block: var(--section-space);

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--karya-black),
            #050505
        );
}


/* background */

.services-why-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;
    overflow: hidden;

    opacity: .75;
}

.why-orbit {
    position: absolute;

    left: 68%;
    top: 50%;

    border: 1px solid rgba(255,191,0,.055);

    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.why-orbit-1 {
    width: 420px;
    height: 420px;
}

.why-orbit-2 {
    width: 620px;
    height: 620px;
}

.why-orbit-3 {
    width: 820px;
    height: 820px;
}

.why-particle {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--karya-gold);

    opacity: .5;

    box-shadow:
        0 0 10px rgba(255,191,0,.45);
}

.why-particle-1 {
    left: 72%;
    top: 25%;
}

.why-particle-2 {
    left: 84%;
    top: 62%;
}

.why-particle-3 {
    left: 63%;
    top: 74%;
}

.why-particle-4 {
    left: 90%;
    top: 35%;
}


/* layout */

.services-why-layout {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    align-items: center;
}


/* copy */

.services-why-copy {
    position: relative;

    z-index: 2;
}

.services-kicker {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--karya-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .22em;
}

.services-why-copy h2,
.services-section-heading h2 {
    margin: 0;

    color: var(--karya-white);

    font-size: clamp(
        40px,
        4.5vw,
        68px
    );

    line-height: .95;

    letter-spacing: -.045em;
}

.services-why-copy h2 span,
.services-section-heading h2 span {
    display: block;

    color: var(--karya-gold);
}

.services-why-copy > p {
    max-width: 510px;

    margin: 28px 0 0;

    color: var(--karya-muted);

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


/* points */

.why-main-points {
    display: grid;

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

    gap: 10px;

    max-width: 500px;

    margin-top: 34px;
}

.why-main-point {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px 15px;

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

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

.why-main-point span {
    color: var(--karya-gold);

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

.why-main-point strong {
    color: #d2d2d2;

    font-size: 10px;
    letter-spacing: .10em;
}


/* CTA */

.services-why-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 30px;

    color: var(--karya-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.services-why-cta b {
    font-size: 17px;

    transition:
        transform .25s var(--ease);
}

.services-why-cta:hover b {
    transform: translate(4px, -4px);
}


/* =========================================================
   13. ECOSYSTEM VISUAL
========================================================= */

.services-why-visual {
    position: relative;

    min-height: 520px;

    display: grid;
    place-items: center;
}

.why-visual-frame {
    position: relative;

    width: min(100%, 570px);
    aspect-ratio: 1 / 1;

    border: 1px solid rgba(255,191,0,.12);

    overflow: hidden;

    background: #070707;

    box-shadow:
        0 35px 100px rgba(0,0,0,.42);
}

.why-visual-image {
    position: absolute;
    inset: 0;
}

.why-visual-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .68;
}

.why-visual-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,191,0,.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.68)
        );
}


/* core */

.why-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 92px;
    height: 92px;

    display: grid;
    place-items: center;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(255,191,0,.55);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,191,0,.20),
            rgba(0,0,0,.80) 65%
        );

    box-shadow:
        0 0 55px rgba(255,191,0,.15);

    z-index: 4;
}

.why-core img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


/* nodes */

.why-node {
    position: absolute;

    z-index: 5;

    min-width: 70px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    padding: 10px 12px;

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

    background: rgba(3,3,3,.68);

    color: #aaa;

    backdrop-filter: blur(7px);
}

.why-node span {
    color: var(--karya-gold);

    font-size: 16px;
}

.why-node b {
    font-size: 8px;
    letter-spacing: .12em;
}

.why-node-web {
    left: 12%;
    top: 25%;
}

.why-node-ai {
    right: 13%;
    top: 19%;
}

.why-node-brand {
    left: 14%;
    bottom: 20%;
}

.why-node-growth {
    right: 10%;
    bottom: 24%;
}


/* lines */

.why-line {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 36%;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(255,191,0,.30),
            transparent
        );

    opacity: .6;

    z-index: 2;
}

.why-line-1 {
    transform: rotate(-145deg);
}

.why-line-2 {
    transform: rotate(-35deg);
}

.why-line-3 {
    transform: rotate(145deg);
}

.why-line-4 {
    transform: rotate(35deg);
}


/* visual label */

.why-visual-label {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    z-index: 7;

    color: #8d8d8d;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .16em;
}

.why-visual-label i {
    flex: 1;

    height: 1px;

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

.why-visual-label strong {
    color: var(--karya-gold);

    font-size: 14px;
}


/* =========================================================
   14. GENERIC SECTION HEADING
========================================================= */

.services-list-section,
.services-why,
.services-process {
    padding-block: var(--section-space);
}

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

    gap: 40px;

    margin-bottom: 60px;
}

.services-section-heading > div {
    flex: 1;
}

.services-section-heading h2 {
    max-width: 680px;

    font-size: clamp(
        38px,
        4.5vw,
        66px
    );
}

.services-section-heading > p {
    width: min(100%, 360px);

    margin: 0;

    color: var(--karya-muted);

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


/* =========================================================
   15. SERVICES GRID
========================================================= */

.services-list-section {
    background:
        linear-gradient(
            180deg,
            #050505,
            var(--karya-black)
        );
}

.services-grid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   16. SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    min-width: 0;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    overflow: hidden;

    transition:
        transform .35s var(--ease),
        border-color .35s ease,
        box-shadow .35s ease;
}

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

    border-color: rgba(255,191,0,.25);

    box-shadow:
        0 25px 65px rgba(0,0,0,.34);
}


/* visual */

.service-card-visual {
    position: relative;

    height: 280px;

    overflow: hidden;

    background: #090909;
}

.service-card-visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .78;

    transition:
        transform .65s var(--ease),
        opacity .4s ease;
}

.service-card:hover .service-card-visual img {
    transform: scale(1.045);

    opacity: .9;
}

.service-card-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.72)
        );

    pointer-events: none;
}


/* service number */

.service-number {
    position: absolute;

    left: 18px;
    top: 18px;

    z-index: 2;

    color: var(--karya-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .15em;
}


/* content */

.service-card-content {
    position: relative;

    padding: 27px 28px 28px;
}

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

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border: 1px solid rgba(255,191,0,.18);

    background: rgba(255,191,0,.04);

    color: var(--karya-gold);

    font-size: 18px;
}

.service-card-content h3 {
    max-width: 440px;

    margin: 0;

    color: var(--karya-white);

    font-size: 24px;
    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -.025em;
}

.service-card-content p {
    max-width: 530px;

    margin: 15px 0 0;

    color: #858585;

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


/* footer */

.service-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 27px;
    padding-top: 17px;

    border-top: 1px solid rgba(255,255,255,.07);
}

.service-card-footer span {
    color: #6f6f6f;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .16em;
}

.service-card-footer b {
    color: var(--karya-gold);

    font-size: 17px;

    transition:
        transform .25s var(--ease);
}

.service-card:hover .service-card-footer b {
    transform: translate(4px, -4px);
}


/* gold edge */

.service-gold-edge {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--karya-gold),
            transparent
        );

    opacity: 0;

    transition: opacity .35s ease;
}

.service-card:hover .service-gold-edge {
    opacity: .9;
}


/* =========================================================
   17. WHY KARYA
========================================================= */

.services-why {
    background: #050505;
}

.services-why-grid {
    display: grid;

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

    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.why-item {
    min-height: 270px;

    padding: 30px 25px;

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

.why-item:last-child {
    border-right: 0;
}

.why-item > span {
    color: var(--karya-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
}

.why-item h3 {
    margin: 60px 0 15px;

    color: var(--karya-white);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: .06em;
}

.why-item p {
    max-width: 240px;

    margin: 0;

    color: #777;

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


/* =========================================================
   18. PROCESS
========================================================= */

.services-process {
    background:
        linear-gradient(
            180deg,
            #050505,
            #030303
        );
}

.process-list {
    border-top: 1px solid rgba(255,255,255,.08);
}

.process-step {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 35px;

    padding: 34px 0;

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

.process-number {
    color: var(--karya-gold);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}

.process-content h3 {
    margin: 0 0 10px;

    color: var(--karya-white);

    font-size: 20px;
    font-weight: 700;

    letter-spacing: .04em;
}

.process-content p {
    max-width: 600px;

    margin: 0;

    color: #777;

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


/* =========================================================
   19. FINAL CTA
========================================================= */

.services-final-cta {
    padding-block: 100px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,191,0,.08),
            transparent 48%
        ),
        #050505;
}

.services-final-cta-inner {
    position: relative;

    padding:
        clamp(55px, 8vw, 100px)
        30px;

    border: 1px solid rgba(255,191,0,.15);

    text-align: center;

    overflow: hidden;
}

.services-final-cta-inner::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,191,0,.08),
            transparent 68%
        );

    pointer-events: none;
}

.services-final-cta-inner > * {
    position: relative;
    z-index: 2;
}

.services-final-cta-inner h2 {
    max-width: 800px;

    margin: 0 auto;

    color: var(--karya-white);

    font-size: clamp(
        42px,
        6vw,
        78px
    );

    line-height: .95;

    letter-spacing: -.05em;
}

.services-final-cta-inner h2 span {
    display: block;

    color: var(--karya-gold);
}

.services-final-cta-inner p {
    max-width: 520px;

    margin: 25px auto 0;

    color: #858585;

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


/* CTA button */

.services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 52px;

    margin-top: 32px;
    padding: 0 25px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;
    text-transform: uppercase;

    transition:
        transform .25s var(--ease),
        box-shadow .25s ease;
}

.services-btn:hover {
    transform: translateY(-3px);
}

.services-btn-gold {
    background: var(--karya-gold);

    color: var(--karya-black);

    box-shadow:
        0 15px 40px rgba(255,191,0,.13);
}

.services-btn-gold:hover {
    box-shadow:
        0 20px 50px rgba(255,191,0,.22);
}

.services-btn-gold b {
    font-size: 16px;
}


/* =========================================================
   20. CONTACT
========================================================= */

.services-contact {
    padding-block: var(--section-space);

    background:
        linear-gradient(
            180deg,
            #030303,
            #060606
        );
}

.contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 90px;

    align-items: start;
}


/* contact info */

.contact-info .kicker {
    margin-bottom: 18px;

    color: var(--karya-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .22em;
}

.contact-info h2 {
    margin: 0;

    color: var(--karya-white);

    font-size: clamp(
        42px,
        5vw,
        68px
    );

    line-height: .96;

    letter-spacing: -.05em;
}

.contact-info h2 span {
    color: var(--karya-gold);
}

.contact-info > p {
    max-width: 430px;

    margin: 25px 0 0;

    color: #818181;

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

.contact-detail {
    display: grid;

    gap: 17px;

    margin-top: 38px;
}

.contact-detail > div,
.contact-detail > a {
    display: block;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255,255,255,.07);

    color: #999;

    font-size: 12px;
    line-height: 1.6;
}

.contact-detail strong {
    display: block;

    margin-bottom: 4px;

    color: #555;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .16em;
}

.contact-detail a {
    transition:
        color .25s ease;
}

.contact-detail a:hover {
    color: var(--karya-gold);
}


/* =========================================================
   21. CONTACT FORM
========================================================= */

.form {
    display: grid;

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

    gap: 12px;
}

.field {
    min-width: 0;
}

.field.full {
    grid-column: 1 / -1;
}

.field input,
.field select,
.field textarea {
    width: 100%;

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

    border-radius: 0;

    outline: none;

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

    color: var(--karya-white);

    font-size: 13px;

    transition:
        border-color .25s ease,
        background .25s ease;
}

.field input,
.field select {
    height: 54px;

    padding: 0 16px;
}

.field textarea {
    min-height: 150px;

    padding: 16px;

    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #686868;
}

.field select {
    color: #777;
}

.field select option {
    background: #111;
    color: #fff;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(255,191,0,.42);

    background:
        rgba(255,191,0,.018);
}

.form .btn {
    grid-column: 1 / -1;

    width: max-content;

    min-height: 52px;

    margin-top: 8px;
    padding: 0 24px;

    border: 0;

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;

    transition:
        transform .25s var(--ease),
        box-shadow .25s ease;
}

.form .btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--karya-gold);

    color: var(--karya-black);

    box-shadow:
        0 12px 35px rgba(255,191,0,.10);
}

.btn-primary span {
    margin-left: 7px;

    font-size: 17px;
}


/* =========================================================
   22. TABLET
========================================================= */

@media (max-width: 1100px) {

    .kp01-hero {
        min-height: 760px;
    }

    .kp01-hero-inner {
        grid-template-columns:
            minmax(330px, .95fr)
            minmax(220px, .55fr)
            minmax(280px, .8fr);

        width: min(
            calc(100% - 36px),
            1100px
        );
    }

    .kp01-hero-content h1 {
        font-size: clamp(
            52px,
            7vw,
            76px
        );
    }

    .kp01-hero-person {
        width: 48vw;
        right: -50px;
    }

    .kp01-service-card {
        width: 180px;
    }

    .services-why-layout {
        gap: 40px;
    }

    .services-why-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .why-item:nth-child(2) {
        border-right: 0;
    }

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

    .contact-grid {
        gap: 50px;
    }
}


/* =========================================================
   23. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .kp01-hero {
        min-height: 850px;
        align-items: stretch;
    }

    .kp01-hero-inner {
        min-height: 850px;

        display: block;

        padding-top: 130px;
    }

    .kp01-hero-content {
        max-width: 570px;

        padding-block: 50px 0;
    }

    .kp01-services {
        position: absolute;

        left: 0;
        right: auto;
        bottom: 35px;

        width: 55%;
        height: 260px;
    }

    .kp01-service-card {
        width: 165px;
        min-height: 165px;

        padding: 15px;
    }

    .kp01-service-card.card-one {
        left: 0;
        top: 10px;
    }

    .kp01-service-card.card-two {
        right: 0;
        top: 0;
    }

    .kp01-service-card.card-three {
        left: 30%;
        bottom: 0;
    }

    .kp01-service-card h3 {
        font-size: 11px;
    }

    .kp01-service-card p {
        font-size: 10px;
    }

    .kp01-hero-person {
        width: 50vw;
        height: 68%;

        right: -35px;
        bottom: 0;
    }

    .kp01-person-label {
        right: 8%;
        bottom: 8%;
    }

    .services-why-layout {
        grid-template-columns: 1fr;
    }

    .services-why-copy {
        max-width: 700px;
    }

    .services-why-visual {
        min-height: auto;
    }

    .why-visual-frame {
        width: min(100%, 600px);
    }

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

    .contact-info {
        max-width: 700px;
    }
}


/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width: 700px) {

    :root {
        --section-space: 82px;
    }

    .services-container {
        width: min(
            calc(100% - 32px),
            var(--container)
        );
    }


    /* HERO */

    .kp01-hero {
        min-height: 850px;

        background:
            radial-gradient(
                circle at 75% 55%,
                rgba(255,191,0,.06),
                transparent 35%
            ),
            var(--karya-black);
    }

    .kp01-hero-grid {
        background-size: 55px 55px;

        opacity: .25;
    }

    .kp01-hero-glow {
        width: 420px;
        height: 420px;

        right: -150px;
        top: 52%;
    }

    .kp01-hero-inner {
        width: calc(100% - 32px);

        min-height: 850px;

        padding-top: 105px;
    }

    .kp01-hero-content {
        max-width: 100%;

        padding-top: 35px;
    }

    .kp01-eyebrow {
        margin-bottom: 19px;

        font-size: 9px;
    }

    .kp01-eyebrow span {
        width: 20px;
    }

    .kp01-hero-content h1 {
        font-size: clamp(
            48px,
            15vw,
            68px
        );

        line-height: .90;
    }

    .kp01-hero-content > p {
        max-width: 420px;

        margin-top: 23px;

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

    .kp01-actions {
        gap: 8px;

        margin-top: 25px;
    }

    .kp01-btn {
        min-height: 46px;

        padding-inline: 15px;

        font-size: 9px;
    }

    .kp01-meta {
        margin-top: 26px;

        gap: 8px;

        font-size: 7px;
    }


    /* PERSON */

    .kp01-hero-person {
        width: 72vw;
        height: 47%;

        right: -28px;
        bottom: 75px;
    }

    .kp01-person-label {
        right: 4%;
        bottom: 5%;

        padding: 7px 9px;

        font-size: 6px;
    }


    /* SERVICE CARDS */

    .kp01-services {
        left: 0;
        bottom: 22px;

        width: 100%;
        height: 185px;

        z-index: 8;
    }

    .kp01-service-card {
        width: 135px;
        min-height: 130px;

        padding: 11px;

        border-radius: 11px;

        backdrop-filter: none;
    }

    .kp01-service-card.card-one {
        left: 0;
        top: 35px;

        transform: rotate(-3deg);
    }

    .kp01-service-card.card-two {
        right: 0;
        top: 0;

        transform: rotate(3deg);
    }

    .kp01-service-card.card-three {
        left: 50%;
        bottom: 0;

        transform:
            translateX(-50%)
            rotate(-1deg);
    }

    .kp01-service-card.card-one:hover {
        transform:
            rotate(-3deg)
            translateY(-3px);
    }

    .kp01-service-card.card-two:hover {
        transform:
            rotate(3deg)
            translateY(-3px);
    }

    .kp01-service-card.card-three:hover {
        transform:
            translateX(-50%)
            rotate(-1deg)
            translateY(-3px);
    }

    .kp01-card-icon {
        width: 30px;
        height: 30px;

        margin-top: 13px;

        font-size: 14px;
    }

    .kp01-service-card h3 {
        margin-top: 11px;

        font-size: 9px;
    }

    .kp01-service-card p {
        font-size: 8px;
        line-height: 1.4;
    }

    .kp01-card-top {
        font-size: 7px;
    }

    .kp01-card-top b {
        font-size: 12px;
    }

    .kp01-hero-scroll {
        display: none;
    }


    /* ECOSYSTEM */

    .services-ecosystem {
        min-height: auto;
    }

    .services-why-copy h2,
    .services-section-heading h2 {
        font-size: clamp(
            36px,
            11vw,
            52px
        );
    }

    .services-why-copy > p {
        font-size: 13px;
    }

    .why-main-points {
        gap: 7px;
    }

    .why-main-point {
        padding: 11px 10px;
    }

    .why-main-point strong {
        font-size: 8px;
    }

    .services-why-visual {
        min-height: 360px;
    }

    .why-visual-frame {
        width: 100%;
    }

    .why-orbit {
        left: 75%;
    }


    /* SECTION HEADING */

    .services-section-heading {
        display: block;

        margin-bottom: 38px;
    }

    .services-section-heading > p {
        width: 100%;

        margin-top: 20px;

        font-size: 13px;
    }


    /* SERVICES */

    .services-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .service-card-visual {
        height: 235px;
    }

    .service-card-content {
        padding: 22px;
    }

    .service-card-content h3 {
        font-size: 21px;
    }

    .service-card-content p {
        font-size: 12px;
    }


    /* WHY */

    .services-why-grid {
        grid-template-columns: 1fr;
    }

    .why-item,
    .why-item:nth-child(2) {
        min-height: auto;

        padding: 25px 20px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .why-item:last-child {
        border-bottom: 0;
    }

    .why-item h3 {
        margin-top: 30px;
    }


    /* PROCESS */

    .process-step {
        grid-template-columns: 55px 1fr;

        gap: 15px;

        padding: 26px 0;
    }

    .process-content h3 {
        font-size: 17px;
    }

    .process-content p {
        font-size: 12px;
    }


    /* CTA */

    .services-final-cta {
        padding-block: 70px;
    }

    .services-final-cta-inner {
        padding:
            60px 20px;
    }

    .services-final-cta-inner h2 {
        font-size: clamp(
            38px,
            12vw,
            55px
        );
    }


    /* CONTACT */

    .contact-info h2 {
        font-size: clamp(
            40px,
            12vw,
            58px
        );
    }

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

    .field.full {
        grid-column: auto;
    }

    .form .btn {
        grid-column: auto;

        width: 100%;
    }
}


/* =========================================================
   25. SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .kp01-hero {
        min-height: 825px;
    }

    .kp01-hero-inner {
        min-height: 825px;
    }

    .kp01-hero-content h1 {
        font-size: 47px;
    }

    .kp01-hero-content > p {
        max-width: 320px;

        font-size: 12px;
    }

    .kp01-actions {
        flex-wrap: wrap;
    }

    .kp01-btn {
        min-height: 44px;
    }

    .kp01-hero-person {
        width: 76vw;
        height: 44%;

        right: -35px;
        bottom: 76px;
    }

    .kp01-services {
        height: 175px;
    }

    .kp01-service-card {
        width: 125px;
        min-height: 122px;
    }

    .kp01-service-card.card-three {
        left: 50%;
    }

    .service-card-visual {
        height: 210px;
    }

    .why-node {
        transform: scale(.86);
    }

    .why-visual-label {
        left: 12px;
        right: 12px;
        bottom: 12px;

        font-size: 6px;
    }

    .why-visual-label strong {
        font-size: 11px;
    }
}


/* =========================================================
   26. ACCESSIBILITY
========================================================= */

.services-page a:focus-visible,
.services-page button:focus-visible,
.services-page input:focus-visible,
.services-page select:focus-visible,
.services-page textarea:focus-visible {
    outline: 2px solid var(--karya-gold);
    outline-offset: 3px;
}


/* =========================================================
   27. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .services-page *,
    .services-page *::before,
    .services-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

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

    .kp01-hero-scroll i::after {
        animation: none;
    }
}