/* U-Meking 2026 gift kit positioning refresh */
:root {
    --umk-ink: #07111f;
    --umk-navy: #0c243d;
    --umk-copper: #f26a21;
    --umk-blue: #0b69d1;
    --umk-electric: #1055ff;
    --umk-red: #e92b23;
    --umk-yellow: #ffc928;
    --umk-cream: #fff7e8;
}

.gg-hero.us-visual-hero {
    background: #07111f;
    height: clamp(430px, 33.854vw, 880px);
    min-height: 430px;
}

.gg-hero.us-visual-hero .gg-hero-slide {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0;
    visibility: hidden;
    transition: none;
    z-index: 0;
}

.gg-hero.us-visual-hero .gg-hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.gg-hero.us-visual-hero .gg-hero-overlay {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.08) 0%, rgba(7, 17, 31, 0.02) 48%, rgba(7, 17, 31, 0) 100%);
}

.gg-hero.us-visual-hero .gg-hero-content {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
}

.gg-hero-click-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
}

.gg-hero.us-visual-hero .gg-hero-controls,
.gg-hero.us-visual-hero .gg-slide-label {
    display: none;
}

.gg-hero.us-visual-hero .gg-hero-nav {
    z-index: 11;
    opacity: 0.78;
}

.gg-hero.us-visual-hero .gg-slide-label {
    background: rgba(7, 17, 31, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.gg-hero.us-visual-hero .gg-progress-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.gg-hero-overlay {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.9) 0%, rgba(7, 17, 31, 0.62) 42%, rgba(7, 17, 31, 0.12) 100%),
        radial-gradient(circle at 72% 30%, rgba(242, 106, 33, 0.22), transparent 34%);
}

.gg-hero-brand {
    text-transform: none;
    letter-spacing: -0.03em;
}

.gg-hero-tagline {
    color: var(--umk-copper);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.gg-hero-subtitle {
    max-width: 780px;
    line-height: 1.08;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.gg-btn-primary,
.gg-category-link,
.gg-solution-link {
    background: linear-gradient(135deg, var(--umk-copper), #ff8a34);
    border-color: transparent;
}

.gg-category-link,
.gg-solution-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
}

.gg-category-link i,
.gg-solution-link i {
    display: inline-grid !important;
    place-items: center;
    height: 1em;
    line-height: 1 !important;
    transform: translateY(-0.03em);
}

.gg-industry-solutions {
    background:
        radial-gradient(circle at 85% 9%, rgba(233, 43, 35, 0.23), transparent 24%),
        radial-gradient(circle at 12% 20%, rgba(16, 85, 255, 0.24), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #102842 54%, #07111f 100%);
    color: #fff;
}

.gg-solutions-header .gg-section-label,
.gg-solutions-header .gg-section-title,
.gg-solutions-header .gg-solutions-intro {
    color: #fff;
}

.gg-solutions-header .gg-section-title,
.gg-category-title,
.gg-about-title,
.gg-section-title {
    letter-spacing: -0.02em;
}

.gg-solution-card {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.24);
}

.gg-solution-visual img {
    object-fit: cover;
    object-position: 72% center;
}

.gg-solution-card:nth-child(3n + 1) .gg-solution-icon {
    background: var(--umk-red);
}

.gg-solution-card:nth-child(3n + 2) .gg-solution-icon {
    background: var(--umk-electric);
}

.gg-solution-card:nth-child(3n) .gg-solution-icon {
    background: var(--umk-copper);
}

.gg-solution-title {
    font-family: "Bebas Neue", "Montserrat", sans-serif;
    font-size: clamp(2.1rem, 2.85vw, 3.25rem);
    letter-spacing: 0.02em;
    line-height: 0.95;
}

.gg-solution-subtitle,
.gg-category-label {
    color: var(--umk-copper);
    font-weight: 800;
}

.gg-solution-desc {
    color: #263241;
    font-size: 1rem;
    line-height: 1.55;
}

.gg-solutions-value {
    background: var(--umk-ink);
    color: #fff;
    border-radius: 28px;
    padding: 30px;
}

.gg-solutions-value h4,
.gg-solutions-value p {
    color: #fff;
}

.gg-featured-categories {
    background:
        linear-gradient(125deg, rgba(7, 17, 31, 0.96) 0%, rgba(7, 17, 31, 0.92) 44%, rgba(16, 85, 255, 0.24) 74%, rgba(242, 106, 33, 0.3) 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 18px),
        #07111f;
    padding-top: 90px;
    padding-bottom: 90px;
}

.gg-category-banner,
.gg-category-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.gg-category-banner .gg-category-content,
.gg-category-card .gg-category-content {
    background: rgba(7, 17, 31, 0.91);
    color: #fff;
    backdrop-filter: blur(8px);
}

.gg-category-banner .gg-category-title,
.gg-category-card .gg-category-title,
.gg-category-banner .gg-category-desc,
.gg-category-card .gg-category-desc {
    color: #fff;
}

.gg-category-banner .gg-category-image img,
.gg-category-card .gg-category-image img {
    object-fit: cover;
    object-position: 68% center;
}

.gg-case-banner > img {
    object-fit: cover;
    object-position: center;
}

/* Image sizing reset for the gift-kit refresh.
   The page mixes 1920x650 banners, 1536x1024 photos and 1200px hot-zone graphics,
   so each image family needs its own ratio instead of one fixed crop rule. */
.gg-solution-visual {
    aspect-ratio: 1920 / 650;
    height: auto !important;
    background: #07111f;
}

.gg-solution-visual img,
.gg-category-image img,
.gg-about-image img,
.gg-blog-image img,
.gg-contact-image img {
    width: 100%;
}

.gg-solution-visual img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.gg-category-banner {
    min-height: 0 !important;
}

.gg-category-banner .gg-category-image,
.gg-category-card .gg-category-image {
    overflow: hidden;
    background: #07111f;
}

.gg-category-banner .gg-category-image {
    aspect-ratio: 16 / 9;
}

.gg-category-card .gg-category-image {
    aspect-ratio: 3 / 2;
}

.gg-category-banner .gg-category-image img,
.gg-category-card .gg-category-image img {
    height: 100%;
    object-fit: cover;
    object-position: 78% center;
}

.gg-category-image img[src*="us-hero-"] {
    object-position: 100% center;
}

.gg-category-banner.reverse .gg-category-image img,
.gg-category-card:has(img[src*="site-"]) .gg-category-image img {
    object-position: center center;
}

.gg-solutions-grid .gg-solution-visual {
    aspect-ratio: 1920 / 650 !important;
}


.gg-case-banner {
    height: auto !important;
}

.gg-case-banner > img {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain;
}

#case-fashion > img {
    aspect-ratio: 1200 / 520;
}

#case-sports > img,
#case-corporate > img {
    aspect-ratio: 1200 / 560;
}

