/*
Tooplate 2141 Minimal White
https://www.tooplate.com/view/2141-minimal-white
*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700&display=swap');
/* 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: hidden;
user-select: auto;
font-size: 10px; /* Smaller base font */
        }
/* Decorative Elements */
.black-line {
width: 100%;
height: 1px;
background: #000;
margin: 30px 0;
        }
.black-block {
width: 15px;
height: 15px;
background: #000;
position: absolute;
        }
.vertical-line {
width: 1px;
height: 50px;
background: #000;
margin: 20px 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: 80vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 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: 60px;
height: 60px;
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: 50px;
height: 50px;
        }
.floating-circle:nth-child(2) {
right: 15%;
bottom: -100px;
animation-delay: 8s;
width: 80px;
height: 80px;
        }
.floating-square {
position: absolute;
width: 25px;
height: 25px;
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: 150px;
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(36px, 8vw, 64px); /* Smaller font */
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: 14px; /* Smaller font */
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: 10px; /* Smaller font */
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: 100px 20px 80px; /* Increased top padding for gap after menu bar */
background: #fff;
position: relative;
font-family: 'Montserrat', sans-serif !important; /* Montserrat for all text in about page */
font-size: 10px; /* Smaller base font */
        }
.about p {
font-size: 10px; /* Smaller paragraphs */
margin-bottom: 10px; /* Reduced spacing below paragraphs */
        }
.about h3 {
font-size: 14px; /* Smaller headings */
margin-bottom: 10px; /* Reduced spacing below headings */
        }
.about .section-subtitle {
font-size: 16px; /* Smaller "Our Process" heading */
margin-bottom: 20px; /* Reduced gap below "Our Process" */
        }
.about .process-timeline {
margin-bottom: 30px; /* Reduced gap after "Our Process" section */
        }
.about .values-section {
margin-top: 30px; /* Reduced gap above "Core Values" */
        }
.about .values-header {
margin-bottom: 20px; /* Reduced gap below "Core Values" heading */
        }
.container {
max-width: 1200px;
margin: 0 auto;
        }
/* Quote Block */
.about-intro {
margin-bottom: 20px; /* Reduced gap */
        }
.quote-block {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
        }
.quote-mark {
font-size: 60px; /* Smaller font */
line-height: 1;
font-weight: 100;
position: absolute;
top: -30px;
left: -40px;
opacity: 0.1;
        }
.quote-block h3 {
font-size: 20px; /* Smaller font */
font-weight: 300;
line-height: 1.4;
letter-spacing: -1px;
margin-bottom: 15px; /* Reduced gap */
        }
.quote-author {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
        }
.author-line {
width: 40px;
height: 1px;
background: #000;
        }
.quote-author p {
font-size: 10px; /* Smaller font */
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
        }
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2px;
background: #000;
padding: 2px;
margin-bottom: 30px; /* Reduced gap */
        }
.stat-item {
background: #fff;
padding: 30px 15px; /* Reduced padding */
text-align: center;
position: relative;
        }
.stat-number {
font-size: 30px; /* Smaller font */
font-weight: 100;
letter-spacing: -2px;
margin-bottom: 8px;
        }
.stat-label {
font-size: 9px; /* Smaller font */
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
        }
.stat-decoration {
position: absolute;
top: 15px;
right: 15px;
width: 15px;
height: 15px;
border: 1px solid #000;
transform: rotate(45deg);
        }
/* Philosophy Section */
.philosophy-section {
display: grid;
grid-template-columns: 250px 1fr;
gap: 30px; /* Reduced gap */
margin-bottom: 30px; /* Reduced gap */
align-items: start;
        }
.philosophy-header {
position: relative;
        }
.philosophy-header h2 {
font-size: 40px; /* Smaller font */
font-weight: 100;
letter-spacing: -2px;
writing-mode: vertical-rl;
text-orientation: mixed;
        }
.header-decoration {
position: absolute;
bottom: 0;
right: -15px;
width: 30px;
height: 30px;
background: #000;
        }
.philosophy-content {
padding-top: 15px; /* Reduced padding */
        }
.lead-text {
font-size: 16px; /* Smaller font */
line-height: 1.6;
margin-bottom: 20px; /* Reduced gap */
font-weight: 300;
        }
.philosophy-points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px; /* Reduced gap */
        }
.point-item {
position: relative;
padding-left: 15px;
        }
.point-number {
position: absolute;
left: 0;
top: 0;
font-size: 7px; /* Smaller font */
font-weight: 700;
        }
