/*

Tooplate 2141 Minimal White

https://www.tooplate.com/view/2141-minimal-white

*/

@charset "utf-8";

/* CSS Document */

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #000;
            background: #fff;
            overflow-x: hidden;
            user-select: auto;
        }

        /* Decorative Elements */
        .black-line {
            width: 100%;
            height: 1px;
            background: #000;
            margin: 60px 0;
        }

        .black-block {
            width: 20px;
            height: 20px;
            background: #000;
            position: absolute;
        }

        .vertical-line {
            width: 1px;
            height: 100px;
            background: #000;
            margin: 40px auto;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 20px 0;
            border-bottom: 2px solid #000;
            transition: all 0.3s ease;
        }

        nav.scrolled {
            padding: 15px 0;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -1px;
            position: relative;
            color: #000;
            text-decoration: none;
        }

        .logo::after {
            content: '';
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            background: #000;
        }

        /* Hamburger Menu */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            cursor: pointer;
            z-index: 1001;
        }

        .menu-toggle span {
            display: block;
            width: 25px;
            height: 2px;
            background: #000;
            margin: 3px 0;
            transition: all 0.3s ease;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

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

        .menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        .nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

        .nav-links a {
            color: #000;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-links a::before {
            content: '';
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 1px;
            background: #000;
            transition: width 0.3s ease;
        }

        .nav-links a:hover::before,
        .nav-links a.active::before {
            width: 10px;
        }

        .nav-links a.active {
            font-weight: 700;
        }

        /* Section 1: Hero */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 20%;
            left: 10%;
            width: 100px;
            height: 1px;
            background: #000;
            animation: slideRight 8s ease-in-out infinite;
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: 20%;
            right: 10%;
            width: 150px;
            height: 1px;
            background: #000;
            animation: slideLeft 8s ease-in-out infinite;
        }

        .hero-decoration {
            position: absolute;
            top: 30%;
            right: 15%;
            width: 40px;
            height: 40px;
            border: 2px solid #000;
            transform: rotate(45deg);
            animation: rotateSquare 10s linear infinite;
        }

        /* Animated Objects (Reduced) */
        .floating-objects {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        .floating-circle {
            position: absolute;
            width: 80px;
            height: 80px;
            border: 1px solid #000;
            border-radius: 50%;
            opacity: 0.2;
            animation: floatUp 18s ease-in-out infinite;
        }

        .floating-circle:nth-child(1) {
            left: 10%;
            bottom: -100px;
            animation-delay: 0s;
            width: 60px;
            height: 60px;
        }

        .floating-circle:nth-child(2) {
            right: 15%;
            bottom: -100px;
            animation-delay: 8s;
            width: 100px;
            height: 100px;
        }

        .floating-square {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #000;
            opacity: 0.08;
            animation: floatDiagonal 25s linear infinite;
            top: 40%;
            left: -50px;
        }

        .floating-line {
            position: absolute;
            height: 1px;
            background: #000;
            opacity: 0.15;
            animation: expandContract 10s ease-in-out infinite;
            width: 200px;
            top: 65%;
            right: 10%;
            transform-origin: center;
        }

        .hero-content {
            text-align: center;
            max-width: 800px;
            animation: fadeInUp 1s ease;
            position: relative;
            z-index: 2;
        }

        /* Animations */
        @keyframes floatUp {
            0%, 100% {
                transform: translateY(0) scale(1);
                opacity: 0;
            }
            10% {
                opacity: 0.2;
            }
            50% {
                transform: translateY(-600px) scale(1.1);
                opacity: 0.05;
            }
            90% {
                opacity: 0;
            }
        }

        @keyframes floatDiagonal {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            100% {
                transform: translate(1400px, -300px) rotate(360deg);
            }
        }

        @keyframes expandContract {
            0%, 100% {
                transform: scaleX(0.5) rotate(0deg);
            }
            50% {
                transform: scaleX(1.2) rotate(180deg);
            }
        }

        @keyframes rotateSquare {
            0% {
                transform: rotate(45deg) scale(1);
            }
            25% {
                transform: rotate(135deg) scale(1.1);
            }
            50% {
                transform: rotate(225deg) scale(1);
            }
            75% {
                transform: rotate(315deg) scale(0.9);
            }
            100% {
                transform: rotate(405deg) scale(1);
            }
        }

        @keyframes slideRight {
            0%, 100% {
                transform: translateX(0);
                opacity: 0.5;
            }
            50% {
                transform: translateX(50px);
                opacity: 1;
            }
        }

        @keyframes slideLeft {
            0%, 100% {
                transform: translateX(0);
                opacity: 0.5;
            }
            50% {
                transform: translateX(-50px);
                opacity: 1;
            }
        }

        .hero h1 {
            font-size: clamp(48px, 8vw, 88px);
            font-weight: 100;
            letter-spacing: -3px;
            margin-bottom: 30px;
            line-height: 0.9;
            position: relative;
        }

        .hero h1::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: #000;
        }

        .hero .subtitle {
            font-size: 16px;
            color: #000;
            font-weight: 400;
            margin-bottom: 50px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .cta-button {
            display: inline-block;
            padding: 18px 50px;
            background: #000;
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            letter-spacing: 2px;
            transition: all 0.3s ease;
            border: 2px solid #000;
            position: relative;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
            border-top: 2px solid #000;
            border-right: 2px solid #000;
        }

        .cta-button:hover {
            background: transparent;
            color: #000;
            transform: translate(-5px, -5px);
        }

        /* Section 2: About - Mixed Layouts */
        .about {
            padding: 120px 20px;
            background: #fff;
            position: relative;
        }

        .about::before {
            content: '';
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            height: 1px;
            background: #000;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Quote Block */
        .about-intro {
            margin-bottom: 80px;
        }

        .quote-block {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }

        .quote-mark {
            font-size: 120px;
            line-height: 1;
            font-weight: 100;
            position: absolute;
            top: -40px;
            left: -60px;
            opacity: 0.1;
        }

        .quote-block h3 {
            font-size: 32px;
            font-weight: 300;
            line-height: 1.4;
            letter-spacing: -1px;
            margin-bottom: 30px;
        }

        .quote-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .author-line {
            width: 50px;
            height: 1px;
            background: #000;
        }

        .quote-author p {
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 500;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2px;
            background: #000;
            padding: 2px;
            margin-bottom: 100px;
        }

        .stat-item {
            background: #fff;
            padding: 60px 20px;
            text-align: center;
            position: relative;
        }

        .stat-number {
            font-size: 48px;
            font-weight: 100;
            letter-spacing: -2px;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 500;
        }

        .stat-decoration {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            transform: rotate(45deg);
        }

        /* Philosophy Section */
        .philosophy-section {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 80px;
            margin-bottom: 100px;
            align-items: start;
        }

        .philosophy-header {
            position: relative;
        }

        .philosophy-header h2 {
            font-size: 64px;
            font-weight: 100;
            letter-spacing: -2px;
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .header-decoration {
            position: absolute;
            bottom: 0;
            right: -20px;
            width: 40px;
            height: 40px;
            background: #000;
        }

        .philosophy-content {
            padding-top: 40px;
        }

        .lead-text {
            font-size: 24px;
            line-height: 1.6;
            margin-bottom: 60px;
            font-weight: 300;
        }

        .philosophy-points {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .point-item {
            position: relative;
            padding-left: 20px;
        }

        .point-number {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 10px;
            font-weight: 700;
        }

        .point-item h4 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .point-item p {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        /* Process Timeline */
        .process-timeline {
            margin-bottom: 100px;
        }

        .section-subtitle {
            font-size: 48px;
            font-weight: 100;
            text-align: center;
            margin-bottom: 60px;
            letter-spacing: -1px;
        }

        .timeline-container {
            position: relative;
            display: flex;
            justify-content: space-between;
            max-width: 900px;
            margin: 0 auto;
        }

        .timeline-line {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #000;
            z-index: 0;
        }

        .timeline-item {
            position: relative;
            text-align: center;
            flex: 1;
        }

        .timeline-dot {
            width: 40px;
            height: 40px;
            background: #fff;
            border: 2px solid #000;
            margin: 0 auto 30px;
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .timeline-item:hover .timeline-dot {
            background: #000;
            transform: rotate(45deg);
        }

        .timeline-content h4 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .timeline-content p {
            font-size: 14px;
            color: #666;
        }

        /* Values Grid */
        .values-section {
            text-align: center;
        }

        .values-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            margin-bottom: 60px;
        }

        .values-header h2 {
            font-size: 48px;
            font-weight: 100;
            letter-spacing: -1px;
        }

        .black-square {
            width: 15px;
            height: 15px;
            background: #000;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }

        .value-card {
            padding: 60px 20px;
            border: 1px solid #000;
            transition: all 0.3s ease;
        }

        .value-card.black {
            background: #000;
            color: #fff;
        }

        .value-icon {
            font-size: 48px;
            font-weight: 100;
            margin-bottom: 20px;
        }

        .value-card h4 {
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 500;
        }

        .value-card:hover {
            transform: translateY(-10px);
        }

        .split-layout {
            display: grid;
            grid-template-columns: 1fr 2px 1fr;
            gap: 60px;
            align-items: center;
            margin-top: 80px;
        }

        .split-divider {
            width: 2px;
            height: 300px;
            background: #000;
            justify-self: center;
        }

        .split-left {
            text-align: right;
            padding-right: 20px;
        }

        .split-left h2 {
            font-size: 64px;
            font-weight: 100;
            letter-spacing: -2px;
            margin-bottom: 30px;
            position: relative;
        }

        .split-left h2::before {
            content: '';
            position: absolute;
            left: -40px;
            top: 50%;
            width: 30px;
            height: 30px;
            background: #000;
            transform: translateY(-50%);
        }

        .split-right {
            padding-left: 20px;
        }

        .split-right p {
            font-size: 18px;
            line-height: 2;
            margin-bottom: 30px;
        }

        .accent-box {
            display: inline-block;
            padding: 10px 20px;
            border: 1px solid #000;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
        }

        .accent-box::after {
            content: '';
            position: absolute;
            bottom: -5px;
            right: -5px;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: -1;
        }

        /* Section 3: Services - Asymmetric Grid */
        .services {
            padding: 120px 20px;
            background: #fafafa;
            position: relative;
        }

        .services::before,
        .services::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            border: 2px solid #000;
        }

        .services::before {
            top: 80px;
            left: 5%;
            animation: rotateSlowly 20s linear infinite;
        }

        .services::after {
            bottom: 80px;
            right: 5%;
            transform: rotate(45deg);
            animation: rotateSlowly 20s linear infinite reverse;
        }

        @keyframes rotateSlowly {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .services-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
        }

        .services-header h2 {
            font-size: 56px;
            font-weight: 100;
            letter-spacing: -1px;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .services-header h2::before,
        .services-header h2::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 1px;
            background: #000;
            top: 50%;
            transform: translateY(-50%);
        }

        .services-header h2::before {
            left: -50px;
        }

        .services-header h2::after {
            right: -50px;
        }

        .services-header::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 1px;
            background: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
        }

        .asymmetric-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
            position: relative;
        }

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

        .service-large * {
            position: relative;
            z-index: 1;
        }

        .service-large {
            background: #fff;
            padding: 60px;
            border-left: 4px solid #000;
            position: relative;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
        }

        .service-large::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.02);
            transition: left 0.6s ease;
            pointer-events: none;
        }

        .service-large:hover::before {
            left: 0;
        }

        .service-large::after {
            content: '';
            position: absolute;
            top: 40px;
            right: 40px;
            width: 15px;
            height: 15px;
            background: #000;
            transition: all 0.3s ease;
            pointer-events: none;
            z-index: 0;
        }

        .service-large:hover::after {
            transform: scale(1.5) rotate(45deg);
        }

        .service-large:hover {
            transform: translateX(10px);
            border-left-width: 8px;
        }

        .asymmetric-grid.reverse .service-large {
            border-left: none;
            border-right: 4px solid #000;
        }

        .asymmetric-grid.reverse .service-large::after {
            right: auto;
            left: 40px;
        }

        .asymmetric-grid.reverse .service-large:hover {
            transform: translateX(-10px);
            border-right-width: 8px;
        }

        .service-small {
            background: #000;
            color: #fff;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .service-small::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transition: all 0.6s ease;
            pointer-events: none;
        }

        .service-small:hover::before {
            width: 200px;
            height: 200px;
        }

        .service-number {
            font-size: 88px;
            font-weight: 100;
            line-height: 1;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        .service-small:hover .service-number {
            transform: scale(1.1);
        }

        .service-large h3,
        .service-large p {
            position: relative;
            z-index: 1;
            user-select: text;
        }

        .service-large h3 {
            font-size: 36px;
            font-weight: 300;
            margin-bottom: 20px;
            letter-spacing: -1px;
            display: inline-block;
        }

        .service-large h3::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 0;
            height: 1px;
            background: #000;
            transition: width 0.3s ease;
        }

        .service-large:hover h3::after {
            width: 100%;
        }

        .service-large p {
            color: #666;
            line-height: 1.8;
            font-size: 16px;
            margin-bottom: 30px;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
        }

        .service-tag {
            display: inline-block;
            padding: 8px 16px;
            border: 1px solid #000;
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            z-index: 1;
            text-decoration: none;
            color: #000;
        }

        .service-tag:hover {
            background: #000;
            color: #fff;
            transform: translateY(-2px);
        }

        .service-small h4 {
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 400;
            opacity: 0.9;
            transition: all 0.3s ease;
        }

        .service-small:hover h4 {
            opacity: 1;
            letter-spacing: 3px;
        }

        /* Section 4: Contact - Minimal Form */
        .contact {
            padding: 120px 20px;
            background: #fff;
            position: relative;
        }

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

        .contact-divider {
            background: #000;
            width: 1px;
            height: 100%;
        }

        .contact-info {
            padding-right: 40px;
        }

        .contact-info h2 {
            font-size: 48px;
            font-weight: 100;
            margin-bottom: 40px;
            position: relative;
        }

        .contact-info h2::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 0;
            width: 40px;
            height: 2px;
            background: #000;
        }

        .info-item {
            margin-bottom: 30px;
            padding-left: 30px;
            position: relative;
        }

        .info-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 10px;
            height: 10px;
            background: #000;
            transform: rotate(45deg);
        }

        .info-item h4 {
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .info-item p {
            font-size: 18px;
            font-weight: 300;
        }

        .contact-form {
            padding-left: 40px;
        }

        .form-group {
            margin-bottom: 40px;
            position: relative;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 15px 0;
            border: none;
            border-bottom: 2px solid #000;
            background: transparent;
            font-size: 16px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            padding-left: 20px;
        }

        .form-group label {
            position: absolute;
            left: 0;
            top: 15px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .form-group input:focus + label,
        .form-group input:not(:placeholder-shown) + label,
        .form-group textarea:focus + label,
        .form-group textarea:not(:placeholder-shown) + label {
            top: -20px;
            font-size: 11px;
            font-weight: 500;
        }

        .submit-btn {
            padding: 18px 60px;
            background: #000;
            color: #fff;
            border: 2px solid #000;
            font-size: 12px;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            position: relative;
        }

        .submit-btn::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: -8px;
            width: 30px;
            height: 30px;
            border-bottom: 2px solid #000;
            border-left: 2px solid #000;
        }

        .submit-btn:hover {
            background: transparent;
            color: #000;
            transform: translate(3px, 3px);
        }

        /* Footer */
        footer {
            padding: 60px 20px;
            text-align: center;
            border-top: 3px solid #000;
            background: #fff;
            position: relative;
        }

        footer::before,
        footer::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            height: 1px;
            background: #000;
        }

        footer::before {
            left: 20%;
        }

        footer::after {
            right: 20%;
        }

        footer p {
            color: #000;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 500;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Mobile responsive */
        @media (max-width: 1000px) {
            footer::before,
            footer::after {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .menu-toggle {
                display: flex;
            }

            .nav-links {
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                height: 100vh;
                background: rgba(255, 255, 255, 0.98);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 30px;
                z-index: 1000;
            }

            .nav-links.active {
                display: flex;
            }

            .nav-links a {
                font-size: 18px;
                letter-spacing: 2px;
            }

            .nav-links a::before {
                display: none;
            }

            .nav-links a.active {
                position: relative;
            }

            .nav-links a.active::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 30px;
                height: 2px;
                background: #000;
            }

            /* About section mobile */
            .quote-mark {
                font-size: 80px;
                left: -30px;
                top: -20px;
            }

            .quote-block h3 {
                font-size: 24px;
            }

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

            .philosophy-section {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .philosophy-header h2 {
                writing-mode: horizontal-tb;
                font-size: 48px;
            }

            .header-decoration {
                position: static;
                width: 60px;
                height: 2px;
                margin-top: 20px;
            }

            .philosophy-points {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .timeline-container {
                flex-direction: column;
                gap: 40px;
            }

            .timeline-line {
                width: 2px;
                height: 100%;
                top: 0;
                left: 20px;
                right: auto;
            }

            .timeline-item {
                display: flex;
                align-items: center;
                gap: 30px;
                text-align: left;
            }

            .timeline-dot {
                margin: 0;
                flex-shrink: 0;
            }

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

            .values-header h2 {
                font-size: 36px;
            }

            .split-layout {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .split-divider {
                width: 100px;
                height: 2px;
            }

            .split-left {
                text-align: left;
                padding-right: 0;
            }

            .split-left h2::before {
                display: none;
            }

            .asymmetric-grid,
            .asymmetric-grid.reverse {
                grid-template-columns: 1fr;
            }

            .asymmetric-grid.reverse .service-large {
                border-right: none;
                border-left: 4px solid #000;
            }

            .asymmetric-grid.reverse .service-large::after {
                left: auto;
                right: 20px;
            }

            .asymmetric-grid.reverse .service-large:hover {
                transform: translateX(10px);
                border-left-width: 8px;
                border-right-width: 4px;
            }

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

            .contact-divider {
                width: 100px;
                height: 2px;
                margin: 0 auto;
            }

            .contact-info,
            .contact-form {
                padding: 0;
            }

            .hero h1 {
                font-size: 48px;
            }

            .services-header h2,
            .split-left h2 {
                font-size: 36px;
            }

            .services-header h2::before,
            .services-header h2::after {
                display: none;
            }

            .service-large {
                padding: 40px;
            }

            .service-large::after {
                top: 20px;
                right: 20px;
            }

            .service-tag {
                padding: 6px 12px;
                font-size: 10px;
            }

            .service-number {
                font-size: 60px;
            }

            .hero-decoration {
                display: none;
            }

            .hero::before,
            .hero::after {
                width: 50px;
            }

            /* Hide some animated objects on mobile for performance */
            .floating-objects {
                opacity: 0.5;
            }

            .floating-circle:nth-child(2) {
                display: none;
            }

            .services::before,
            .services::after {
                width: 30px;
                height: 30px;
            }

            footer::before,
            footer::after {
                display: none;
            }
        }
        /* Accessibility - Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
            }
        }

        /* ---------- Portfolio section ---------- */
.portfolio { padding: 100px 20px; background: #fff; }
.portfolio .services-header h2 { font-size: 48px; font-weight:100; }

.portfolio-intro { max-width: 900px; margin: 0 auto 14px; font-size:16px; }

/* 4-column desktop, 3 tablet, 2 mobile */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width:1000px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:680px)  { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:420px)  { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:#fafafa;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(10,10,10,0.04);
}
.portfolio-item img {
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition: transform .7s cubic-bezier(.2,.9,.3,1);
}
.portfolio-item:focus img,
.portfolio-item:hover img { transform: scale(1.06); }

/* overlay */
.portfolio-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  color: #fff;
  padding: 18px;
  transform: translateY(8px);
  opacity: 0;
  transition: all .35s ease;
}
.portfolio-item:hover .portfolio-overlay,
.portfolio-item:focus .portfolio-overlay {
  transform: translateY(0);
  opacity: 1;
}
.overlay-inner { max-width: 92%; }
.overlay-title { display:block; font-weight:600; font-size:14px; letter-spacing:0.4px; margin-bottom:6px; }
.overlay-desc { display:block; font-size:12px; color: #d3dce6; }

/* Lightbox */
.pf-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.8);
  z-index: 2000;
  padding: 30px;
  gap: 18px;
  text-align: center;
}
.pf-lightbox[aria-hidden="false"]{ display:flex; }
.pf-lightbox img{ max-width: 90vw; max-height: 78vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.pf-close{ position:absolute; top:18px; right:24px; background:transparent; color:#fff; border:none; font-size:36px; cursor:pointer; }
.pf-caption{ color:#fff; margin-top:8px; font-size:14px; }
.pf-caption strong{ display:block; font-size:16px; margin-bottom:6px; }













/* ---------- ORIGINAL STYLES (same as your file) ---------- */
/* (the full original CSS content is preserved here unchanged) */

/* ... (original CSS content from tooplate-minimal-white-style.css) ... */

/* For brevity in this message I will not repeat the whole original CSS content here.
   Replace your existing file with the same original file content you already have,
   and then append the following dark-mode overrides at the end of that file. */

/* ---------- DARK MODE OVERRIDES (new) ---------- */
/* toggled by adding `dark` class to the <body> element */
body.dark {
  --bg: #0b0d0f;
  --panel: #0f1113;
  --muted-color: #bfc7cc;
  --muted-2: #9aa6ad;
  --accent: #3182ce;
  color: #e6eef6;
  background: var(--bg);
}

/* Navigation */
body.dark nav { background: rgba(10,11,12,0.95); border-bottom-color: rgba(255,255,255,0.06); }
body.dark .logo { color: #fff; }
body.dark .logo::after { background: #fff; }
body.dark .menu-toggle span { background: #fff; }
body.dark .nav-links a { color: #d7dfe6; }
body.dark .nav-links a::before { background: rgba(255,255,255,0.06); }
body.dark nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.6); }

/* Hero */
body.dark .hero { background: transparent; }
body.dark .hero h1 { color: #fff; }
body.dark .subtitle { color: var(--muted-color); }
body.dark .cta-button { background: #fff; color: #0b0d0f; border-color: #fff; }
body.dark .cta-button:hover { color: #fff; background: transparent; transform: translate(-5px, -5px); }

/* About/Quote */
body.dark .quote-mark { color: rgba(255,255,255,0.04); }
body.dark .quote-block h3 { color: #e6eef6; }
body.dark .author-line { background: rgba(255,255,255,0.06); }
body.dark .quote-author p { color: var(--muted-color); }

/* Stats */
body.dark .stats-grid { background: #111214; }
body.dark .stat-item { background: #0f1113; color: #e8eef6; }
body.dark .stat-label { color: var(--muted-2); }

/* Philosophy / Points */
body.dark .philosophy-header h2 { color: rgba(255,255,255,0.06); }
body.dark .lead-text { color: #dfe9f2; }
body.dark .point-item p { color: var(--muted-color); }
body.dark .point-number { color: rgba(255,255,255,0.08); }

/* Timeline and Values */
body.dark .timeline-line { background: rgba(255,255,255,0.06); }
body.dark .timeline-dot { background: #0b0d0f; border-color: rgba(255,255,255,0.12); }
body.dark .timeline-content h4 { color: #e6eef6; }
body.dark .timeline-content p { color: var(--muted-color); }

body.dark .value-card { background: #0f1113; border-color: rgba(255,255,255,0.06); color: #e6eef6; }
body.dark .value-card.black { background: #111314; color: #fff; }

/* Services */
body.dark .services { background: #07080a; }
body.dark .service-large { background: linear-gradient(180deg,#0f1113,#0b0d0f); border-left-color: rgba(255,255,255,0.06); color: #e6eef6; }
body.dark .service-large p { color: var(--muted-color); }
body.dark .service-small { background: #0b0d0f; color: #fff; }
body.dark .service-number { color: rgba(255,255,255,0.06); }
body.dark .service-tag { color: #fff; border-color: rgba(255,255,255,0.08); background: transparent; }
body.dark .service-tag:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* Portfolio */
body.dark .portfolio { background: #07080a; }
body.dark .portfolio-item { background: #0b0d0f; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
body.dark .portfolio-overlay { background: linear-gradient(180deg, rgba(10,11,12,0) 40%, rgba(4,6,8,0.85) 100%); }
body.dark .overlay-title { color: #fff; }
body.dark .overlay-desc { color: rgba(255,255,255,0.7); }

/* Contact */
body.dark .contact { background: #0b0d0f; }
body.dark .contact-info h2 { color: #e6eef6; }
body.dark .info-item p, body.dark .info-item h4 { color: var(--muted-color); }
body.dark .contact-divider { background: rgba(255,255,255,0.06); }
body.dark .form-group input, body.dark .form-group textarea { border-bottom-color: rgba(255,255,255,0.08); color: #e6eef6; background: transparent; }
body.dark .form-group label { color: var(--muted-color); }
body.dark .submit-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
body.dark .submit-btn:hover { background: transparent; color: var(--accent); transform: translate(3px,3px); }

/* Footer */
body.dark footer { background: #07080a; border-top-color: rgba(255,255,255,0.06); }
body.dark footer p, body.dark footer a { color: var(--muted-color); }

/* Lightbox */
body.dark .pf-lightbox { background: rgba(2,6,23,0.95); }
body.dark .pf-caption { color: #dfe9f2; }

/* small helpers */
body.dark .muted { color: var(--muted-color); }
body.dark .black-line { background: rgba(255,255,255,0.06); }

/* Ensure icons switch visually */
.theme-toggle .icon-sun { display:inline-block; }
.theme-toggle .icon-moon { display:none; }
body.dark .theme-toggle .icon-sun { display:none; }
body.dark .theme-toggle .icon-moon { display:inline-block; }

/* Accessibility: respect prefers-color-scheme for first visit if no preference set */
@media (prefers-color-scheme: dark) {
  :root { /* no-op: respected by JS if user has no stored preference */ }
}

/* ------------------ Dark-mode fixes for About / Philosophy / Process / Values ------------------ */
/* Append this block to the end of your styles.css file */

body.dark {
  --bg: #07080a;
  --panel: #0f1113;
  --muted-color: #bfc7cc;   /* lighter muted text */
  --muted-2: #9aa6ad;       /* secondary muted */
  --accent: #3182ce;        /* brand */
  color: #e6eef6;
  background: var(--bg);
}

/* Ensure the about section background, lines, and main quote switch */
body.dark .about { background: transparent; }
body.dark .about::before { background: rgba(255,255,255,0.06); }
body.dark .quote-block h3 { color: #e6eef6; }
body.dark .quote-mark { color: rgba(255,255,255,0.03); }
body.dark .author-line { background: rgba(255,255,255,0.06); }
body.dark .quote-author p { color: var(--muted-color); }

/* Stats grid (black/white inversion handling) */
body.dark .stats-grid { background: #0b0d0f; }
body.dark .stat-item { background: var(--panel); color: #e6eef6; border-color: rgba(255,255,255,0.04); }
body.dark .stat-number { color: #e6eef6; }
body.dark .stat-label { color: var(--muted-2); }
body.dark .stat-decoration { border-color: rgba(255,255,255,0.06); }

/* Philosophy column & points */
body.dark .philosophy-section { background: transparent; }
body.dark .philosophy-header h2 { color: rgba(255,255,255,0.08); }
body.dark .header-decoration { background: rgba(255,255,255,0.06); }

/* Lead paragraph */
body.dark .lead-text { color: #e6eef6; }

/* Point items (titles and descriptions) */
body.dark .philosophy-points { /* keep layout; color adjust */ }
body.dark .point-item h4 { color: #e6eef6; }
body.dark .point-item p { color: var(--muted-color); }
body.dark .point-number { color: rgba(255,255,255,0.06); }

/* Process timeline */
body.dark .process-timeline { background: transparent; }
body.dark .section-subtitle { color: #e6eef6; }
body.dark .timeline-container { /* keep same layout */ }
body.dark .timeline-line { background: rgba(255,255,255,0.06); }
body.dark .timeline-dot {
  background: var(--panel);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}
body.dark .timeline-item:hover .timeline-dot { background: rgba(255,255,255,0.02); }
body.dark .timeline-content h4 { color: #e6eef6; }
body.dark .timeline-content p { color: var(--muted-color); }

/* Values grid */
body.dark .values-section { background: transparent; }
body.dark .values-header h2 { color: rgba(255,255,255,0.08); }
body.dark .black-square { background: rgba(255,255,255,0.10); }

/* Cards */
body.dark .value-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-color: rgba(255,255,255,0.06);
  color: #e6eef6;
}
body.dark .value-card.black {
  background: #0f1113;
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}
body.dark .value-icon { color: #e6eef6; }
body.dark .value-card h4 { color: #e6eef6; }

/* subtle hover contrast on cards */
body.dark .value-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(2,6,23,0.6); }

/* Small helpers so any muted text uses the same color */
body.dark .muted, body.dark .overlay-desc, body.dark .point-item p, body.dark .timeline-content p {
  color: var(--muted-color);
}

/* Portfolio overlays already handled elsewhere but ensure contrast */
body.dark .portfolio-overlay { background: linear-gradient(180deg, rgba(10,11,12,0) 40%, rgba(4,6,8,0.85) 100%); }
body.dark .overlay-title { color: #fff; }

/* Contact & form labels adjustment (so adjacent sections don't look off) */
body.dark .contact { background: transparent; }
body.dark .contact-info h2 { color: #e6eef6; }
body.dark .info-item p, body.dark .info-item h4 { color: var(--muted-color); }

/* small boundary fixes */
body.dark .black-line { background: rgba(255,255,255,0.06); }
body.dark .service-tag { border-color: rgba(255,255,255,0.06); }

/* Accessibility & transitions */
body.dark .fade-in, body.dark .portfolio-item, body.dark .value-card, body.dark .timeline-dot {
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Make sure icons in nav toggle show properly */
body.dark .theme-toggle .icon-sun { display: none; }
body.dark .theme-toggle .icon-moon { display: inline-block; }

/* final safety: ensure text contrast on very small items */
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark p, body.dark a {
  color: inherit; /* rely on scoped rules above */
}

/* ---------------- Dark-mode visual fixes: philosophy, values, black-box -> white borders, animations ---------------- */
body.dark {
  --dm-surface: rgba(255,255,255,0.03);
  --dm-surface-2: rgba(255,255,255,0.06);
  --dm-border: rgba(255,255,255,0.95);
  --dm-muted: rgba(255,255,255,0.70);
  --dm-weak: rgba(255,255,255,0.42);
}

/* PHILOSOPHY: make headings, lead, points pure white or strong white */
body.dark .philosophy-section,
body.dark .philosophy-section h2,
body.dark .philosophy-section h3,
body.dark .philosophy-section h4,
body.dark .philosophy-section .lead-text,
body.dark .philosophy-section .point-item h4,
body.dark .philosophy-section .point-item p,
body.dark .philosophy-section .point-number {
  color: #ffffff !important;
}

/* ensure author / small labels also readable */
body.dark .quote-author p,
body.dark .quote-block h3,
body.dark .quote-mark {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* CORE VALUES: make all text white and cards clearly visible */
body.dark .values-section,
body.dark .values-grid,
body.dark .value-card,
body.dark .value-card h4,
body.dark .value-card p,
body.dark .value-icon {
  color: #ffffff !important;
}

/* For cards that previously used a 'black' visual (value-card.black),
   show them with a light (nearly white) border and subtle light surface so they read on dark bg */
body.dark .value-card.black {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  border: 1px solid var(--dm-border) !important;
  color: #ffffff !important;
}

/* For normal value-cards (non-black) — make borders and icons light */
body.dark .value-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}
body.dark .value-card .value-icon { color: #ffffff !important; }

/* If any 'black box' elements exist (class names containing 'black' or explicit black backgrounds),
   replace black fills with subtle light outlines/fills so they don't disappear on dark bg. */
body.dark [class*="black"], body.dark .black, body.dark .black-box, body.dark .value-card.black {
  /* keep them readable — light border and subtle surface */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  border: 1px solid var(--dm-border) !important;
  color: #ffffff !important;
}

/* Header decoration squares (the small black squares) — invert to light on dark */
body.dark .black-square {
  background: #ffffff !important;
  opacity: 0.12;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Timeline / Process cards: stronger white text + dot border */
body.dark .timeline-container .timeline-card,
body.dark .timeline-item,
body.dark .timeline-content,
body.dark .timeline-card h4,
body.dark .timeline-card p {
  color: #ffffff !important;
}
body.dark .timeline-dot {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

/* Make the subtle divider lines more visible */
body.dark .black-line,
body.dark .contact-divider,
body.dark .hr,
body.dark .separator {
  background: rgba(255,255,255,0.06) !important;
}

/* Make any service-number / small-muted labels readable */
body.dark .service-number,
body.dark .service-small h4,
body.dark .service-small,
body.dark .muted {
  color: var(--dm-muted) !important;
}

/* Portfolio overlay title/desc ensure contrast (already mostly handled) */
body.dark .overlay-title, body.dark .overlay-desc {
  color: #ffffff !important;
}

/* ANIMATIONS / FLOATING OBJECTS: ensure shapes are white in dark mode so they show */
body.dark .floating-circle,
body.dark .floating-square,
body.dark .floating-line,
body.dark .hero-decoration,
body.dark .floating-objects > * {
  background-color: #ffffff !important;
  opacity: 0.08 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6) !important;
}

/* If shapes use stroke or SVG fills, ensure stroke/fill are white */
body.dark svg .stroke, body.dark svg .fill, body.dark svg path, body.dark svg circle {
  stroke: #ffffff !important;
  fill: #ffffff !important;
  opacity: 0.9 !important;
}

/* Buttons and CTA contrasts */
body.dark .cta-button,
body.dark .btn.primary,
body.dark .submit-btn {
  /* keep brand accent but ensure text is readable */
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Hover states: make hover highlights visible in dark */
body.dark .value-card:hover,
body.dark .portfolio-item:hover,
body.dark .service-large:hover,
body.dark .timeline-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(2,6,23,0.6);
}

/* Fine grained contrast fixes for any labels that still look washed out */
body.dark .small, body.dark small, body.dark .caption {
  color: var(--dm-weak) !important;
}

/* Make sure theme-toggle icons switched earlier still show correctly */
body.dark .theme-toggle .icon-moon { display: inline-block !important; }
body.dark .theme-toggle .icon-sun { display: none !important; }

/* force repaint transitions for elements that might have static backgrounds */
body.dark .philosophy-section,
body.dark .values-section,
body.dark .process-timeline,
body.dark .about-intro {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}   

/* ======= Dark-mode forced fixes: core values white & black elements -> white ======= */
body.dark {
  --dm-white: #ffffff;
  --dm-white-90: rgba(255,255,255,0.9);
  --dm-white-70: rgba(255,255,255,0.7);
  --dm-surface-weak: rgba(255,255,255,0.02);
}

/* --- CORE VALUES: force full white text and icons --- */
body.dark .values-section,
body.dark .values-grid,
body.dark .value-card,
body.dark .value-card h4,
body.dark .value-card p,
body.dark .value-icon {
  color: var(--dm-white) !important;
  fill: var(--dm-white) !important;
  stroke: var(--dm-white) !important;
}

/* Ensure icons inside cards are white */
body.dark .value-card .value-icon,
body.dark .value-card .value-icon * {
  color: var(--dm-white) !important;
  fill: var(--dm-white) !important;
  stroke: var(--dm-white) !important;
}

/* If a value card had a 'black' background visually, invert to a light border/surface */
body.dark .value-card.black,
body.dark .black,
body.dark .black-box,
body.dark [class*="black"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.95) !important;
  color: var(--dm-white) !important;
  box-shadow: 0 8px 28px rgba(2,6,23,0.6) !important;
}

/* For small "black squares" used as decorations, show subtle white */
body.dark .black-square,
body.dark .black-square * {
  background: var(--dm-white) !important;
  opacity: 0.12 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* --- ANIMATIONS & FLOATING SHAPES: force white so visible on dark bg --- */
body.dark .floating-objects * ,
body.dark .floating-circle,
body.dark .floating-square,
body.dark .floating-line,
body.dark .hero-decoration,
body.dark .animation-black,
body.dark .anim-black,
body.dark [style*="background: #000"],
body.dark [style*="background:black"] {
  background-color: var(--dm-white) !important;
  background: var(--dm-white) !important;
  border-color: rgba(255,255,255,0.95) !important;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6) !important;
  opacity: 0.12 !important;
}

/* SVG shapes: ensure stroke/fill are white */
body.dark svg path,
body.dark svg circle,
body.dark svg rect,
body.dark svg line,
body.dark svg polyline,
body.dark svg polygon,
body.dark svg g {
  stroke: var(--dm-white) !important;
  fill: var(--dm-white) !important;
  opacity: 0.95 !important;
}

/* --- Make sure any label/number inside value-card is white --- */
body.dark .value-card .value-icon,
body.dark .value-card h4,
body.dark .value-card p,
body.dark .value-card .value-description,
body.dark .value-card .value-number {
  color: var(--dm-white) !important;
}

/* --- Strengthen hover/active contrast for dark --- */
body.dark .value-card:hover,
body.dark .portfolio-item:hover,
body.dark .service-large:hover,
body.dark .timeline-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 30px 80px rgba(2,6,23,0.7) !important;
}

/* --- Safety: if any elements used explicit black text, force white in dark --- */
body.dark .black-text,
body.dark .text-black,
body.dark [class*="text-black"] {
  color: var(--dm-white) !important;
}

/* --- Ensure core headings in philosophy are white --- */
body.dark .philosophy-section h2,
body.dark .philosophy-section h3,
body.dark .philosophy-section h4,
body.dark .philosophy-section .lead-text,
body.dark .philosophy-section .point-item h4,
body.dark .philosophy-section .point-item p {
  color: var(--dm-white) !important;
}

/* --- Ensure animations that use 'stroke' show white glow --- */
body.dark [class*="stroke-black"], body.dark .stroke-black {
  stroke: var(--dm-white) !important;
  stroke-opacity: 0.95 !important;
}

/* --- Minor utility: increase z-index for floating shapes so visible --- */
body.dark .floating-objects,
body.dark .hero-decoration {
  z-index: 30 !important;
}

/* --- small text contrast helpers --- */
body.dark .muted, body.dark .small, body.dark .caption {
  color: rgba(255,255,255,0.78) !important;
}

/* =========================================================
   DARK MODE FINAL FIXES – CORE VALUE, BUTTONS, TEXT
   ========================================================= */

/* --- 1. CORE VALUES FULL WHITE --- */
body.dark .values-section,
body.dark .values-grid,
body.dark .value-card,
body.dark .value-card *,
body.dark .value-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* cards that are originally black */
body.dark .value-card.black {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    color: #ffffff !important;
}

/* normal value cards */
body.dark .value-card {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}


/* --- 2. ALL BUTTONS WHITE (BG + TEXT) IN DARK MODE --- */

/* General button styling */
body.dark button,
body.dark .cta-button,
body.dark .submit-btn,
body.dark .service-tag,
body.dark .btn,
body.dark a.button,
body.dark input[type="submit"] {
    background: #ffffff !important;
    color: #000 !important;
    border: 1px solid #ffffff !important;
}

/* Hover state – white border, transparent background */
body.dark button:hover,
body.dark .cta-button:hover,
body.dark .submit-btn:hover,
body.dark .service-tag:hover,
body.dark .btn:hover {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* --- 3. ALL TEXT INSIDE SECTIONS SHOULD BE WHITE --- */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark p,
body.dark li,
body.dark span,
body.dark a,
body.dark label,
body.dark .text,
body.dark .muted {
    color: #ffffff !important;
}

/* subtle text (muted becomes light grey instead of black) */
body.dark .muted,
body.dark small,
body.dark .caption {
    color: rgba(255,255,255,0.75) !important;
}


/* --- 4. FIX FOR ANY BLACK ELEMENTS (ANIMATION SHAPES, DECORATIONS) --- */

body.dark .floating-circle,
body.dark .floating-square,
body.dark .floating-line,
body.dark .hero-decoration,
body.dark [class*="black"] {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    opacity: 0.18 !important;
}

body.dark svg path,
body.dark svg circle,
body.dark svg line {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}



/* ===== Theme toggle: two-state sun/clouds vs dark/moon face ===== */
.theme-toggle { all: unset; display:inline-block; cursor:pointer; vertical-align:middle; position:relative; }
.theme-toggle:focus { outline: 3px solid rgba(49,130,206,0.18); border-radius:999px; }

/* track (pill) */
.theme-toggle .track {
  display:block;
  width:96px;
  height:48px;
  border-radius:48px;
  padding:6px;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  background:#f4f6f9;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(14,20,30,0.06);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* panels inside pill (left and right) */
.theme-toggle .panel { position:absolute; top:6px; bottom:6px; width:44px; display:flex; align-items:center; justify-content:center; }
.theme-toggle .panel-left { left:6px; }
.theme-toggle .panel-right { right:6px; }

/* SUN (light state) */
.theme-toggle .sun-left {
  width:32px; height:32px; border-radius:50%;
  background: #f5d44d;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.06);
  transition: transform .45s cubic-bezier(.2,.9,.3,1), opacity .35s;
}

/* small star dots near sun (for dark-state visual in left panel) */
.theme-toggle .stars { position:absolute; left:18px; top:12px; display:flex; gap:4px; opacity:0; transform:translateX(-6px); transition:all .45s; }
.theme-toggle .stars .dot { width:3px; height:3px; background:rgba(255,255,255,0.85); border-radius:50%; display:block; box-shadow:0 1px 2px rgba(0,0,0,0.2); }

/* CLOUDS SVG (right) */
.theme-toggle .clouds { width:86px; height:36px; display:block; transform:translateX(6px) scale(.95); opacity:1; transition:all .45s cubic-bezier(.2,.9,.3,1); filter: drop-shadow(0 8px 18px rgba(3,40,80,0.12)); }

/* MOON / FACE on right panel (visible in dark) */
.theme-toggle .moon-face {
  position:absolute; right:10px; top:8px;
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(180deg,#f2f4f8,#e6e9ef);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), 0 8px 18px rgba(0,0,0,0.12);
  display:flex; align-items:center; justify-content:center;
  transform:translateX(16px) scale(.85); opacity:0; transition:all .45s;
  border:6px solid rgba(255,255,255,0.95);
}
.theme-toggle .moon-face .eye { width:8px; height:8px; border-radius:50%; background:#9aa0a6; margin:0 4px; display:inline-block; }

/* Knob (ring) — slides left to right */
.theme-toggle .knob { position:absolute; top:0; left:0; width:56px; height:56px; border-radius:999px; pointer-events:none;
  transform:translateX(6px);
  transition: transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  box-shadow: 0 10px 28px rgba(10,20,30,0.10), inset 0 3px 0 rgba(255,255,255,0.8);
  border: 6px solid rgba(255,255,255,0.9);
  background: transparent;
  display:flex;align-items:center;justify-content:center;
}
.theme-toggle .knob-inner { width:36px;height:36px;border-radius:50%;background:transparent; }

/* DEFAULT (light) state visuals */
.theme-toggle:not(.active) .sun-left { transform: translateX(0) scale(1); opacity:1; }
.theme-toggle:not(.active) .stars { opacity:0; transform:translateX(-6px) }
.theme-toggle:not(.active) .clouds { opacity:1; transform:translateX(6px) scale(.98) }
.theme-toggle:not(.active) .moon-face { opacity:0; transform:translateX(16px) scale(.85) }
.theme-toggle:not(.active) .knob { transform:translateX(6px); border-color: rgba(255,255,255,0.95); }

/* ACTIVE (dark) state: add .active to button or body.dark will also set */
.theme-toggle.active .sun-left { transform: translateX(36px) scale(.82); opacity:.9; filter:brightness(.9); }
.theme-toggle.active .stars { opacity:1; transform:translateX(0); }
.theme-toggle.active .clouds { opacity:0.18; transform:translateX(-6px) scale(.9); filter: none; }
.theme-toggle.active .moon-face { opacity:1; transform:translateX(0) scale(1); border-color: rgba(0,0,0,0.18); background: linear-gradient(180deg,#e4e7ea,#dfe3e8); }
.theme-toggle.active .knob { transform:translateX(34px); box-shadow:0 10px 28px rgba(0,0,0,0.28); border-color: rgba(0,0,0,0.12); }

/* Dark integration: when body.dark present, keep darker track and show moon visual appearance */
body.dark .theme-toggle .track { background: linear-gradient(180deg,#0f1113,#0b0d0f); border-color: rgba(255,255,255,0.06); box-shadow:none; }
body.dark .theme-toggle .sun-left { box-shadow:0 6px 12px rgba(0,0,0,0.28); background:#ffd84d; }
body.dark .theme-toggle .knob { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }

/* ensure knob inner ring gets subtle shading in dark mode left and right */
body.dark .theme-toggle.active .knob { box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 -2px 6px rgba(0,0,0,0.16); }

/* accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .knob,
  .theme-toggle .sun-left,
  .theme-toggle .clouds,
  .theme-toggle .moon-face,
  .theme-toggle .stars { transition: none !important; }
}

/* ================== Polished Toggle Styles ================== */
/* Keeps small size and crisp shadows; supports .active and body.dark */

.theme-toggle{all:unset;display:inline-block;cursor:pointer;position:relative;vertical-align:middle}
.theme-toggle:focus{outline:3px solid rgba(49,130,206,0.18);border-radius:999px}

/* Track (pill) */
.theme-toggle .track{
  width:92px;height:46px;padding:6px;border-radius:46px;box-sizing:border-box;
  position:relative;display:block;overflow:hidden;
  background:#f6f8fb;border:1px solid rgba(13,21,28,0.06);
  box-shadow:0 10px 24px rgba(10,18,28,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Panels */
.theme-toggle .panel{position:absolute;top:6px;bottom:6px;width:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.theme-toggle .panel-left{left:6px}
.theme-toggle .panel-right{right:6px}

/* Sun */
.theme-toggle .sun{
  width:32px;height:32px;border-radius:50%;background:#f5d44d;
  box-shadow:0 8px 18px rgba(0,0,0,0.16), inset 0 -3px 0 rgba(0,0,0,0.06);
  transition:transform .42s cubic-bezier(.2,.9,.3,1),opacity .28s;
}

/* Stars (appear in dark active state on left) */
.theme-toggle .stars{position:absolute;left:12px;top:12px;display:flex;gap:5px;opacity:0;transform:translateX(-6px);transition:all .42s}
.theme-toggle .stars .dot{width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.18)}

/* Clouds (right panel) */
.theme-toggle .clouds{width:78px;height:36px;display:block;transform:translateX(6px) scale(.98);opacity:1;transition:all .42s;filter:drop-shadow(0 8px 18px rgba(3,40,80,0.12))}

/* Moon face (right) */
.theme-toggle .moon{position:absolute;right:10px;top:7px;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(180deg,#f0f3f6,#e4e8ec);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.6),0 10px 24px rgba(3,8,18,0.08);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(12px) scale(.9);transition:all .42s}
.theme-toggle .moon .eye{width:7px;height:7px;border-radius:50%;background:#99a2aa;margin:0 4px;display:inline-block}

/* Knob (ring that slides) */
.theme-toggle .knob{position:absolute;top:-2px;left:6px;width:56px;height:56px;border-radius:999px;pointer-events:none;
  transform:translateX(0);transition:transform .42s cubic-bezier(.2,.9,.3,1),box-shadow .28s,border-color .28s;
  border:6px solid rgba(255,255,255,0.92);background:transparent;box-shadow:0 10px 30px rgba(10,18,32,0.07)}
.theme-toggle .knob-core{width:36px;height:36px;border-radius:50%;background:transparent;display:block}

/* Light state (default) */
.theme-toggle:not(.active) .sun{transform:translateX(0) scale(1);opacity:1}
.theme-toggle:not(.active) .stars{opacity:0;transform:translateX(-6px)}
.theme-toggle:not(.active) .clouds{opacity:1;transform:translateX(6px) scale(0.98)}
.theme-toggle:not(.active) .moon{opacity:0;transform:translateX(12px) scale(.9)}
.theme-toggle:not(.active) .knob{transform:translateX(6px);border-color:rgba(255,255,255,0.92)}

/* Active / Dark state */
.theme-toggle.active .sun{transform:translateX(36px) scale(.86);opacity:.95;filter:brightness(.92)}
.theme-toggle.active .stars{opacity:1;transform:translateX(0)}
.theme-toggle.active .clouds{opacity:.18;transform:translateX(-8px) scale(.92);filter:none}
.theme-toggle.active .moon{opacity:1;transform:translateX(0) scale(1);border:6px solid rgba(0,0,0,0.12)}
.theme-toggle.active .knob{transform:translateX(34px);box-shadow:0 16px 40px rgba(0,0,0,0.28);border-color:rgba(0,0,0,0.12)}

/* Dark integration: when body.dark present ensure the track and colors adapt */
body.dark .theme-toggle .track{background:linear-gradient(180deg,#0f1113,#0b0d0f);border:1px solid rgba(255,255,255,0.06);box-shadow:none}
body.dark .theme-toggle .knob{border-color:rgba(255,255,255,0.06);background:rgba(255,255,255,0.02)}
body.dark .theme-toggle .sun{box-shadow:0 6px 12px rgba(0,0,0,0.3);background:#ffd84d}
body.dark .theme-toggle .stars .dot{background:rgba(255,255,255,0.95)}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .theme-toggle .knob,.theme-toggle .sun,.theme-toggle .clouds,.theme-toggle .moon,.theme-toggle .stars {transition:none!important}
}



/* Simple attractive theme toggle */
.simple-toggle { all:unset; display:inline-block; cursor:pointer; position:relative; }
.simple-toggle:focus { outline: 3px solid rgba(49,130,206,0.18); border-radius:999px; }

.simple-toggle .track{
  width:78px; height:38px; display:inline-flex; align-items:center; justify-content:space-between;
  padding:6px; box-sizing:border-box; border-radius:999px;
  background: #f4f7fb; border:1px solid rgba(13,21,28,0.06);
  box-shadow: 0 8px 20px rgba(10,18,28,0.06);
  transition: background .28s ease, border-color .28s ease;
}

.simple-toggle .icon { display:block; pointer-events:none; }

.simple-toggle .knob{
  position:absolute; top:3px; left:3px; width:32px; height:32px; border-radius:50%;
  background: #ffffff; box-shadow: 0 6px 18px rgba(10,18,28,0.12);
  display:grid; place-items:center; transform:translateX(0);
  transition: transform .32s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  border: 2px solid rgba(0,0,0,0.06);
}

/* Dark (active) state: apply .active on button or body.dark */
.simple-toggle.active .track,
body.dark .simple-toggle .track{
  background: linear-gradient(180deg,#0f1113,#0b0d0f);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.simple-toggle.active .knob,
body.dark .simple-toggle .knob {
  transform: translateX(40px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.36);
  border: 2px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

/* Adjust icon visibility slightly */
.simple-toggle .icon-sun { margin-left:8px; }
.simple-toggle .icon-moon { width:12px; height:12px; opacity:0.0; transition:opacity .28s; }
.simple-toggle.active .icon-sun { opacity:0.15; filter:brightness(.9); transition:opacity .28s; }
.simple-toggle.active .icon-moon { opacity:1; transition:opacity .28s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .simple-toggle .knob { transition: none !important; }
  .simple-toggle .icon-sun, .simple-toggle .icon-moon { transition: none !important; }
}


/* ===== Minimal label-only toggle (no knob) ===== */
.label-only-toggle { all:unset; display:inline-block; cursor:pointer; position:relative; vertical-align:middle; }
.label-only-toggle:focus { outline: 3px solid rgba(49,130,206,0.18); border-radius:999px; }

/* Track (pill) */
.label-only-toggle .track {
  width:180px;
  height:40px;
  border-radius:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  box-sizing:border-box;
  background:#f4f7fb;
  border:1px solid rgba(13,21,28,0.06);
  box-shadow:0 8px 20px rgba(10,18,28,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Labels */
.label-only-toggle .label {
  font-size:13px;
  font-weight:700;
  pointer-events:none;
  user-select:none;
  color:#6b7280; /* muted default */
  white-space:nowrap;
}

/* Left / Right alignment */
.label-only-toggle .label-left  { text-align:left; }
.label-only-toggle .label-right { text-align:right; }

/* Light state (default) — left label emphasized */
.label-only-toggle:not(.active) .label-left  { color:#111827; } /* dark text */
.label-only-toggle:not(.active) .label-right { color:#9ca3af; } /* muted */

/* Active (dark) state — pill becomes dark and right label emphasized white */
.label-only-toggle.active {
  background: linear-gradient(180deg,#0f1113,#0b0d0f);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
.label-only-toggle.active .label-left  { color:#9ca3af; } /* muted */
.label-only-toggle.active .label-right { color:#ffffff; } /* white */

/* Ensure correct look when site already in dark mode via body.dark */
body.dark .label-only-toggle { background: linear-gradient(180deg,#0f1113,#0b0d0f); border-color: rgba(255,255,255,0.06); box-shadow:none; }
body.dark .label-only-toggle:not(.active) .label-left { color:#ffffff; }
body.dark .label-only-toggle:not(.active) .label-right { color:#9ca3af; }
body.dark .label-only-toggle.active .label-left { color:#9ca3af; }
body.dark .label-only-toggle.active .label-right { color:#ffffff; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .label-only-toggle { transition: none !important; }
}



/* ----- DARK MODE FIX FOR LABEL TOGGLE ----- */

/* Pill background becomes BLACK */
body.dark .label-only-toggle .track,
.label-only-toggle.active .track {
    background: #000 !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
}

/* Text colors in dark mode */
body.dark .label-only-toggle .label-left {
    color: #9ca3af !important;   /* muted grey */
}

body.dark .label-only-toggle .label-right {
    color: #ffffff !important;   /* white */
}

/* When toggle is active (Dark Mode ON) */
.label-only-toggle.active .label-left {
    color: #9ca3af !important;
}

.label-only-toggle.active .label-right {
    color: #ffffff !important;
}






/* ===============================
   CONTACT SECTION LAYOUT
================================ */
.contact {
  padding: 120px 0;
  background: #fff;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;            /* vertical center */
  min-height: 480px;              /* same height both sides */
  gap: 60px;
}

/* Divider line */
.contact-divider {
  width: 1px;
  height: 70%;
  background: #000;
  opacity: 0.2;
  margin: auto;
}

/* ===============================
   LEFT CONNECT INFO
================================ */
.contact-info h2 {
  font-size: 42px;
  margin-bottom: 40px;
}

.info-item {
  margin-bottom: 28px;
}

.info-item h4 {
  font-size: 12px;
  letter-spacing: 2px;
  color: #777;
  margin-bottom: 6px;
}

.info-item p {
  font-size: 16px;
  color: #000;
}

/* ===============================
   RIGHT WHATSAPP CONTAINER
================================ */
.contact-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* WhatsApp Card */
.whatsapp-box {
  width: 100%;
  max-width: 360px;
  height: 360px;                  /* SAME VISUAL HEIGHT */
  background: linear-gradient(180deg, #121c21, #0b141a);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  color: #fff;
}

/* Header */
.wa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-header h4 {
  margin: 0;
  font-size: 15px;
}

.wa-header span {
  font-size: 12px;
  color: #aaa;
}

/* Chat Area */
.wa-chat {
  flex: 1;
  background: #091215;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Messages */
.wa-message {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 10px;
}

.wa-received {
  background: #1e2a30;
  align-self: flex-start;
}

.wa-sent {
  background: #25d366;
  color: #000;
  align-self: flex-end;
}

/* Button */
.wa-button {
  margin-top: 16px;
  text-align: center;
  background: #25d366;
  color: #000;
  font-weight: 600;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.wa-button:hover {
  transform: translateY(-1px);
}

/* ===============================
   RESPONSIVE (MOBILE)
================================ */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }

  .contact-divider {
    display: none;
  }

  .contact-info {
    text-align: center;
  }

  .contact-form {
    justify-content: center;
  }
}