#case-streetwear > img {
    aspect-ratio: 1200 / 720;
}

.gg-about-image,
.gg-blog-image {
    height: auto !important;
    background: #07111f;
}

.gg-about-image img,
.gg-blog-image img {
    display: block;
    height: auto !important;
    object-fit: contain;
}

.gg-contact-image img {
    object-position: center center;
}

.gg-category-trio .gg-category-card:nth-child(1) .gg-category-content {
    border-top: 4px solid var(--umk-yellow);
}

.gg-category-trio .gg-category-card:nth-child(2) .gg-category-content {
    border-top: 4px solid var(--umk-copper);
}

.gg-category-trio .gg-category-card:nth-child(3) .gg-category-content {
    border-top: 4px solid var(--umk-red);
}

.gg-cases-section {
    background:
        radial-gradient(circle at 16% 10%, rgba(242, 106, 33, 0.3), transparent 28%),
        radial-gradient(circle at 90% 32%, rgba(16, 85, 255, 0.24), transparent 26%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 19px),
        linear-gradient(135deg, #07111f 0%, #0b2038 48%, #07111f 100%);
    color: #fff;
}

.gg-cases-header .gg-section-label,
.gg-cases-header .gg-section-title,
.gg-cases-header .gg-cases-intro {
    color: #fff;
}

.gg-cases-header .gg-section-title {
    font-family: "Bebas Neue", "Montserrat", sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    letter-spacing: 0.01em;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.gg-case-banner {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    background: #07111f;
    position: relative;
}

.gg-click-hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    z-index: 4;
    display: block;
    cursor: pointer;
    background: transparent;
    outline: 0;
}

.gg-case-banner > img {
    object-fit: contain;
    object-position: center;
    background: #07111f;
}

.gg-case-content {
    display: none;
}

.gg-case-title {
    font-family: "Bebas Neue", "Montserrat", sans-serif;
    letter-spacing: 0.02em;
}

.gg-about-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 106, 33, 0.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
}

.gg-about-content p,
.gg-step-desc,
.gg-blog-excerpt {
    line-height: 1.6;
}

.gg-process-section {
    background: var(--umk-ink);
}

.gg-process-section .gg-section-label,
.gg-process-section .gg-section-title,
.gg-process-section .gg-step-title,
.gg-process-section .gg-step-desc {
    color: #fff;
}

.gg-process-step {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.gg-step-number {
    background: var(--umk-copper);
    color: #fff;
}

.gg-blog-section {
    background: #fffaf1;
}
.gg-case-seo-note {
    max-width: 920px;
    margin: 34px auto 0;
    color: #536170;
    font-size: 0.98rem;
    line-height: 1.75;
    text-align: center;
    letter-spacing: 0.01em;
}

.gg-contact-content {
    background: linear-gradient(160deg, rgba(7, 17, 31, 0.97), rgba(12, 36, 61, 0.96));
}

#about .gg-about-content > p:not(.gg-about-current) {
    display: none;
}

#about .gg-about-current {
    display: block;
}


