/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #030405;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}



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

.header {
    height: 72px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 46px;
    background: rgba(3,4,5,.92);
    border-bottom: 1px solid #1b1b1b;
    backdrop-filter: blur(15px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    font-weight: 700;
}

.logo-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ff7627;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-circle img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.header nav {
    display: flex;
    align-items: center;

    gap: 42px;
}

.header nav a {
    position: relative;

    color: #c9c9c9;

    font-size: 16px;

    transition: .3s ease;
}

.header nav a:hover,
.header nav a.active {
    color: #ff7627;
}

.header nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -14px;

    height: 2px;

    background: #ff7627;
}

.header-btn {
    border: 1px solid #ff7627;

    border-radius: 30px;

    padding: 14px 24px;

    font-size: 14px;

    transition: .3s ease;
}

.header-btn span {
    color: #ff7627;

    margin-left: 8px;
}

.header-btn:hover {
    background: #ff7627;
    color: #000;
}



/* =========================================================
   COMMON
========================================================= */

.small-title {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #aaa;

    font-size: 13px;

    letter-spacing: 5px;

    margin-bottom: 35px;
}

.small-title span {
    width: 24px;
    height: 3px;

    background: #ff7627;

    display: block;
}



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

.orange-btn,
.outline-btn {
    display: inline-flex;

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

    min-height: 54px;

    padding: 0 27px;

    border-radius: 30px;

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

    transition: .3s ease;
}

.orange-btn {
    background: #ff7627;
    color: #050505;
}

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

    box-shadow:
        0 10px 35px rgba(255,118,39,.25);
}

.orange-btn span {
    margin-left: 12px;
}

.outline-btn {
    border: 1px solid #555;

    color: #fff;
}

.outline-btn:hover {
    border-color: #ff7627;
    color: #ff7627;
}



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

.hero {
    min-height: 100vh;

    position: relative;

    display: flex;
    align-items: center;

    padding: 120px 46px 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255,100,25,.12),
            transparent 32%
        ),
        #030405;
}

.hero-grid,
.about-grid {
    position: absolute;

    inset: 0;

    opacity: .3;

    background-image:
        linear-gradient(#161719 1px, transparent 1px),
        linear-gradient(90deg,#161719 1px,transparent 1px);

    background-size: 72px 72px;

    pointer-events: none;
}

.hero-content {
    width: 50%;

    position: relative;

    z-index: 5;
}

.hero-content h1 {
    font-size: clamp(70px,7vw,115px);

    line-height: .9;

    letter-spacing: -5px;

    margin-bottom: 30px;
}

.hero-content h1 strong {
    display: block;

    color: #ff7627;
}

.hero-content h2 {
    font-size: 43px;

    margin-bottom: 28px;
}

.hero-content p {
    max-width: 650px;

    color: #aaa;

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 35px;
}

.hero-buttons {
    display: flex;

    gap: 14px;
}



/* =========================================================
   STATS
========================================================= */

.stats {
    display: flex;

    margin-top: 50px;
}

.stats > div {
    padding: 0 38px;

    border-right: 1px solid #292929;
}

.stats > div:first-child {
    padding-left: 0;
}

.stats > div:last-child {
    border: none;
}

.stats b {
    display: block;

    font-size: 29px;

    margin-bottom: 6px;
}

.stats span {
    color: #888;

    font-size: 13px;
}



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

.hero-visual {
    position: absolute;

    width: 50%;
    height: 720px;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    display: flex;

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

.hero-ps-card {
    width: 340px;
    height: 340px;

    border-radius: 70px;

    transform: rotate(45deg);

    background:
        radial-gradient(
            circle at center,
            #25272a,
            #090a0c 70%
        );

    border: 1px solid rgba(255,118,39,.5);

    box-shadow:
        0 0 80px rgba(255,118,39,.08),
        inset 0 0 60px rgba(255,118,39,.04);

    display: flex;

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

    z-index: 3;
}

.hero-ps-card span {
    transform: rotate(-45deg);

    color: #ff7627;

    font-size: 65px;

    font-weight: 300;
}



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

.orbit {
    position: absolute;

    border: 1px solid rgba(255,118,39,.25);

    border-radius: 50%;

    pointer-events: none;
}

.orbit-one {
    width: 570px;
    height: 570px;

    animation: rotateOrbit 18s linear infinite;
}

.orbit-two {
    width: 500px;
    height: 250px;

    transform: rotate(35deg);

    border-style: dashed;

    animation:
        rotateOrbit 14s linear infinite reverse;
}

.orbit-three {
    width: 480px;
    height: 630px;

    transform: rotate(-35deg);

    animation:
        rotateOrbit 22s linear infinite;
}

@keyframes rotateOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}



/* =========================================================
   FLOATING TOOLS
========================================================= */

.floating-tool,
.about-tool {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 205px;

    padding: 14px;

    background: rgba(10,11,13,.9);

    border: 1px solid #292c30;

    border-radius: 16px;

    backdrop-filter: blur(12px);

    z-index: 10;

    animation:
        floating 4s ease-in-out infinite;
}

.floating-tool b,
.about-tool b {
    display: block;

    font-size: 14px;
}

.floating-tool small,
.about-tool small {
    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 10px;
}

.tool-icon {
    width: 48px;
    height: 48px;

    border-radius: 11px;

    display: flex;

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

    font-size: 20px;

    font-weight: bold;

    border: 1px solid;
}

.ps-icon {
    color: #42a5ff;
    border-color: #164b78;
}

.ai-icon {
    color: #ff9b35;
    border-color: #8a4813;
}

.ae-icon,
.pr-icon {
    color: #b88cff;
    border-color: #623f90;
}

.figma-icon {
    color: #ff4b9b;
    border-color: #7c2750;
}

.blender-icon {
    color: #ff7627;
    border-color: #804018;
}

.photoshop {
    left: 4%;
    top: 25%;
}

.blender {
    right: 9%;
    top: 14%;
}

.illustrator {
    right: 1%;
    top: 42%;
}

.after-effects {
    left: 2%;
    bottom: 24%;
}

.figma {
    right: 10%;
    bottom: 25%;
}

.premiere {
    right: 3%;
    bottom: 8%;
}

@keyframes floating {

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

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

}



/* =========================================================
   SCROLL
========================================================= */

.scroll-text {
    position: absolute;

    bottom: 35px;
    left: 46px;

    display: flex;
    align-items: center;

    gap: 18px;

    color: #666;

    font-size: 10px;

    letter-spacing: 5px;
}

.scroll-text span {
    width: 60px;
    height: 1px;

    background: #ff7627;
}



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

.about-section {
    min-height: 100vh;

    position: relative;

    display: grid;

    grid-template-columns: 50% 50%;

    align-items: center;

    padding: 110px 48px 90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(255,100,25,.07),
            transparent 30%
        ),
        #030405;
}

.about-visual {
    height: 650px;

    position: relative;

    display: flex;

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

.about-orbit {
    position: absolute;

    border: 1px solid rgba(255,118,39,.22);

    border-radius: 50%;

    pointer-events: none;
}

.orbit-a {
    width: 520px;
    height: 520px;

    animation:
        aboutRotate 20s linear infinite;
}

.orbit-b {
    width: 600px;
    height: 250px;

    transform: rotate(30deg);

    border-style: dashed;

    animation:
        aboutRotate 15s linear infinite reverse;
}

.orbit-c {
    width: 380px;
    height: 600px;

    transform: rotate(-30deg);

    animation:
        aboutRotate 24s linear infinite;
}

@keyframes aboutRotate {

    to {
        transform: rotate(360deg);
    }

}



/* ABOUT CARD */

.about-card {
    position: relative;

    width: 310px;
    height: 430px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #17191c,
            #08090a
        );

    border: 1px solid #35383c;

    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 50px rgba(255,118,39,.08);

    display: flex;

    flex-direction: column;

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

    transform: rotate(-5deg);

    z-index: 3;
}

.about-logo {
    width: 100px;
    height: 100px;

    overflow: hidden;

    border-radius: 50%;

    border: 1px solid #ff7627;

    background: #fff;

    margin-bottom: 35px;
}

.about-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-card-title {
    font-size: 62px;

    font-weight: 700;

    color: #ff7627;

    margin-bottom: 8px;
}

.about-card-subtitle {
    color: #bcbcbc;

    font-size: 10px;

    letter-spacing: 8px;
}

.about-line {
    width: 90px;
    height: 2px;

    background: #ff7627;

    margin: 28px 0;
}

.about-card-tags {
    color: #666;

    font-size: 9px;

    letter-spacing: 3px;
}



/* ABOUT TOOLS */

.about-tool {
    min-width: 190px;

    animation-duration: 4.5s;
}

.tool-vfx {
    top: 9%;
    left: 8%;
}

.tool-blender {
    top: 19%;
    right: 1%;

    animation-delay: 1s;
}

.tool-photoshop {
    bottom: 17%;
    left: 11%;

    animation-delay: .5s;
}

.tool-web {
    bottom: 9%;
    right: 2%;

    animation-delay: 1.5s;
}

.orange-icon,
.web-icon {
    color: #ff7627;
    border-color: #8b4215;
}



/* ABOUT CONTENT */

.about-content {
    position: relative;

    z-index: 5;

    padding-left: 45px;

    max-width: 720px;
}

.about-content h2 {
    font-size: clamp(58px,5vw,88px);

    line-height: .92;

    letter-spacing: -3px;

    margin-bottom: 40px;
}

.about-content h2 strong {
    display: block;

    color: #ff7627;
}

.about-content p {
    max-width: 670px;

    color: #8f8f8f;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 22px;
}

.about-buttons {
    display: flex;

    gap: 14px;

    margin-top: 35px;
}



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

.projects-section {
    position: relative;

    padding: 120px 3.5vw 90px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(255,111,28,.08),
            transparent 32%
        ),
        #050505;

    overflow: hidden;
}

.projects-grid-bg {
    position: absolute;

    inset: 0;

    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;

    pointer-events: none;

    animation:
        gridMove 20s linear infinite;
}

@keyframes gridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(72px);
    }

}

.projects-bg-glow {
    position: absolute;

    width: 550px;
    height: 550px;

    right: -200px;
    top: 180px;

    border-radius: 50%;

    background: #ff7627;

    opacity: .08;

    filter: blur(120px);

    animation:
        bigGlow 8s ease-in-out infinite;
}

@keyframes bigGlow {

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

    50% {
        transform: translate(-100px,80px);
    }

}



/* PROJECT HEADER */

.projects-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 60px;
}

.section-label {
    display: flex;

    align-items: center;

    gap: 14px;

    color: #999;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 5px;
}

.section-label > span {
    width: 28px;
    height: 3px;

    background: #ff792c;

    display: block;
}

.projects-header h2 {
    margin: 28px 0 12px;

    font-size: clamp(48px,5.5vw,82px);

    line-height: .95;

    font-weight: 900;

    letter-spacing: -4px;

    color: #fff;
}

.projects-header h2 strong {
    color: #ff792c;
}

.projects-header p {
    max-width: 650px;

    margin: 0;

    color: #777;

    font-size: 15px;

    line-height: 1.7;
}

.projects-contact-btn {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 23px;

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

    border-radius: 40px;

    color: #fff;

    font-size: 12px;

    letter-spacing: 1px;

    transition: .35s ease;
}

.projects-contact-btn span {
    color: #ff792c;

    font-size: 17px;
}

.projects-contact-btn:hover {
    background: #ff792c;

    color: #050505;

    transform: translateY(-4px);
}

.projects-contact-btn:hover span {
    color: #050505;
}



/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 18px;
}

.project-card {
    position: relative;

    min-width: 0;

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

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

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

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

.project-card:hover {
    transform: translateY(-12px);

    border-color: rgba(255,121,44,.65);

    box-shadow:
        0 25px 70px rgba(0,0,0,.5),
        0 0 35px rgba(255,121,44,.08);
}

.featured-project {
    border-color: rgba(255,121,44,.55);
}



/* =========================================================
   PROJECT IMAGE AREA
========================================================= */

.project-image {
    position: relative;

    height: 300px;

    overflow: hidden;

    display: flex;

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

    background: #101010;
}

.project-number {
    position: absolute;

    z-index: 20;

    top: 15px;
    right: 15px;

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

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    transition: .3s ease;
}

.project-card:hover .project-number {
    color: #ff792c;
}

.image-overlay {
    position: absolute;

    inset: 0;

    z-index: 10;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            transparent 60%
        );

    opacity: .65;

    transition: .4s ease;

    pointer-events: none;
}

.project-card:hover .image-overlay {
    opacity: .9;
}



/* =========================================================
   PROJECT VIEW
========================================================= */

.project-view {
    position: absolute;

    left: 22px;
    bottom: 20px;

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: 0;

    transform: translateY(12px);

    transition: .4s ease;
}

.project-card:hover .project-view {
    opacity: 1;

    transform: translateY(0);
}

.view-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    border: 1px solid #ff792c;

    border-radius: 50%;

    color: #ff792c;

    font-size: 15px;
}



/* =========================================================
   AUREEN VISUAL
========================================================= */

.project-aureen {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,220,180,.22),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #2a211a,
            #080808
        );
}

.aureen-glow {
    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background: #e8c99e;

    opacity: .13;

    filter: blur(40px);

    animation:
        aureenGlow 4s ease-in-out infinite;
}

@keyframes aureenGlow {

    0%,
    100% {
        transform: scale(.85);
    }

    50% {
        transform: scale(1.15);
    }

}

.aureen-bottle {
    position: relative;

    width: 115px;
    height: 185px;

    z-index: 5;

    transform:
        rotate(-5deg)
        translateY(5px);

    animation:
        productFloat 4s ease-in-out infinite;
}

@keyframes productFloat {

    0%,
    100% {
        transform:
            rotate(-5deg)
            translateY(5px);
    }

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

}

.bottle-cap {
    width: 58px;
    height: 28px;

    margin: auto;

    background:
        linear-gradient(
            90deg,
            #c9b18b,
            #f1dfc2,
            #aa8e68
        );

    border-radius: 6px 6px 2px 2px;
}

.bottle-body {
    height: 145px;

    margin-top: 3px;

    border-radius: 12px 12px 20px 20px;

    background:
        linear-gradient(
            100deg,
            #d9c3a4,
            #f3e6d1 50%,
            #bda07c
        );

    box-shadow:
        0 20px 35px rgba(0,0,0,.5);

    color: #30251b;

    display: flex;

    flex-direction: column;

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

.bottle-body span {
    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1px;
}

.bottle-body small {
    color: #b66c25;

    margin-top: 3px;

    letter-spacing: 4px;
}

.bottle-body i {
    width: 38px;
    height: 1px;

    background: #a56d37;

    margin: 12px 0;
}

.bottle-body em {
    font-style: normal;

    font-size: 6px;

    letter-spacing: 2px;
}

.floating-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    background: #e6b879;

    border-radius: 50%;

    box-shadow:
        0 0 12px #e6b879;

    animation:
        particleFloat 4s ease-in-out infinite;
}

.p1 {
    left: 20%;
    top: 30%;
}

.p2 {
    right: 22%;
    top: 55%;

    animation-delay: 1s;
}

.p3 {
    left: 35%;
    bottom: 22%;

    animation-delay: 2s;
}

@keyframes particleFloat {

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

    50% {
        transform: translateY(-25px);
        opacity: 1;
    }

}



/* =========================================================
   SITEFORGE VISUAL
========================================================= */

.project-siteforge {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(80,120,255,.22),
            transparent 45%
        ),
        #080b13;
}

.browser-window {
    width: 82%;
    height: 72%;

    position: relative;

    z-index: 5;

    border-radius: 10px;

    overflow: hidden;

    background: #080b12;

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

    box-shadow:
        0 25px 50px rgba(0,0,0,.6);

    transform:
        perspective(700px)
        rotateY(-8deg)
        rotateX(3deg);

    transition: .6s ease;
}

.project-card:hover .browser-window {
    transform:
        perspective(700px)
        rotateY(0)
        rotateX(0)
        translateY(-5px);
}

.browser-top {
    height: 22px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-left: 10px;

    background: #151923;
}

.browser-top span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #555;
}

.browser-content {
    padding: 15px;
}

.browser-nav {
    color: #8e9ab4;

    font-size: 7px;

    letter-spacing: 2px;
}

.browser-hero {
    margin-top: 20px;

    display: flex;

    justify-content: center;
}

.browser-hero small {
    display: block;

    color: #ff792c;

    font-size: 6px;

    letter-spacing: 2px;

    margin-bottom: 6px;
}

.browser-hero strong {
    display: block;

    color: #fff;

    font-size: 23px;

    line-height: .9;
}

.browser-hero i {
    display: block;

    width: 45px;
    height: 3px;

    background: #ff792c;

    margin-top: 10px;
}

.browser-cards {
    display: flex;

    gap: 6px;

    margin-top: 18px;
}

.browser-cards span {
    width: 30%;
    height: 28px;

    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            #252b3d,
            #111521
        );
}

.siteforge-code {
    position: absolute;

    right: 16px;
    top: 42px;

    z-index: 7;

    display: flex;

    flex-direction: column;

    gap: 6px;
}

.siteforge-code span {
    height: 3px;

    border-radius: 5px;

    background: #ff792c;

    opacity: .7;

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

.siteforge-code span:nth-child(1) {
    width: 45px;
}

.siteforge-code span:nth-child(2) {
    width: 70px;

    animation-delay: .2s;
}

.siteforge-code span:nth-child(3) {
    width: 35px;

    animation-delay: .4s;
}

.siteforge-code span:nth-child(4) {
    width: 55px;

    animation-delay: .6s;
}

@keyframes codeMove {

    0%,
    100% {
        opacity: .3;

        transform: translateX(0);
    }

    50% {
        opacity: 1;

        transform: translateX(-8px);
    }

}



/* =========================================================
   ORVIX VISUAL
========================================================= */

.project-orvix {
    background:
        radial-gradient(
            circle at center,
            rgba(100,70,255,.28),
            transparent 50%
        ),
        #070812;
}

.phone {
    position: relative;

    width: 125px;
    height: 235px;

    z-index: 6;

    border-radius: 21px;

    padding: 7px;

    background:
        linear-gradient(
            145deg,
            #37354d,
            #0b0c15
        );

    border: 1px solid #7770ba;

    box-shadow:
        0 25px 55px rgba(0,0,0,.65),
        0 0 45px rgba(116,93,255,.18);

    transform:
        rotate(-6deg);

    animation:
        phoneFloat 4s ease-in-out infinite;
}

@keyframes phoneFloat {

    0%,
    100% {
        transform:
            rotate(-6deg)
            translateY(5px);
    }

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

}

.phone-speaker {
    position: absolute;

    top: 4px;
    left: 50%;

    transform: translateX(-50%);

    width: 30px;
    height: 4px;

    border-radius: 10px;

    background: #171722;

    z-index: 10;
}

.phone-screen {
    height: 100%;

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(126,100,255,.2),
            transparent 35%
        ),
        #090a13;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 35px;
}

.orvix-logo {
    width: 35px;
    height: 35px;

    display: flex;

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

    border: 1px solid #8e7cff;

    border-radius: 50%;

    color: #b3a8ff;

    font-weight: 700;

    box-shadow:
        0 0 20px rgba(142,124,255,.35);
}

.phone-screen strong {
    margin-top: 10px;

    font-size: 16px;

    letter-spacing: 4px;
}

.phone-screen small {
    margin-top: 3px;

    color: #8e7cff;

    font-size: 5px;

    letter-spacing: 2px;
}

.ai-wave {
    height: 50px;

    margin-top: 22px;

    display: flex;

    align-items: center;

    gap: 3px;
}

.ai-wave span {
    width: 3px;

    height: 12px;

    border-radius: 10px;

    background: #8e7cff;

    animation:
        wave 1.2s ease-in-out infinite;
}

.ai-wave span:nth-child(2) {
    animation-delay: .1s;
}

.ai-wave span:nth-child(3) {
    animation-delay: .2s;
}

.ai-wave span:nth-child(4) {
    animation-delay: .3s;
}

.ai-wave span:nth-child(5) {
    animation-delay: .4s;
}

.ai-wave span:nth-child(6) {
    animation-delay: .5s;
}

.ai-wave span:nth-child(7) {
    animation-delay: .6s;
}

@keyframes wave {

    0%,
    100% {
        height: 8px;
    }

    50% {
        height: 30px;
    }

}

.ai-input {
    width: 85px;

    margin-top: 15px;

    padding: 7px;

    border: 1px solid rgba(142,124,255,.3);

    border-radius: 8px;

    color: #777;

    font-size: 6px;

    display: flex;

    justify-content: space-between;
}

.ai-input b {
    color: #8e7cff;
}

.orvix-orbit {
    position: absolute;

    width: 200px;
    height: 100px;

    border: 1px solid rgba(142,124,255,.3);

    border-radius: 50%;

    animation:
        orvixRotate 7s linear infinite;
}

.orvix-orbit.second {
    width: 240px;
    height: 150px;

    transform: rotate(55deg);

    animation-duration: 10s;

    animation-direction: reverse;
}

