:root {
    --color-main: #FFE600;
    --color-yellow: #FFE600;
    --color-sub: #00E0FF;
    --color-blue: #00E0FF;
    --color-white: #FFFFFF;
    --color-dark: #333333;
    --color-black: #000000;
    --color-bg: #F9F9F9;
    --color-bg-dark: #121212;

    /* Service Card Colors */
    --color-pink: #FF9A9E;
    --color-purple: #a18cd1;
    --color-green: #84fab0;
    --color-orange: #fccb90;
    --color-gray-text: #444;

    --glass-bg: rgba(20, 20, 20, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    --font-jp: 'Zen Maru Gothic', sans-serif;
    --font-en: 'Outfit', sans-serif;
}

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

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

body {
    font-family: var(--font-jp);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
    width: 100%;
    position: relative;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}

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

/* Header */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20000;
    background: transparent;
    transition: background 0.3s, padding 0.3s, box-shadow 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    box-sizing: border-box;
}

.site-header.scrolled {
    background: rgba(255, 254, 235, 0.85);
    /* White-ish yellow with stronger transparency */
    backdrop-filter: blur(10px);
    padding: 1rem 3%;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    width: auto;
    filter: invert(1) grayscale(1) brightness(0.3);
    transition: filter 0.3s;
}

/* Navigation Menu - Hamburger Style */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    transition-delay: 0.2s;
    /* Delay for content fade in */
    flex-direction: column;
    z-index: 19000;
    /* Above Chat (9000) but below Header/Hamburger */
    overflow-y: auto;
    padding: 80px 0 40px;
    box-sizing: border-box;
}

.site-nav.active {
    opacity: 1;
    pointer-events: auto;
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
    text-align: center;
}

.site-nav.active .nav-list {
    opacity: 1;
}