/* 2026-08-10 visual QA overrides: keep homepage graphics crisp and consistently framed. */
.gg-fade-in,
.gg-fade-in-left,
.gg-fade-in-right,
.gg-solution-card,
.gg-category-card,
.gg-category-banner,
.gg-category-duo,
.gg-category-trio,
.gg-case-banner,
.gg-process-step,
.gg-value-item {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.gg-hero.us-visual-hero .gg-hero-slide {
    background-size: contain !important;
    background-position: center center !important;
}

.gg-solutions-grid .gg-solution-visual {
    aspect-ratio: 1920 / 650 !important;
    background: #07111f;
}

.gg-category-duo .gg-category-card,
.gg-category-trio .gg-category-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.gg-category-duo .gg-category-image,
.gg-category-trio .gg-category-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1920 / 650 !important;
    flex: 0 0 auto !important;
    background: #07111f;
    overflow: hidden !important;
}

.gg-category-duo .gg-category-content,
.gg-category-trio .gg-category-content {
    position: relative !important;
    z-index: 1 !important;
    inset: auto !important;
    margin-top: 0 !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

.gg-solutions-grid .gg-solution-visual img,
.gg-category-duo .gg-category-image img,
.gg-category-trio .gg-category-image img,
.gg-category-banner .gg-category-image img,
.gg-category-card .gg-category-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
}

.gg-solutions-grid .gg-solution-visual img[src*="us-hero-"],
.gg-category-duo .gg-category-image img[src*="us-hero-"],
.gg-category-trio .gg-category-image img[src*="us-hero-"] {
    object-fit: contain !important;
    object-position: center center !important;
    background: #07111f;
}

.gg-solutions-grid .gg-solution-visual img[src*="site-"] {
    object-fit: cover !important;
    object-position: center 34% !important;
    background: #07111f;
}

.gg-case-banner > img {
    image-rendering: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #07111f;
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .gg-container,
    .gg-solutions-grid,
    .gg-category-banner,
    .gg-category-card,
    .gg-category-duo,
    .gg-category-trio,
    .gg-category-image,
    .gg-case-banner {
        box-sizing: border-box;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .gg-category-image img,
    .gg-case-banner > img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .gg-hero.us-visual-hero .gg-hero-slide {
        background-size: contain !important;
        background-position: center center !important;
    }

    .gg-solutions-grid .gg-solution-visual img[src*="us-hero-"],
    .gg-category-banner .gg-category-image img[src*="us-hero-"],
    .gg-category-card .gg-category-image img[src*="us-hero-"],
    .gg-category-duo .gg-category-image img[src*="us-hero-"],
    .gg-category-trio .gg-category-image img[src*="us-hero-"],
    .gg-case-banner > img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #07111f;
    }

    .gg-solutions-grid .gg-solution-visual img[src*="site-"] {
        object-fit: cover !important;
        object-position: center 34% !important;
        background: #07111f;
    }
}
/* End 2026-08-10 visual QA overrides. */

/* 2026-08-10 About and FAQ content refresh. */
.gg-about-detail {
    max-width: 1180px;
    margin: 54px auto 0;
    padding: 34px;
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(420px, 1.45fr);
    gap: 28px;
    background: linear-gradient(135deg, #07111f 0%, #0d2740 62%, #f26a21 180%);
    color: #fff;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(7, 17, 31, 0.16);
}

.gg-about-detail-copy h3 {
    margin: 10px 0 16px;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
}

.gg-about-detail-copy p,
.gg-about-support-grid span {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
}

.gg-about-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gg-about-support-grid div {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.gg-about-support-grid strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 0.98rem;
}

.gg-about-support-grid span {
    display: block;
    font-size: 0.9rem;
}

.gg-faq-section {
    padding: 96px 5vw;
    background:
        radial-gradient(circle at 8% 10%, rgba(242, 106, 33, 0.18), transparent 30%),
        linear-gradient(180deg, #07111f 0%, #0d2236 100%);
    color: #fff;
}

.gg-faq-header {
    max-width: 1180px;
    margin: 0 auto 34px;
}

.gg-faq-header .gg-section-title {
    color: #fff;
}

.gg-faq-intro {
    max-width: 760px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
}

.gg-faq-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.gg-faq-item {
    padding: 22px 24px;
    min-height: 176px;
    background: rgba(255, 255, 255, 0.96);
    color: #07111f;
    border: 1px solid rgba(242, 106, 33, 0.22);
    border-left: 5px solid #f26a21;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.gg-faq-item h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #07111f;
}

.gg-faq-item p {
    margin: 0;
    color: #394553;
    line-height: 1.62;
    font-size: 0.94rem;
}

@media (max-width: 900px) {
    .gg-about-detail,
    .gg-faq-grid {
        grid-template-columns: 1fr;
    }

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

    .gg-faq-section {
        padding: 72px 22px;
    }
}
/* End 2026-08-10 About and FAQ content refresh. */