@keyframes orvixRotate {

    to {
        transform: rotate(360deg);
    }

}

.orvix-particle {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8e7cff;

    box-shadow:
        0 0 15px #8e7cff;

    animation:
        orbFloat 3s ease-in-out infinite;
}

.op1 {
    top: 20%;
    left: 25%;
}

.op2 {
    bottom: 22%;
    right: 22%;

    animation-delay: 1.2s;
}

@keyframes orbFloat {

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

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

}



/* ================================
   SSK SURGICAL PROJECT
================================ */

.ssk-card {
    position: relative;
    overflow: hidden;
}

.ssk-project-image {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 122, 32, 0.14),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #111315,
            #08090a 65%,
            #15100d
        );
}

/* Actual SSK image */

.ssk-project-image img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    padding: 22px;

    box-sizing: border-box;

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

/* No decorative glow, frame, or side elements around the SSK logo. */
.ssk-project-image::before { content: none !important; display: none !important; }

/* Dark premium overlay */

.ssk-project-image .image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.72),
            transparent 45%
        );

    pointer-events: none;

    z-index: 2;
}

/* Project number */

.ssk-project-image .project-number {
    position: absolute;

    top: 18px;
    right: 20px;

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

    letter-spacing: 2px;

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

    z-index: 5;
}

/* Case study */

.ssk-project-image .case-study {
    position: absolute;

    left: 22px;
    bottom: 20px;

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

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

    letter-spacing: 1.5px;

    color: #ffffff;

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    z-index: 5;
}

.ssk-project-image .case-study span {
    width: 34px;
    height: 34px;

    border: 1px solid rgba(255,111,24,0.7);

    border-radius: 50%;

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

    color: #ff7624;

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

/* Hover */

.ssk-card:hover .ssk-project-image img {
    transform: scale(1.06);

    filter:
        brightness(1.08)
        contrast(1.04);
}

.ssk-card:hover .ssk-project-image .case-study {
    opacity: 1;
    transform: translateY(0);
}

.ssk-card:hover .ssk-project-image .case-study span {
    background: #ff7624;
    color: #000;
}

/* Orange border on hover */

.ssk-card::after {
    content: "";

    position: absolute;
    inset: 0;

    border: 1px solid transparent;

    border-radius: inherit;

    pointer-events: none;

    transition: border-color 0.35s ease;
}

.ssk-card:hover::after {
    border-color: rgba(255,111,24,0.65);
}


/* ================================
   SSK INFO
================================ */

.ssk-card .project-info {
    position: relative;

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

    min-height: 115px;

    padding: 24px 22px;

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

    box-sizing: border-box;
}

.ssk-card .project-info h3 {
    margin: 0 0 7px;

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

    color: #ffffff;
}

.ssk-card .project-info p {
    margin: 0;

    font-size: 14px;

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


/* Arrow */

.ssk-card .project-arrow {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 18px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}

.ssk-card:hover .project-arrow {
    background: #ff7624;

    border-color: #ff7624;

    color: #000;

    transform: rotate(45deg);
}


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

@media (max-width: 900px) {

    .ssk-project-image {
        height: 280px;
    }

    .ssk-project-image img {
        padding: 18px;
    }

}

@media (max-width: 600px) {

    .ssk-project-image {
        height: 250px;
    }

    .ssk-card .project-info {
        padding: 20px 18px;
    }

    .ssk-card .project-info h3 {
        font-size: 18px;
    }

  }



/* =========================================================
   HAWKERS VISUAL
========================================================= */

.project-hawkers {
    background:
        radial-gradient(
            circle at center,
            rgba(255,90,20,.27),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #281207,
            #080808
        );
}

.food-orbit {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    border:
        1px dashed rgba(255,116,31,.5);

    animation:
        foodRotate 12s linear infinite;
}

@keyframes foodRotate {

    to {
        transform: rotate(360deg);
    }

}

.food-card {
    position: relative;

    z-index: 5;

    width: 205px;
    height: 145px;

    border-radius: 12px;

    border: 1px solid rgba(255,160,80,.3);

    background:
        linear-gradient(
            145deg,
            #32160a,
            #100906
        );

    display: flex;

    flex-direction: column;

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

    box-shadow:
        0 25px 50px rgba(0,0,0,.5);

    animation:
        foodFloat 4s ease-in-out infinite;
}

@keyframes foodFloat {

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

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

}

.food-card-top {
    color: #e7b17b;

    font-size: 7px;

    letter-spacing: 4px;
}

.food-card strong {
    color: #fff;

    font-size: 28px;

    margin-top: 6px;

    letter-spacing: 1px;
}

.food-card small {
    color: #ff7622;

    font-size: 7px;

    letter-spacing: 3px;

    margin-top: 5px;
}

.food-line {
    width: 70px;
    height: 1px;

    background: #ff7622;

    margin: 12px 0;
}

.food-items {
    display: flex;

    gap: 10px;

    color: #777;

    font-size: 6px;

    letter-spacing: 1px;
}

.food-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ff7622;

    box-shadow:
        0 0 15px #ff7622;

    animation:
        foodParticle 3s ease-in-out infinite;
}

.fp1 {
    left: 20%;
    top: 25%;
}

.fp2 {
    right: 20%;
    top: 35%;

    animation-delay: .8s;
}

.fp3 {
    left: 25%;
    bottom: 20%;

    animation-delay: 1.6s;
}

@keyframes foodParticle {

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

    50% {
        transform: translateY(-20px);
        opacity: 1;
    }

}



/* =========================================================
   PROJECT INFO
========================================================= */

.project-info {
    min-height: 105px;

    padding: 20px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    position: relative;

    z-index: 30;
}

.project-info h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    transition: .35s ease;
}

.project-info p {
    margin: 0;

    color: #777;

    font-size: 12px;

    transition: .35s ease;
}

.project-card:hover .project-info h3 {
    color: #ff792c;

    transform: translateX(3px);
}

.project-card:hover .project-info p {
    color: #aaa;
}

.project-arrow {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 17px;

    cursor: pointer;

    transition: .35s ease;
}

.project-card:hover .project-arrow {
    background: #ff792c;

    border-color: #ff792c;

    color: #050505;

    transform: rotate(45deg);

    box-shadow:
        0 0 20px rgba(255,116,31,.35);
}

.orange-arrow {
    background: #ff792c;

    border-color: #ff792c;

    color: #050505;
}



/* =========================================================
   PROJECT BOTTOM
========================================================= */

.projects-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 55px;
}

.explore-line {
    display: flex;

    align-items: center;

    gap: 18px;

    color: #666;

    font-size: 10px;

    letter-spacing: 4px;
}

.explore-line i {
    width: 120px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #ff792c 0 35%,
            rgba(255,255,255,.15) 35%
        );

    position: relative;
}

.explore-line i::after {
    content: "";

    position: absolute;

    width: 35px;
    height: 1px;

    left: 0;

    background: #fff;

    animation:
        lineMove 2s linear infinite;
}

@keyframes lineMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(85px);
    }

}

.all-projects-btn {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 20px;

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

    border-radius: 40px;

    color: #fff;

    font-size: 10px;

    letter-spacing: 1.5px;

    transition: .3s ease;
}

.all-projects-btn span {
    color: #ff792c;

    font-size: 16px;
}

.all-projects-btn:hover {
    background: #ff792c;

    color: #050505;
}

.all-projects-btn:hover span {
    color: #050505;
}



/* =========================================================
   MODAL
========================================================= */

.project-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.project-modal.active {
    opacity: 1;

    visibility: visible;
}

.modal-backdrop {
    position: absolute;

    inset: 0;

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

    backdrop-filter: blur(15px);
}

.modal-container {
    position: relative;

    z-index: 2;

    width: min(1250px,100%);

    max-height: 90vh;

    overflow-y: auto;

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

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,121,44,.1),
            transparent 30%
        ),
        #0b0b0b;

    box-shadow:
        0 40px 120px rgba(0,0,0,.8);

    transform:
        translateY(30px)
        scale(.96);

    transition:
        .45s cubic-bezier(.2,.8,.2,1);
}

.project-modal.active .modal-container {
    transform:
        translateY(0)
        scale(1);
}

.modal-close {
    position: absolute;

    z-index: 10;

    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

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

    color: #fff;

    font-size: 26px;

    cursor: pointer;

    transition: .3s ease;
}

.modal-close:hover {
    background: #ff792c;

    color: #050505;

    transform: rotate(90deg);
}

.modal-content {
    display: grid;

    grid-template-columns:
        1.05fr 1fr;
}

.modal-image {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #101010;

    display: flex;

    align-items: center;

    justify-content: center;
}

.modal-image-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    left: 25%;
    top: 30%;

    background: #ff792c;

    opacity: .12;

    filter: blur(100px);

    pointer-events: none;
}



/* MODAL VISUALS */

.modal-aureen {
    width: 70%;
    height: 70%;

    display: flex;

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

    border-radius: 25px;

    background:
        radial-gradient(
            circle,
            rgba(255,220,180,.25),
            transparent 55%
        ),
        #211a15;
}

.modal-siteforge {
    width: 82%;
    height: 65%;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #0c1222,
            #070910
        );

    padding: 25px;

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

.modal-siteforge h3 {
    color: #fff;

    font-size: 30px;
}

.modal-siteforge span {
    display: block;

    margin-top: 8px;

    color: #ff792c;

    letter-spacing: 4px;
}

.modal-orvix {
    width: 200px;
    height: 380px;

    border-radius: 30px;

    background: #0a0b14;

    border: 1px solid #8e7cff;

    box-shadow:
        0 0 70px rgba(142,124,255,.2);

    display: flex;

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

    color: #8e7cff;

    font-size: 45px;

    letter-spacing: 8px;
}

.modal-ssk {
    width: 75%;
    height: 55%;

    background:
        linear-gradient(
            145deg,
            #eee,
            #ccc
        );

    display: flex;

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

    color: #222;

    font-size: 42px;

    font-weight: 800;

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

.modal-hawkers {
    width: 75%;
    height: 55%;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #401a0a,
            #120805
        );

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

    display: flex;

    flex-direction: column;

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

    color: #fff;
}

.modal-hawkers strong {
    color: #ff792c;

    font-size: 45px;
}



/* MODAL DETAILS */

.modal-details {
    padding: 65px 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.modal-category {
    color: #ff792c;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.modal-details h2 {
    margin: 16px 0 20px;

    color: #fff;

    font-size: clamp(40px,4vw,65px);

    line-height: .95;

    letter-spacing: -2px;
}

.modal-description {
    margin: 0 0 30px;

    max-width: 550px;

    color: #999;

    font-size: 15px;

    line-height: 1.8;
}

.modal-meta {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-bottom: 30px;
}

.modal-meta div {
    padding: 17px;

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

    border-radius: 12px;

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

.modal-meta span,
.modal-block-title {
    display: block;

    margin-bottom: 8px;

    color: #666;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}

.modal-meta strong {
    color: #fff;

    font-size: 13px;
}

.modal-block {
    margin-bottom: 25px;
}

.modal-block p {
    margin: 0;

    color: #999;

    font-size: 13px;

    line-height: 1.75;
}

.modal-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.modal-tag {
    padding: 8px 12px;

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

    border-radius: 30px;

    color: #ccc;

    background: rgba(255,121,44,.035);

    font-size: 10px;
}

.modal-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: fit-content;

    min-width: 245px;

    margin-top: 10px;

    padding: 14px 18px;

    border-radius: 40px;

    background: #ff792c;

    color: #050505;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: .3s ease;
}

.modal-cta span {
    font-size: 17px;
}

.modal-cta:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 35px rgba(255,121,44,.25);
}



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

.services-section,
.contact-section {
    position: relative;

    padding: 110px 46px;

    background: #050607;
}

.services-section > h2 {
    font-size: 55px;

    margin-bottom: 45px;
}

.services-section > h2 strong {
    color: #ff7627;
}

.services-grid {
    display: grid;

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

    gap: 15px;
}

.service-box {
    min-height: 190px;

    padding: 28px;

    border: 1px solid #292b2e;

    border-radius: 14px;

    background: #0a0b0c;

    transition: .3s ease;
}

.service-box:hover {
    transform: translateY(-5px);

    border-color: #ff7627;

    box-shadow:
        0 15px 40px rgba(255,118,39,.07);
}

.service-box > span {
    display: block;

    color: #ff7627;

    font-size: 30px;

    margin-bottom: 25px;
}

.service-box h3 {
    font-size: 18px;

    margin-bottom: 10px;
}

.service-box p {
    color: #777;

    font-size: 13px;
}



/* =========================================================
   CONTACT
========================================================= */

.contact-box {
    max-width: 1400px;

    margin: auto;

    padding: 60px;

    border: 1px solid #27292b;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(255,118,39,.09),
            transparent 35%
        ),
        #090a0b;
}

.contact-box h2 {
    font-size: 55px;

    line-height: .95;

    margin-bottom: 18px;
}

.contact-box h2 strong {
    display: block;

    color: #ff7627;
}

.contact-box p {
    color: #888;

    font-size: 15px;
}



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

footer {
    min-height: 120px;

    padding: 30px 46px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid #1b1b1b;

    background: #030405;
}

.footer-brand {
    display: flex;

    align-items: center;

    gap: 14px;
}

.footer-brand .logo-circle {
    width: 48px;
    height: 48px;
}

.footer-brand b {
    display: block;

    font-size: 15px;
}

.footer-brand small {
    display: block;

    color: #666;

    font-size: 9px;

    letter-spacing: 2px;

    margin-top: 5px;
}

.footer-social {
    display: flex;

    gap: 25px;

    color: #777;

    font-size: 12px;
}

.footer-email {
    color: #aaa;

    font-size: 12px;
}



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

@media (max-width: 1300px) {

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

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

}

@media (max-width: 1000px) {

    .header {
        padding: 0 25px;
    }

    .header nav {
        gap: 20px;
    }

    .header-btn {
        display: none;
    }

    .hero-content {
        width: 55%;
    }

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

    .hero-content h2 {
        font-size: 32px;
    }

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

    .about-visual {
        order: 2;
    }

    .about-content {
        padding-left: 0;
    }

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

    .modal-content {
        grid-template-columns: 1fr;
    }

    .modal-image {
        min-height: 420px;
    }

    .modal-details {
        padding: 45px 30px;
    }

}

@media (max-width: 700px) {

    .header {
        height: 64px;

        padding: 0 16px;
    }

    .brand {
        font-size: 16px;
    }

    .logo-circle {
        width: 44px;
        height: 44px;
    }

    .header nav {
        display: none;
    }

    .hero {
        padding:
            110px 20px 70px;

        display: block;
    }

    .hero-content {
        width: 100%;
    }

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

    .hero-content h2 {
        font-size: 28px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .hero-visual {
        position: relative;

        width: 100%;
        height: 500px;

        top: auto;
        right: auto;

        transform: scale(.75);
    }

    .scroll-text {
        left: 20px;
    }

    .about-section {
        padding:
            90px 20px;
    }

    .about-visual {
        height: 500px;

        transform: scale(.75);
    }

    .about-content h2 {
        font-size: 48px;
    }

    .projects-section {
        padding:
            80px 20px 60px;
    }

    .projects-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }

    .projects-header h2 {
        font-size: 48px;

        letter-spacing: -2px;
    }

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

    .project-image {
        height: 300px;
    }

    .projects-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }

    .services-section,
    .contact-section {
        padding:
            80px 20px;
    }

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

    .contact-box {
        padding: 35px;

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .contact-box h2 {
        font-size: 38px;
    }

    footer {
        padding: 35px 20px;

        flex-direction: column;

        gap: 25px;

        text-align: center;
    }

    .modal-details h2 {
        font-size: 42px;
    }

    .modal-meta {
        grid-template-columns: 1fr;
    }

}









/* =========================================================
   MOBILE RESPONSIVE — PS DIGITAL MAKER
   ========================================================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {

  .hero,
  .about,
  .projects,
  .services,
  .contact {
    padding-left: 5vw;
    padding-right: 5vw;
  }

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


/* ---------- MOBILE ---------- */
@media (max-width: 768px) {

  /* GLOBAL */
  * {
    box-sizing: border-box;
  }

  body {
    width: 100%;
    overflow-x: hidden;
  }

  section {
    width: 100%;
    min-height: auto;
  }


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

  header,
  nav,
  .navbar,
  .header {
    width: 100%;
  }

  header {
    padding: 12px 18px !important;
  }

  .nav-container {
    padding: 0 !important;
  }

  .logo-text {
    font-size: 16px !important;
  }

  .logo img {
    width: 44px !important;
    height: 44px !important;
  }

  nav ul,
  .nav-links {
    display: none !important;
  }

  .menu-btn,
  .mobile-menu-btn,
  .hamburger {
    display: flex !important;
  }


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

  .hero {
    min-height: auto !important;
    padding: 90px 22px 70px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(48px, 14vw, 82px) !important;
    line-height: .88 !important;
    letter-spacing: -3px !important;
  }

  .hero h2,
  .hero-subtitle {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .hero p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  .hero-buttons {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero-buttons a {
    min-height: 48px;
  }

  .hero-visual {
    width: 100% !important;
    margin-top: 50px !important;
    transform: scale(.85);
    transform-origin: center;
  }

  .software-card {
    max-width: 180px !important;
  }

  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 45px !important;
  }

  .hero-stats strong {
    font-size: 22px !important;
  }

  .hero-stats span {
    font-size: 10px !important;
  }


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

  .about {
    padding: 80px 22px !important;
  }

  .about-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 50px !important;
  }

  .about-text {
    width: 100% !important;
    order: 2 !important;
  }

  .about-visual {
    width: 100% !important;
    order: 1 !important;
    min-height: 400px !important;
  }

  .about h2 {
    font-size: clamp(42px, 12vw, 70px) !important;
    line-height: .95 !important;
  }

  .about p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .about-visual img {
    max-width: 75% !important;
  }


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

  .projects {
    padding: 80px 16px !important;
  }

  .projects-header {
    display: block !important;
    margin-bottom: 35px !important;
  }

  .projects-header h2 {
    font-size: clamp(45px, 12vw, 72px) !important;
    line-height: .95 !important;
    letter-spacing: -2px !important;
  }

  .projects-header p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .projects-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .project-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .project-image {
    height: 300px !important;
  }

  .project-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .project-info {
    padding: 20px !important;
  }

  .project-info h3 {
    font-size: 21px !important;
  }

  .project-info p {
    font-size: 13px !important;
  }


  /* ================= PROJECT FLOATING ELEMENTS ================= */

  .project-card .floating-icon,
  .project-card .floating-card {
    max-width: 130px !important;
  }

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


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

  .services {
    padding: 80px 22px !important;
  }

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

  .service-card {
    width: 100% !important;
  }


  /* ================= CONTACT ================= */

  .contact {
    padding: 80px 22px !important;
  }

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

  .contact h2 {
    font-size: clamp(45px, 12vw, 70px) !important;
  }


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

  footer {
    padding: 40px 22px !important;
  }

  .footer-container {
    flex-direction: column !important;
    gap: 25px !important;
    text-align: center;
  }


  /* ================= HIDE DESKTOP DECORATIONS ================= */

  .desktop-only {
    display: none !important;
  }

  .large-orbit,
  .background-orbit {
    transform: scale(.65);
    opacity: .5;
  }
}


/* ---------- SMALL PHONES ---------- */