.nav-item {
    margin: 0;
    /* Removed margin, using gap in flex container */
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

/* Staggered animation handled by JS or CSS delay */
.site-nav.active .nav-item {
    opacity: 1;
    transform: translateY(0);
}

.nav-item a {
    text-decoration: none;
    color: #333;
    /* Changed from white to dark for white background */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: color 0.3s;
    line-height: 1.4;
}

.nav-item a:hover {
    color: var(--color-yellow);
}

.nav-item .en {
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    color: #333;
    /* Explicitly dark */
}

.nav-item .jp {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    opacity: 0.8;
    color: #888;
}

.nav-item:hover .en {
    color: var(--color-yellow);
}

.nav-item:hover {
    transform: scale(1.1);
}

.nav-footer-links {
    margin-top: 2rem;
    /* Reduced from 3rem */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
    /* Staggered after list */
}

.site-nav.active .nav-footer-links {
    opacity: 1;
    transform: translateY(0);
}

.nav-footer-links a {
    color: #666;
    /* Darker gray for visibility */
    font-size: 0.75rem;
    text-decoration: none;
    font-family: var(--font-en);
    letter-spacing: 1px;
    transition: color 0.3s;
}

.nav-footer-links a:hover {
    color: var(--color-yellow);
}

/* Header Actions & Hamburger Layout */
.header-actions {
    display: flex;
    gap: 1rem;
    margin-left: auto;
    align-items: center;
    position: relative;
    z-index: 20001;
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    cursor: pointer;
    z-index: 21000;
    /* Higher than nav (19000) */
    margin-left: 1.5rem;
    overflow: hidden;
    /* Contain the spans */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    /* Dark color for lines */
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.btn-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: var(--font-jp);
    white-space: nowrap;
}

@media (min-width: 768px) {

    /* Hamburger menu on all screen sizes - keep navigation hidden */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
        transition-delay: 0.2s;
        flex-direction: column;
        z-index: 19000;
    }

    .site-nav.active {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-list {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .nav-item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s, transform 0.5s;
        text-align: center;
    }

    .site-nav.active .nav-item {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-item:hover {
        transform: scale(1.1);
    }

    .nav-item a {
        align-items: center;
    }

    .nav-item .en {
        font-size: 2.5rem;
        letter-spacing: 2px;
        font-weight: 900;
    }

    .nav-item .jp {
        display: block;
        font-size: 0.9rem;
        margin-top: 0.5rem;
        opacity: 0.8;
        color: #888;
    }

    .nav-footer-links {
        display: flex;
        margin-top: 2rem;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
    }

    .site-nav.active .nav-footer-links {
        opacity: 1;
        transform: translateY(0);
    }

    .hamburger-menu {
        display: flex;
        /* Show hamburger on all screens */
    }
}

.btn-gray {
    background-color: #333;
    color: white;
}

.btn-yellow {
    background-color: var(--color-yellow);
    color: var(--color-text);
}

.arrow {
    font-family: sans-serif;
    font-weight: normal;
}

/* =================================== */
/* 1. FIRST VIEW (Hero) */
/* =================================== */
html,
body {
    margin: 0;
    padding: 0;
}

/* =================================== */
/* 1. FIRST VIEW (Hero) */
/* =================================== */
.hero {
    height: 100vh;
    /* Fallback for older browsers */
    height: 100dvh;
    /* Dynamic viewport height for modern browsers */
    min-height: 600px;
    /* Minimum height for very small screens */
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 10%;
    overflow: hidden;
    /* Adjusted gradient to end in site bg color to avoid white band look */
    background: radial-gradient(circle at 80% 20%, rgba(255, 230, 0, 0.05) 0%, rgba(0, 224, 255, 0.05) 50%, #f9f9f9 80%);
}

#network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-content {
    flex: 1;
    z-index: 10;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title {
    font-family: var(--font-en);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
}

.title-line {
    display: block;
    height: 90px;
    background: none;
    -webkit-text-fill-color: initial;
    color: inherit;
    animation: none;
    opacity: 1;
}

/* Animation States */
.need-word,
.service-promise,
.btn-view-more {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Trigger Class */
.service-footer.visible .need-word,
.service-footer.visible .service-promise,
.service-footer.visible .btn-view-more {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.service-footer.visible .need-word:nth-child(1) {
    transition-delay: 0.1s;
}

.service-footer.visible .need-word:nth-child(2) {
    transition-delay: 0.3s;
}

.service-footer.visible .need-word:nth-child(3) {
    transition-delay: 0.5s;
}

.service-footer.visible .need-word:nth-child(4) {
    transition-delay: 0.7s;
}

.service-footer.visible .need-word:nth-child(5) {
    transition-delay: 0.9s;
}

.service-footer.visible .service-promise {
    transition-delay: 1.5s;
    /* After words */
    transition-duration: 1.5s;
    /* Slower fade ("quietly") */
}

/* Ensure buttons start hidden and animate last */
.service-footer .service-action-buttons {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.service-footer.visible .service-action-buttons {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.2s;
    /* Last */
}

/* SVG Text Animations */
.text-svg {
    overflow: visible;
}

.text-draw {
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 60px;
    fill: transparent;
    stroke: #000;
    stroke-width: 1.5px;
}

.text-draw tspan {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    opacity: 0;
    animation: drawLetter 0.5s ease-out forwards;
}

/* Stagger Delays Calculation */
/* Line 1: PROFIT & */
.stroke-title-1 tspan:nth-child(1) {
    animation-delay: 0.0s;
}

.stroke-title-1 tspan:nth-child(2) {
    animation-delay: 0.1s;
}

.stroke-title-1 tspan:nth-child(3) {
    animation-delay: 0.2s;
}

.stroke-title-1 tspan:nth-child(4) {
    animation-delay: 0.3s;
}

.stroke-title-1 tspan:nth-child(5) {
    animation-delay: 0.4s;
}

.stroke-title-1 tspan:nth-child(6) {
    animation-delay: 0.5s;
}

.stroke-title-1 tspan:nth-child(7) {
    animation-delay: 0.6s;
}

.stroke-title-1 tspan:nth-child(8) {
    animation-delay: 0.7s;
}

/* Line 2: CONNECTION */
.stroke-title-2 tspan:nth-child(1) {
    animation-delay: 1.0s;
}

.stroke-title-2 tspan:nth-child(2) {
    animation-delay: 1.1s;
}

.stroke-title-2 tspan:nth-child(3) {
    animation-delay: 1.2s;
}

.stroke-title-2 tspan:nth-child(4) {
    animation-delay: 1.3s;
}

.stroke-title-2 tspan:nth-child(5) {
    animation-delay: 1.4s;
}

.stroke-title-2 tspan:nth-child(6) {
    animation-delay: 1.5s;
}

.stroke-title-2 tspan:nth-child(7) {
    animation-delay: 1.6s;
}

.stroke-title-2 tspan:nth-child(8) {
    animation-delay: 1.7s;
}

.stroke-title-2 tspan:nth-child(9) {
    animation-delay: 1.8s;
}

.stroke-title-2 tspan:nth-child(10) {
    animation-delay: 1.9s;
}

/* Subtitle Specifics */
.subtitle-svg .text-draw {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 20px;
    stroke-width: 0.8px;
}

.subtitle-svg tspan:nth-child(1) {
    animation-delay: 2.20s;
}

.subtitle-svg tspan:nth-child(2) {
    animation-delay: 2.25s;
}

.subtitle-svg tspan:nth-child(3) {
    animation-delay: 2.30s;
}

.subtitle-svg tspan:nth-child(4) {
    animation-delay: 2.35s;
}

.subtitle-svg tspan:nth-child(5) {
    animation-delay: 2.40s;
}

.subtitle-svg tspan:nth-child(6) {
    animation-delay: 2.45s;
}

.subtitle-svg tspan:nth-child(7) {
    animation-delay: 2.50s;
}

.subtitle-svg tspan:nth-child(8) {
    animation-delay: 2.55s;
}

.subtitle-svg tspan:nth-child(9) {
    animation-delay: 2.60s;
}

.subtitle-svg tspan:nth-child(10) {
    animation-delay: 2.65s;
}

.subtitle-svg tspan:nth-child(11) {
    animation-delay: 2.70s;
}

.subtitle-svg tspan:nth-child(12) {
    animation-delay: 2.75s;
}

.subtitle-svg tspan:nth-child(13) {
    animation-delay: 2.80s;
}

.subtitle-svg tspan:nth-child(14) {
    animation-delay: 2.85s;
}

.subtitle-svg tspan:nth-child(15) {
    animation-delay: 2.90s;
}

.subtitle-svg tspan:nth-child(16) {
    animation-delay: 2.95s;
}

.subtitle-svg tspan:nth-child(17) {
    animation-delay: 3.00s;
}

.subtitle-svg tspan:nth-child(18) {
    animation-delay: 3.05s;
}

.subtitle-svg tspan:nth-child(19) {
    animation-delay: 3.10s;
}

@keyframes fadeInFill {
    to {
        fill: var(--color-text);
        stroke: var(--color-text);
    }
}

.stroke-title-1 {
    animation: fadeInFill 0.8s ease-out 1.3s forwards;
}

.stroke-title-2 {
    animation: fadeInFill 0.8s ease-out 2.5s forwards;
}

.stroke-subtitle {
    animation: fadeInFill 0.8s ease-out 3.7s forwards;
}

@keyframes drawLetter {
    0% {
        stroke-dashoffset: 300;
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.hero-subtitle-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    padding-left: 0;
    margin-left: 0;
    height: 40px;
}

.hero-subtitle {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: clamp(1rem, 1.5vw, 1.8rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

.accent-bar {
    display: block;
    width: 10px;
    height: 2.2rem;
    background-color: var(--color-yellow);
    margin-right: 1.5rem;
    border-radius: 4px;
    transform-origin: top;
    transform: scaleY(0);
    animation: growLine 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.8s;
}

.btn-main {
    display: inline-block;
    background-color: var(--color-yellow);
    color: var(--color-text);
    padding: 1rem 3.5rem;
    font-weight: 900;
    border-radius: 50px;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(255, 230, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 230, 0, 0.5);
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes growLine {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hero Slider (Footer) */
.hero-slider {
    position: absolute;
    bottom: 30px;
    /* Consistent margin from viewport bottom */
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 20;
}

.slider-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: scroll 30s linear infinite;
}

.slide-card {
    width: 320px;
    height: 180px;
    flex-shrink: 0;
    background-color: #222;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    /* For link cards */
}

.slide-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: -1;
}

.slide-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.5);
}

.card-text {
    font-size: 0.85rem;
    color: #fff;
    line-height: 1.5;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .site-nav {
        display: none;
    }

    .hero {
        padding: 0 5%;
        justify-content: center;
    }

    .hero-title {
        font-size: 13vw;
        line-height: 1.2;
    }

    .accent-bar {
        height: 1.8rem;
        width: 8px;
        margin-right: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

/* =================================== */
/* 2. OUR STRENGTH */
/* =================================== */
.section {
    padding: 4rem 5%;
    position: relative;
    background-color: #fff;
}

.strength-section {
    background-color: #f9f9f9;
    /* Layer 1: Fade out from pale yellow to transparent to reveal the fixed background below */
    /* Layer 2: The exact same fixed background definition as .service-section */
    background-image:
        linear-gradient(to bottom, #fffde7 0%, rgba(255, 253, 231, 0) 100%),
        radial-gradient(at 0% 0%, rgba(255, 230, 0, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 224, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 230, 0, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(0, 224, 255, 0.1) 0px, transparent 50%);
    background-attachment: scroll, fixed, fixed, fixed, fixed;
    position: relative;
    height: auto;
    /* Changed from 200vh */
    padding: 4rem 0 1.5rem 0;
}

.sticky-content {
    position: relative;
    /* Changed from sticky */
    top: 0;
    height: auto;
    /* Changed from 100vh */
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    background: transparent;
    padding-top: 60px;
    /* Reduced spacing */
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-family: var(--font-en);
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
    font-style: italic;
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #888;
    position: relative;
    display: inline-block;
}

.strength-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.num-item {
    text-align: center;
    min-width: 280px;
}

.num-label {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.num-value {
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 4rem;
    line-height: 1;
    color: var(--color-text);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.num-value .count-up {
    display: inline-block;
    min-width: 180px;
    text-align: right;
}

.num-value .unit {
    font-size: 2rem;
    color: var(--color-yellow);
    margin-left: 0.2rem;
    text-shadow: none;
    -webkit-text-stroke: 0;
}



.num-divider {
    width: 2px;
    height: 80px;
    background-color: #eee;
    transform: rotate(15deg);
}

.strength-grid-wrapper {
    width: 100%;
    overflow: hidden;
    /* Or visible if we want partial cards shown */
    padding: 1rem 0;
    display: flex;
    justify-content: center;
}

.strength-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile Default: 1 column */
    gap: 20px;
    width: 100%;
    /* Fix max-content overflow */
    padding: 0 15px;
    /* Add breathing room */
    box-sizing: border-box;
    margin: 0 auto;
    perspective: 1000px;
    justify-items: center;
    /* Center cards */
}

.strength-row {
    display: contents;
    /* Ignore row wrappers, let grid control layout */
}

.strength-card {
    position: relative;
    height: 240px;
    flex-shrink: 0;
    width: 320px;
    /* 3D Context */
    perspective: 1000px;
    background: transparent;
    /* Background moved to inner faces */
    border: none;
    border-radius: 20px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.1s;
    /* JS driven */
    transform-style: preserve-3d;
    border-radius: 20px;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    /* overflow: hidden; Removed to fix backface-visibility mirroring bug */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-front {
    background-color: #fff;
    z-index: 2;
    transform: rotateY(0deg);
}

.card-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Ensure readability of text over images */
.card-info {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    /* Slight dim for readability */
    transition: background 0.3s;
}

.strength-card:hover .card-info {
    background: rgba(0, 0, 0, 0.4);
    /* Darker on hover */
}

.card-cat-en {
    font-family: var(--font-en);
    font-weight: 800;
    /* Extra bold */
    font-size: 1.4rem;
    font-style: italic;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.2rem;
}

.card-cat-jp {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.card-back {
    background-color: #eee;
    color: #fff;
    /* White logo on colorful back */
    transform: rotateY(180deg);
    font-family: var(--font-en);
    font-weight: 800;
    font-size: 1.5rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;
}

/* Mobile: Vertical flip */
@media (max-width: 767px) {
    .card-front {
        transform: rotateX(0deg);
    }

    .card-back {
        transform: rotateX(180deg);
    }
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: transform 0.4s ease;
}

.gradient-1 {
    background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
}

.gradient-2 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.gradient-3 {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.gradient-4 {
    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.card-info {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-cat-en {
    font-family: var(--font-en);
    font-weight: 800;
    font-style: italic;
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
    line-height: 1;
}

.card-cat-jp {
    font-size: 0.9rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .strength-numbers {
        flex-direction: column;
        gap: 2rem;
    }

    .num-divider {
        width: 80px;
        height: 2px;
        transform: none;
    }

    .strength-card {
        width: 250px;
        height: 220px;
    }
}

/* =================================== */
/* 3. OUR SERVICE */
/* =================================== */
.service-section {
    background-color: #f9f9f9;
    background-image:
        radial-gradient(at 0% 0%, rgba(255, 230, 0, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 224, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 120, 120, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 150, 150, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
}

.service-slider-wrapper {
    width: 100%;
    overflow: hidden;
    /* Prevent blowout from slider */
    position: relative;
}

/* Hide slider arrows on desktop - only show on mobile */
.service-slider-arrow {
    display: none;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.service-card {
    background-color: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--color-yellow);
    box-shadow: 0 15px 40px rgba(255, 230, 0, 0.2);
}

.card-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 1.4rem;
    font-family: var(--font-en);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-body {
    padding: 1.2rem;
    color: #fff;
    flex-grow: 1;
}

.service-card-title {
    font-family: var(--font-en);
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 0.2rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.service-card-sub {
    font-size: 0.8rem;
    color: var(--color-yellow);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.service-card-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #ddd;
}

@media (max-width: 768px) {
    .service-card-title {
        font-size: 1.3rem;
    }

    /* Grid fallback */
    .service-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =================================== */
/* 4. ABOUT US */
/* =================================== */
.about-section {
    background-color: #FFF5F5;
    /* Pale Light Red */
    padding-bottom: 3rem;
    position: relative;
    background-image:
        radial-gradient(at 0% 0%, rgba(255, 200, 200, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 180, 180, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 220, 220, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 210, 210, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.about-text {
    flex: 1;
}

.about-main-title {
    font-family: var(--font-en);
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    font-style: italic;
}

.text-yellow {
    color: var(--color-yellow);
}

/* Yellow to Orange Gradient Text */
.text-gradient-yellow-orange {
    background: linear-gradient(135deg, #FFE600 0%, #FF9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-right: 0.15em;
    display: inline-block;
}

.about-sub-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: #333;
    border-bottom: 4px solid var(--color-yellow);
    display: inline-block;
    padding-bottom: 0.5rem;
}

.about-desc p {
    font-size: 1rem;
    line-height: 2;
    color: #666;
    font-weight: 500;
}

.about-visual {
    flex: 1.2;
    display: flex;
    justify-content: center;
}

.about-image {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }

    .about-main-title {
        font-size: 3rem;
    }

    .about-sub-title {
        font-size: 1rem;
    }

    .about-visual {
        width: 100%;
    }
}

/* About Slider */
.about-slider-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    margin-top: 4rem;
    padding-bottom: 0.625rem;
    /* Reduced to ~10px */
    position: relative;
    z-index: 1;
}

.about-slider {
    display: inline-flex;
    white-space: nowrap;
    animation: scroll-left 100s linear infinite;
}

.slider-text {
    font-family: var(--font-en);
    font-size: 5rem;
    /* Larger size as requested */
    font-weight: 600;
    /* Bolder (was 300, now 600) */
    font-style: italic;
    /* Italic like footer */
    letter-spacing: 0.05em;
    margin-right: 1.5rem;
    /* Tighter spacing */

    /* Gradient Color */
    background: linear-gradient(135deg, #ffd900 0%, #ff9900 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* =================================== */
/* 5. OUR BUSINESS */
/* =================================== */
.business-section {
    padding: 6rem 0;
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.business-content {
    margin-top: 3rem;
    padding: 0 2%;
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.business-card {
    position: relative;
    background-color: #333;
    /* Placeholder for image */
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    /* Slightly smaller radius for compact look */
    overflow: hidden;
    /* Compact: Half height */
    aspect-ratio: 2 / 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Main Cards Strategy: Span 2 cols */
.business-card-main {
    grid-column: span 2;
    aspect-ratio: 4 / 1;
    /* Very wide and short */
}

/* Gradient Overlay */
.business-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

.business-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.business-title {
    position: absolute;
    bottom: 1.2rem;
    left: 1.2rem;
    width: calc(100% - 2.4rem);
    color: #fff;
    font-size: 0.9rem;
    /* Smaller font */
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-family: var(--font-jp);
    text-align: left;
    z-index: 2;
    white-space: nowrap;
    /* No line breaks */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder backgrounds for visualization */
.business-card:nth-child(odd) {
    background-color: #4a4a4a;
}

.business-card:nth-child(even) {
    background-color: #3d3d3d;
}

@media (max-width: 900px) {
    .business-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .business-card-main {
        grid-column: span 2;
        /* Main cards still span full width of 2-col grid? Or maybe just 1? usually full width looks better */
    }
}

@media (max-width: 600px) {
    .business-grid {
        grid-template-columns: 1fr;
    }

    .business-card-main {
        grid-column: span 1;
        aspect-ratio: 16/9;
    }

    .business-card {
        aspect-ratio: 16/9;
        /* More landscape on mobile for text space */
    }
}



.row-2 {
    grid-template-columns: 1fr 1fr;
}

.row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.biz-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/9;
    display: flex;
    align-items: flex-end;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.row-3 .biz-card {
    aspect-ratio: 4/3;
}

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

.biz-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: 1;
}

.biz-card:hover .biz-bg {
    transform: scale(1.05);
}

/* Business Card Backgrounds */
.biz-bg-liver {
    background-image: url('https://placehold.co/800x600/333/666?text=Liver+Business');
}

.biz-bg-event {
    background-image: url('https://placehold.co/800x600/444/777?text=Event+Business');
}

.biz-bg-marketing {
    background-image: url('https://placehold.co/600x600/555/888?text=Marketing');
}

.biz-bg-idol {
    background-image: url('https://placehold.co/600x600/666/999?text=Idol');
}

.biz-bg-fc {
    background-image: url('https://placehold.co/600x600/777/aaa?text=FC+Support');
}

.biz-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 2;
}

.biz-content {
    position: relative;
    z-index: 3;
    padding: 2rem;
    width: 100%;
}

.biz-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    font-family: var(--font-jp);
}

.biz-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
    font-feature-settings: "palt";
}

@media (max-width: 768px) {

    .row-2,
    .row-3 {
        grid-template-columns: 1fr;
    }

    .biz-card,
    .row-3 .biz-card {
        aspect-ratio: 16/9;
    }

    .biz-title {
        font-size: 1.5rem;
    }
}

/* =================================== */
/* 6. CONTACT・CAREER */
/* =================================== */
.action-section {
    background: linear-gradient(135deg, #FFE600 0%, #FF9900 100%);
    padding: 6rem 0;
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.action-card {
    background: #fff;
    border-radius: 20px;
    padding: 3.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

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

.action-label {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.action-title {
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    /* padding-right removed */
}

.action-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 3rem;
    flex-grow: 1;
}

.btn-action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #121220;
    color: #fff;
    font-weight: 700;
    padding: 1.2rem;
    border-radius: 50px;
    transition: opacity 0.3s, transform 0.3s;
    font-size: 1rem;
    gap: 1rem;
}

.btn-action:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .action-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .action-card {
        padding: 2.5rem;
    }
}

/* =================================== */
/* 7. FOOTER */
/* =================================== */
.site-footer {
    background-color: #000;
    color: #fff;
    padding: 5rem 0 2rem;
    text-align: center;
}

.footer-logo-wrapper {
    margin-bottom: 1.5rem;
}

.footer-logo {
    width: 160px;
    height: auto;
    /* filter: invert(1); Removed as we now use a white logo */
}

.company-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.company-address {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 3rem;
    font-feature-settings: "palt";
}

/* Mobile address line breaks */
.company-address .addr-zip,
.company-address .addr-city,
.company-address .addr-building {
    display: inline;
}

.company-address .addr-zip::after,
.company-address .addr-city::after {
    content: ' ';
}

@media (max-width: 768px) {

    .company-address .addr-zip,
    .company-address .addr-city,
    .company-address .addr-building {
        display: block;
    }

    .company-address .addr-zip::after,
    .company-address .addr-city::after {
        content: '';
    }
}

.footer-mission {
    margin-bottom: 4rem;
}

.mission-en {
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: #ccc;
}

.mission-jp {
    font-size: 0.85rem;
    opacity: 0.6;
    letter-spacing: 0.1em;
}

.copyright {
    font-size: 0.7rem;
    opacity: 0.4;
    letter-spacing: 0.05em;
    font-family: var(--font-en);
}

/* =================================== */
/* Service Footer (Missing styles added) */
/* =================================== */
.service-footer {
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem;
}

.service-keywords {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.05em;
    color: #444;
    margin-bottom: 2.5rem;
    /* Prevent awkward mid-word breaks */
    word-break: keep-all;
    overflow-wrap: break-word;
}

.service-needs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.service-needs {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    /* Ensure text stays on one line if possible, or breaks cleanly */
    white-space: nowrap;
}

/* On mobile, allow wrapping if needed but keep it clean */
@media (max-width: 768px) {
    .service-needs {
        white-space: normal;
        padding: 0;
        border-radius: 0;
        line-height: 1.6;
        width: fit-content;
        max-width: 100%;
    }
}

.service-promise {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 3rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #111;
}

/* Ensure the button is styled if not already */
.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-yellow);
    color: #111;
    font-weight: 900;
    padding: 1rem 4rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 0 #d4be00;
}

.service-action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
}

/* Service Consult Button */
.btn-service-consult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #FFE600 0%, #FF9500 100%);
    color: #111;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 1rem 3rem;
    min-width: 200px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 230, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-service-consult::after {
    content: '→';
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-service-consult:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 149, 0, 0.5);
}

.btn-service-consult:hover::after {
    transform: translateX(5px);
}

.btn-service-consult:active {
    transform: translateY(-1px) scale(1);
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-yellow);
    color: #111;
    font-weight: 900;
    padding: 1rem 3rem;
    /* Adjusted padding */
    width: auto;
    min-width: 200px;
    /* Ensure consistent width */
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 0 #d4be00;
}

.btn-view-more:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #d4be00;
}

/* Specific style to make Contact Us button distinct if needed, 
   but user didn't specify, so keeping same for now or maybe making it white?
   Let's keep them same for consistency unless requested. */

@media (max-width: 768px) {
    .service-action-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .btn-view-more {
        width: 80%;
        max-width: 300px;
    }
}

/* =================================== */
/* Chat Widget */
/* =================================== */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 340px;
    height: 650px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9000;
    /* Below Nav (19000) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smooth resize */
}

/* Minimized State (Yellow Circle Button) */
.chat-widget.minimized {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, #FFE600 0%, #FFD500 100%);
    /* Yellow Gradient */
    box-shadow: 0 4px 12px rgba(255, 230, 0, 0.35);
    /* Smaller shadow for less intrusive look */
    transform: none;
    align-items: center;
    justify-content: center;
}

/* Hide content when minimized */
.chat-widget.minimized .chat-header,
.chat-widget.minimized .chat-body,
.chat-widget.minimized .chat-footer {
    display: none;
}

/* Toggle Icon */
.chat-toggle-icon {
    display: none;
    /* Hidden by default (when open) */
    color: #333;
    animation: fadeIn 0.3s ease;
}

.chat-widget.minimized .chat-toggle-icon {
    display: flex;
    /* Show when minimized */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.chat-header {
    background: linear-gradient(135deg, #FFE600 0%, #FFD500 100%);
    /* Brand Yellow Gradient */
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    /* Dark text for better contrast on yellow */
}

.chat-assistant-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures round fit */
}

.chat-title-wrapper {
    display: flex;
    flex-direction: column;
}

.chat-name {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: #333;
    /* Dark text */
}

.chat-role {
    font-size: 0.75rem;
    opacity: 0.8;
}

.chat-minimize {
    background: none;
    border: none;
    color: #333;
    /* Dark icon */
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.chat-minimize:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.chat-body {
    flex: 1;
    background-color: #f0f4f9;
    /* Light blue-ish gray background like reference */
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-message {
    padding: 1rem;
    border-radius: 18px;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 90%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-message.assistant {
    background-color: #fff;
    color: #333;
    border-top-left-radius: 4px;
    align-self: flex-start;
}

.chat-options {
    display: flex;
    gap: 10px;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.chat-option-btn {
    background-color: #fff;
    border: 1px solid #FFE600;
    /* Yellow border */
    color: #333;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(255, 230, 0, 0.2);
    /* Yellow shadow */
}

.chat-option-btn:hover {
    background-color: #fffde7;
    /* Light yellow bg */
    transform: translateY(-2px);
}

.chat-footer {
    padding: 1rem;
    background-color: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.chat-input {
    flex: 1;
    border: none;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    outline: none;
}

.chat-send-btn {
    background: none;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-powered-by {
    width: 100%;
    text-align: right;
    font-size: 0.6rem;
    color: #ccc;
    margin-top: 5px;
}

/* Mobile Responsive */
/* Mobile Responsive Grid & Components */
@media (max-width: 600px) {

    .row-2,
    .row-3 {
        grid-template-columns: 1fr;
        /* Force single col */
    }

    .biz-card {
        aspect-ratio: 16/9;
        /* Maintain ratio */
    }
}

@media (max-width: 480px) {
    .chat-widget {
        width: 90%;
        /* Fit iPhone 16 width */
        right: 5%;
        bottom: 20px;
        height: 450px;
        /* Controlled height */
        max-width: 380px;
        /* Explicit cap */
    }

    .chat-option-btn {
        padding: 0.5rem 0.8rem;
        /* Smaller touch targets */
        font-size: 0.7rem;
    }
}

/* Disabled Navigation */
.nav-disabled {
    opacity: 0.5;
    cursor: default;
    /* cursor: not-allowed can be annoying */
    pointer-events: none;
}

/* Chatbot Form Styles */
.chat-form-container {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 12px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.chat-form-group {
    margin-bottom: 12px;
}

.chat-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #333;
    font-size: 0.8rem;
}

.chat-form-label .required {
    color: #ff4d4f;
    margin-left: 3px;
}

.chat-form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
}

.chat-form-input:focus {
    outline: none;
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.2);
}

.chat-form-submit {
    width: 100%;
    padding: 10px;
    background-color: var(--color-yellow);
    color: #333;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-form-submit:hover {
    background-color: #ffcc00;
}

/* Chat Option Buttons (Override/Enhance) */
.chat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chat-option-btn {
    background: #fff;
    border: 1px solid var(--color-yellow);
    color: #333;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    text-align: left;
}

.chat-option-btn:hover {
    background: var(--color-yellow);
    color: #fff;
}

.chat-reset {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    outline: none;
}

.chat-reset:hover {
    transform: rotate(180deg);
}

/* Header Contact Button */
.header-contact-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #FFE600 0%, #FF9500 100%);
    color: #333;
    text-decoration: none;
    font-weight: 700;
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s;
    margin-right: 20px;
    box-shadow: 0 4px 15px rgba(255, 230, 0, 0.3);
}

.header-contact-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}

/* Mobile Nav Contact Wrapper */
.nav-contact-wrapper {
    display: none;
    padding: 20px 30px;
    text-align: center;
}

@media (max-width: 768px) {
    .header-contact-btn:not(.mobile-nav-contact) {
        display: none;
    }

    .nav-contact-wrapper {
        display: block;
    }

    .mobile-nav-contact {
        display: inline-block !important;
        padding: 15px 40px;
        font-size: 1rem;
        margin: 0;
        width: auto;
    }
}

/* Multi-Select Chat Styles */
.chat-option-btn.selected {
    background-color: #333;
    color: #fff;
    border-color: #333;
    position: relative;
    padding-left: 30px;
}

.chat-option-btn.selected::before {
    content: '✓';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
}

.chat-confirm-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

.chat-confirm-btn:hover {
    background-color: #ffcc00;
}

/* Inline Dialog (replaces browser alert/confirm) */
.chat-inline-dialog {
    background: linear-gradient(135deg, #fff8e1 0%, #fff 100%);
    border: 2px solid var(--color-yellow);
    border-radius: 12px;
    padding: 1rem;
    margin: 0.5rem 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 230, 0, 0.3);
    animation: dialogFadeIn 0.3s ease;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-inline-dialog p {
    margin: 0 0 1rem 0;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.chat-inline-dialog .dialog-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.chat-inline-dialog .dialog-btn {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.chat-inline-dialog .dialog-btn.primary {
    background-color: var(--color-yellow);
    color: #333;
}

.chat-inline-dialog .dialog-btn.primary:hover {
    background-color: #ffcc00;
    transform: translateY(-1px);
}

.chat-inline-dialog .dialog-btn.secondary {
    background-color: #eee;
    color: #666;
}

.chat-inline-dialog .dialog-btn.secondary:hover {
    background-color: #ddd;
}

/* 
===================================
   MOBILE OPTIMIZATION (iPhone 16)
=================================== 
*/
@media (max-width: 768px) {

    /* Optimize Font Size for Headings */
    .section-title {
        font-size: 2.5rem !important;
        margin-bottom: 2rem !important;
    }

    .hero-title {
        font-size: 13vw;
        /* Ensure proportional scaling */
    }

    /* Reduce Section Padding to 4rem (approx 64px) for consistency */
    .strength-section,
    .business-section,
    .service-section,
    .action-section,
    .wa-mission,
    .wa-vision,
    .wa-value-section,
    .wa-credo-section,
    .wa-dream-section {
        padding: 4rem 0 !important;
    }

    /* 
    -----------------------------------
       STRENGTH 2-COLUMN GRID (Mobile)
    ----------------------------------- 
    */
    .strength-section {
        height: auto !important;
        /* Disable scroll-jacking height */
        padding-bottom: 4rem !important;
    }

    .sticky-content {
        position: static !important;
        /* Disable sticky */
        height: auto !important;
        padding-top: 0 !important;
        display: block !important;
    }

    .strength-grid-wrapper {
        overflow: visible !important;
    }

    .strength-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        /* 2 columns */
        gap: 15px !important;
        width: 100% !important;
        padding: 0 15px !important;
        /* Add side padding */
        box-sizing: border-box;
    }

    .strength-row {
        display: contents !important;
        /* Flatten rows */
    }

    .strength-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        /* Good ratio for portrait cards */
        margin: 0 !important;
    }

    /* Card flip animation handled by JS on desktop */

    /* 
    -----------------------------------
       SERVICE SLIDER (Mobile)
    ----------------------------------- 
    */
    /* Wrapper needs to clip overflow */
    .service-section .container {
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .service-slider-wrapper {
        position: relative;
        overflow: hidden;
    }

    /* Arrow Navigation Buttons - Mobile Only */
    .service-slider-arrow {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        color: #1a1a1a;
    }

    .service-slider-arrow:hover {
        background: var(--color-yellow);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 25px rgba(255, 230, 0, 0.4);
    }

    .service-slider-arrow:active {
        transform: translateY(-50%) scale(0.95);
    }

    .service-slider-prev {
        left: 12px;
    }

    .service-slider-next {
        right: 12px;
    }

    .service-slider-arrow svg {
        width: 20px;
        height: 20px;
    }

    .service-grid {
        display: flex !important;
        width: max-content !important;
        gap: 1rem !important;
        padding: 15px calc(50% - 140px) !important;
        margin: 0 !important;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        grid-template-columns: none !important;
    }

    .service-card {
        flex-shrink: 0 !important;
        width: 280px !important;
        max-width: 280px !important;
        margin: 0 !important;
    }

    /* Disable scale on hover for mobile slider to prevent clipping */
    .service-card:hover {
        transform: translateY(-5px);
    }

    /* 
    -----------------------------------
       SLIDER TEXT (Mobile)
    ----------------------------------- 
    */
    .slider-text {
        font-size: 2.5rem !important;
        /* Reduce from 5rem */
    }

    /* 
    -----------------------------------
       CONTACT/CAREER MARGINS (Mobile)
    ----------------------------------- 
    */
    .action-grid {
        padding: 0 15px !important;
        /* Add side padding to container */
        box-sizing: border-box;
    }

    /* 
    -----------------------------------
       HERO TYPOGRAPHY (Mobile Replacement)
    ----------------------------------- 
    */
    /* Hide SVGs */
    .hero-title .title-line,
    .hero-subtitle-wrapper {
        display: none !important;
    }

    .hero-mobile-text {
        display: block !important;
        text-align: left;
        padding-left: 0;
        margin-top: calc(10vh - 30px);
        /* Lifted up by 30px as requested */
        width: 100%;
    }

    .mobile-title {
        font-family: var(--font-en);
        font-size: 11vw;
        /* Reduced from 13vw */
        line-height: 0.95;
        /* Less overlap */
        font-weight: 950;
        /* Extra Bold */
        color: #000;
        margin-bottom: 1rem;
        /* Reduced from 3rem */
        letter-spacing: 0.02em;
    }

    .mobile-subtitle {
        font-family: var(--font-jp);
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.6;
        color: #333;
        display: block;
        /* Block for single line spacing */
        background: none;
        /* Remove highlight */
        padding: 0;
        margin-top: 0;
        white-space: nowrap;
        /* Ensure single line */
    }
}

/* Mobile Hero Animation */
/* Mobile Hero Animation: Stroke to Fill mimic */
@keyframes mobileDrawFill {
    0% {
        opacity: 0;
        visibility: visible;
        -webkit-text-stroke: 1px #000;
        color: transparent;
        transform: translateY(10px);
    }

    40% {
        opacity: 1;
        visibility: visible;
        -webkit-text-stroke: 1px #000;
        color: transparent;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        visibility: visible;
        -webkit-text-stroke: 0;
        color: #000;
        transform: translateY(0);
    }
}

.mobile-title span,
.mobile-subtitle span {
    display: inline-block;
    opacity: 0;
    /* Hidden initially */
    /* white-space: pre; Preserve spaces if needed */
}

/* Ensure space characters have width */
.mobile-title span:empty::before,
.mobile-subtitle span:empty::before {
    content: "\00a0";
}

/* Default Desktop: Hide Mobile Text */
.hero-mobile-text {
    display: none;
}

/* =================================== */
/* 8. CRITICAL FIXES (Mobile Menu & Chat) */
/* =================================== */

/* --- MOBILE ONLY (Max 767px) --- */
@media (max-width: 767px) {

    /* 1. Chatbot Visibility */
    #chat-widget {
        position: fixed !important;
        z-index: 9000 !important;
        bottom: 15px !important;
        right: 15px !important;
        width: 350px;
        max-width: calc(100% - 30px);
        max-height: 85vh;
        height: 85vh;
    }

    #chat-widget.minimized {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    #chat-widget.minimized .chat-header,
    #chat-widget.minimized .chat-body,
    #chat-widget.minimized .chat-footer {
        display: none !important;
    }

    /* 2. Mobile Menu (Overlay) */
    .site-nav {
        /* Hidden by default in base CSS */
        z-index: 10000;
    }

    .site-nav.active {
        display: flex !important;
        flex-direction: column;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: rgba(255, 255, 255, 0.98);
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 20000 !important;
        padding-top: 80px;
        align-items: center;
        justify-content: flex-start;
    }

    .site-nav.active .nav-footer-links {
        display: flex !important;
        /* Ensure footer links show on mobile menu */
    }

    .site-header {
        z-index: 21000 !important;
        position: fixed;
        width: 100%;
        top: 0;
    }

    /* 3. Strength Section (Gap Fix) */
    .strength-section,
    .sticky-content,
    .strength-grid-wrapper {
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: visible !important;
        position: static !important;
    }

    .strength-section {
        padding-bottom: 4rem !important;
    }

    .strength-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        position: static !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .strength-card {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 320px !important;
        /* Cap width */
        aspect-ratio: auto !important;
        /* Remove aspect ratio constraint if causing issues */
        height: auto !important;
        margin: 0 !important;
    }

    /* 2-COLUMN GRID LAYOUT FOR STRENGTH CARDS */
    .strength-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .strength-row {
        display: contents !important;
    }

    .strength-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        margin: 0 !important;
    }

    .card-inner {
        width: 100% !important;
        height: 100% !important;
        transform: rotateY(0deg) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .card-front {
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .card-front img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .card-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px !important;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important;
        color: #fff !important;
        text-align: center !important;
        border-radius: 0 0 12px 12px !important;
    }

    .card-cat-en {
        font-size: 1.1rem !important;
        font-weight: 900 !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.02em !important;
    }

    .card-cat-jp {
        font-size: 0.85rem !important;
    }

    .card-back {
        display: none !important;
    }
}

/* --- DESKTOP RESTORATION (Min 768px) --- */
@media (min-width: 768px) {

    /* Restore Sticky Logic & Grid */
    .strength-section {
        height: auto;
        /* Changed from 300vh to auto - no scroll animation needed */
        position: relative;
    }

    .sticky-content {
        position: relative;
        /* Changed from sticky to relative since we aren't using scroll effects */
        width: 100%;
        height: auto;
        /* Allow height to fit content, fixing whitespace issue */
        min-height: auto;
        overflow: visible;
        display: block;
        /* Default block display */
        z-index: 10;
        pointer-events: none;
    }

    /* Enable pointer events on interactive children */
    /* Enable pointer events on interactive children */
    .sticky-content>* {
        pointer-events: auto;
    }

    .strength-grid {
        width: 100%;
        box-sizing: border-box;
        max-width: 1200px;
        /* Standard layout */
        margin: 0 auto;
        padding: 3rem 2rem;
        /* Reduced vertical padding */
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .strength-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
        width: 100%;
    }

    /* Force cards to fit the grid column */
    .strength-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        perspective: 1000px;
        /* Enable 3D effect for card flip */
    }

    /* Disable Flip Animation for Stability */
    /* Card flip animation handled by JS - do NOT override transform/transition */
    .strength-card .card-inner {
        transform-style: preserve-3d;
    }

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

    /* Chat Widget Desktop Reset */
    .chat-widget.minimized {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        right: 30px !important;
        bottom: 30px !important;
    }

    /* Hamburger Menu Visible on Desktop - Full Screen Overlay Navigation */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 19000;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .site-nav.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Chatbot Desktop: Open by default */
    #chat-widget {
        display: flex;
        flex-direction: column;
        width: 350px;
        /* Desktop specific positioning if needed */
        bottom: 30px;
        right: 30px;
        z-index: 9000;
        position: fixed;
    }

    /* Hide Mobile only elements */
    .hero-mobile-text {
        display: none;
    }
}

/* =================================== */
/* SUPER MOBILE (480px and below) */
/* =================================== */
@media (max-width: 480px) {

    /* Header Optimization */
    .header-contact-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
        min-height: 40px;
    }

    /* ========================================= */
    /* STYLISH HAMBURGER MENU - SP ONLY */
    /* ========================================= */
    .hamburger-menu {
        width: 44px;
        height: 44px;
        padding: 10px;
        background: linear-gradient(135deg, rgba(255, 230, 0, 0.15) 0%, rgba(255, 255, 255, 0.9) 100%);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 230, 0, 0.3);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .hamburger-menu:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .hamburger-menu span {
        width: 22px;
        height: 2.5px;
        background: linear-gradient(90deg, #333 0%, #666 100%);
        border-radius: 2px;
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
        transform-origin: center;
    }

    .hamburger-menu span:nth-child(1) {
        width: 22px;
    }

    .hamburger-menu span:nth-child(2) {
        width: 18px;
        margin-left: -4px;
    }

    .hamburger-menu span:nth-child(3) {
        width: 14px;
        margin-left: -8px;
    }

    /* Active state - X animation */
    .hamburger-menu.active {
        background: linear-gradient(135deg, var(--color-yellow) 0%, #ffee58 100%);
        border-color: rgba(255, 200, 0, 0.5);
        box-shadow: 0 6px 20px rgba(255, 230, 0, 0.4);
    }

    .hamburger-menu.active span {
        width: 22px;
        margin-left: 0;
        background: linear-gradient(90deg, #333 0%, #111 100%);
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    /* Hero Section */
    .hero-mobile-text .mobile-title {
        font-size: 11vw;
    }

    .hero-mobile-text .mobile-subtitle {
        font-size: 3.5vw;
    }

    /* OUR STRENGTH - Single column */
    .strength-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 10px !important;
    }

    .strength-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
    }

    .strength-numbers {
        gap: 1.5rem;
    }

    .num-value {
        font-size: 3rem;
    }

    .num-label {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    /* OUR SERVICE - Full width cards */
    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        padding: 0 10px;
    }

    .service-card-title {
        font-size: 1.2rem;
    }

    /* OUR BUSINESS */
    .about-main-title {
        font-size: 2.2rem;
    }

    .about-sub-title {
        font-size: 0.9rem;
    }

    .about-desc p {
        font-size: 0.9rem;
        line-height: 1.8;
    }

    /* Footer CTA */
    .footer-cta-cards {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0 10px;
    }

    .cta-card {
        width: 100% !important;
        padding: 2rem 1rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-sub {
        font-size: 0.9rem;
    }

    /* ========================================= */
    /* SERVICE FOOTER TEXT BALANCE - SP */
    /* ========================================= */
    .service-footer {
        padding: 0 0.5rem;
    }

    .service-keywords {
        font-size: 0.85rem;
        line-height: 1.8;
        letter-spacing: 0;
        margin-bottom: 1.5rem;
    }

    /* Hide SP-only line break and let text flow naturally */
    .sp-only {
        display: none;
    }

    .service-needs-wrapper {
        margin-bottom: 1.5rem;
    }

    .service-needs {
        font-size: 0.8rem;
        letter-spacing: 0;
        line-height: 1.8;
    }

    .need-word {
        display: inline;
    }

    .service-promise {
        font-size: 1.3rem;
        line-height: 1.5;
        letter-spacing: 0;
        margin-bottom: 2rem;
        padding: 0 10px;
    }

    /* Chat Widget */
    .chat-widget {
        width: calc(100vw - 20px) !important;
        max-width: 350px;
        right: 10px !important;
        bottom: 10px !important;
    }

    .chat-minimized {
        width: 50px !important;
        height: 50px !important;
        right: 15px !important;
        bottom: 15px !important;
    }

    /* General spacing reduction */
    .section {
        padding: 2.5rem 3%;
    }
}