.point-item h4 {
font-size: 12px; /* Smaller font */
font-weight: 500;
margin-bottom: 6px;
letter-spacing: 0.5px;
        }
.point-item p {
font-size: 10px; /* Smaller font */
color: #666;
line-height: 1.6;
        }
/* Process Timeline */
.process-timeline {
margin-bottom: 30px; /* Reduced gap after "Our Process" */
        }
.section-subtitle {
font-size: 30px; /* Smaller font */
font-weight: 100;
text-align: center;
margin-bottom: 20px; /* Reduced gap below heading */
letter-spacing: -1px;
        }
.timeline-container {
position: relative;
display: flex;
justify-content: space-between;
max-width: 900px;
margin: 0 auto;
        }
.timeline-line {
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 2px;
background: #000;
z-index: 0;
        }
.timeline-item {
position: relative;
text-align: center;
flex: 1;
        }
.timeline-dot {
width: 30px;
height: 30px;
background: #fff;
border: 2px solid #000;
margin: 0 auto 10px; /* Reduced margin */
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: 14px; /* Smaller font */
font-weight: 500;
margin-bottom: 6px;
letter-spacing: 0.5px;
        }
.timeline-content p {
font-size: 10px; /* Smaller font */
color: #666;
        }
/* Values Grid */
.values-section {
text-align: center;
        }
.values-header {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
        }
.values-header h2 {
font-size: 30px; /* Smaller font */
font-weight: 100;
letter-spacing: -1px;
        }
.black-square {
width: 12px;
height: 12px;
background: #000;
        }
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
        }
.value-card {
padding: 30px 15px; /* Reduced padding */
border: 1px solid #000;
transition: all 0.3s ease;
        }
.value-card.black {
background: #000;
color: #fff;
        }
.value-icon {
font-size: 30px; /* Smaller font */
font-weight: 100;
margin-bottom: 15px;
        }
.value-card h4 {
font-size: 10px; /* Smaller font */
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
        }
.value-card:hover {
transform: translateY(-5px);
        }
.split-layout {
display: grid;
grid-template-columns: 1fr 2px 1fr;
gap: 40px;
align-items: center;
margin-top: 50px;
        }
.split-divider {
width: 2px;
height: 200px;
background: #000;
justify-self: center;
        }
.split-left {
text-align: right;
padding-right: 20px;
        }
.split-left h2 {
font-size: 40px; /* Smaller font */
font-weight: 100;
letter-spacing: -2px;
margin-bottom: 20px;
position: relative;
        }
.split-left h2::before {
content: '';
position: absolute;
left: -30px;
top: 50%;
width: 20px;
height: 20px;
background: #000;
transform: translateY(-50%);
        }
.split-right {
padding-left: 20px;
        }
.split-right p {
font-size: 14px; /* Smaller font */
line-height: 2;
margin-bottom: 20px;
        }
.accent-box {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000;
font-size: 9px; /* Smaller font */
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
        }
.accent-box::after {
content: '';
position: absolute;
bottom: -4px;
right: -4px;
width: 100%;
height: 100%;
background: #000;
z-index: -1;
        }
/* Section 3: Services - Asymmetric Grid */
.services {
padding: 80px 20px;
background: #fafafa;
position: relative;
        }
.services::before,
.services::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 2px solid #000;
        }
.services::before {
top: 60px;
left: 5%;
animation: rotateSlowly 20s linear infinite;
        }
.services::after {
bottom: 60px;
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: 60px;
position: relative;
        }
.services-header h2 {
font-size: 40px; /* Smaller font */
font-weight: 100;
letter-spacing: -1px;
margin-bottom: 15px;
position: relative;
display: inline-block;
        }
.services-header h2::before,
.services-header h2::after {
content: '';
position: absolute;
width: 25px;
height: 1px;
background: #000;
top: 50%;
transform: translateY(-50%);
        }
.services-header h2::before {
left: -40px;
        }
.services-header h2::after {
right: -40px;
        }
.services-header::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 1px;
background: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
        }
.asymmetric-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-bottom: 30px;
position: relative;
        }
.asymmetric-grid.reverse {
grid-template-columns: 1fr 2fr;
        }
.service-large * {
position: relative;
z-index: 1;
        }
.service-large {
background: #fff;
padding: 40px;
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: 30px;
right: 30px;
width: 12px;
height: 12px;
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: 30px;
        }
.asymmetric-grid.reverse .service-large:hover {
transform: translateX(-10px);
border-right-width: 8px;
        }
.service-small {
background: #000;
color: #fff;
padding: 30px;
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: 150px;
height: 150px;
        }