@media (max-width: 480px) {

  .hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero h1 {
    font-size: 52px !important;
  }

  .hero h2 {
    font-size: 21px !important;
  }

  .hero-buttons {
    flex-direction: column !important;
    width: 100%;
  }

  .hero-buttons a {
    width: 100% !important;
    justify-content: center;
  }

  .hero-stats {
    grid-template-columns: 1fr !important;
    text-align: left;
    gap: 18px !important;
  }

  .hero-stats > div {
    border-left: 1px solid rgba(255,255,255,.15);
    padding-left: 15px;
  }

  .projects-header h2 {
    font-size: 48px !important;
  }

  .project-image {
    height: 250px !important;
  }

  .about-visual {
    min-height: 330px !important;
  }
}\n
/* ================================
   3D ARTIST PROJECT
================================ */
.project-3dartist {
    background:
        radial-gradient(circle at 50% 45%, rgba(255,118,39,.22), transparent 42%),
        linear-gradient(145deg, #15171b, #050607 75%);
}
.three-d-orbit {
    position: absolute;
    width: 210px;
    height: 90px;
    border: 1px solid rgba(255,118,39,.55);
    border-radius: 50%;
    z-index: 2;
    transform: rotate(-28deg);
    animation: threeDOrbit 12s linear infinite;
}
.three-d-orbit.orbit-two {
    width: 240px;
    height: 125px;
    transform: rotate(48deg);
    border-color: rgba(255,255,255,.18);
    animation-direction: reverse;
}
@keyframes threeDOrbit {
    to { rotate: 360deg; }
}
.three-d-object {
    position: relative;
    width: 105px;
    height: 125px;
    z-index: 4;
    transform: perspective(500px) rotateY(-28deg) rotateX(8deg);
    filter: drop-shadow(0 22px 20px rgba(0,0,0,.55));
    animation: threeDFloat 4s ease-in-out infinite;
}
.three-d-object-front {
    position: absolute;
    inset: 15px 15px 0 0;
    border: 1px solid rgba(255,190,145,.65);
    background: linear-gradient(135deg, #ff9a58, #d94d12 60%, #682006);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.three-d-object-side {
    position: absolute;
    top: 15px;
    right: 0;
    width: 15px;
    height: 110px;
    background: linear-gradient(180deg, #a94312, #321006);
    clip-path: polygon(0 0, 100% 8%, 100% 88%, 0 100%);
}
.three-d-object-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 25px;
    background: linear-gradient(120deg, #ffd0a5, #ff7627 70%);
    clip-path: polygon(15% 0, 100% 0, 84% 100%, 0 100%);
}
.three-d-label {
    position: absolute;
    z-index: 6;
    top: 22px;
    left: 22px;
    color: #ff9a58;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
}
@keyframes threeDFloat {
    0%, 100% { transform: perspective(500px) rotateY(-28deg) rotateX(8deg) translateY(0); }
    50% { transform: perspective(500px) rotateY(-20deg) rotateX(4deg) translateY(-10px); }
}


/* ================================
   V2 PROJECT CARD CONSISTENCY FIXES
================================ */
.projects-grid {
    align-items: stretch;
}

.projects-grid > .project-card,
.projects-grid > .ssk-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.13);
    box-sizing: border-box;
}

/* SiteForge uses the same neutral default border as every other card. */
.projects-grid > .featured-project {
    border-color: rgba(255,255,255,.13);
}
.projects-grid > .featured-project:hover {
    border-color: rgba(255,121,44,.65);
}

.projects-grid > .project-card > .project-image,
.projects-grid > .ssk-card > .ssk-project-image {
    height: 300px;
    min-height: 300px;
    flex: 0 0 300px;
    box-sizing: border-box;
}

.projects-grid > .project-card > .project-info,
.projects-grid > .ssk-card > .project-info {
    min-height: 105px;
    flex: 1 0 105px;
    box-sizing: border-box;
}

/* Remove the permanent orange outline from the 3D card. */
.projects-grid > .project-3dartist-card {
    border-color: rgba(255,255,255,.13);
}
.projects-grid > .project-3dartist-card:hover {
    border-color: rgba(255,121,44,.65);
}

/* Keep the 3D arrow aligned and styled like the other project arrows. */
.project-3dartist-card .project-info {
    gap: 12px;
}
.project-3dartist-card .project-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
}

/* Branded SSK fallback: centered logo lockup, not plain placeholder text. */
.ssk-project-image.ssk-image-fallback::after {
    content: 'SSK';
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: #ff8a45;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 0 24px rgba(255, 122, 44, .28);
    animation: sskWordmarkGlow 3.8s ease-in-out infinite;
}
.ssk-project-image.ssk-image-fallback .image-overlay::after {
    content: 'SURGICAL EXPORTS';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(43% + 58px);
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
}

@media (max-width: 700px) {
    .projects-grid > .project-card > .project-image,
    .projects-grid > .ssk-card > .ssk-project-image {
        height: 250px;
        min-height: 250px;
        flex-basis: 250px;
    }
}