.service-number {
font-size: 60px; /* Smaller font */
font-weight: 100;
line-height: 1;
margin-bottom: 15px;
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: 24px; /* Smaller font */
font-weight: 300;
margin-bottom: 15px;
letter-spacing: -1px;
display: inline-block;
        }
.service-large h3::after {
content: '';
position: absolute;
bottom: -8px;
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: 12px; /* Smaller font */
margin-bottom: 20px;
user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
        }
.service-tag {
display: inline-block;
padding: 6px 12px;
border: 1px solid #000;
font-size: 8px; /* Smaller font */
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 15px;
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: 10px; /* Smaller font */
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: 80px 20px;
background: #fff;
position: relative;
        }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 60px;
max-width: 1000px;
margin: 60px auto 0;
        }
.contact-divider {
background: #000;
width: 1px;
height: 100%;
        }
.contact-info {
padding-right: 30px;
        }
.contact-info h2 {
font-size: 30px; /* Smaller font */
font-weight: 100;
margin-bottom: 30px;
position: relative;
        }
.contact-info h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 30px;
height: 2px;
background: #000;
        }
.info-item {
margin-bottom: 20px;
padding-left: 25px;
position: relative;
        }
.info-item::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 8px;
height: 8px;
background: #000;
transform: rotate(45deg);
        }
.info-item h4 {
font-size: 9px; /* Smaller font */
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
font-weight: 500;
        }
.info-item p {
font-size: 14px; /* Smaller font */
font-weight: 300;
        }
.contact-form {
padding-left: 30px;
        }
.form-group {
margin-bottom: 30px;
position: relative;
        }
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 0;
border: none;
border-bottom: 2px solid #000;
background: transparent;
font-size: 12px; /* Smaller font */
font-family: inherit;
transition: all 0.3s ease;
        }
.form-group input:focus,
.form-group textarea:focus {
outline: none;
padding-left: 15px;
        }
.form-group label {
position: absolute;
left: 0;
top: 12px;
font-size: 10px; /* Smaller font */
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: -15px;
font-size: 8px; /* Smaller font */
font-weight: 500;
        }
.submit-btn {
padding: 15px 50px;
background: #000;
color: #fff;
border: 2px solid #000;
font-size: 9px; /* Smaller font */
letter-spacing: 2px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
position: relative;
        }
.submit-btn::before {
content: '';
position: absolute;
bottom: -6px;
left: -6px;
width: 25px;
height: 25px;
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: 10px; /* Smaller font */
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: 16px; /* Smaller font */
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: 60px; /* Smaller font */
left: -30px;
top: -20px;
            }
.quote-block h3 {
font-size: 20px; /* Smaller font */
            }
.stats-grid {
grid-template-columns: repeat(2, 1fr);
            }
.philosophy-section {
grid-template-columns: 1fr;
gap: 20px; /* Reduced gap */
            }
.philosophy-header h2 {
writing-mode: horizontal-tb;
font-size: 36px; /* Smaller font */
            }
.header-decoration {
position: static;
width: 60px;
height: 2px;
margin-top: 10px; /* Reduced gap */
            }
.philosophy-points {
grid-template-columns: 1fr;
gap: 20px; /* Reduced gap */
            }
.timeline-container {
flex-direction: column;
gap: 10px; /* Reduced gap */
            }
.timeline-line {
width: 2px;
height: 100%;
top: 0;
left: 15px;
right: auto;
            }
.timeline-item {
display: flex;
align-items: center;
gap: 10px; /* Reduced gap */
text-align: left;
            }
.timeline-dot {
margin: 0;
flex-shrink: 0;
            }
.values-grid {
grid-template-columns: repeat(2, 1fr);
            }
.values-header h2 {
font-size: 24px; /* Smaller font */
            }
.split-layout {
grid-template-columns: 1fr;
gap: 20px; /* Reduced gap */
            }
.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: 30px; /* Reduced gap */
            }
.contact-divider {
width: 100px;
height: 2px;
margin: 0 auto;
            }
.contact-info,
.contact-form {
padding: 0;
            }
.hero h1 {
font-size: 36px; /* Smaller font */
            }
.services-header h2,
.split-left h2 {
font-size: 28px; /* Smaller font */
            }
.services-header h2::before,
.services-header h2::after {
display: none;
            }
.service-large {
padding: 30px; /* Reduced padding */
            }
.service-large::after {
top: 20px;
right: 20px;
            }
.service-tag {
padding: 6px 12px;
font-size: 9px; /* Smaller font */
            }
.service-number {
font-size: 48px; /* Smaller font */
            }
.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;
            }
        }