/* SSK logo motion: subtle breathing glow and a gentle float; no enclosing logo border. */
.ssk-project-image > img { animation: sskLogoFloat 6s ease-in-out infinite; transform-origin: 50% 48%; }
.ssk-project-image.ssk-image-fallback::after { animation: sskWordmarkGlow 3.8s ease-in-out infinite; }
@keyframes sskLogoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sskWordmarkGlow { 0%,100% { text-shadow: 0 0 12px rgba(255,122,44,.18); opacity: .92; } 50% { text-shadow: 0 0 28px rgba(255,122,44,.48); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ssk-project-image > img, .ssk-project-image.ssk-image-fallback::after { animation: none !important; } }


/* SSK logo: remove the solid image panel and all enclosing borders; animate the wordmark itself. */
.ssk-project-image { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.ssk-project-image > img { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; object-fit: contain; animation: sskLogoFloat 5.5s ease-in-out 2.8s infinite; transform-origin: 50% 50%; }
.ssk-project-image::before { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ssk-project-image .image-overlay { background: transparent !important; }
.ssk-project-image.ssk-image-fallback::after { animation: sskWordmarkGlow 3.8s ease-in-out infinite, sskLogoFloat 5.5s ease-in-out infinite; }
@keyframes sskLogoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sskWordmarkGlow { 0%,100% { text-shadow: 0 0 10px rgba(255,122,44,.18); opacity: .92; } 50% { text-shadow: 0 0 26px rgba(255,122,44,.5); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ssk-project-image > img, .ssk-project-image.ssk-image-fallback::after { animation: none !important; } }


/* V2 refinement: match the SSK artwork panel to the 3D Artist panel and add a soft logo glow. */
.projects-grid > .ssk-card > .ssk-project-image {
    background: radial-gradient(circle at 50% 45%, rgba(255,118,39,.22), transparent 42%),
                linear-gradient(145deg, #15171b, #050607 75%) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.projects-grid > .ssk-card .ssk-project-image > img {
    filter: drop-shadow(0 0 8px rgba(255,122,44,.16));
    animation: sskLogoFloat 5.5s ease-in-out 2.8s infinite, sskImageGlow 3.8s ease-in-out infinite;
}
@keyframes sskImageGlow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(255,122,44,.14)); }
    50% { filter: drop-shadow(0 0 14px rgba(255,122,44,.42)); }
}
@media (prefers-reduced-motion: reduce) {
    .projects-grid > .ssk-card .ssk-project-image > img { animation: none !important; }
}


/* SiteForge AI modal prototype visual */
body.project-modal-open { overflow: hidden; }
#projectModal[aria-hidden="true"] { pointer-events: none; }
#projectModal[aria-hidden="false"] { pointer-events: auto; }
#modalVisual { position: relative; z-index: 1; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; padding:34px; }
.sf-modal-preview { width:100%; max-width:560px; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:linear-gradient(145deg,#0d1220,#07080d 75%); box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 45px rgba(255,121,44,.07); transform:rotate(-1deg); animation:sfPreviewFloat 6s ease-in-out infinite; }
.sf-preview-top { height:48px; display:flex; align-items:center; gap:7px; padding:0 15px; background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.07); }
.sf-preview-top>span { width:7px; height:7px; border-radius:50%; background:#54545a; }
.sf-preview-top b { margin-left:12px; font-size:10px; letter-spacing:2px; color:#d6d9e2; }
.sf-preview-top b i { color:#ff792c; font-style:normal; }
.sf-preview-top small { margin-left:auto; color:#6f7484; font-size:8px; letter-spacing:1.3px; }
.sf-preview-body { padding:clamp(22px,4vw,44px); }
.sf-preview-eyebrow { color:#ff792c; font-size:10px; letter-spacing:3px; font-weight:700; }
.sf-preview-body h3 { margin:17px 0 12px; color:#f5f6fa; font-size:clamp(27px,3vw,43px); line-height:1.02; letter-spacing:-1.7px; }
.sf-preview-body h3 em { color:#ff985a; font-style:normal; }
.sf-preview-body p { color:#9296a4; font-size:13px; line-height:1.7; margin:0 0 25px; }
.sf-preview-input { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#0b0d14; color:#747989; font-size:11px; }
.sf-preview-input b { color:#ff792c; font-size:18px; }
.sf-preview-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.sf-preview-actions span { min-height:57px; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:linear-gradient(145deg,#171b27,#10121a); color:#b7bac5; font-size:10px; }
.sf-preview-foot { display:flex; align-items:center; gap:8px; margin-top:27px; color:#666b78; font-size:8px; letter-spacing:1.4px; }
.sf-status-dot { width:6px; height:6px; flex:none; border-radius:50%; background:#ff792c; box-shadow:0 0 12px rgba(255,121,44,.65); }
#modalWork, #modalTools { display:flex; flex-wrap:wrap; gap:8px; }
.modal-tag { display:inline-flex; align-items:center; padding:8px 11px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.035); color:#d4d4d4; font-size:11px; line-height:1.2; }
.modal-cta { align-self:flex-start; }
@keyframes sfPreviewFloat { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(.4deg); } }
@media (max-width:900px) { .modal-content { grid-template-columns:1fr; } .modal-image { min-height:360px; } .modal-details { padding:36px 28px; } #modalVisual { padding:24px; } }
@media (max-width:520px) { .project-modal { padding:10px; } .modal-container { max-height:94vh; border-radius:18px; } .modal-image { min-height:300px; } .sf-preview-top small { display:none; } .sf-preview-actions span { font-size:9px; } }
@media (prefers-reduced-motion: reduce) { .sf-modal-preview { animation:none; } }


/* SiteForge AI: brand-matched concept case study */
#projectModal .modal-image {
  background: radial-gradient(ellipse at 78% 15%, rgba(35,55,111,.38), transparent 44%),
              radial-gradient(ellipse at 20% 82%, rgba(255,121,44,.075), transparent 45%),
              linear-gradient(145deg, #090c15 0%, #07080d 72%);
}
#projectModal .modal-image-glow {
  background: #ff792c;
  opacity: .09;
}
#projectModal .modal-container {
  background: radial-gradient(circle at 95% 4%, rgba(255,121,44,.12), transparent 28%),
              radial-gradient(circle at 45% 0%, rgba(28,45,94,.13), transparent 42%), #0a0b10;
}
#projectModal .sf-modal-preview {
  background: linear-gradient(145deg, #10182b 0%, #090b12 72%);
  border-color: rgba(130,151,209,.18);
  box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 55px rgba(39,66,145,.13), 0 0 30px rgba(255,121,44,.06);
}
.sf-case-study { padding: clamp(34px, 5vw, 70px); border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(12,15,25,.96), #090a0f 75%); }
.sf-case-heading { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.sf-case-heading h3 { margin: 14px 0; color: #f7f8fc; font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -1.7px; }
.sf-case-heading h3 em { color: #ff985a; font-style: normal; }
.sf-case-heading p { max-width: 570px; margin: 0 auto; color: #9297a5; line-height: 1.8; font-size: 14px; }
.sf-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf-work-card { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: linear-gradient(145deg, rgba(19,24,38,.94), rgba(9,10,15,.96)); opacity: 0; transform: translateY(24px); animation: sfWorkEnter .75s cubic-bezier(.2,.8,.2,1) forwards; }
.sf-work-card:nth-child(2) { animation-delay: .12s; }
.sf-work-card:nth-child(3) { animation-delay: .24s; }
.sf-work-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; color: #858b9b; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.sf-work-top i { color: #ff792c; font-size: 16px; font-style: normal; }
.sf-work-window, .sf-generated-site, .sf-system-board { min-height: 245px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: #090b12; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.sf-work-browser { height: 31px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #171c2a; border-bottom: 1px solid rgba(255,255,255,.06); }
.sf-work-browser b { width: 5px; height: 5px; border-radius: 50%; background: #555a67; }
.sf-work-browser span { margin-left: 8px; color: #c9cedb; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
.sf-work-browser em { color: #ff792c; font-style: normal; }
.sf-work-window-body { padding: 22px 15px; }
.sf-work-window-body small, .sf-type-sample small { color: #ff792c; font-size: 8px; letter-spacing: 1.8px; font-weight: 800; }
.sf-work-window-body h4 { margin: 14px 0 20px; color: #f5f6fa; font-size: clamp(21px, 2vw, 28px); line-height: 1.02; letter-spacing: -1px; }
.sf-work-window-body h4 em { color: #ff985a; font-style: normal; }
.sf-work-url { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #7f8595; font-size: 8px; }
.sf-work-url b { color: #ff792c; font-size: 14px; }
.sf-work-progress { height: 3px; margin-top: 17px; overflow: hidden; border-radius: 9px; background: #202431; }
.sf-work-progress span { display: block; width: 42%; height: 100%; background: #ff792c; animation: sfProgress 3s ease-in-out infinite; }
.sf-work-card p { margin: 15px 2px 2px; color: #9297a5; font-size: 11px; line-height: 1.7; }
.sf-generated-site { padding: 14px; background: radial-gradient(circle at 100% 0%, rgba(255,121,44,.2), transparent 35%), #0c101a; }
.sf-generated-nav { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #9ba2b2; font-size: 6px; letter-spacing: .7px; }
.sf-generated-nav strong { color: #f5f6fa; font-size: 8px; letter-spacing: 1.2px; }
.sf-generated-hero { padding: 30px 5px 20px; }
.sf-generated-hero small { color: #ff985a; font-size: 7px; letter-spacing: 1.4px; }
.sf-generated-hero h4 { margin: 11px 0 15px; color: #f4f5f8; font-size: clamp(22px, 2.2vw, 29px); line-height: .98; letter-spacing: -1px; }
.sf-generated-hero h4 em { color: #ff985a; font-style: normal; }
.sf-generated-button { display: inline-block; padding: 8px 10px; border-radius: 3px; background: #ff792c; color: #100a07; font-size: 6px; font-weight: 900; letter-spacing: .7px; }
.sf-generated-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sf-generated-cards span { height: 25px; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; background: linear-gradient(145deg, #1c2231, #11141d); }
.sf-system-board { padding: 15px; background: linear-gradient(145deg, #111625, #080a10); }
.sf-system-title { display: flex; justify-content: space-between; color: #7c8496; font-size: 7px; letter-spacing: 1.2px; }
.sf-system-title b { color: #ff985a; }
.sf-color-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 15px 0 20px; }
.sf-color-row i { height: 28px; border-radius: 4px; background: #ff792c; }
.sf-color-row i:nth-child(2) { background: #ff985a; }
.sf-color-row i:nth-child(3) { background: #151c2d; border: 1px solid #31394c; }
.sf-color-row i:nth-child(4) { background: #080a10; border: 1px solid #31394c; }
.sf-type-sample { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.sf-type-sample strong { color: #f5f6fa; font-size: 29px; line-height: .9; letter-spacing: -1px; }
.sf-type-sample>span { color: #858c9d; font-size: 7px; }
.sf-system-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.sf-system-pills span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 99px; color: #b9bfcd; font-size: 7px; }
.sf-case-note { display: flex; align-items: flex-start; gap: 10px; max-width: 850px; margin: 28px auto 0; padding: 14px 16px; border: 1px solid rgba(255,121,44,.15); border-radius: 10px; background: rgba(255,121,44,.035); }
.sf-case-note .sf-status-dot { margin-top: 5px; }
.sf-case-note p { margin: 0; color: #898e9c; font-size: 11px; line-height: 1.7; }
.sf-case-note strong { color: #e1e4ec; }
@keyframes sfWorkEnter { to { opacity: 1; transform: translateY(0); } }
@keyframes sfProgress { 0% { transform: translateX(-110%); } 55%,100% { transform: translateX(250%); } }
@media (max-width: 900px) { .sf-work-grid { grid-template-columns: 1fr; } .sf-work-window, .sf-generated-site, .sf-system-board { min-height: auto; } .sf-case-study { padding: 30px 22px; } }
@media (prefers-reduced-motion: reduce) { .sf-work-card { animation: none; opacity: 1; transform: none; } .sf-work-progress span { animation: none; } }


/* =========================================================
   SITEFORGE AI — VIOLET BRAND + EXPORT/PUBLISH SHOWCASE
========================================================= */
#projectModal .sf-modal-preview { background:linear-gradient(145deg,#151a32 0%,#0b0d19 68%,#15102b 100%); border-color:rgba(124,104,255,.28); box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 58px rgba(99,83,255,.16); }
#projectModal .sf-preview-top i, #projectModal .sf-preview-body em { color:#9a82ff; }
#projectModal .sf-preview-body { background:radial-gradient(circle at 85% 0%,rgba(109,91,255,.12),transparent 42%); }
#projectModal .sf-preview-eyebrow { color:#a99bff; }
#projectModal .sf-preview-input b { color:#9b7cff; }
#projectModal .sf-preview-actions span { background:linear-gradient(145deg,#20243a,#141625); border-color:rgba(145,128,255,.13); }
#projectModal .sf-case-study { background:linear-gradient(180deg,#0c0d19 0%,#090a11 75%); }
#projectModal .sf-case-heading h3 em, #projectModal .sf-work-top i, #projectModal .sf-work-browser em,
#projectModal .sf-work-window-body small, #projectModal .sf-work-window-body h4 em,
#projectModal .sf-work-url b, #projectModal .sf-type-sample small { color:#a18aff; }
#projectModal .sf-work-card { background:linear-gradient(145deg,rgba(24,27,49,.96),rgba(10,11,20,.98)); border-color:rgba(139,122,255,.16); }
#projectModal .sf-work-browser { background:#191c30; }
#projectModal .sf-work-progress { background:#26263f; }
#projectModal .sf-work-progress span { background:linear-gradient(90deg,#6557ff,#b47bff); }
#projectModal .sf-generated-site { background:radial-gradient(circle at 100% 0%,rgba(118,91,255,.24),transparent 40%),#101221; }
#projectModal .sf-generated-hero small, #projectModal .sf-generated-hero h4 em { color:#a18aff; }
#projectModal .sf-generated-button { background:linear-gradient(90deg,#6659ff,#9b5cff); color:#fff; }
#projectModal .sf-system-board { background:linear-gradient(145deg,#171a30,#0a0b14); }
#projectModal .sf-system-title b { color:#a18aff; }
#projectModal .sf-color-row i { background:#6b5cff; }
#projectModal .sf-color-row i:nth-child(2) { background:#a16bff; }
#projectModal .sf-color-row i:nth-child(3) { background:#20233c; border-color:#38365b; }
#projectModal .sf-color-row i:nth-child(4) { background:#0b0d18; border-color:#38365b; }
#projectModal .sf-case-note { border-color:rgba(128,105,255,.2); background:rgba(110,88,255,.045); }
.sf-original-shot { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr); gap:clamp(18px,3vw,36px); align-items:center; margin:0 0 24px; padding:clamp(16px,2.5vw,28px); border:1px solid rgba(139,122,255,.2); border-radius:20px; background:linear-gradient(135deg,rgba(24,26,48,.92),rgba(10,11,18,.98)); overflow:hidden; }
.sf-shot-kicker,.sf-delivery-step { color:#a89aff; font-size:9px; font-weight:800; letter-spacing:2px; }
.sf-shot-copy h4 { margin:14px 0 10px; color:#f8f8ff; font-size:clamp(24px,3vw,38px); line-height:1.04; letter-spacing:-1.3px; }
.sf-shot-copy h4 em,.sf-delivery-heading h4 em { color:#9d83ff; font-style:normal; }
.sf-shot-copy p,.sf-delivery-heading p { color:#9699ae; font-size:12px; line-height:1.8; }
.sf-shot-image { position:relative; display:block; overflow:hidden; border:1px solid rgba(145,128,255,.22); border-radius:13px; background:#0a0b14; box-shadow:0 18px 55px rgba(0,0,0,.28); }
.sf-shot-image img { display:block; width:100%; height:auto; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s; }
.sf-shot-image:hover img { transform:scale(1.025); filter:saturate(1.08); }
.sf-shot-image>span { position:absolute; right:12px; bottom:12px; padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(10,11,20,.86); color:#fff; font-size:8px; font-weight:800; letter-spacing:1.2px; backdrop-filter:blur(12px); }
.sf-reveal { opacity:0; transform:translateY(22px); animation:sfWorkEnter .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.08s; }
.sf-delivery-section { margin-top:38px; padding-top:32px; border-top:1px solid rgba(139,122,255,.15); }
.sf-delivery-heading { max-width:680px; margin:0 auto 24px; text-align:center; }
.sf-delivery-heading h4 { margin:12px 0; color:#f7f7ff; font-size:clamp(26px,3.7vw,42px); line-height:1.06; letter-spacing:-1.3px; }
.sf-delivery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sf-delivery-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:20px; border:1px solid rgba(139,122,255,.17); border-radius:16px; background:linear-gradient(145deg,rgba(24,26,47,.9),rgba(11,12,21,.98)); transition:transform .3s,border-color .3s,box-shadow .3s; }
.sf-delivery-card:hover { transform:translateY(-5px); border-color:rgba(157,131,255,.48); box-shadow:0 18px 38px rgba(62,47,145,.14); }
.sf-delivery-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:20px; border:1px solid rgba(151,128,255,.24); border-radius:12px; background:linear-gradient(145deg,rgba(106,89,255,.22),rgba(165,95,255,.1)); color:#b4a5ff; font-size:17px; font-weight:800; }
.sf-delivery-card h5 { margin:10px 0 8px; color:#f7f7ff; font-size:17px; letter-spacing:-.3px; }
.sf-delivery-card p { margin:0 0 18px; color:#9699ae; font-size:11px; line-height:1.75; }
.sf-delivery-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:auto; padding:12px 13px; border:1px solid rgba(145,128,255,.24); border-radius:9px; background:rgba(120,99,255,.08); color:#e9e5ff; text-decoration:none; font:inherit; font-size:10px; font-weight:800; cursor:pointer; transition:background .25s,transform .25s; }
.sf-delivery-button:hover { background:linear-gradient(90deg,#6659ff,#995dff); color:#fff; transform:translateY(-1px); }
.sf-primary-button { border-color:transparent; background:linear-gradient(100deg,#6659ff,#965cff); color:white; }
.sf-feature-status { display:inline-flex; margin-top:auto; padding:7px 9px; border:1px solid rgba(145,128,255,.2); border-radius:99px; color:#b4a7ff; font-size:8px; font-weight:800; letter-spacing:1.2px; }
.sf-toast { display:none; margin:18px auto 0; max-width:700px; padding:13px 16px; border:1px solid rgba(145,128,255,.25); border-radius:10px; background:rgba(100,82,255,.09); color:#d6d0ff; font-size:12px; line-height:1.6; }
.sf-toast.is-visible { display:block; animation:sfWorkEnter .3s ease both; }
@media(max-width:900px) { .sf-original-shot { grid-template-columns:1fr; } .sf-delivery-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .sf-reveal { animation:none; opacity:1; transform:none; } .sf-shot-image img,.sf-delivery-card,.sf-delivery-button { transition:none; } }
#projectModal .modal-category { color:#a99bff; }
#projectModal .modal-cta { background:linear-gradient(100deg,#6659ff,#965cff); color:#fff; box-shadow:0 12px 28px rgba(100,80,255,.18); }
#projectModal .modal-cta:hover { box-shadow:0 16px 36px rgba(100,80,255,.3); }


/* AUREEN LABS project modal — warm premium skincare identity concept */
#projectModal.aureen-active .modal-container {
  background: radial-gradient(circle at 6% 8%, rgba(221,184,139,.12), transparent 32%), #100e0c;
}
#projectModal.aureen-active .modal-image {
  background: radial-gradient(ellipse at 50% 43%, rgba(216,173,124,.22), transparent 47%),
              linear-gradient(145deg, #211a14 0%, #100e0c 72%);
}
#projectModal.aureen-active .modal-image-glow { background: #d9b58b; opacity: .13; }
#projectModal.aureen-active .modal-category { color: #e4b989; }
#projectModal.aureen-active .modal-cta { background: #d9b58b; color: #17110c; }
.aureen-case-visual { width:100%; max-width:570px; overflow:hidden; color:#32271d; border:1px solid rgba(240,218,189,.23); border-radius:18px; background:linear-gradient(145deg,#e9d9c3,#c7ad8c); box-shadow:0 28px 75px rgba(0,0,0,.42),0 0 55px rgba(221,184,139,.11); animation:aureenCaseFloat 6.5s ease-in-out infinite; }
.aureen-case-top { height:42px; display:flex; justify-content:space-between; align-items:center; padding:0 17px; border-bottom:1px solid rgba(76,54,36,.17); color:#755d46; font-size:9px; font-weight:800; letter-spacing:2px; }
.aureen-case-top b { font-family:Georgia,serif; font-size:14px; letter-spacing:1px; }
.aureen-case-stage { position:relative; min-height:370px; display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,35px); padding:32px 20px; overflow:hidden; background:radial-gradient(ellipse at 38% 48%,rgba(255,249,238,.82),transparent 48%),linear-gradient(130deg,rgba(255,255,255,.18),transparent 60%); }
.aureen-case-halo { position:absolute; width:230px; height:230px; border-radius:50%; background:rgba(255,246,226,.7); filter:blur(38px); animation:aureenHaloPulse 4s ease-in-out infinite; }
.aureen-case-bottle { position:relative; z-index:1; width:clamp(120px,19vw,175px); height:255px; flex:none; filter:drop-shadow(17px 23px 15px rgba(67,45,26,.2)); transform:rotate(-4deg); animation:aureenBottleFloat 5s ease-in-out infinite; }
.aureen-case-cap { position:absolute; top:0; left:34%; width:32%; height:31px; border-radius:7px 7px 3px 3px; background:linear-gradient(90deg,#c6aa83,#f1dfc1 48%,#b79a73); box-shadow:inset 0 0 0 1px rgba(102,73,43,.15); }
.aureen-case-neck { position:absolute; top:27px; left:29%; width:42%; height:19px; background:linear-gradient(90deg,#c8b08f,#f0dfc5,#c1a27b); }
.aureen-case-label { position:absolute; inset:42px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(120,92,62,.13); border-radius:24px 24px 28px 28px; background:linear-gradient(100deg,#c8b08d,#f0e2ca 40%,#d7c2a4 100%); box-shadow:inset 9px 0 18px rgba(255,255,255,.2),inset -9px 0 16px rgba(97,65,34,.08); }
.aureen-case-label strong { color:#30251b; font-size:clamp(13px,1.8vw,19px); letter-spacing:1px; }
.aureen-case-label span { margin-top:5px; color:#a26f40; font-size:12px; letter-spacing:4px; }
.aureen-case-label i { width:42px; height:1px; margin:17px 0 12px; background:#9e754d; }
.aureen-case-label small { color:#79644d; font-size:7px; letter-spacing:2px; }
.aureen-case-side-copy { position:relative; z-index:1; max-width:145px; display:flex; flex-direction:column; gap:12px; }
.aureen-case-side-copy span,.aureen-case-side-copy small { color:#80684f; font-size:8px; font-weight:800; letter-spacing:1.6px; }
.aureen-case-side-copy b { color:#4c3928; font-family:Georgia,serif; font-size:clamp(19px,2.5vw,30px); font-weight:500; line-height:1.05; }
.aureen-case-footer { min-height:45px; display:flex; justify-content:space-between; align-items:center; padding:0 17px; border-top:1px solid rgba(76,54,36,.17); color:#80684f; font-size:8px; font-weight:800; letter-spacing:1.7px; }
.aureen-case-footer div { display:flex; gap:5px; }
.aureen-case-footer i { display:block; width:12px; height:12px; border-radius:50%; background:#efe1cd; border:1px solid rgba(66,48,31,.16); }
.aureen-case-footer i:nth-child(2) { background:#d7c0a1; }.aureen-case-footer i:nth-child(3) { background:#a98460; }.aureen-case-footer i:nth-child(4) { background:#514034; }
@keyframes aureenCaseFloat { 0%,100% { transform:translateY(0) rotate(-.5deg); } 50% { transform:translateY(-7px) rotate(.4deg); } }
@keyframes aureenBottleFloat { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-9px) rotate(-1deg); } }
@keyframes aureenHaloPulse { 0%,100% { opacity:.55; transform:scale(.92); } 50% { opacity:.95; transform:scale(1.08); } }
@media (max-width:600px) { .aureen-case-stage { min-height:310px; gap:12px; padding:24px 12px; } .aureen-case-bottle { height:220px; width:120px; } .aureen-case-side-copy { max-width:115px; } .aureen-case-side-copy b { font-size:20px; } }
@media (prefers-reduced-motion:reduce) { .aureen-case-visual,.aureen-case-bottle,.aureen-case-halo { animation:none; } }

/* AUREEN LABS case-study palette panel */
.modal-palette-block[hidden] { display:none !important; }
.modal-palette { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.modal-palette-swatch { display:flex; align-items:center; gap:10px; min-width:0; padding:8px; border:1px solid rgba(255,255,255,.10); border-radius:11px; background:rgba(255,255,255,.025); }
.modal-palette-color { width:38px; height:38px; flex:none; border-radius:9px; border:1px solid rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(0,0,0,.035); }
.modal-palette-label { display:flex; flex-direction:column; gap:3px; min-width:0; }
.modal-palette-label strong { color:#f1e8dc; font-size:12px; font-weight:650; }
.modal-palette-label small { color:#b7a997; font-size:11px; letter-spacing:.3px; }
.modal-palette-note { margin:10px 0 0; color:#b9ada0; font-size:12px; line-height:1.65; }
#projectModal.aureen-active .modal-palette-swatch { border-color:rgba(217,181,139,.22); background:rgba(217,181,139,.045); }
@media(max-width:600px) { .modal-palette { grid-template-columns:1fr 1fr; gap:7px; } .modal-palette-color { width:30px; height:30px; } .modal-palette-swatch { padding:6px; gap:7px; } .modal-palette-label strong { font-size:11px; } .modal-palette-label small { font-size:10px; } }


/* V8 modal fit and project-specific case study sections */
[hidden] { display: none !important; }
.project-modal { padding: clamp(10px, 2vw, 24px); box-sizing: border-box; overflow: hidden; }
.modal-container {
  width: min(1400px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}
.modal-content, .modal-image, .modal-details { min-width: 0; }
.modal-details { overflow-wrap: anywhere; }
.modal-image { min-width: 0; }
.modal-content > * { min-width: 0; }
.sf-case-study, .aureen-case-study { width: 100%; min-width: 0; box-sizing: border-box; }
.aureen-case-study {
  padding: clamp(24px, 5vw, 68px);
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #11100e 0%, #0c0b0a 100%);
  color: #f7f1e9;
}
.aureen-study-heading { max-width: 760px; margin: 0 auto clamp(26px, 4vw, 46px); text-align: center; }
.aureen-study-heading > span, .aureen-design-notes > div > span {
  color: #c6a27c; font-size: 11px; letter-spacing: .22em; font-weight: 800;
}
.aureen-study-heading h3 { margin: 14px 0; font-size: clamp(30px, 4vw, 54px); line-height: 1.04; letter-spacing: -.045em; }
.aureen-study-heading h3 em { color: #d7b68f; font-style: normal; }
.aureen-study-heading p { color: #aaa29a; line-height: 1.8; }
.aureen-study-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.aureen-study-card { min-width: 0; overflow: hidden; border: 1px solid rgba(215,182,143,.22); border-radius: 20px; background: #17130f; padding: clamp(16px, 2vw, 26px); animation: aureenBoardIn .7s both; }
.aureen-study-card:nth-child(2) { animation-delay: .12s; }
.aureen-board-head { display:flex; justify-content:space-between; gap:12px; color:#bba58d; font-size:10px; letter-spacing:.14em; font-weight:800; }
.aureen-board-head b { color:#776b5d; white-space:nowrap; }
.aureen-wordmark { margin: clamp(30px, 5vw, 62px) 0 4px; text-align:center; color:#f1e6d6; font-size:clamp(28px,4vw,48px); font-weight:750; letter-spacing:.07em; }
.aureen-wordmark span { display:block; margin-top:7px; color:#c49a6c; font-size:.35em; letter-spacing:.48em; }
.aureen-board-statement { margin: 22px 0 34px; text-align:center; color:#d8b991; font: italic clamp(20px,2.5vw,30px)/1.2 Georgia,serif; }
.aureen-type-specimen { display:flex; align-items:center; gap:16px; padding:16px 0; border-top:1px solid rgba(215,182,143,.18); border-bottom:1px solid rgba(215,182,143,.18); }
.aureen-type-specimen > span { color:#bba58d; font-size:9px; letter-spacing:.15em; }
.aureen-type-specimen > strong { font: 44px Georgia,serif; color:#dfc9aa; }
.aureen-type-specimen div { display:grid; gap:5px; }
.aureen-type-specimen small { color:#918579; line-height:1.4; }
.aureen-mini-palette { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:20px 0 14px; }
.aureen-mini-palette i { height:52px; border-radius:8px; background:#f3f0e9; }
.aureen-mini-palette i:nth-child(2) { background:#d7c0a1; }
.aureen-mini-palette i:nth-child(3) { background:#b99163; }
.aureen-mini-palette i:nth-child(4) { background:#30251b; border:1px solid #594634; }
.aureen-board-caption { color:#a79a8a; font-size:12px; line-height:1.7; }
.aureen-packaging-stage { position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,35px); overflow:hidden; }
.aureen-pack-glow { position:absolute; width:220px; height:220px; border-radius:50%; background:#b99163; opacity:.17; filter:blur(48px); animation:aureenGlow 4s ease-in-out infinite; }
.aureen-pack-bottle { position:relative; z-index:1; width:clamp(100px,13vw,150px); height:230px; flex-shrink:0; border-radius:28px 28px 36px 36px; background:linear-gradient(100deg,#c8ad87,#f0dfc2 40%,#d4bb98 75%,#b79a73); box-shadow:18px 24px 36px rgba(0,0,0,.35), inset -8px 0 15px rgba(87,60,34,.13); transform:rotate(-4deg); animation:aureenFloat 5s ease-in-out infinite; }
.aureen-pack-cap { position:absolute; top:-39px; left:35%; width:30%; height:43px; border-radius:7px 7px 3px 3px; background:linear-gradient(90deg,#b79a73,#ead7b7,#c1a27b); }
.aureen-pack-neck { position:absolute; top:-7px; left:30%; width:40%; height:12px; background:#d8c09d; }
.aureen-pack-label { position:absolute; top:75px; left:8%; right:8%; display:grid; justify-items:center; color:#30251b; }
.aureen-pack-label b { font-size:clamp(13px,1.6vw,18px); letter-spacing:.04em; }
.aureen-pack-label span { color:#9e754b; font-size:11px; letter-spacing:.35em; margin-top:4px; }
.aureen-pack-label i { width:42px; height:1px; background:#9e754b; margin:15px 0 10px; }
.aureen-pack-label small { font-size:7px; letter-spacing:.18em; }
.aureen-pack-copy { z-index:1; max-width:180px; display:grid; gap:12px; }
.aureen-pack-copy span, .aureen-pack-copy small { color:#b99b78; font-size:9px; letter-spacing:.17em; }
.aureen-pack-copy strong { color:#e8d8c3; font:clamp(21px,2.5vw,30px)/1.08 Georgia,serif; }
.aureen-design-notes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:22px; }
.aureen-design-notes > div { padding:18px; border:1px solid rgba(215,182,143,.18); border-radius:14px; background:rgba(255,255,255,.025); min-width:0; }
.aureen-design-notes b { display:block; margin:9px 0 5px; color:#ead8c1; }
.aureen-design-notes p { margin:0; color:#a69a8c; font-size:12px; line-height:1.6; }
@keyframes aureenFloat { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-10px) rotate(-2deg)} }
@keyframes aureenGlow { 0%,100%{opacity:.12;transform:scale(.9)} 50%{opacity:.23;transform:scale(1.08)} }
@keyframes aureenBoardIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@media (max-width: 850px) {
  .project-modal { padding: 8px; }
  .modal-container { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .modal-content { grid-template-columns: minmax(0,1fr); }
  .modal-image { min-height: min(58vh, 460px); }
  .modal-details { padding: 26px 22px; }
  .aureen-study-grid { grid-template-columns:minmax(0,1fr); }
  .aureen-design-notes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .aureen-case-study { padding: 22px 14px; }
  .aureen-study-card { padding: 15px; }
  .aureen-packaging-stage { min-height: 300px; gap: 14px; }
  .aureen-pack-bottle { width: 100px; height: 200px; }
  .aureen-pack-copy { max-width: 120px; }
  .aureen-design-notes { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .aureen-pack-bottle, .aureen-pack-glow, .aureen-study-card { animation: none !important; }
}

/* AUREEN LABS packaging mockups: carton + bottle + tube */
.aureen-pack-box {
  position: relative; z-index: 1; width: clamp(66px, 8vw, 94px); height: 205px; flex: 0 0 auto;
  transform: perspective(500px) rotateY(-12deg) rotate(-2deg);
  background: linear-gradient(90deg, #c7aa84 0%, #f1e1c6 18%, #dfc8a7 76%, #b99a73 100%);
  box-shadow: 12px 18px 25px rgba(0,0,0,.24); border-radius: 3px 4px 5px 3px;
}
.aureen-pack-box::before { content:""; position:absolute; top:0; left:0; right:0; height:9px; background:rgba(105,76,48,.13); }
.aureen-box-face { position:absolute; inset:48px 4px auto; display:grid; justify-items:center; color:#30251b; }
.aureen-box-face b { font-size:clamp(8px,1vw,11px); letter-spacing:.06em; }
.aureen-box-face span { margin-top:3px; color:#9e754b; font-size:7px; letter-spacing:.3em; }
.aureen-box-face i { width:24px; height:1px; margin:12px 0 8px; background:#9e754b; }
.aureen-box-face small { font-size:5px; letter-spacing:.12em; }
.aureen-pack-tube {
  position:relative; z-index:1; width:clamp(62px,7vw,78px); height:170px; flex:0 0 auto; align-self:center;
  border-radius:18px 18px 12px 12px; transform:rotate(3deg);
  background:linear-gradient(90deg,#c7ad8a 0%,#f4e5ce 36%,#dfc7a5 82%,#b89a74 100%);
  box-shadow:9px 15px 22px rgba(0,0,0,.24), inset -5px 0 9px rgba(93,65,38,.1);
}
.aureen-tube-cap { position:absolute; bottom:-13px; left:28%; width:44%; height:17px; border-radius:3px 3px 6px 6px; background:linear-gradient(90deg,#a98a63,#d9bd96,#a98a63); }
.aureen-tube-label { position:absolute; top:47px; left:3px; right:3px; display:grid; justify-items:center; color:#30251b; }
.aureen-tube-label b { font-size:8px; letter-spacing:.02em; }
.aureen-tube-label span { margin-top:2px; color:#9e754b; font-size:6px; letter-spacing:.25em; }
.aureen-tube-label small { margin-top:15px; font-size:5px; line-height:1.5; text-align:center; letter-spacing:.08em; }
@media (max-width: 600px) {
  .aureen-packaging-stage { gap:10px; min-height:290px; }
  .aureen-pack-box { width:58px; height:172px; }
  .aureen-pack-bottle { width:82px; height:185px; }
  .aureen-pack-tube { width:52px; height:145px; }
  .aureen-pack-copy { display:none; }
}

/* AUREEN LABS — brand application mockups */
.aureen-campaign-section { margin-top: clamp(34px,5vw,66px); padding-top: clamp(25px,4vw,42px); border-top:1px solid rgba(215,182,143,.16); }
.aureen-campaign-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:24px; }
.aureen-campaign-heading > div > span,.aureen-application-label { color:#c7a47c; font-size:10px; letter-spacing:.2em; font-weight:800; }
.aureen-campaign-heading h4 { margin:12px 0 0; color:#f1e4d1; font-size:clamp(25px,3.2vw,42px); line-height:1.08; letter-spacing:-.04em; }
.aureen-campaign-heading h4 em { color:#c9a67e; font-family:Georgia,serif; font-weight:400; }
.aureen-campaign-heading > p { max-width:330px; margin:0; color:#a69a8c; font-size:13px; line-height:1.7; }
.aureen-applications-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.aureen-application-card { min-width:0; overflow:hidden; border:1px solid rgba(215,182,143,.2); border-radius:18px; padding:17px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.aureen-application-label { position:relative; z-index:3; font-size:9px; letter-spacing:.16em; }
.aureen-application-card > p { margin:13px 0 2px; color:#a99c8e; font-size:12px; line-height:1.65; }
.aureen-billboard-scene { position:relative; min-height:275px; margin-top:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; background:radial-gradient(ellipse at 50% 70%,rgba(190,151,103,.25),transparent 47%),linear-gradient(120deg,#262019,#17130f 70%); perspective:700px; }
.aureen-billboard-frame { position:relative; z-index:1; width:82%; min-height:180px; padding:22px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; background:linear-gradient(115deg,#f0e6d6,#d7bea0); box-shadow:0 18px 30px rgba(0,0,0,.35); transform:rotateY(-7deg) rotateX(2deg); }
.aureen-billboard-copy { position:relative; z-index:2; color:#30251b; }
.aureen-billboard-copy span { display:block; font-size:7px; letter-spacing:.2em; color:#8c6d4e; margin-bottom:13px; }
.aureen-billboard-copy strong { display:block; font:clamp(20px,2.2vw,31px)/.98 Georgia,serif; letter-spacing:-.04em; }
.aureen-billboard-copy strong em { color:#a47c51; font-weight:400; }
.aureen-billboard-copy small { display:block; margin-top:16px; font-size:6px; letter-spacing:.16em; color:#70583f; }
.aureen-billboard-product { position:relative; z-index:2; width:53px; height:115px; flex:0 0 auto; margin-right:8%; border-radius:12px 12px 15px 15px; background:linear-gradient(90deg,#c5a77f,#f0dfc3 40%,#d2b48b); box-shadow:8px 12px 17px rgba(77,53,29,.24); animation:aureenProductFloat 5s ease-in-out infinite; }
.aureen-mini-bottle-cap { position:absolute; top:-18px; left:31%; width:38%; height:23px; border-radius:5px 5px 2px 2px; background:linear-gradient(90deg,#b18e63,#ead3ad,#b18e63); }
.aureen-mini-bottle-label,.aureen-social-bottle-label { position:absolute; top:38px; left:2px; right:2px; display:grid; justify-items:center; color:#30251b; }
.aureen-mini-bottle-label b,.aureen-social-bottle-label b { font-size:7px; letter-spacing:.03em; }
.aureen-mini-bottle-label span,.aureen-social-bottle-label span { margin-top:2px; color:#a17a50; font-size:5px; letter-spacing:.25em; }
.aureen-mini-bottle-label i,.aureen-social-bottle-label i { width:15px; height:1px; background:#9c754a; margin:8px 0 6px; }
.aureen-mini-bottle-label small,.aureen-social-bottle-label small { font-size:4px; letter-spacing:.08em; }
.aureen-billboard-orb { position:absolute; width:170px; height:170px; right:-55px; bottom:-110px; border-radius:50%; background:rgba(182,139,88,.18); filter:blur(2px); }
.aureen-billboard-leg { position:absolute; bottom:0; height:22px; width:44%; background:linear-gradient(#34302b,#141210); transform:perspective(200px) rotateX(-15deg); }
.aureen-retail-scene { min-height:275px; margin-top:12px; position:relative; display:flex; align-items:center; justify-content:center; gap:16px; overflow:hidden; border-radius:12px; background:radial-gradient(ellipse at 50% 78%,rgba(187,145,94,.24),transparent 48%),#1a1510; }
.aureen-shopping-bag { position:relative; z-index:2; width:116px; height:148px; padding-top:47px; display:flex; flex-direction:column; align-items:center; color:#30251b; background:linear-gradient(90deg,#c5a780,#f0e1ca 35%,#d8bd98); box-shadow:11px 17px 21px rgba(0,0,0,.3); transform:rotate(-5deg); }
.aureen-bag-handle { position:absolute; width:42px; height:30px; top:-17px; border:5px solid #c6a77f; border-bottom:0; border-radius:22px 22px 0 0; }
.aureen-shopping-bag b { font-size:12px; letter-spacing:.05em; }.aureen-shopping-bag span,.aureen-retail-box span { color:#a17a50; font-size:7px; letter-spacing:.3em; margin-top:3px; }.aureen-shopping-bag i,.aureen-retail-box i { width:25px; height:1px; background:#a17a50; margin:12px 0 8px; }.aureen-shopping-bag small,.aureen-retail-box small { font-size:5px; letter-spacing:.1em; }
.aureen-retail-box { position:relative; z-index:1; width:78px; height:130px; padding-top:45px; display:flex; align-items:center; flex-direction:column; color:#30251b; background:linear-gradient(90deg,#c8a981,#edddc5 35%,#d4b894); box-shadow:8px 14px 18px rgba(0,0,0,.3); transform:rotate(4deg) translateY(12px); }.aureen-retail-box b { font-size:8px; }.aureen-retail-box span { font-size:5px; }.aureen-retail-box i { margin:9px 0 6px; width:18px; }.aureen-retail-box small { font-size:4px; }
.aureen-social-art { position:relative; min-height:275px; margin-top:12px; padding:20px; overflow:hidden; color:#30251b; background:linear-gradient(150deg,#eee2cf,#cdb18d); }
.aureen-social-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(80,58,36,.18); padding-bottom:12px; }.aureen-social-top b { font-size:10px; letter-spacing:.04em; }.aureen-social-top b span { color:#9e754b; letter-spacing:.25em; font-size:7px; }.aureen-social-top small { font-size:6px; letter-spacing:.12em; color:#765b3e; }
.aureen-social-product { position:absolute; top:62px; right:22%; width:65px; height:125px; border-radius:13px 13px 17px 17px; background:linear-gradient(90deg,#c4a47b,#f4e5cb 38%,#d4b48a); box-shadow:9px 13px 20px rgba(68,45,24,.22); transform:rotate(7deg); animation:aureenProductFloat 5.5s ease-in-out infinite reverse; }.aureen-social-bottle-cap { position:absolute; top:-17px; left:32%; width:36%; height:22px; border-radius:5px 5px 2px 2px; background:linear-gradient(90deg,#b08b60,#e8d0a8,#b08b60); }
.aureen-social-bottom { position:absolute; left:20px; bottom:18px; }.aureen-social-bottom span { display:block; font-size:6px; letter-spacing:.16em; color:#806345; margin-bottom:7px; }.aureen-social-bottom strong { font:26px/.98 Georgia,serif; letter-spacing:-.04em; }
.aureen-product-scene { min-height:275px; margin-top:12px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; background:radial-gradient(ellipse at 50% 68%,rgba(202,164,117,.25),transparent 48%),linear-gradient(140deg,#211b15,#12100d); perspective:700px; }
.aureen-serum-bottle { position:relative; z-index:2; width:82px; height:142px; border-radius:17px 17px 13px 13px; background:linear-gradient(90deg,#b99568,#f0dfc1 35%,#d0b18a 80%,#ad8b60); box-shadow:12px 16px 22px rgba(0,0,0,.3); transform:rotate(-6deg); animation:aureenProductFloat 4.8s ease-in-out infinite; }.aureen-serum-dropper { position:absolute; top:-40px; left:33%; width:34%; height:43px; border-radius:8px 8px 3px 3px; background:linear-gradient(90deg,#b08b60,#ead2aa,#b08b60); }.aureen-serum-neck { position:absolute; top:-7px; left:24%; width:52%; height:13px; background:linear-gradient(90deg,#b08b60,#ead2aa,#b08b60); }.aureen-serum-label { position:absolute; top:43px; left:4px; right:4px; display:grid; justify-items:center; color:#30251b; }.aureen-serum-label b { font-size:9px; }.aureen-serum-label span { color:#9e754b; font-size:6px; letter-spacing:.28em; margin-top:2px; }.aureen-serum-label i { width:22px; height:1px; margin:10px 0 7px; background:#9e754b; }.aureen-serum-label small { font-size:5px; letter-spacing:.1em; }
.aureen-product-pedestal { position:absolute; bottom:34px; width:190px; height:35px; border-radius:50%; background:linear-gradient(#d8c0a0,#a88962); box-shadow:0 13px 18px rgba(0,0,0,.32); }.aureen-product-halo { position:absolute; width:210px; height:210px; border:1px solid rgba(216,188,150,.13); border-radius:50%; }
.aureen-campaign-footer { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:18px; padding:16px 18px; border:1px solid rgba(215,182,143,.18); border-radius:12px; background:rgba(255,255,255,.025); }.aureen-campaign-footer span { color:#c7a47c; font-size:9px; font-weight:800; letter-spacing:.18em; }.aureen-campaign-footer b { color:#e8d8c5; font-size:12px; }.aureen-campaign-footer small { margin-left:auto; color:#948779; font-size:10px; }
@keyframes aureenProductFloat { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@media(max-width:850px) { .aureen-campaign-heading { align-items:flex-start; flex-direction:column; gap:10px; }.aureen-campaign-heading > p { max-width:none; }.aureen-applications-grid { grid-template-columns:1fr; }.aureen-campaign-footer small { margin-left:0; width:100%; } }
@media(prefers-reduced-motion:reduce) { .aureen-billboard-product,.aureen-social-product,.aureen-serum-bottle { animation:none; } }


/* V11 refinements: align billboard + enrich billboard/social layouts */
.aureen-billboard-scene {
  min-height: 310px;
  padding: 22px 18px 28px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 52% 72%,rgba(190,151,103,.32),transparent 52%), linear-gradient(120deg,#262019,#17130f 70%);
}
.aureen-billboard-frame {
  width: min(94%, 760px);
  min-height: 218px;
  box-sizing: border-box;
  padding: clamp(22px,3vw,34px);
  transform: none;
  border: 1px solid rgba(111,79,46,.14);
  box-shadow: 0 22px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(255,245,226,.12) inset;
}
.aureen-billboard-copy { flex: 1 1 auto; min-width: 0; padding-right: 18px; }
.aureen-billboard-copy span { font-size: 8px; margin-bottom: 15px; }
.aureen-billboard-copy strong { font-size: clamp(27px,3.1vw,43px); line-height: .98; }
.aureen-billboard-copy small { margin-top: 18px; font-size: 7px; }
.aureen-billboard-product { width: 68px; height: 142px; margin-right: 5%; border-radius: 15px 15px 19px 19px; }
.aureen-mini-bottle-label { top: 48px; }
.aureen-mini-bottle-label b { font-size: 8px; }
.aureen-mini-bottle-label span { font-size: 6px; }
.aureen-mini-bottle-label i { width: 20px; }
.aureen-mini-bottle-label small { font-size: 5px; }
.aureen-billboard-orb { width: 210px; height: 210px; right: -45px; bottom: -135px; }
.aureen-billboard-leg { display: none; }

.aureen-social-art {
  min-height: 310px;
  padding: 22px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 72% 47%,rgba(255,248,232,.44),transparent 34%), linear-gradient(145deg,#f2e7d6 0%,#ddc7a8 58%,#c9ad88 100%);
  isolation: isolate;
}
.aureen-social-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  top: 54px;
  right: 9%;
  border: 1px solid rgba(133,98,61,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,255,255,.08), 0 0 0 38px rgba(255,255,255,.045);
}
.aureen-social-top { padding-bottom: 14px; }
.aureen-social-top b { font-size: 12px; }
.aureen-social-top small { font-size: 7px; }
.aureen-social-product {
  top: 72px;
  right: 20%;
  width: 76px;
  height: 145px;
  transform: rotate(5deg);
  box-shadow: 12px 17px 23px rgba(68,45,24,.25);
}
.aureen-social-bottle-cap { top: -20px; height: 26px; }
.aureen-social-bottle-label { top: 45px; }
.aureen-social-bottle-label b { font-size: 8px; }
.aureen-social-bottle-label span { font-size: 6px; }
.aureen-social-bottle-label i { width: 19px; margin: 9px 0 7px; }
.aureen-social-bottle-label small { font-size: 5px; }
.aureen-social-bottom {
  left: 24px;
  bottom: 27px;
  max-width: 52%;
  z-index: 2;
}
.aureen-social-bottom span { font-size: 7px; margin-bottom: 10px; }
.aureen-social-bottom strong { display: block; font-size: clamp(30px,3.2vw,42px); line-height: .94; }
.aureen-social-art::after {
  content: "A SIMPLE DAILY RITUAL  /  AUREEN LABS";
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: rgba(86,62,39,.72);
  font-size: 6px;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}
@media (max-width: 850px) {
  .aureen-billboard-scene { min-height: 270px; padding: 16px 10px 20px; }
  .aureen-billboard-frame { width: 96%; min-height: 190px; padding: 18px; }
  .aureen-billboard-product { width: 52px; height: 112px; margin-right: 1%; }
  .aureen-billboard-copy strong { font-size: clamp(23px,5vw,34px); }
  .aureen-social-art { min-height: 285px; padding: 17px; }
  .aureen-social-product { right: 12%; width: 62px; height: 120px; }
  .aureen-social-bottom { left: 18px; bottom: 22px; max-width: 56%; }
  .aureen-social-bottom strong { font-size: clamp(27px,6vw,36px); }
  .aureen-social-art::before { right: 3%; width: 160px; height: 160px; }
  .aureen-social-art::after { right: 12px; bottom: 18px; font-size: 5px; }
}



/* V3 RESPONSIVE PASS — tablet, mobile, and modal overflow fixes */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
button, a, input, textarea { max-width: 100%; }
.container, .section-container, .projects-section, .work-section { min-width: 0; }

@media (max-width: 1200px) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero { padding-left: 32px; padding-right: 32px; }
  .modal-details { padding: 42px 34px; }
  .modal-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aureen-brand-grid, .aureen-showcase-grid, .aureen-mockup-grid { gap: 16px; }
}

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero { min-height: auto; padding: 110px 24px 56px; }
  .hero h1 { font-size: clamp(42px, 7vw, 76px); overflow-wrap: anywhere; }
  .hero p { max-width: 100%; }
  .about-grid { grid-template-columns: 1fr; }
  .project-modal { padding: 14px; align-items: center; overflow: hidden; }
  .project-modal .modal-dialog,
  .project-modal .modal-shell { width: min(100%, 980px); max-height: calc(100dvh - 28px); }
  .modal-content { grid-template-columns: minmax(0, 1fr); }
  .modal-image { min-height: clamp(260px, 42vh, 440px); max-height: 44vh; }
  .modal-details { padding: 28px 26px 34px; min-width: 0; }
  .modal-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aureen-brand-board-grid,
  .aureen-branding-grid,
  .aureen-mockup-grid,
  .aureen-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aureen-billboard-scene, .aureen-social-art { min-width: 0; }
}

@media (max-width: 600px) {
  .projects-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .project-card { border-radius: 17px; }
  .project-card img { max-width: 100%; }
  .hero { padding: 94px 18px 42px; }
  .hero h1 { font-size: clamp(38px, 11vw, 58px); line-height: .98; letter-spacing: -1.8px; }
  .hero p { font-size: 15px; line-height: 1.65; }
  .hero-actions, .hero-buttons { flex-wrap: wrap; gap: 10px; }
  .section-title, .section-heading { font-size: clamp(28px, 8vw, 42px); }
  .project-modal { padding: 7px; }
  .project-modal .modal-dialog,
  .project-modal .modal-shell { max-height: calc(100dvh - 14px); border-radius: 18px; }
  .modal-image { min-height: 230px; max-height: 34vh; }
  .modal-details { padding: 23px 18px 28px; }
  .modal-details h2 { font-size: clamp(32px, 9vw, 48px); line-height: 1; letter-spacing: -1.3px; overflow-wrap: anywhere; }
  .modal-description { font-size: 14px; line-height: 1.65; margin-bottom: 22px; }
  .modal-meta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .modal-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-work-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-original-shot { grid-template-columns: minmax(0, 1fr) !important; }
  .aureen-brand-board-grid,
  .aureen-branding-grid,
  .aureen-mockup-grid,
  .aureen-showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .aureen-billboard-scene { padding: 12px 8px 16px; min-height: 220px; }
  .aureen-billboard-frame { width: 100%; min-height: 180px; padding: 14px; }
  .aureen-billboard-copy strong { font-size: clamp(22px, 7vw, 34px); }
  .aureen-social-art { min-height: 280px; padding: 15px; }
  .aureen-social-product { right: 10%; width: 56px; height: 108px; }
  .aureen-social-bottom { left: 15px; bottom: 20px; max-width: 58%; }
  .aureen-social-bottom strong { font-size: clamp(26px, 8vw, 35px); }
  .aureen-color-cards, .color-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-close { top: 10px; right: 10px; width: 40px; height: 40px; z-index: 30; }
  .sf-modal-close { top: 10px; right: 10px; }
}

@media (max-width: 380px) {
  .modal-details { padding-left: 14px; padding-right: 14px; }
  .modal-palette, .aureen-color-cards, .color-palette-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 36px; }
}


/* Ensure the actual modal container uses the responsive viewport height */
@media (max-width: 900px) {
  .modal-container { width: 100%; max-height: calc(100dvh - 28px); overflow-y: auto; }
}
@media (max-width: 600px) {
  .modal-container { max-height: calc(100dvh - 14px); border-radius: 18px; }
}

/* SSK SURGICAL EXPORTS — branding, catalogue and packaging case study */
#projectModal.ssk-active .modal-container { background:radial-gradient(circle at 8% 10%,rgba(255,118,40,.12),transparent 34%),#0d0f11; }
#projectModal.ssk-active .modal-image { background:radial-gradient(ellipse at 50% 42%,rgba(255,118,40,.17),transparent 46%),linear-gradient(145deg,#171a1d,#090a0b 78%); }
#projectModal.ssk-active .modal-image-glow { background:#ff7628; opacity:.12; }
#projectModal.ssk-active .modal-category { color:#ff985a; }
#projectModal.ssk-active .modal-cta { background:#ff7628;color:#17120e;box-shadow:0 12px 28px rgba(255,118,40,.16); }
.ssk-modal-visual { position:relative;width:100%;max-width:570px;min-height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:18px;color:#f4f4f2;background:linear-gradient(145deg,#202327,#101214 70%);box-shadow:0 28px 75px rgba(0,0,0,.42);animation:sskVisualFloat 6s ease-in-out infinite; }
.ssk-modal-visual:before { content:"";position:absolute;width:310px;height:310px;right:-70px;top:90px;border:1px solid rgba(255,118,40,.18);border-radius:50%;box-shadow:0 0 0 26px rgba(255,255,255,.015),0 0 0 58px rgba(255,118,40,.025); }
.ssk-modal-visual-head,.ssk-modal-visual-footer { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);color:#b9bec4;font-size:9px;font-weight:800;letter-spacing:.16em; }
.ssk-modal-visual-head b { color:#ff8a45; }
.ssk-modal-visual-logo { position:relative;z-index:2;width:76%;margin:30px auto 0;filter:drop-shadow(0 10px 25px rgba(255,118,40,.13)); }
.ssk-modal-visual-logo img { display:block;width:100%;height:auto; }
.ssk-modal-visual-instrument { position:absolute;z-index:2;width:180px;height:30px;left:10%;bottom:105px;transform:rotate(-24deg);opacity:.85; }
.ssk-modal-visual-instrument i { position:absolute;left:0;top:11px;width:125px;height:8px;border-radius:8px;background:linear-gradient(90deg,#777f87,#e3e6e8,#858d95); }
.ssk-modal-visual-instrument b { position:absolute;left:112px;top:3px;width:48px;height:23px;border:3px solid #c7cdd1;border-radius:14px 14px 5px 5px;transform:rotate(18deg); }
.ssk-modal-visual-instrument span { position:absolute;right:0;top:12px;width:45px;height:2px;background:#ff7628; }
.ssk-modal-visual-copy { position:relative;z-index:2;margin:10px 22px 80px auto;width:53%;display:flex;flex-direction:column;gap:11px;text-align:right; }
.ssk-modal-visual-copy small { color:#ff985a;font-size:8px;font-weight:800;letter-spacing:.16em; }
.ssk-modal-visual-copy strong { font-size:clamp(23px,3vw,38px);line-height:1.02;letter-spacing:-.04em; }
.ssk-modal-visual-footer { position:absolute;bottom:0;left:0;right:0;justify-content:flex-start;border-top:1px solid rgba(255,255,255,.1);border-bottom:0; }
.ssk-modal-visual-footer i { width:10px;height:10px;border-radius:2px;background:#f4f4f2; }.ssk-modal-visual-footer i:nth-child(2){background:#b9bec4}.ssk-modal-visual-footer i:nth-child(3){background:#24272b;border:1px solid #5c6269}.ssk-modal-visual-footer i:nth-child(4){background:#ff7628}.ssk-modal-visual-footer span{margin-left:auto;color:#777f87;font-size:7px;}
.ssk-case-study { width:100%;min-width:0;box-sizing:border-box;padding:clamp(22px,4.5vw,64px);border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#111315,#090a0b);color:#f4f4f2; }
.ssk-study-heading { max-width:850px;margin:0 auto clamp(28px,4vw,48px);text-align:center; }
.ssk-study-heading>span,.ssk-section-heading>span { color:#ff985a;font-size:10px;font-weight:850;letter-spacing:.2em; }
.ssk-study-heading h3 { margin:15px 0;font-size:clamp(29px,4.4vw,56px);line-height:1.05;letter-spacing:-.045em; }
.ssk-study-heading h3 em,.ssk-section-heading h4 em { color:#ff8a45;font-style:normal; }
.ssk-study-heading p,.ssk-section-heading p { max-width:760px;margin:0 auto;color:#a4a9ad;line-height:1.8;font-size:clamp(13px,1.3vw,16px); }
.ssk-brand-layout { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px); }
.ssk-board { min-width:0;overflow:hidden;padding:clamp(15px,2.2vw,28px);border:1px solid rgba(185,190,196,.19);border-radius:20px;background:linear-gradient(145deg,#17191c,#111315);box-shadow:0 18px 48px rgba(0,0,0,.18);animation:sskBoardIn .65s both; }
.ssk-board:nth-child(2){animation-delay:.12s;}
.ssk-board-head,.ssk-pack-card-head { display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d5d9dc;font-size:9px;font-weight:850;letter-spacing:.14em; }
.ssk-board-head b,.ssk-pack-card-head b { color:#737b83;white-space:nowrap; }
.ssk-brand-logo { display:flex;align-items:center;justify-content:center;min-height:185px;margin:20px 0 5px;padding:14px;background:radial-gradient(ellipse,rgba(255,118,40,.09),transparent 62%); }
.ssk-brand-logo img { width:min(100%,410px);height:auto;max-height:190px;object-fit:contain; }
.ssk-brand-statement { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.1); }
.ssk-brand-statement span,.ssk-type-row>span { color:#ff985a;font-size:9px;font-weight:800;letter-spacing:.16em; }
.ssk-brand-statement strong { font-size:clamp(22px,2.6vw,34px);line-height:1.03;text-align:right; }
.ssk-type-row { display:grid;grid-template-columns:auto 1fr;gap:8px 14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1); }
.ssk-type-row>span { grid-row:span 2;align-self:start; }
.ssk-type-row b { font-size:13px; }.ssk-type-row small { color:#90979e;font-size:11px;line-height:1.5; }
.ssk-palette { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:15px; }
.ssk-palette>div { min-width:0;display:flex;flex-direction:column;gap:5px; }
.ssk-palette i { display:block;height:45px;border:1px solid rgba(255,255,255,.13);border-radius:8px; }
.ssk-palette b { color:#d7dadd;font-size:9px;line-height:1.3; }.ssk-palette small { color:#8f969c;font-size:9px; }
.ssk-board-caption { margin:18px 0 0;color:#9ba1a7;font-size:12px;line-height:1.7; }
.ssk-catalog-scene { position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:20px 0 5px;border-radius:14px;background:radial-gradient(ellipse at 55% 55%,rgba(255,118,40,.1),transparent 50%),linear-gradient(145deg,#22262a,#101214);perspective:900px; }
.ssk-catalog-book { position:relative;z-index:2;width:58%;min-width:190px;max-width:270px;min-height:290px;padding:16px;display:flex;flex-direction:column;color:#24272b;background:linear-gradient(140deg,#f4f4f2,#c9cdd0);box-shadow:17px 22px 30px rgba(0,0,0,.38);transform:rotateY(-12deg) rotateZ(-3deg);animation:sskBookFloat 6s ease-in-out infinite; }
.ssk-catalog-topline { display:flex;justify-content:space-between;align-items:center;gap:7px;padding-bottom:12px;border-bottom:3px solid #ff7628; }.ssk-catalog-topline b{font-size:26px;letter-spacing:-.07em;}.ssk-catalog-topline span{font-size:7px;font-weight:850;letter-spacing:.1em;}
.ssk-catalog-copy { display:flex;flex-direction:column;gap:13px;margin-top:24px; }.ssk-catalog-copy small { color:#60676e;font-size:7px;font-weight:800;letter-spacing:.13em; }.ssk-catalog-copy strong{font-size:clamp(20px,2.3vw,29px);line-height:1.05;letter-spacing:-.04em;}.ssk-catalog-copy em{color:#e76724;font-size:.72em;font-style:normal;}.ssk-catalog-copy>span{margin-top:7px;color:#666d74;font-size:7px;letter-spacing:.1em;}
.ssk-catalog-instrument { position:absolute;right:13px;bottom:44px;width:95px;height:14px;transform:rotate(-38deg); }.ssk-catalog-instrument i{position:absolute;left:0;top:4px;width:67px;height:5px;border-radius:6px;background:linear-gradient(90deg,#6e757b,#f8f8f5,#747b81);}.ssk-catalog-instrument b{position:absolute;right:10px;top:-3px;width:25px;height:18px;border:3px solid #9da4aa;border-radius:10px;}.ssk-catalog-instrument span{position:absolute;right:0;top:5px;width:24px;height:2px;background:#ff7628;}
.ssk-catalog-foot { display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(36,39,43,.2);color:#666d74;font-size:6px;font-weight:800;letter-spacing:.08em; }.ssk-catalog-foot b{color:#ff7628;}
.ssk-section-heading { max-width:850px;margin:clamp(42px,6vw,76px) auto 28px;text-align:center; }.ssk-section-heading h4{margin:12px 0;font-size:clamp(25px,3.5vw,42px);letter-spacing:-.04em;line-height:1.08;}
.ssk-packaging-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.7vw,20px); }
.ssk-pack-card { min-width:0;overflow:hidden;padding:clamp(12px,1.6vw,20px);border:1px solid rgba(185,190,196,.17);border-radius:17px;background:linear-gradient(145deg,#17191b,#101214);animation:sskBoardIn .7s both; }.ssk-pack-card:nth-child(2){animation-delay:.1s}.ssk-pack-card:nth-child(3){animation-delay:.2s}
.ssk-carton-scene,.ssk-pouch-scene,.ssk-case-scene { min-height:260px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:15px 0;border-radius:12px;background:radial-gradient(ellipse,rgba(255,118,40,.11),transparent 58%),#111315;perspective:700px; }
.ssk-carton { position:relative;width:150px;height:195px;transform:rotateY(-16deg) rotateZ(-3deg);filter:drop-shadow(14px 18px 13px rgba(0,0,0,.4));animation:sskPackFloat 5.8s ease-in-out infinite; }.ssk-carton-front{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;padding-top:35px;color:#25282b;background:linear-gradient(110deg,#d8dce0,#f4f4f2 45%,#c1c6ca);border-left:6px solid #ff7628;}.ssk-carton-side{position:absolute;top:0;right:-22px;width:22px;height:100%;background:linear-gradient(90deg,#939aa0,#686f76);transform:skewY(-25deg);transform-origin:left top;}.ssk-carton-front b{font-size:28px;letter-spacing:-.06em}.ssk-carton-front span{font-size:7px;font-weight:850;letter-spacing:.13em}.ssk-carton-front i{width:35px;height:3px;margin:15px;background:#ff7628}.ssk-carton-front small{font-size:7px;font-weight:800;letter-spacing:.06em}.ssk-carton-front em{position:absolute;bottom:12px;font-size:6px;font-style:normal;letter-spacing:.07em;color:#697078;}
.ssk-pouch { position:relative;width:175px;height:210px;padding:0 15px;color:#24272b;background:linear-gradient(105deg,#bfc4c8,#f4f4f2 45%,#c7ccd0);border:1px solid #969da3;border-radius:7px 7px 15px 15px;box-shadow:12px 17px 19px rgba(0,0,0,.35);transform:rotate(3deg);animation:sskPackFloat 6.2s ease-in-out infinite; }.ssk-pouch-seal{position:absolute;top:0;left:0;right:0;height:18px;border-bottom:2px solid #8b9298;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(60,65,70,.13) 6px 7px);}.ssk-pouch-brand{display:flex;align-items:center;flex-direction:column;margin-top:48px;}.ssk-pouch-brand b{font-size:27px;letter-spacing:-.06em}.ssk-pouch-brand span{font-size:7px;letter-spacing:.18em;font-weight:800}.ssk-pouch-instrument{position:relative;width:100px;height:26px;margin:17px auto 0;transform:rotate(-22deg)}.ssk-pouch-instrument i{position:absolute;left:0;top:10px;width:75px;height:5px;border-radius:5px;background:linear-gradient(90deg,#747c82,#fff,#8d959b)}.ssk-pouch-instrument b{position:absolute;right:10px;top:3px;width:24px;height:20px;border:3px solid #9ba2a8;border-radius:12px}.ssk-pouch-instrument span{position:absolute;right:0;top:11px;width:23px;height:2px;background:#ff7628}.ssk-pouch>small{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:#737b82;font-size:6px;letter-spacing:.08em;}
.ssk-instrument-case { width:220px;max-width:95%;transform:rotate(-5deg);filter:drop-shadow(13px 17px 13px rgba(0,0,0,.4));animation:sskPackFloat 6.4s ease-in-out infinite; }.ssk-case-lid{height:125px;display:flex;align-items:center;flex-direction:column;justify-content:center;color:#f4f4f2;border:2px solid #4b5157;border-radius:15px 15px 7px 7px;background:linear-gradient(145deg,#343a40,#191d21);box-shadow:inset 0 0 0 5px rgba(255,255,255,.025)}.ssk-case-lid b{font-size:36px;letter-spacing:-.07em}.ssk-case-lid span{font-size:8px;letter-spacing:.18em}.ssk-case-lid i{width:42px;height:3px;margin-top:13px;background:#ff7628}.ssk-case-base{height:35px;display:flex;align-items:center;justify-content:space-evenly;border:2px solid #4b5157;border-top:4px solid #ff7628;border-radius:0 0 12px 12px;background:linear-gradient(#282d32,#15181b)}.ssk-case-base span{width:22px;height:4px;border-radius:5px;background:#7b838a;}
.ssk-pack-card>p { margin:12px 2px 3px;color:#9ba1a7;font-size:12px;line-height:1.7; }
.ssk-page-system { display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(18px,3vw,36px);padding:clamp(15px,2vw,25px);border:1px solid rgba(185,190,196,.17);border-radius:18px;background:linear-gradient(145deg,#17191b,#101214); }
.ssk-page-preview { min-height:410px;display:flex;flex-direction:column;padding:20px;color:#25282b;background:linear-gradient(150deg,#f4f4f2,#d5d9dc);box-shadow:0 20px 45px rgba(0,0,0,.3);transform:rotate(-1deg); }.ssk-page-header{display:flex;align-items:center;gap:7px;padding-bottom:13px;border-bottom:3px solid #ff7628}.ssk-page-header b{font-size:25px;letter-spacing:-.08em}.ssk-page-header span{font-size:7px;font-weight:850;letter-spacing:.1em}.ssk-page-header i{margin-left:auto;font-size:9px;font-style:normal;color:#6c747a}.ssk-page-title{display:flex;flex-direction:column;gap:7px;margin:20px 0}.ssk-page-title small{color:#ff7628;font-size:7px;font-weight:850;letter-spacing:.14em}.ssk-page-title strong{font-size:30px;line-height:1;letter-spacing:-.05em}.ssk-page-product-row{display:grid;grid-template-columns:85px 1fr;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgba(36,39,43,.15)}.ssk-tool-illustration{position:relative;height:40px}.ssk-tool-illustration i{position:absolute;left:2px;top:17px;width:61px;height:5px;border-radius:5px;background:linear-gradient(90deg,#6f777d,#fdfdfb,#828a90)}.ssk-tool-illustration b{position:absolute;left:50px;top:7px;width:22px;height:22px;border:3px solid #929aa0;border-radius:50%}.ssk-tool-two{transform:rotate(13deg)}.ssk-tool-two i{width:70px}.ssk-tool-two b{left:3px;width:20px;height:20px;border-radius:3px;transform:rotate(25deg)}.ssk-product-lines{display:flex;flex-direction:column;gap:6px}.ssk-product-lines b{width:68%;height:7px;background:#3a4045}.ssk-product-lines span{width:100%;height:4px;background:#b4bbc0}.ssk-product-lines span:last-of-type{width:75%}.ssk-product-lines small{margin-top:3px;color:#ff7628;font-size:6px;font-weight:850;letter-spacing:.08em}.ssk-page-footer{margin-top:auto;padding-top:12px;border-top:1px solid rgba(36,39,43,.18);color:#687078;font-size:6px;font-weight:850;letter-spacing:.1em}
.ssk-catalogue-notes { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.ssk-catalogue-notes>div{padding:18px;border:1px solid rgba(185,190,196,.15);border-radius:12px;background:rgba(255,255,255,.025)}.ssk-catalogue-notes span{display:block;margin-bottom:9px;color:#ff985a;font-size:9px;font-weight:850;letter-spacing:.16em}.ssk-catalogue-notes b{font-size:14px}.ssk-catalogue-notes p{margin:8px 0 0;color:#9ba1a7;font-size:12px;line-height:1.7}
.ssk-work-footer { display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:28px;padding:18px 20px;border:1px solid rgba(185,190,196,.15);border-radius:12px;background:rgba(255,255,255,.025); }.ssk-work-footer span{color:#ff985a;font-size:9px;font-weight:850;letter-spacing:.15em}.ssk-work-footer b{font-size:12px}.ssk-work-footer small{margin-left:auto;color:#777f86;font-size:10px}
@keyframes sskVisualFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sskBoardIn {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sskBookFloat {0%,100%{transform:rotateY(-12deg) rotateZ(-3deg) translateY(0)}50%{transform:rotateY(-9deg) rotateZ(-2deg) translateY(-6px)}}
@keyframes sskPackFloat {0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(max-width:900px){.ssk-brand-layout{grid-template-columns:1fr}.ssk-packaging-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ssk-page-system{grid-template-columns:1fr 1fr}.ssk-catalog-scene{min-height:300px}}
@media(max-width:600px){.ssk-case-study{padding:22px 14px}.ssk-study-heading{text-align:left}.ssk-study-heading p,.ssk-section-heading p{margin-left:0}.ssk-brand-layout,.ssk-packaging-grid,.ssk-page-system,.ssk-catalogue-notes{grid-template-columns:minmax(0,1fr)}.ssk-board{padding:15px}.ssk-board-head{font-size:8px}.ssk-brand-logo{min-height:145px}.ssk-brand-logo img{max-height:145px}.ssk-palette{gap:6px}.ssk-palette i{height:34px}.ssk-palette b,.ssk-palette small{font-size:8px}.ssk-catalog-scene{min-height:320px}.ssk-catalog-book{min-height:280px}.ssk-packaging-grid{gap:13px}.ssk-pack-card{padding:13px}.ssk-carton-scene,.ssk-pouch-scene,.ssk-case-scene{min-height:235px}.ssk-page-preview{min-height:380px}.ssk-work-footer small{width:100%;margin-left:0}.ssk-modal-visual{min-height:350px}.ssk-modal-visual-logo{margin-top:20px}.ssk-modal-visual-copy{margin-bottom:70px;width:58%}.ssk-modal-visual-instrument{bottom:94px;transform:scale(.8) rotate(-24deg);transform-origin:left center}}
@media(max-width:380px){.ssk-packaging-grid{grid-template-columns:1fr}.ssk-pack-card{padding:16px}.ssk-carton-scene,.ssk-pouch-scene,.ssk-case-scene{min-height:260px}.ssk-brand-statement{align-items:flex-start;flex-direction:column}.ssk-brand-statement strong{text-align:left}.ssk-type-row{grid-template-columns:1fr}.ssk-type-row>span{grid-row:auto}}
@media(prefers-reduced-motion:reduce){.ssk-modal-visual,.ssk-board,.ssk-catalog-book,.ssk-carton,.ssk-pouch,.ssk-instrument-case{animation:none!important}}


/* SSK V15: actual supplied instrument photography and brand collateral */
.ssk-tool-photo{height:70px;min-width:0;overflow:hidden;border-radius:8px;background:#181a1c;border:1px solid rgba(36,39,43,.18);display:flex;align-items:center;justify-content:center}
.ssk-tool-photo img{width:100%;height:100%;object-fit:cover;object-position:68% 58%;display:block;transition:transform .45s ease}
.ssk-tool-photo:hover img{transform:scale(1.08)}
.ssk-tool-photo-alt img{object-position:52% 72%;filter:saturate(.9)}
.ssk-page-product-row{grid-template-columns:100px minmax(0,1fr);gap:16px;padding:16px 0}
.ssk-real-brand-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(14px,2vw,24px);margin:20px 0 6px}
.ssk-real-brand-card{min-width:0;overflow:hidden;border:1px solid rgba(185,190,196,.2);border-radius:16px;background:linear-gradient(145deg,#17191b,#101214);padding:clamp(12px,1.5vw,18px)}
.ssk-real-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;color:#ff985a;font-size:10px;font-weight:850;letter-spacing:.13em}
.ssk-real-card-head b{color:#777f86;white-space:nowrap}
.ssk-real-brand-card>img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:9px;background:#0c0d0e}
.ssk-real-banner-card>img{aspect-ratio:1.66;object-fit:cover;object-position:center}
.ssk-real-visiting-card>img{aspect-ratio:1.65;object-fit:cover;object-position:center}
.ssk-real-brand-card p{margin:12px 0 2px;color:#a5a9ac;font-size:12px;line-height:1.7}
.ssk-modal-visual-instrument{position:absolute;right:5%;top:42%;width:43%;height:30%;overflow:hidden;border:1px solid rgba(255,118,40,.35);border-radius:10px;transform:rotate(-4deg);box-shadow:0 18px 35px rgba(0,0,0,.3)}
.ssk-modal-visual-instrument img{width:100%;height:100%;object-fit:cover;object-position:72% 60%;display:block}
@media(max-width:900px){
 .ssk-real-brand-grid{grid-template-columns:1fr}
 .ssk-real-brand-card>img{max-height:360px}
}
@media(max-width:560px){
 .ssk-page-product-row{grid-template-columns:76px minmax(0,1fr);gap:10px}
 .ssk-tool-photo{height:60px}
 .ssk-real-brand-card{padding:10px;border-radius:12px}
 .ssk-real-card-head{font-size:8px;letter-spacing:.08em}
 .ssk-real-brand-card p{font-size:11px}
}


/* V16 FIX: reset project modal scroll between projects and show the actual SiteForge screenshot in the hero visual. */
#projectModal .modal-container { scroll-behavior: auto; }
#projectModal .sf-modal-original {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(14px, 2.5vw, 32px);
  box-sizing: border-box;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(91, 75, 220, .13), transparent 68%);
}
#projectModal .sf-modal-original img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  border: 1px solid rgba(135, 117, 255, .25);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 38px rgba(101,83,255,.12);
}
#projectModal .sf-modal-original > span {
  position: absolute;
  right: clamp(20px, 3vw, 42px);
  bottom: clamp(20px, 3vw, 42px);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(8,9,18,.86);
  color: #e7e2ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  backdrop-filter: blur(10px);
}
#projectModal.siteforge-active .modal-image { background: linear-gradient(145deg, #0d1020, #080910 75%); }
@media (max-width: 900px) {
  #projectModal .sf-modal-original { min-height: 0; padding: 18px; }
  #projectModal .sf-modal-original img { height: auto; max-height: none; }
}


/* V17 FIX: keep modal inside viewport, prevent SSK case-study overflow,
   and keep SiteForge concept in the hero while the supplied original screenshot
   appears only in the lower case-study section. */
#projectModal,
#projectModal * { box-sizing: border-box; }
#projectModal { padding: clamp(7px, 1.5vw, 24px); overflow: hidden; }
#projectModal .modal-container {
  width: min(1400px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: auto;
}
#projectModal .modal-content { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#projectModal .modal-image,
#projectModal .modal-details,
#projectModal #modalVisual { min-width: 0; max-width: 100%; }
#projectModal .modal-details { overflow-wrap: anywhere; }
#projectModal .ssk-case-study,
#projectModal .ssk-case-study * { max-width: 100%; }
#projectModal .ssk-case-study { width: 100%; min-width: 0; overflow-x: clip; }
#projectModal .ssk-brand-layout,
#projectModal .ssk-packaging-grid,
#projectModal .ssk-page-system,
#projectModal .ssk-real-brand-grid { width: 100%; min-width: 0; }
#projectModal .ssk-board,
#projectModal .ssk-pack-card,
#projectModal .ssk-real-brand-card,
#projectModal .ssk-page-system > *,
#projectModal .ssk-catalogue-notes > * { min-width: 0; }
#projectModal .ssk-modal-visual { width: 100%; max-width: 570px; min-width: 0; }
#projectModal .ssk-modal-visual-copy strong { overflow-wrap: anywhere; }
#projectModal .sf-modal-preview { width: 100%; max-width: 560px; min-width: 0; }
#projectModal .sf-preview-body { min-width: 0; }
#projectModal .sf-preview-body h3 { overflow-wrap: anywhere; }
#projectModal .sf-preview-input span { min-width: 0; overflow-wrap: anywhere; }
#projectModal .sf-case-study { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
#projectModal .sf-original-shot { min-width: 0; }
#projectModal .sf-shot-image,
#projectModal .sf-shot-image img { max-width: 100%; min-width: 0; }
@media (max-width: 900px) {
  #projectModal { padding: 10px; }
  #projectModal .modal-container { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  #projectModal .modal-content { grid-template-columns: minmax(0, 1fr); }
  #projectModal .modal-image { min-height: clamp(250px, 38vh, 420px); max-height: none; }
  #projectModal .ssk-packaging-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #projectModal { padding: 6px; }
  #projectModal .modal-container { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 16px; }
  #projectModal .modal-details { padding: 24px 16px 28px; }
  #projectModal .ssk-case-study { padding: 20px 12px; }
  #projectModal .ssk-packaging-grid,
  #projectModal .ssk-brand-layout,
  #projectModal .ssk-page-system,
  #projectModal .ssk-real-brand-grid { grid-template-columns: minmax(0, 1fr); }
  #projectModal .ssk-modal-visual { min-height: 330px; }
  #projectModal .ssk-modal-visual-copy { width: 58%; margin-right: 14px; }
  #projectModal .ssk-modal-visual-footer { gap: 7px; padding: 12px; }
  #projectModal .ssk-modal-visual-footer span { font-size: 6px; overflow-wrap: anywhere; }
  #projectModal .sf-case-study { padding: 26px 14px; }
  #projectModal .sf-preview-body { padding: 22px 16px; }
  #projectModal .sf-preview-top { padding-inline: 10px; }
  #projectModal .sf-preview-top b { margin-left: 5px; font-size: 9px; letter-spacing: 1px; }
  #projectModal .sf-preview-actions { gap: 5px; }
  #projectModal .sf-preview-actions span { font-size: 9px; overflow-wrap: anywhere; }
}

/* V18: Match the SSK first-screen modal composition to SiteForge.
   Keep the top panel compact; the full branding palette remains in the
   detailed SSK case-study below. */
#projectModal.ssk-active .modal-content {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#projectModal.ssk-active .modal-image {
  min-height: 0;
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#projectModal.ssk-active .ssk-modal-visual {
  min-height: 0;
  height: min(560px, calc(100dvh - 110px));
  max-height: calc(100dvh - 110px);
}
#projectModal.ssk-active .modal-details {
  justify-content: center;
  padding: clamp(30px, 3vw, 46px) clamp(28px, 3.2vw, 48px);
}
#projectModal.ssk-active .modal-details h2 {
  margin: 12px 0 16px;
  font-size: clamp(38px, 3.7vw, 62px);
  line-height: .96;
}
#projectModal.ssk-active .modal-description {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.65;
}
#projectModal.ssk-active .modal-meta {
  gap: 12px;
  margin-bottom: 20px;
}
#projectModal.ssk-active .modal-meta div { padding: 13px 14px; }
#projectModal.ssk-active .modal-block { margin-bottom: 16px; }
#projectModal.ssk-active .modal-block p { font-size: 12px; line-height: 1.6; }
#projectModal.ssk-active .modal-tags { gap: 6px; }
#projectModal.ssk-active .modal-tag { padding: 7px 9px; font-size: 10px; }
#projectModal.ssk-active .modal-cta { margin-top: 3px; padding: 13px 17px; }
/* Palette and full design explanation are already shown in the SSK case-study below. */
#projectModal.ssk-active #modalPaletteBlock { display: none !important; }
@media (max-width: 1100px) and (min-width: 901px) {
  #projectModal.ssk-active .modal-details { padding: 28px 24px; }
  #projectModal.ssk-active .modal-details h2 { font-size: clamp(34px, 3.3vw, 46px); }
  #projectModal.ssk-active .modal-description { font-size: 13px; }
}
@media (max-width: 900px) {
  #projectModal.ssk-active .modal-image { min-height: 390px; padding: 24px; }
  #projectModal.ssk-active .ssk-modal-visual { height: auto; min-height: 390px; max-height: none; }
  #projectModal.ssk-active .modal-details { padding: 32px 28px; }
}
@media (max-width: 600px) {
  #projectModal.ssk-active .modal-image { min-height: 340px; padding: 18px; }
  #projectModal.ssk-active .ssk-modal-visual { min-height: 340px; }
  #projectModal.ssk-active .modal-details { padding: 24px 16px 28px; }
  #projectModal.ssk-active .modal-details h2 { font-size: clamp(36px, 10vw, 48px); }
}

/* =========================================================
   PORTFOLIO EXTENSION V19 — ORVIX, 3D, VIDEO & LOGO GALLERY
========================================================= */
.project-video,.project-logo-gallery{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,rgba(128,103,255,.18),transparent 58%),#0b0c10}
.project-video:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;opacity:.55}
.video-frame-glow{position:absolute;width:62%;height:55%;left:19%;top:15%;border-radius:50%;background:rgba(255,118,40,.12);filter:blur(32px)}
.video-monitor{position:absolute;left:10%;right:10%;top:19%;padding:10px;border:1px solid rgba(166,154,255,.28);border-radius:12px;background:linear-gradient(145deg,#1b1d2b,#0c0d14);box-shadow:0 24px 60px #0008;transform:perspective(900px) rotateY(-5deg);transition:transform .5s ease}
.project-video-card:hover .video-monitor{transform:perspective(900px) rotateY(0) translateY(-4px)}
.video-monitor-top,.video-big-top{display:flex;justify-content:space-between;align-items:center;color:#bcb5ff;font-size:8px;letter-spacing:.15em;padding:3px 4px 8px}
.video-monitor-top i{font-style:normal;color:#ff9a63}
.video-preview-art{position:relative;min-height:132px;padding:20px 16px;overflow:hidden;background:linear-gradient(115deg,#171a2a,#292044 55%,#11121a);border-radius:6px}
.video-preview-kicker{font-size:7px;letter-spacing:.2em;color:#c0b6ff;position:relative;z-index:2}
.video-preview-art strong{display:block;font-size:clamp(18px,2.1vw,30px);line-height:.93;letter-spacing:-.05em;color:#fff;margin-top:12px;position:relative;z-index:2}
.video-preview-art em,.video-big-art em{font-style:normal;color:#a68aff}
.video-preview-sun{position:absolute;width:100px;height:100px;border-radius:50%;right:10%;top:16%;background:radial-gradient(circle at 35% 30%,#ffbc8c,#e66b3a 40%,#6b2c40 72%,transparent 74%);box-shadow:0 0 40px #ff76282b}
.video-timeline{height:28px;display:flex;gap:4px;align-items:center;padding:6px 2px 0;position:relative}
.video-timeline i{display:block;height:8px;border-radius:2px;background:#7e6bff;flex:1}.video-timeline i:nth-child(2),.video-timeline i:nth-child(5){background:#ff7628}.video-timeline b{position:absolute;left:42%;height:21px;width:2px;background:#fff;box-shadow:0 0 6px #fff}
.project-logo-gallery{background:radial-gradient(ellipse at 50% 50%,#2a211a,#0c0c0d 75%)}
.logo-gallery-head{position:absolute;left:9%;top:10%;font-size:8px;letter-spacing:.25em;color:#d8b98d;font-weight:800}
.logo-mini-grid{position:absolute;inset:24% 9% 14%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.logo-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);color:#f4eee4;transition:transform .3s,border-color .3s}
.project-logo-card:hover .logo-mini{border-color:rgba(214,176,127,.35)}
.logo-mini b{font-size:clamp(20px,2.6vw,32px);letter-spacing:.05em}.logo-mini span{font-size:6px;letter-spacing:.18em;opacity:.72}.aureen-mark b{color:#e3c8a2}.ssk-mark b{color:#ff7628;font-style:italic}.orvix-mark b{border:1px solid #a99aff;color:#b6a8ff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.craft-mark b{font-family:Georgia,serif;color:#e0ba7e}
.project-video-card .project-info,.project-logo-card .project-info{position:relative;z-index:2}
.orvix-modal-hero,.three-d-modal-visual,.video-modal-visual,.logo-modal-visual{position:relative;min-height:360px;height:100%;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.orvix-modal-hero{background:radial-gradient(ellipse at 50% 45%,#26204f 0,#101020 43%,#080913 76%)}
.orvix-hero-orbit{position:absolute;width:75%;height:43%;border:1px solid #8a75ff66;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 35px #8067ff15}
.orvix-hero-phone{position:relative;width:150px;height:285px;border:2px solid #7166a9;border-radius:30px;padding:8px;background:#11111d;transform:rotate(-7deg);box-shadow:0 20px 55px #0008,0 0 32px #8067ff24;animation:orvixFloat 5s ease-in-out infinite}
.orvix-hero-camera{position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%);width:42px;height:6px;border-radius:8px;background:#242331}
.orvix-hero-screen{height:100%;border-radius:22px;background:radial-gradient(circle at 50% 35%,#28234e,#080913 65%);display:flex;align-items:center;flex-direction:column;padding:40px 8px 12px;color:#f8f6ff}
.orvix-hero-screen>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #9a87ff;border-radius:50%;color:#b6a8ff;font-weight:800;margin-bottom:10px}.orvix-hero-screen>b{font-size:15px;letter-spacing:.22em}.orvix-hero-screen>small{font-size:6px;letter-spacing:.24em;color:#a99aff;margin-top:3px}.orvix-hero-wave{height:40px;display:flex;align-items:center;gap:4px;margin:24px 0}.orvix-hero-wave i{width:4px;border-radius:8px;background:#9581ff;animation:wavePulse 1.1s ease-in-out infinite alternate}.orvix-hero-wave i:nth-child(1),.orvix-hero-wave i:nth-child(7){height:16px}.orvix-hero-wave i:nth-child(2),.orvix-hero-wave i:nth-child(6){height:27px;animation-delay:.2s}.orvix-hero-wave i:nth-child(3),.orvix-hero-wave i:nth-child(5){height:34px;animation-delay:.4s}.orvix-hero-wave i:nth-child(4){height:22px;animation-delay:.1s}.orvix-hero-screen em{font-size:7px;font-style:normal;color:#77748d;border:1px solid #302a51;border-radius:9px;padding:8px;width:100%}.orvix-hero-caption{position:absolute;bottom:24px;font-size:8px;letter-spacing:.2em;color:#a99aff}
@keyframes orvixFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}@keyframes wavePulse{from{transform:scaleY(.55);opacity:.65}to{transform:scaleY(1);opacity:1}}
.three-d-modal-visual{background:radial-gradient(ellipse at 50% 48%,#3a2115,#101113 65%)}.three-d-modal-kicker{position:absolute;top:28px;left:28px;font-size:10px;letter-spacing:.35em;color:#ff9a63;font-weight:800}.three-d-modal-orbit{position:absolute;width:75%;height:38%;border:1px solid #ff76284a;border-radius:50%;transform:rotate(-28deg)}.three-d-modal-orbit.orbit-b{transform:rotate(32deg);border-color:#aaaab333}.three-d-modal-form{position:relative;width:118px;height:150px;transform:skewY(-5deg);filter:drop-shadow(20px 24px 20px #0008);animation:orvixFloat 6s ease-in-out infinite}.three-d-modal-form b{position:absolute;inset:10px 18px 0 0;background:linear-gradient(130deg,#ffb16f,#f16a28 52%,#9b3514);clip-path:polygon(12% 0,100% 0,100% 82%,0 100%);border:1px solid #ffb17c}.three-d-modal-form i{position:absolute;z-index:2;top:-9px;left:23px;width:74px;height:19px;background:#ffb37b;transform:skewX(-35deg)}.three-d-modal-form span{position:absolute;right:-10px;top:10px;width:28px;height:122px;background:linear-gradient(90deg,#8d3517,#40180e);clip-path:polygon(0 0,100% 8%,100% 88%,0 100%)}.three-d-modal-caption{position:absolute;bottom:25px;color:#d2c7bc;font-size:8px;letter-spacing:.24em}
.video-modal-visual{background:radial-gradient(ellipse at 50% 40%,#252042,#0a0b10 72%);padding:24px;flex-direction:column}.video-modal-top{width:100%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#b9b0ff}.video-modal-top b{color:#ff9a63}.video-modal-frame{position:relative;width:100%;min-height:230px;margin:8px 0;background:linear-gradient(120deg,#171a29,#292044 55%,#11121a);padding:28px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.video-modal-frame small{font-size:8px;letter-spacing:.2em;color:#c3b7ff;z-index:2}.video-modal-frame strong{font-size:clamp(28px,4vw,48px);line-height:.9;letter-spacing:-.05em;color:#fff;margin-top:15px;z-index:2}.video-modal-frame em{font-style:normal;color:#a68aff}.video-modal-frame i{position:absolute;right:12%;top:22%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffca9a,#ff7628 42%,#4a233b 75%);box-shadow:0 0 50px #ff76282c}.video-modal-timeline{width:100%;display:flex;gap:5px}.video-modal-timeline span{height:9px;flex:1;border-radius:3px;background:#8067ff}.video-modal-timeline span:nth-child(2){background:#ff7628}.video-modal-timeline b{position:absolute}
.logo-modal-visual{background:#12110f;padding:25px;flex-direction:column}.logo-modal-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.logo-modal-grid>div{min-height:112px;border:1px solid #ffffff18;border-radius:8px;background:#ffffff05;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#f1e9dc}.logo-modal-grid b{font-size:clamp(22px,3vw,36px);letter-spacing:.04em}.logo-modal-grid span{font-size:7px;letter-spacing:.2em;opacity:.72}.logo-modal-grid>div:nth-child(1) b{color:#d7b990}.logo-modal-grid>div:nth-child(2) b{color:#ff7628;font-style:italic}.logo-modal-grid>div:nth-child(3) b{color:#b6a8ff;border:1px solid #8c78ff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.logo-modal-visual>small{margin-top:15px;color:#b9a184;letter-spacing:.2em;font-size:8px}
.extended-case-study{padding:clamp(28px,5vw,72px);background:#0b0c10;border-top:1px solid #ffffff12;color:#f3f2f7}.extended-study-heading{max-width:900px;margin:0 auto 42px;text-align:center}.extended-study-heading>span{font-size:10px;letter-spacing:.24em;color:#ff965e;font-weight:800}.orvix-case-study .extended-study-heading>span{color:#a99aff}.three-d-case-study .extended-study-heading>span{color:#ff965e}.video-case-study .extended-study-heading>span{color:#b2a2ff}.logo-case-study .extended-study-heading>span{color:#d8b990}.extended-study-heading h3{font-size:clamp(28px,4vw,54px);letter-spacing:-.045em;line-height:1.04;margin:15px 0}.extended-study-heading h3 em{font-style:normal;color:#b8a5ff}.three-d-case-study .extended-study-heading h3 em{color:#ff9a63}.logo-case-study .extended-study-heading h3 em{color:#d7b990}.extended-study-heading p{max-width:700px;margin:auto;color:#a7a5b0;line-height:1.8;font-size:14px}.orvix-feature-layout{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:clamp(24px,5vw,70px);align-items:center;max-width:1100px;margin:auto}.orvix-phone-large{width:210px;max-width:100%;height:390px;border:2px solid #655a9b;border-radius:35px;padding:9px;background:#10101a;margin:auto;box-shadow:0 25px 80px #0008,0 0 45px #8067ff19;transform:rotate(-3deg)}.orvix-phone-inner{height:100%;border-radius:25px;background:radial-gradient(circle at 50% 30%,#252049,#080913 66%);display:flex;align-items:center;flex-direction:column;padding:40px 13px 15px}.orvix-phone-camera{height:6px;width:45px;border-radius:8px;background:#272434;margin:0 auto -6px;position:relative;z-index:2;top:9px}.orvix-orb-large{width:42px;height:42px;border:1px solid #9d8bff;color:#b6a8ff;border-radius:50%;display:grid;place-items:center;font-weight:800;margin-bottom:10px}.orvix-phone-inner>b{letter-spacing:.25em}.orvix-phone-inner>small{font-size:8px;letter-spacing:.2em;color:#a99aff;margin-top:4px}.orvix-wave-large{display:flex;align-items:center;gap:4px;height:44px;margin:25px 0}.orvix-wave-large i{width:4px;border-radius:5px;background:#8d7aff;height:var(--h,20px)}.orvix-wave-large i:nth-child(2),.orvix-wave-large i:nth-child(6){height:30px}.orvix-wave-large i:nth-child(3),.orvix-wave-large i:nth-child(5){height:37px}.orvix-wave-large i:nth-child(4){height:24px}.orvix-chat-bubble{font-size:9px;color:#c9c5e5;background:#19172b;padding:9px;border-radius:10px;width:100%;margin-bottom:10px}.orvix-chat-input{font-size:8px;color:#7f7a9e;border:1px solid #3b315e;border-radius:12px;padding:10px;width:100%;display:flex;justify-content:space-between}.orvix-chat-input b{color:#b6a8ff}.orvix-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.orvix-feature-list article,.extended-stat-grid article{padding:20px;border:1px solid #ffffff14;border-radius:12px;background:linear-gradient(145deg,#141523,#0e0f16)}.orvix-feature-list article>span{font-size:9px;letter-spacing:.16em;color:#a99aff}.orvix-feature-list h4{font-size:16px;margin:12px 0 8px}.orvix-feature-list p,.three-d-process-grid p,.video-service-list p{font-size:12px;color:#a5a3af;line-height:1.7;margin:0}.extended-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1100px;margin:38px auto}.extended-stat-grid article>b{display:block;font-size:25px;color:#a99aff}.extended-stat-grid article>span{display:block;font-weight:700;margin:7px 0}.extended-stat-grid p{font-size:12px;color:#9997a4;margin:0}.extended-study-footer{max-width:1100px;margin:36px auto 0;padding:18px 0;border-top:1px solid #ffffff18;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.extended-study-footer span{font-size:10px;letter-spacing:.2em;color:#ff965e;font-weight:800}.extended-study-footer b{font-size:13px;color:#d4d0d8}
.three-d-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1200px;margin:auto}.three-d-process-grid article{border:1px solid #ffffff15;border-radius:12px;padding:12px;background:#111216}.three-d-stage{height:180px;position:relative;overflow:hidden;border-radius:8px;background:radial-gradient(ellipse at 50% 40%,#2e211a,#0a0b0d);display:grid;place-items:center}.three-d-stage small{position:absolute;left:12px;bottom:10px;font-size:8px;letter-spacing:.16em;color:#c9b6a5}.three-d-process-grid h4{margin:16px 4px 7px}.three-d-process-grid p{margin:0 4px 6px}.td-cube{position:relative;width:65px;height:65px;background:#a2a4a8;transform:rotate(30deg) skew(-8deg);box-shadow:0 20px 25px #0008}.td-cube i{position:absolute;inset:0;background:#d1d3d5;clip-path:polygon(0 0,100% 0,60% 28%,0 25%)}.td-cube b{position:absolute;right:-19px;top:9px;width:20px;height:65px;background:#555960;transform:skewY(-35deg)}.td-sphere{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff1db,#e8a36d 20%,#9b4e29 48%,#241a18 78%);box-shadow:inset -13px -14px 24px #0008,0 0 30px #ff762824}.td-pedestal{position:absolute;bottom:36px;width:115px;height:25px;border-radius:50%;background:linear-gradient(#e7d5c0,#917a63);transform:perspective(90px) rotateX(30deg)}.td-pedestal i{position:absolute;width:55px;height:100px;bottom:14px;left:30px;background:linear-gradient(90deg,#b2a49a,#f2d3b3,#66564d);clip-path:polygon(25% 0,80% 0,100% 100%,0 100%)}.td-light-orb{position:absolute;top:28px;right:28px;width:35px;height:35px;border-radius:50%;background:#ffb87b;filter:blur(12px)}.td-render-object{width:76px;height:100px;background:linear-gradient(120deg,#ffbd83,#ff7628 50%,#803314);clip-path:polygon(20% 0,100% 0,88% 100%,0 88%);filter:drop-shadow(12px 18px 10px #0008)}.three-d-feature-banner{max-width:1200px;margin:26px auto 0;min-height:220px;padding:clamp(24px,5vw,50px);border:1px solid #ff76283a;border-radius:14px;background:radial-gradient(ellipse at 80% 50%,#422113,#141113 60%);display:flex;flex-direction:column;justify-content:center;gap:13px}.three-d-feature-banner>span{font-size:9px;letter-spacing:.24em;color:#ff9a63}.three-d-feature-banner>strong{font-size:clamp(25px,4vw,48px);line-height:1.02;letter-spacing:-.04em}.three-d-feature-banner em{font-style:normal;color:#ff9a63}.three-d-feature-banner>small{font-size:11px;color:#a8a1a0}
.video-case-layout{max-width:1100px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:25px;align-items:center}.video-big-preview{border:1px solid #7666ba55;background:#10111a;border-radius:13px;padding:14px}.video-big-art{min-height:270px;position:relative;overflow:hidden;padding:30px;background:linear-gradient(120deg,#171a29,#292044 55%,#11121a);display:flex;flex-direction:column;justify-content:center}.video-big-art>span{z-index:2;font-size:9px;letter-spacing:.18em;color:#bdb1ff}.video-big-art>strong{z-index:2;font-size:clamp(30px,4vw,54px);line-height:.9;letter-spacing:-.05em;margin-top:14px}.video-big-disc{position:absolute;right:9%;top:22%;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffd4a9,#ff7628 42%,#49203d 76%);box-shadow:0 0 50px #ff76282a}.video-big-controls{display:flex;align-items:center;gap:12px;padding-top:13px;color:#b9b1ff}.video-big-controls>span{width:27px;height:27px;border-radius:50%;background:#8067ff;color:white;display:grid;place-items:center;font-size:10px}.video-big-controls>div{height:4px;background:#29283b;flex:1;border-radius:5px;overflow:hidden}.video-big-controls>div i{display:block;width:44%;height:100%;background:#ff7628}.video-big-controls small{font-size:8px;color:#aaa}.video-service-list{display:grid;gap:12px}.video-service-list article{display:flex;gap:14px;padding:16px;border:1px solid #ffffff15;border-radius:10px;background:#111218}.video-service-list article>b{color:#a99aff;font-size:12px}.video-service-list h4{margin:0 0 5px;font-size:14px}.video-timeline-board{max-width:1100px;margin:24px auto 0;padding:20px;border:1px solid #ffffff17;border-radius:12px;background:#111218}.timeline-title{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:15px;font-size:9px;letter-spacing:.14em}.timeline-title small{color:#9994b2}.timeline-track{height:34px;display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:center;position:relative;border-top:1px solid #ffffff0d}.timeline-track label{font-size:8px;letter-spacing:.12em;color:#9d9aa8}.timeline-track span{height:14px;width:80%;border-radius:3px;background:linear-gradient(90deg,#6754e6,#a48cff)}.timeline-track:nth-of-type(3) span{width:56%;background:linear-gradient(90deg,#ff7628,#ffc08c)}.timeline-track:nth-of-type(4) span{width:70%;background:linear-gradient(90deg,#2d8b9c,#8067ff)}.timeline-track i{position:absolute;left:45%;height:100%;width:1px;background:#fff}.timeline-track b{position:absolute;left:72%;height:100%;width:1px;background:#fff8}
.logo-gallery-large{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.logo-board{min-height:210px;padding:17px;border:1px solid #ffffff16;border-radius:12px;background:#111216;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.logo-board>span{position:absolute;left:14px;top:14px;font-size:7px;letter-spacing:.16em;color:#9995a2}.logo-board>div{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;margin-top:14px}.logo-board>div b{font-size:clamp(25px,3vw,38px);letter-spacing:.04em}.logo-board>div small{font-size:8px;letter-spacing:.25em}.logo-board>p{font-size:10px;color:#a9a5ae;margin:15px 0 0;text-align:center}.logo-aureen{background:#e8d7bd;color:#382b21}.logo-aureen>span,.logo-aureen>p{color:#77604b}.logo-ssk{background:linear-gradient(135deg,#f4f4f2,#c5c9cc);color:#24272b}.logo-ssk>span,.logo-ssk>p{color:#59616a}.logo-ssk>div b{font-style:italic}.logo-orvix>div b{width:44px;height:44px;border:1px solid #a99aff;border-radius:50%;display:grid;place-items:center;color:#b6a8ff}.logo-craftopia{background:#1d1712;color:#e5c18b}.logo-monogram>div b{font-size:48px;letter-spacing:-.1em;color:#d4b18a}.logo-symbol>div b{font-size:56px;color:#b6a8ff}
@media(max-width:900px){.orvix-feature-layout,.video-case-layout{grid-template-columns:1fr}.orvix-feature-list{max-width:700px;margin:auto}.three-d-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-gallery-large{grid-template-columns:repeat(2,minmax(0,1fr))}.video-big-preview{max-width:700px;width:100%;margin:auto}}
@media(max-width:560px){.extended-case-study{padding:26px 16px}.orvix-feature-list,.extended-stat-grid{grid-template-columns:1fr}.orvix-phone-large{height:350px;width:190px}.three-d-process-grid{grid-template-columns:1fr}.three-d-stage{height:190px}.logo-gallery-large{grid-template-columns:1fr}.logo-board{min-height:185px}.video-big-art{min-height:220px;padding:22px}.timeline-track{grid-template-columns:60px 1fr}.orvix-modal-hero,.three-d-modal-visual,.video-modal-visual,.logo-modal-visual{min-height:290px}.video-modal-frame{min-height:200px;padding:20px}.video-modal-frame i{width:80px;height:80px}.video-monitor{left:6%;right:6%;top:22%}.video-preview-art{min-height:120px}}


/* V20: original video portfolio and graphic-design gallery */
.video-card-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.8);transition:transform .6s ease,opacity .3s ease;z-index:0}
.project-video-card:hover .video-card-poster{transform:scale(1.045);opacity:.58}
.project-video .video-monitor{z-index:1}
.project-video .image-overlay{z-index:1}
.project-video .project-view{z-index:2}
.project-graphic-gallery{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 70% 20%,#493322 0,transparent 45%),linear-gradient(145deg,#121218,#09090b 75%)}
.graphic-gallery-label{position:absolute;z-index:2;left:9%;top:9%;font-size:9px;font-weight:800;letter-spacing:.22em;color:#e8c59a}
.graphic-poster-stack{position:absolute;inset:20% 13% 13%;display:flex;align-items:center;justify-content:center;perspective:800px}
.graphic-poster{position:absolute;width:48%;height:74%;padding:12px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #ffffff30;box-shadow:0 20px 45px #0007;transition:transform .45s ease}
.graphic-poster small,.graphic-poster span{font-size:6px;letter-spacing:.13em;font-weight:800}.graphic-poster b{font-size:clamp(15px,2vw,25px);line-height:.92;letter-spacing:-.06em}.graphic-poster em{font-style:normal;color:#ff8b42}.poster-a{background:#f0e6d6;color:#171519;transform:translateX(-36%) rotate(-9deg)}.poster-b{background:linear-gradient(150deg,#34315d,#15151f);color:#fff;transform:translateX(0) rotate(4deg);z-index:2}.poster-b em{color:#b1a0ff}.poster-c{background:#ff7a2d;color:#151515;transform:translateX(36%) rotate(11deg)}.poster-c em{color:#f5e8d8}.project-graphic-card:hover .poster-a{transform:translateX(-42%) rotate(-12deg) translateY(-5px)}.project-graphic-card:hover .poster-b{transform:translateY(-9px) rotate(0)}.project-graphic-card:hover .poster-c{transform:translateX(42%) rotate(14deg) translateY(-4px)}
.original-video-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.original-video-item{min-width:0;overflow:hidden;border:1px solid #ffffff18;border-radius:14px;background:linear-gradient(145deg,#141520,#0b0c10);padding:12px;transition:transform .3s ease,border-color .3s ease}
.original-video-item:hover{transform:translateY(-4px);border-color:#a99aff66}
.original-video-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:3px 2px 11px;color:#c6bbff;font-size:9px;letter-spacing:.13em;font-weight:800}
.original-video-head small{color:#858392;font-size:8px;letter-spacing:.1em}
.original-video-item video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#050507;border-radius:8px}
.original-video-item h4{font-size:15px;margin:12px 2px 5px;color:#f6f4fb}.original-video-item p{font-size:12px;line-height:1.6;color:#9e9ca9;margin:0 2px 3px}
.graphic-artwork-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.graphic-artwork-placeholder{padding:12px;border:1px solid #ffffff18;border-radius:13px;background:#121116;overflow:hidden}.graphic-artwork-placeholder>span{display:block;color:#d7b990;font-size:9px;font-weight:800;letter-spacing:.16em;margin:3px 2px 12px}
.placeholder-art{min-height:260px;position:relative;overflow:hidden;padding:25px;display:flex;flex-direction:column;justify-content:space-between;border-radius:7px}.placeholder-art b{font-size:clamp(25px,4vw,48px);letter-spacing:-.06em;line-height:.9}.placeholder-art em{font-style:normal}.placeholder-art small{font-size:8px;letter-spacing:.14em;font-weight:800;opacity:.7}.placeholder-poster{background:radial-gradient(circle at 75% 30%,#ff8c43,transparent 28%),linear-gradient(135deg,#27213e,#111018);color:#f8f3ec}.placeholder-poster em{color:#b7a3ff}.placeholder-banner{min-height:200px;background:linear-gradient(110deg,#f0e4d2,#c9a67b);color:#251c17}.placeholder-banner em{color:#8b4a25}.placeholder-social{background:linear-gradient(135deg,#ff7b2c,#d94c27 52%,#321e26);color:#fff3e8}.placeholder-social em{color:#23171c}.placeholder-menu{background:linear-gradient(135deg,#1d2827,#0d1111);color:#f1e7d2;border:1px solid #b88f5c}.placeholder-menu em{color:#d7ae7b}
.graphic-modal-visual{width:100%;height:100%;min-height:360px;padding:32px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#473023,#101014 70%)}.graphic-modal-poster{width:min(88%,390px);aspect-ratio:4/5;padding:24px;background:linear-gradient(145deg,#f0e6d6,#c9a67b);color:#241b16;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 24px 60px #0008;transform:rotate(-3deg);animation:graphicPosterFloat 6s ease-in-out infinite}.graphic-modal-poster small,.graphic-modal-poster span{font-size:8px;letter-spacing:.15em;font-weight:800}.graphic-modal-poster strong{font-size:clamp(30px,4vw,48px);line-height:.92;letter-spacing:-.06em}.graphic-modal-poster em{font-style:normal;color:#a34e22}
@keyframes graphicPosterFloat{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}
@media(max-width:760px){.original-video-grid,.graphic-artwork-grid{grid-template-columns:1fr}.original-video-item video{aspect-ratio:16/9}.placeholder-art{min-height:220px}.graphic-poster-stack{inset:22% 10% 14%}.graphic-poster{width:50%}.graphic-modal-visual{min-height:290px;padding:20px}}
@media(prefers-reduced-motion:reduce){.graphic-modal-poster{animation:none}.original-video-item,.graphic-poster{transition:none}}


/* SSK original logo — transparent artwork with a restrained metallic/orange glow */
.ssk-project-image img[src*="ssk-logo-transparent"] {
    filter: drop-shadow(0 0 8px rgba(255, 122, 32, 0.10))
            drop-shadow(0 0 18px rgba(220, 225, 230, 0.06));
}
.ssk-card:hover .ssk-project-image img[src*="ssk-logo-transparent"] {
    filter: drop-shadow(0 0 12px rgba(255, 122, 32, 0.22))
            drop-shadow(0 0 24px rgba(220, 225, 230, 0.09));
    transform: scale(1.025);
}


/* =========================================================
   GRAPHIC GALLERY — REAL ARTWORK, VISITING CARDS & AI WORK
========================================================= */
.project-visiting-visual {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,118,40,.20), transparent 44%),
    linear-gradient(145deg, #16151a, #050506 76%);
}
.visiting-stack { position:absolute; inset:18% 8% 13%; display:flex; align-items:center; justify-content:center; }
.visit-mini { position:absolute; width:58%; height:58%; padding:15px; display:flex; flex-direction:column; justify-content:center; font-weight:900; font-size:clamp(12px,2vw,20px); line-height:1.05; box-shadow:0 18px 40px #0009; border:1px solid #ffffff25; }
.visit-mini small {font-size:.38em;letter-spacing:.16em}
.visit-mini-a {background:#e9e6dc;color:#17171b;transform:translate(-28px,5px) rotate(-9deg)}
.visit-mini-b {background:#272746;color:#fff;transform:translate(22px,-12px) rotate(5deg);z-index:2}
.visit-mini-c {background:#ff7628;color:#181311;transform:translate(46px,20px) rotate(12deg);z-index:1}
.project-ai-visual {background:radial-gradient(circle at 50% 48%,#ff76282b,transparent 45%),linear-gradient(145deg,#15131a,#030304)}
.ai-art-core {position:absolute;left:50%;top:49%;width:190px;height:190px;transform:translate(-50%,-50%);display:grid;place-items:center}
.ai-art-core span {position:absolute;inset:10%;border:1px solid #ff7628;border-radius:40%;transform:rotate(35deg);animation:aiCoreSpin 12s linear infinite}
.ai-art-core span:nth-child(2){inset:20%;border-color:#f3d7b5;transform:rotate(75deg);animation-direction:reverse}
.ai-art-core span:nth-child(3){inset:0;border-color:#ff762866;border-radius:50%;transform:rotate(15deg)}
.ai-art-core b {font-size:clamp(45px,7vw,78px);letter-spacing:-.08em;color:#fff;text-shadow:0 0 28px #ff7628a0}
@keyframes aiCoreSpin {to{rotate:360deg}}
.real-artwork-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.graphic-artwork-item,.card-artwork-item,.ai-work-tile {min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#101115}
.artwork-image-wrap {height:clamp(180px,25vw,330px);background:#08090b;display:flex;align-items:center;justify-content:center;padding:10px}
.artwork-image-wrap img {width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease}
.graphic-artwork-item:hover img {transform:scale(1.025)}
.artwork-meta {padding:14px 16px 17px}
.artwork-meta span,.card-artwork-item>span {font-size:9px;letter-spacing:.14em;color:#ff9a5f;text-transform:uppercase}
.artwork-meta h4,.card-artwork-item h4,.ai-work-tile h4 {font-size:15px;line-height:1.35;color:#f5f5f6;margin:7px 0 0}
.card-artwork-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card-artwork-item {padding:12px}
.card-artwork-item img {width:100%;height:clamp(130px,18vw,230px);object-fit:contain;display:block;background:#090a0c;border-radius:7px;margin-bottom:12px}
.card-artwork-item h4 {margin:0 0 6px}
.card-artwork-item>span {display:block}
.ai-work-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ai-work-tile {padding:12px}
.ai-work-art {height:clamp(170px,21vw,270px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:18px;background:#111}
.ai-work-art span {font-size:8px;letter-spacing:.14em;color:#f0c69e;z-index:2}
.ai-work-art b {font-size:clamp(22px,3vw,38px);line-height:.9;letter-spacing:-.06em;z-index:2}
.ai-work-art em {font-style:normal;color:#ff8a48}
.ai-work-art i {position:absolute;width:170px;height:170px;border-radius:50%;right:-25px;bottom:-35px;background:radial-gradient(circle,#ff7628b8,transparent 70%);filter:blur(3px)}
.ai-art-two {background:radial-gradient(circle at 75% 30%,#7263a8 0,transparent 45%),#101016}
.ai-art-two i {background:radial-gradient(circle,#8e7affb8,transparent 70%)}
.ai-art-three {background:radial-gradient(circle at 35% 55%,#187d82 0,transparent 50%),#101016}
.ai-art-three i {background:radial-gradient(circle,#1fb4b8a8,transparent 70%)}
.ai-work-tile p {font-size:12px;line-height:1.5;color:#9a9ba3;margin:7px 2px 3px}
@media(max-width:650px) {
 .real-artwork-grid {grid-template-columns:repeat(2,minmax(0,1fr))}\n .card-artwork-grid {grid-template-columns:1fr}
 .ai-work-grid {grid-template-columns:1fr}
 .artwork-image-wrap {height:260px}
 .card-artwork-item img {height:220px}
 .ai-work-art {height:220px}
 .ai-art-core {width:145px;height:145px}
}

/* Visiting card front/back paired previews */
.card-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;margin-bottom:14px}
.card-pair figure{margin:0;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#08090b;display:flex;flex-direction:column;justify-content:space-between}
.card-pair figure img{width:100%;height:clamp(105px,12vw,170px);object-fit:contain;display:block;background:#08090b;border-radius:4px;margin:0}
.card-pair figcaption{font-size:9px;letter-spacing:.14em;color:#ff8a48;margin-top:7px;font-weight:700}
.card-artwork-item{min-width:0}
@media(max-width:620px){.card-artwork-grid{grid-template-columns:1fr}.card-pair figure img{height:clamp(120px,35vw,210px)}}

@media(max-width:650px){.real-artwork-grid .artwork-image-wrap{height:clamp(145px,32vw,230px);padding:7px}.real-artwork-grid .artwork-meta{padding:10px}.real-artwork-grid .artwork-meta h4{font-size:13px}}


/* AI Work gallery: real supplied artwork, not placeholder cards */
.ai-work-image-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ai-work-image-tile{padding:0;display:flex;flex-direction:column;min-width:0}
.ai-work-image-wrap{position:relative;height:clamp(210px,24vw,330px);padding:10px;background:#08090b;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ai-work-image-wrap img{width:100%;height:100%;object-fit:contain;display:block;border-radius:5px;transition:transform .35s ease}
.ai-work-image-tile:hover .ai-work-image-wrap img{transform:scale(1.025)}
.ai-work-image-wrap>span{position:absolute;left:18px;top:18px;padding:6px 8px;background:rgba(8,9,11,.78);border:1px solid rgba(255,138,72,.45);border-radius:4px;color:#ff9a5f;font-size:8px;letter-spacing:.14em;font-weight:800}
.ai-work-image-info{padding:14px 16px 17px}
.ai-work-image-info h4{font-size:clamp(14px,1.4vw,18px);line-height:1.25;margin:0 0 7px;color:#f3f1f7}
.ai-work-image-info p{font-size:12px;line-height:1.55;color:#aaa7b1;margin:0}
@media(max-width:900px){.ai-work-image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ai-work-image-grid{grid-template-columns:1fr}.ai-work-image-wrap{height:clamp(230px,70vw,390px)}}


/* MOBILE POLISH — 11 OCT 2026 */
.project-video-card { isolation:isolate; overflow:hidden; background:#09090b; }
.project-video-card .video-card-poster { opacity:0 !important; visibility:hidden !important; }
.project-video-card .project-image { isolation:isolate; overflow:hidden; }
.project-video-card .video-monitor { z-index:3; }

/* Premium logo gallery cards */
.project-logo-gallery { background:radial-gradient(ellipse at 50% 48%,rgba(255,118,40,.18),transparent 42%),radial-gradient(ellipse at 20% 15%,rgba(169,154,255,.10),transparent 38%),linear-gradient(145deg,#191613,#090a0c 76%) !important; }
.logo-mini-grid { inset:23% 8% 12% !important; gap:12px !important; }
.logo-mini { position:relative; overflow:hidden; min-width:0; min-height:0; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.18); }
.logo-mini::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.055); border-radius:5px; pointer-events:none; }
.logo-mini b { position:relative; z-index:1; text-shadow:0 4px 18px rgba(0,0,0,.28); }
.aureen-mark { background:radial-gradient(circle at 50% 35%,rgba(227,200,162,.14),transparent 60%),linear-gradient(145deg,#28231f,#151311) !important; }
.ssk-mark { background:radial-gradient(circle at 50% 35%,rgba(255,118,40,.16),transparent 60%),linear-gradient(145deg,#28201c,#15110f) !important; }
.orvix-mark { background:radial-gradient(circle at 50% 35%,rgba(169,154,255,.16),transparent 60%),linear-gradient(145deg,#211f2b,#111116) !important; }
.craft-mark { background:radial-gradient(circle at 50% 35%,rgba(224,186,126,.14),transparent 60%),linear-gradient(145deg,#292016,#14100d) !important; }
.project-logo-card .project-info { background:linear-gradient(145deg,#111216,#0a0b0d); }

/* Prevent SSK logo overflow */
.ssk-card,.ssk-card .ssk-project-image { min-width:0; max-width:100%; overflow:hidden; }
.ssk-card .ssk-project-image > img { display:block; width:min(88%,540px) !important; max-width:88% !important; height:auto !important; max-height:78% !important; object-fit:contain !important; margin:auto; transform:none; }

@media (max-width:700px) {
 .hero { min-height:0 !important; padding:105px 20px 46px !important; display:block !important; overflow:hidden !important; }
 .hero-content { width:100% !important; max-width:100%; }
 .hero-content h1 { font-size:clamp(48px,13vw,72px) !important; letter-spacing:-2px !important; }
 .hero-content h2 { font-size:clamp(25px,7vw,36px) !important; line-height:1.12; }
 .hero-content p { font-size:14px !important; margin-bottom:24px !important; }
 .stats { gap:0; margin-top:30px !important; }
 .stats > div { padding:0 12px !important; min-width:0; flex:1; }
 .stats b { font-size:23px !important; } .stats span { font-size:10px !important; }
 .hero-visual { position:relative !important; inset:auto !important; transform:none !important; width:100% !important; height:300px !important; margin:22px auto 0 !important; overflow:hidden; }
 .hero-ps-card { width:190px !important; height:190px !important; border-radius:34px !important; }
 .hero-ps-card span { font-size:48px !important; }
 .about-visual { height:auto !important; min-height:0 !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:stretch !important; justify-items:stretch !important; gap:12px !important; padding:24px 0 18px !important; overflow:hidden !important; }
 .about-visual .about-orbit { inset:8% auto auto 50%; width:95vw !important; height:95vw !important; max-height:480px; transform:translateX(-50%) !important; opacity:.4; }
 .about-visual .about-card { grid-column:1 / -1 !important; grid-row:1 !important; width:min(100%,280px) !important; height:300px !important; justify-self:center !important; margin:0 auto 10px !important; transform:none !important; }
 .about-visual .about-logo { width:76px !important; height:76px !important; margin-bottom:18px !important; }
 .about-visual .about-card-title { font-size:46px !important; }
 .about-visual .about-line { margin:17px 0 !important; }
 .about-visual .about-card-subtitle { letter-spacing:5px !important; }
 .about-visual .about-card-tags { font-size:8px !important; letter-spacing:2px !important; }
 .about-visual .about-tool { position:relative !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; min-width:0 !important; max-width:100% !important; min-height:76px; padding:10px !important; margin:0 !important; transform:none !important; animation:none !important; display:flex !important; align-items:center !important; gap:9px !important; z-index:4 !important; }
 .about-visual .about-tool .tool-icon { width:42px !important; height:42px !important; min-width:42px !important; }
 .about-visual .about-tool b { font-size:12px !important; line-height:1.2; }
 .about-visual .about-tool small { font-size:10px !important; line-height:1.3; }
 .projects-grid > .ssk-card,.projects-grid > .project-card { min-width:0 !important; max-width:100% !important; overflow:hidden !important; }
 .projects-grid > .ssk-card > .ssk-project-image { height:235px !important; min-height:235px !important; max-width:100% !important; overflow:hidden !important; }
 .projects-grid > .ssk-card .ssk-project-image > img { width:88% !important; max-width:88% !important; max-height:75% !important; animation:none !important; transform:none !important; }
 .project-logo-gallery { height:300px !important; }
 .logo-gallery-head { font-size:8px !important; letter-spacing:.18em !important; }
 .logo-mini-grid { inset:24% 7% 12% !important; gap:8px !important; }
 .logo-mini b { font-size:27px !important; } .logo-mini span { font-size:6px !important; }
}
@media (max-width:390px) {
 .about-visual { gap:8px !important; }
 .about-visual .about-tool { min-height:70px; padding:8px !important; }
 .about-visual .about-tool .tool-icon { width:36px !important; height:36px !important; min-width:36px !important; }
 .about-visual .about-tool b { font-size:11px !important; } .about-visual .about-tool small { font-size:9px !important; }
 .hero-visual { height:270px !important; }
}