/* --- Core Variables & Original Styles --- */
:root {
    --bg: #1a1d20;
    --bg-soft: #23272d;
    --text: #ffffff;
    --muted: #e4e6eb;
    --line: rgba(255, 255, 255, 0.08);
    --line-soft: rgba(255, 255, 255, 0.05);
    --accent: #ff5a1f;
    --accent-hover: #ff7544;
    --statue-rise-duration: 1.35s;
    --statue-rise-delay: 120ms;
    --statue-rise-distance: 190px;
    --statue-rise-ease: cubic-bezier(0.2, 0.85, 0.15, 1);
    
    /* Color Variables for Light Sections */
    --bg-light: #ffffff;
    --bg-offwhite: #f6f6f6;
    --text-dark: #111111;
    --text-gray: #666666;
    --border-light: #eaeaea;
    --border-dark: #333333;
}

body.anim-premium {
    --statue-rise-duration: 1.4s;
    --statue-rise-delay: 180ms;
    --statue-rise-distance: 230px;
    --statue-rise-ease: cubic-bezier(0.18, 0.88, 0.14, 1);
}

/* ── Home page: statue rises as curtain slides up (grid done ~1720ms, curtain clears ~2800ms) ── */
body.page-home.anim-premium {
    --statue-rise-delay: 2000ms;
}

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

img {
    max-width: 100%;
    height: auto;
}

html, body {
    width: 100%;
    min-height: 100%;
}



body {
    position: relative;
    overflow-y: auto; 
    overflow-x: hidden;
    font-family: "Space Grotesk", sans-serif;
    color: var(--text);
    background: #333333;
    /* background: #333333; */
}

.bg-layer { position: fixed; inset: 0; pointer-events: none; }

.bg-noise {
    z-index: 0; opacity: 0.22; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.06' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(rgba(255, 255, 255, 0.1) 0.65px, transparent 0.8px);
    background-size: 200px 200px, 3px 3px; filter: contrast(170%) brightness(72%); animation: grainJitter 0.26s steps(2, end) infinite;
}

.bg-noise::before {
    content: ""; position: absolute; inset: -40%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
    background-size: 180px 180px; opacity: 0.2; mix-blend-mode: overlay; animation: grainDrift 1.35s steps(3, end) infinite;
}

.bg-vignette { z-index: 1; background: radial-gradient(circle at center, transparent 44%, rgba(0, 0, 0, 0.34) 100%); }

.grid-line { position: fixed; z-index: 2; pointer-events: none; background: var(--line-soft); }
.grid-v1 { left: 32%; top: 0; width: 1px; height: 100%; }
.grid-v2 { left: 68%; top: 0; width: 1px; height: 100%; }
.grid-h1 { left: 0; top: 62%; width: 100%; height: 1px; background: var(--line); }
.grid-h2 { left: 0; top: 26%; width: 100%; height: 1px; background: var(--line-soft); }

/* background grid lines are always visible — curtain covers them while animating */

.watermark {
    position: fixed; top: 43%; left: 50%;
     transform: translate(-50%, -50%); z-index: 1; pointer-events: none;
    font-family: "Archivo Narrow", sans-serif; font-weight: 700; 
    font-size: min(24vw, 370px); letter-spacing: 0.06em;
     color: rgba(255, 255, 255, 0.035);
}

/* --- Header --- */
.site-header { position: relative; z-index: 7; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 28px clamp(20px, 3.5vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.logo { font-family: "Archivo Narrow", sans-serif; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav { width: min(72%, 980px); display: flex; justify-content: space-between; gap: 26px; }
.site-nav a { position: relative; display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-size: clamp(0.95rem, 1vw, 1.35rem); font-weight: 600; opacity: 0.88; transition: opacity 0.25s ease, color 0.25s ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); transform: scaleX(0); transform-origin: center; transition: transform 0.28s ease; }
.site-nav a:hover { opacity: 1; color: #ffffff; }
.site-nav a:hover::after { transform: scaleX(1); }

/* --- Hero Section --- */
.hero { position: relative; z-index: 4; min-height: 100vh; min-height: 100svh; }
.statue-wrap { position: absolute; inset: auto 0 -20vh 0; 
    display: flex; justify-content: center; z-index: 5; pointer-events: none; }
.statue-rise { opacity: 0;
     transform: translateY(var(--statue-rise-distance)) scale(0.985); }
.statue-wrap::before { content: ""; position: absolute; 
    inset: 7% 24% 10% 24%; 
    /* background:  */
    /* linear-gradient(104deg, rgba(255, 255, 255, 0) 28%,
     rgba(255, 255, 255, 0.13) 43%, rgba(255, 255, 255, 0) 58%);  */
     filter: blur(5px); mix-blend-mode: screen; opacity: 0; 
     transform: translateX(-28%) skewX(-10deg);
      animation: lightPass 8.8s ease-in-out infinite; z-index: 7; }
.statue { height: min(350vh, 1350px); width: auto; max-width: min(92vw, 1260px); mix-blend-mode: lighten; filter: drop-shadow(0 38px 52px rgba(0, 0, 0, 0.42)); }
.hero-content {
     position: absolute; 
     inset: 0; z-index: 6; 
     display: flex; 
     justify-content: space-between;
      align-items: flex-end;
       padding: 34px clamp(20px, 3.5vw, 56px) clamp(38px, 5vh, 60px); }
.left-col { max-width: 56%; }
.services-list { list-style: none; margin-bottom: clamp(26px, 4vh, 58px); }
.services-list li { color: #f2f4f6; font-size: clamp(1rem, 1.5vw, 2rem); font-weight: 600; line-height: 1.35; }
.main-heading { font-size: clamp(3rem, 7vw, 8.8rem); line-height: 0.92; letter-spacing: -0.04em; font-weight: 700; }
.main-heading span { display: block; }
.right-col { width: min(38%, 560px); margin-bottom: clamp(0px, 2vh, 20px); }
.desc { font-size: clamp(1.3rem, 2.1vw, 3.2rem); line-height: 1.08; margin-bottom: 28px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 168px; min-height: 56px; padding: 12px 34px; border-radius: 999px; text-decoration: none; color: #ffffff; font-size: clamp(1rem, 1.15vw, 1.4rem); font-weight: 700; background: var(--accent); transition: transform 0.28s ease, background-color 0.28s ease; }
.btn:hover { background: var(--accent-hover); transform: translateY(-3px); }

/* --- Animations --- */
.reveal-up { opacity: 0; transform: translateY(22px); }
body.loaded .reveal-up { animation: revealUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: var(--delay, 0ms); }
body.loaded .statue-rise { animation: statueRise var(--statue-rise-duration) var(--statue-rise-ease) forwards; animation-delay: var(--statue-rise-delay); }
body.loaded .watermark { animation: watermarkIn 1s ease forwards; }

@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes watermarkIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes statueRise { 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lightPass { 16% { opacity: 0.16; } 27%, 100% { opacity: 0; transform: translateX(34%) skewX(-10deg); } }
@keyframes grainJitter { 0%, 100% { background-position: 0 0; } 50% { background-position: 6px -7px; } }
@keyframes grainDrift { 50% { transform: translate(-1.2%, 0.8%); } }

/* --- Global Section Settings --- */
.container { max-width: 1300px; margin: 0 auto; width: 100%; }
.section-light { background-color: var(--bg-light); color: var(--text-dark); 
    position: relative; z-index: 10; padding: 100px 5%; }
.section-dark { background-color: transparent; color: var(--text);
     position: relative; z-index: 10; padding: 100px 5%; }
.section-title { font-size: clamp(3rem, 5vw, 5rem); line-height: 1;
     margin-bottom: 60px; letter-spacing: -0.02em; }
.text-center { text-align: center; }
.text-white { color: #ffffff; }

/* =========================================
   0-1 Trusted Clients Section (Page 2)
   ========================================= */
.trusted-section {
     background-color: var(--bg-offwhite); 
     color: var(--text-dark); 
     padding: 60px 5% 40px; 
     /* border-radius: 0px 0px 0 0; */
      position: relative; z-index: 10;
     }
.client-top-bar { display: flex; align-items: center; gap: 30px; margin-bottom: 100px; }
.client-label { font-size: 1.1rem; font-weight: 500; color: #555; white-space: nowrap; }
.client-line { flex-grow: 1; height: 1px; background-color: #dcdcdc; }
.client-logos { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.logo-text { font-size: 1.3rem; font-weight: 600; color: #222; letter-spacing: -0.02em; }
.trusted-main-content { display: flex; justify-content: flex-start; align-items: flex-start; gap: 5%; }
.huge-number-container { width: 35%; }
.massive-number { font-size: clamp(8rem, 18vw, 250px); font-weight: 700; line-height: 0.8; letter-spacing: -0.05em; color: #111; margin: 0; }
.trusted-text-content { width: 60%; padding-top: 10px; }
.sub-brand-title { font-family: "Archivo Narrow", sans-serif; font-size: 1.4rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 30px; color: #111; }
.trust-badge-row { margin-bottom: 40px; }
.avatar-group { display: flex; align-items: center; margin-bottom: 12px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--bg-offwhite); margin-left: -15px; background-color: #ccc; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 0.95rem; color: #fff; position: relative; }
.avatar:first-child { margin-left: 0; }
.count-avatar { background-color: #111; z-index: 5; }
.placeholder-img { background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%); }
.trust-rating p { font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; color: #444; }
.stars { color: #ff6b4a; font-size: 1.2rem; letter-spacing: 2px; }
.mission-statement { font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: #111; max-width: 750px; }

/* =========================================
   Bento Cards Section (Page 3 & 4)
   ========================================= */
.bento-section { background-color: var(--bg-offwhite); padding: 0 5% 40px; position: relative; z-index: 10;
     
 }
 .bento-section1 { background-color: var(--bg-offwhite); padding: 0 5% 40px; position: relative; z-index: 10;
     border-radius: 0 0 40px 40px;
 }
.bento-section:last-of-type { padding-bottom: 100px; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.bento-card { background-color: #ffffff; border-radius: 32px;
    margin-top: 2rem;
     padding: 40px; position: relative; overflow: hidden; display: flex; 
     flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.03); }
.testimonial-card h3 { font-size: clamp(1.5rem, 2vw, 1.8rem); font-weight: 600; line-height: 1.2; color: #111; margin-bottom: 20px; position: relative; z-index: 2; }
.testimonial-card p { font-size: 1.05rem; color: #555; line-height: 1.5; margin-bottom: 40px; position: relative; z-index: 2; }
.author-info { display: flex; align-items: center; gap: 15px; margin-top: auto; position: relative; z-index: 2; }
.author-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: #111; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"%3E%3Cpath d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/%3E%3C/svg%3E'); background-size: cover; background-position: center; }
.author-details h4 { font-size: 1.05rem; font-weight: 700; color: #111; margin-bottom: 2px; }
.author-details span { font-size: 0.9rem; color: #777; }
.bg-quote { position: absolute; bottom: -80px; right: 10px; font-size: 25rem; font-family: serif; font-weight: 900; color: #f7f7f7; line-height: 1; z-index: 1; pointer-events: none; user-select: none; }
.fact-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; }
.fact-header > span { font-size: 1.1rem; font-weight: 600; color: #111; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; background-color: #f6f6f6; border: none; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.2s; }
.icon-btn:hover { background-color: #eaeaea; }
.fact-body { margin-top: 60px; }
.fact-body-centered { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; margin-top: 20px;}
.huge-stat { font-size: clamp(5rem, 8vw, 8rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: #111; margin-bottom: 15px; }
.huge-stat span { font-size: clamp(3rem, 4vw, 4rem); }
.fact-card p { font-size: 1.1rem; color: #555; line-height: 1.4; max-width: 90%; }
.case-study-card { padding: 0; background-color: #d1d1d1; background-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25"%3E%3Crect width="100%25" height="100%25" fill="%23b8a69a"/%3E%3C/svg%3E'); background-size: cover; background-position: center; justify-content: flex-end; }
.case-study-content { padding: 20px; position: relative; z-index: 2; }
.case-study-content h3 { font-size: clamp(1.4rem, 2vw, 1.6rem); font-weight: 600; color: #ffffff; line-height: 1.3; margin-bottom: 15px; }
.case-study-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; }
.case-study-link:hover { color: var(--accent-hover); }
.process-wide-card { grid-column: span 2; display: flex; flex-direction: row; gap: 40px; padding: 50px; }
.process-text-area { flex: 1; display: flex; flex-direction: column; }
.process-text-area h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 600; margin-bottom: 20px; color: #111; line-height: 1.2; letter-spacing: -0.02em; }
.process-text-area p { 
    color: #555; line-height: 1.5; font-size: 1rem; max-width: 100%; }
.process-link { margin-top: auto; color: #111; text-decoration: none; font-size: 1.1rem; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.process-timeline-area { flex: 1; display: flex; flex-direction: column; }
.timeline-header h4 { font-size: 1.1rem; font-weight: 600; color: #111; margin-bottom: 4px;}
.timeline-header span { font-size: 0.95rem; color: #888; }
.timeline-chart-container { margin-top: 30px; position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; }
.timeline-grid-overlay { position: absolute; inset: 0; display: flex; border-bottom: 1px solid #eaeaea; z-index: 1; }
.grid-col { flex: 1; border-left: 1px solid #eaeaea; position: relative; }
.grid-col:last-child { flex: 0; }
.grid-label { position: absolute; bottom: -28px; left: -15px; font-size: 0.85rem; color: #888; white-space: nowrap; }
.timeline-bars-wrapper { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.t-bar { height: 45px; border-radius: 99px; display: flex; align-items: center; padding: 0 20px; font-weight: 600; font-size: 0.95rem; color: #111; }
.discovery-bar { width: 35%; background-color: #ffccb3; margin-left: 0%; }
.concept-bar { width: 32%; background-color: #ff9671; margin-left: 35%; }
.execution-bar { width: 35%; background-color: var(--accent); margin-left: 65%; color: #fff;}

/* =========================================
   Latest Projects Section (Page 5)
   ========================================= */
.new-projects-section {
     background-color: var(--bg-light); padding: 100px 5%; position: relative; z-index: 10;border-radius: 40px 40px 0 0; }
.projects-header-centered { text-align: center; max-width: 600px; margin: 0 auto 80px; }
.projects-massive-title { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: #111; margin-bottom: 20px; }
.projects-subtitle { font-size: 1.15rem; color: #555; line-height: 1.5; }
.new-projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.new-project-card { background-color: #f4f4f4; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease; }
.new-project-card:hover { transform: translateY(-5px); }
.project-img-wrapper { width: 100%; aspect-ratio: 16/11; overflow: hidden; }
.project-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.placeholder-img-1 { background-image: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }
.placeholder-img-2 { background-image: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); }
.placeholder-img-3 { background-image: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.placeholder-img-4 { background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); }
.placeholder-img-5 { background-image: linear-gradient(135deg, #e2e2e2 0%, #999999 100%); }
.placeholder-img-6 { background-image: linear-gradient(135deg, #d4b895 0%, #8c6d46 100%); }
.project-bottom { padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.project-text h3 { font-size: clamp(1.5rem, 2vw, 1.8rem); font-weight: 600; color: #111; margin-bottom: 8px; }
.project-text p { font-size: 1.05rem; color: #666; line-height: 1.4; max-width: 90%; }
.project-arrow-btn { width: 50px; height: 50px; min-width: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s, background-color 0.2s; border: none; }
.project-arrow-btn:hover { transform: scale(1.05); }
.btn-black { background-color: #111; }
.btn-light { background-color: rgba(0,0,0,0.04); }
.btn-light:hover { background-color: rgba(0,0,0,0.08); }
.btn-grey { background-color: #999; }
.btn-grey:hover { background-color: #777; }
.projects-footer-bar { display: flex; align-items: center; gap: 20px; margin-top: 60px; padding-top: 20px; }
.plus-icon { color: #aaa; font-size: 1.5rem; font-weight: 300; line-height: 1; }
.projects-line { flex-grow: 1; height: 1px; background-color: #eaeaea; }
.more-projects-link { display: inline-flex; align-items: center; gap: 8px; color: #111; font-weight: 600; text-decoration: none; font-size: 1.1rem; transition: color 0.2s; }
.more-projects-link:hover { color: var(--accent); }

/* =========================================
   Detailed Services Section (Page 6)
   ========================================= */
.new-services-section { background-color: var(--bg); padding: 80px 5%; position: relative; z-index: 10; }
.services-intro { display: flex; justify-content: space-between; margin-bottom: 60px; }
.services-label { width: 35%; font-size: 2rem; font-weight: 800; color: #fff; }
.services-intro-text { width: 60%; }
.services-intro-text h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.2; font-weight: 500;
     margin-bottom: 30px; letter-spacing: -0.02em; }
.services-detailed-list { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.service-detailed-item { display: flex; justify-content: space-between; align-items: center; padding: 60px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.service-massive-title {
     font-size: clamp(3rem, 7vw, 3rem); font-weight: 600;
      letter-spacing: -0.03em; line-height: 1; margin: 0; width: 55%; color: #fff; }
.service-tags-grid { display: flex; flex-wrap: wrap; gap: 15px 30px; width: 35%; justify-content: flex-start; }
.s-tag { display: flex; align-items: center; gap: 4px; font-size: 0.90rem; font-weight: 500; 
    color: #fff;  }
.crosshair-icon { opacity: 0.7; }

/* =========================================
   Clients Testimonial Section (Page 7)
   ========================================= */
.clients-testimonial-section { background-color: var(--bg-light); padding: 100px 5%; position: relative; z-index: 10; }
.clients-test-grid { display: grid; grid-template-columns: 1fr 1.3fr 1.5fr; gap: 50px; background-color: #ffffff; border: 1px solid var(--border-light); border-radius: 32px; padding: 60px; box-shadow: 0 10px 40px rgba(0,0,0,0.02); }
.clients-test-left { display: flex; flex-direction: column; }
.clients-massive-title { font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #111; margin-bottom: 20px; }
.clients-test-left p { font-size: 1.1rem; color: #666; line-height: 1.5; max-width: 90%; }
.clients-test-middle { display: flex; flex-direction: column; align-items: center; }
.main-portrait { width: 100%; aspect-ratio: 3/4; border-radius: 20px; background-color: #e2e2e2; background-image: linear-gradient(to bottom, #d5d4d0, #b8b8b8); margin-bottom: 20px; }
.thumbnail-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.thumb { width: 45px; height: 45px; border-radius: 12px; background-color: #ccc; cursor: pointer; transition: transform 0.2s; }
.thumb:hover { transform: scale(1.05); }
.thumb.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.thumb-1 { background-image: linear-gradient(to bottom, #cfd9df, #e2ebf0); }
.thumb-2 { background-image: linear-gradient(to bottom, #a1c4fd, #c2e9fb); }
.thumb-3 { background-image: linear-gradient(to bottom, #84fab0, #8fd3f4); }
.thumb-4 { background-image: linear-gradient(to bottom, #fccb90, #d57eeb); }
.thumb-5 { background-image: linear-gradient(to bottom, #e0c3fc, #8ec5fc); }
.thumb-6 { background-image: linear-gradient(to bottom, #ff9a9e, #fecfef); }
.clients-test-right { display: flex; flex-direction: column; }
.quote-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.company-logo { font-size: 1.2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; }
.company-logo strong { font-weight: 800; }
.quote-stars { color: #ff6b4a; font-size: 1.2rem; letter-spacing: 2px; }
.quote-text { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.15; color: #111; margin-bottom: 30px; letter-spacing: -0.02em; }
.quote-subtext { font-size: 1.1rem; color: #555; line-height: 1.5; margin-bottom: 50px; max-width: 95%; }
.quote-author { margin-top: auto; }
.quote-author strong { display: block; font-size: 1.1rem; color: #111; margin-bottom: 4px; font-weight: 600; }
.quote-author span { font-size: 0.95rem; color: #777; }

/* =========================================
   FAQ Section (Page 8)
   ========================================= */
.faq-section { background-color: #ffffff; padding: 100px 5%; position: relative; z-index: 10; 
border-radius: 40px 40px 40px 40px ;}
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; }
.faq-left { display: flex; flex-direction: column; align-items: flex-start; }
.faq-massive-title { font-size: clamp(4rem, 10vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #111; margin-bottom: 25px; }
.faq-subtitle { font-size: 1.15rem; color: #555; line-height: 1.5; max-width: 90%; margin-bottom: 40px; }
.faq-link { color: #111; font-weight: 600; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: color 0.2s; }
.faq-link:hover { color: var(--accent); }
.faq-right { display: flex; flex-direction: column; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 1px solid #eaeaea; }
.faq-question { font-size: 1.15rem; font-weight: 600; color: #111; max-width: 80%; }
.faq-number { font-family: "Archivo Narrow", sans-serif; font-size: 1.8rem; font-weight: 700; color: #dcdcdc; }

/* =========================================
   Process Intro Section (Page 9)
   ========================================= */
.process-intro-section { background-color: #ffffff; padding: 150px 5%; position: relative; z-index: 10; border-top: 1px solid #eaeaea; }
.process-intro-container { display: flex; align-items: flex-start; max-width: 1300px; margin: 0 auto; }
.process-intro-left { width: 30%; }
.process-intro-left .small-label { font-size: 1.1rem; font-weight: 700; color: #111; letter-spacing: 0.05em; }
.process-intro-center { width: 70%; max-width: 650px; }
.process-intro-title { font-size: clamp(5rem, 12vw, 10rem); font-weight: 700; letter-spacing: -0.04em; color: #111; line-height: 1; margin-bottom: 30px; }
.process-intro-subtitle { font-size: 1.3rem; color: #555; line-height: 1.5; max-width: 550px; }

/* =========================================
   NEW Stats & Facts Section (Page 10 - NO DIV)
   ========================================= */
.stats-hero-section {
    position: relative;
    padding: 120px 0 0 0;
    color: #ffffff;
    z-index: 10;
    overflow: hidden;
    background-color: #131518;
}

.stats-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('images/bg-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: grayscale(100%) brightness(0.35) contrast(0.9) saturate(0.25);
    transform: scale(1.03);
    opacity: 0.9;
}

.stats-hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.06), transparent 42%),
        linear-gradient(rgba(10, 12, 14, 0.5), rgba(10, 12, 14, 0.7));
}

.stats-content-wrapper {
    position: relative;
    z-index: 2;
}

.stats-header {
    text-align: center;
    margin-bottom: 100px;
}

.stats-massive-title {
    font-size: clamp(4rem, 8vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 25px;
}

.stats-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.stats-detailed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.s-col {
    padding: 60px 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
}

.s-col-last {
    border-right: none;
}

.s-number {
    font-family: "Archivo Narrow", sans-serif;
    font-size: clamp(4rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 25px;
}

.s-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}

.s-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Scrolling Marquee */
.trendify-marquee-container {
    position: relative;
    z-index: 2;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
}

.trendify-marquee {
    display: inline-block;
    animation: scrollLeft 30s linear infinite;
}

.trendify-marquee span {
    font-family: "Archivo Narrow", sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    padding-right: 20px;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   Footer Section
   ========================================= */
.site-footer-bottom {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 38%),
        linear-gradient(180deg, #111315 0%, #090a0c 100%);
    color: #ffffff;
    padding: 64px 5% 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
.site-footer-bottom::before {
    content: "";
    position: absolute;
    inset: auto 5% 0 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}
.footer-mini {
    position: relative;
    z-index: 1;
}
.footer-mini-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-mini-brand {
    max-width: 520px;
}
.footer-mini-logo {
    font-family: "Archivo Narrow", sans-serif;
    font-size: 2rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.footer-mini-brand p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
    max-width: 38ch;
}
.footer-mini-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px 28px;
}
.footer-mini-links a {
    color: rgba(255, 255, 255, 0.76);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, transform 0.2s ease;
}
.footer-mini-links a:hover {
    color: #ffffff;
    transform: translateY(-1px);
}
.footer-mini-bottom {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 18px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .bento-grid { gap: 22px; }
    .bento-card { padding: 32px; border-radius: 26px; }
    .process-wide-card { padding: 36px; }
    .clients-test-grid { padding: 40px; gap: 32px; }
    .new-projects-grid { gap: 28px; }
    .project-bottom { padding: 26px 30px; }
    .stats-header { margin-bottom: 72px; }
    .s-col { padding: 44px 28px; }
}

@media (max-width: 1024px) {
    .new-projects-section,
    .new-services-section,
    .clients-testimonial-section,
    .faq-section,
    .process-intro-section {
        padding-top: 82px;
        padding-bottom: 82px;
    }

    .client-logos { gap: 20px; justify-content: flex-start; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .case-study-card { grid-column: span 2; min-height: 400px; }
    .process-wide-card { flex-direction: column; gap: 50px; }
    .clients-test-grid { grid-template-columns: 1fr 1fr; }
    .clients-test-left { grid-column: span 2; margin-bottom: 20px; }
    .faq-grid { gap: 40px; }
    
    .stats-detailed-grid { grid-template-columns: repeat(2, 1fr); }
    .s-col:nth-child(2) { border-right: none; }
    .s-col:nth-child(3), .s-col:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.15); }
}

/* ── Laptop fix: wide screen but short viewport (1024–1440 × 600–820px) ──
   On 1080p desktop only ~54px of statue is above viewport (fine).
   On 768px-tall laptop ~429px is hidden — head gets clipped.
   Shrink statue & reduce bottom-overhang so the full figure stays visible. */
@media (min-width: 921px) and (max-height: 900px) {
    .statue      { height: min(195vh, 900px); max-width: min(80vw, 940px); }
    .statue-wrap { inset: auto 0 -10vh 0; }
}

@media (max-width: 920px) {
    .site-header { flex-direction: column; gap: 16px; align-items: flex-start; padding-inline: 20px; }
    .site-nav { width: 100%; flex-wrap: wrap; gap: 12px 22px; justify-content: flex-start; }
    .hero { min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 0; }
    .statue-wrap { position: absolute; inset: auto 0 -15vh 0; margin: 0; display: flex; justify-content: center; width: 100%; }
    .statue { height: min(100vh, 860px); max-width: min(88vw, 900px); width: auto; }
    .hero-content {
        position: absolute; inset: 0; z-index: 6;
        display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
        gap: 24px;
        padding: 20px clamp(16px, 4vw, 32px) clamp(28px, 4vh, 48px);
    }
    .left-col { max-width: 100%; width: 100%; }
    .right-col { width: 100%; margin-bottom: 0; }
    .watermark { top: 35%; font-size: min(30vw, 240px); }
    
    .trusted-main-content { flex-direction: column; }
    .huge-number-container { width: 100%; margin-bottom: 40px; }
    .trusted-text-content { width: 100%; }
    .client-top-bar { flex-direction: column; align-items: flex-start; gap: 15px; }
    .client-line { width: 100%; }
    .logo-text { font-size: 1.1rem; }
    .mission-statement { max-width: 100%; }
    
    .contact-grid { grid-template-columns: 1fr; }
    
    .new-projects-grid { grid-template-columns: 1fr; }
    .projects-header-centered { margin-bottom: 50px; }
    
    .services-intro { flex-direction: column; gap: 20px; }
    .services-label { width: 100%; }
    .services-intro-text { width: 100%; }
    .service-detailed-item { flex-direction: column; align-items: flex-start; gap: 30px; }
    .service-massive-title { width: 100%; font-size: 3rem; }
    .service-tags-grid { width: 100%; justify-content: flex-start; grid-template-columns: repeat(2, 1fr); }
    
    .faq-grid { grid-template-columns: 1fr; }
    .faq-left { margin-bottom: 30px; }

    .process-intro-container { flex-direction: column; }
    .process-intro-left { width: 100%; margin-bottom: 30px; }
    .process-intro-center { width: 100%; }

    .footer-mini-top { flex-direction: column; }
    .footer-mini-links { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .site-header { padding-top: 20px; padding-bottom: 20px; }
    .logo { font-size: 1.6rem; }
    .site-nav a { font-size: 1rem; }

    /* Reduce heavy vertical padding on all content sections */
    .new-projects-section,
    .trusted-section,
    .clients-testimonial-section,
    .faq-section,
    .process-intro-section { padding-top: 64px; padding-bottom: 64px; }
    .new-services-section { padding-top: 60px; padding-bottom: 60px; }
    .process-intro-section { padding-top: 80px; padding-bottom: 80px; }
    .stats-hero-section { padding-top: 72px; }

    .bento-grid { grid-template-columns: 1fr; }
    .process-wide-card { grid-column: span 1; padding: 30px; }
    .case-study-card { grid-column: span 1; min-height: 400px; }
    .bg-quote { font-size: 18rem; bottom: -60px; }
    .bento-card { border-radius: 24px; }
    .fact-card p { max-width: 100%; }
    
    .discovery-bar { width: 50%; }
    .concept-bar { width: 50%; margin-left: 20%; }
    .execution-bar { width: 50%; margin-left: 50%; }
    .t-bar { font-size: 0.86rem; padding: 0 14px; }
    .grid-label { font-size: 0.75rem; }
    
    .projects-footer-bar { flex-direction: column; align-items: stretch; text-align: right; }
    .projects-line { margin: 10px 0; }
    .more-projects-link { justify-content: flex-end; }
    
    .clients-test-grid { grid-template-columns: 1fr; padding: 30px; }
    .clients-test-left { grid-column: span 1; }
    .main-portrait { max-width: 400px; margin: 0 auto 20px; }
    .quote-header { margin-top: 30px; }
    .quote-text { font-size: clamp(1.6rem, 7vw, 2rem); }

    .stats-hero-section { padding-top: 90px; }
    .stats-hero-section::before { background-attachment: scroll; }
    .stats-header { margin-bottom: 54px; }
    .trendify-marquee { animation-duration: 22s; }
    .trendify-marquee span { font-size: clamp(2.2rem, 10vw, 3rem); }
    
    .stats-detailed-grid { grid-template-columns: 1fr; }
    .s-col { border-right: none; padding: 40px 20px; }
    .s-col:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
    .s-col:nth-child(3), .s-col:nth-child(4) { border-top: none; }

    .hero-content { gap: 24px; padding: 18px 20px 40px; justify-content: flex-end; align-items: flex-start; }
    .left-col { width: 100%; max-width: 100%; }
    .right-col { width: 100%; max-width: 100%; }
    .statue { height: min(105vh, 860px); max-width: 100%; }
    .statue-wrap { inset: auto 0 -10vh 0; }
}

@media (max-width: 560px) {
    .hero {
        display: flex;
        flex-direction: column;
        min-height: unset;
        padding-bottom: 0;
        overflow: visible;
    }

    .hero-content {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 20px 20px;
        width: 100%;
        max-width: 100%;
        z-index: 6;
    }

    .statue-wrap {
        position: relative;
        inset: auto;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: center;
        pointer-events: none;
        overflow: hidden;
    }

    .statue {
        height: auto;
        max-height: 55vh;
        width: auto;
        max-width: 100%;
        mix-blend-mode: lighten;
        filter: drop-shadow(0 20px 32px rgba(0,0,0,0.5));
    }

    .left-col { max-width: 100%; width: 100%; }
    .right-col { width: 100%; }

    .main-heading { font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: 0.95; }
    .services-list { margin-bottom: 16px; }
    .services-list li { font-size: clamp(0.82rem, 2.8vw, 1rem); line-height: 1.5; }
    .desc { font-size: clamp(0.9rem, 3vw, 1.1rem); line-height: 1.4; margin-bottom: 16px; }
    .btn { min-height: 44px; min-width: 130px; padding: 10px 24px; font-size: 0.9rem; }
    .massive-number { font-size: clamp(6rem, 25vw, 150px); }
    .mission-statement { font-size: 1.6rem; }
    
    .projects-massive-title { font-size: clamp(3rem, 15vw, 4.5rem); }
    .project-bottom { padding: 25px; flex-direction: column; align-items: flex-start; }
    .project-arrow-btn { align-self: flex-end; margin-top: -30px; }
    .project-text p { max-width: 100%; }
    
    .service-tags-grid { grid-template-columns: 1fr; }
    .service-massive-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }
    .clients-massive-title { font-size: clamp(3rem, 15vw, 4rem); }
    .clients-test-grid { padding: 24px; }
    
    .faq-massive-title { font-size: clamp(3.5rem, 15vw, 4.5rem); }
    .faq-item { padding: 20px 0; }
    .faq-question { font-size: 1.05rem; }
    .faq-question { max-width: 88%; }

    .process-intro-section { padding: 100px 5%; }
    .process-intro-title { font-size: clamp(3.5rem, 15vw, 4.5rem); }

    .stats-massive-title { font-size: clamp(3rem, 16vw, 4.4rem); }
    .stats-subtitle { font-size: 1.02rem; }
    .stats-subtitle br { display: none; }
    .s-title { font-size: 1.15rem; }
    .s-desc { font-size: 0.96rem; }

    .site-footer-bottom { padding: 52px 5% 24px; }
    .footer-mini-bottom { flex-direction: column; }
}

@media (max-width: 420px) {
    .site-header,
    .hero-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .trusted-section,
    .bento-section,
    .new-projects-section,
    .new-services-section,
    .clients-testimonial-section,
    .faq-section,
    .process-intro-section,
    .site-footer-bottom {
        padding-left: 16px;
        padding-right: 16px;

    }

    .service-detailed-item {
        padding: 40px 0;
    }

    .bento-card,
    .process-wide-card,
    .clients-test-grid {
        padding: 22px;
    }

    .faq-item {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }

    .faq-number {
        font-size: 1.3rem;
    }

    .footer-mini-logo {
        font-size: 1.6rem;
    }
}

/* ── HOME PAGE: extra small screen fixes ── */
@media (max-width: 480px) {
    .statue { height: min(116vh, 820px); }
    /* Force full-width stacked columns — no cramped side-by-side split */
    .left-col { max-width: 100% !important; width: 100% !important; }
    .right-col { width: 100% !important; }
    .main-heading { font-size: clamp(2rem, 8.5vw, 3rem); line-height: 0.95; }
    .services-list li { font-size: clamp(0.82rem, 3vw, 1rem); line-height: 1.4; }
    .desc { font-size: clamp(0.9rem, 3vw, 1.1rem); line-height: 1.35; margin-bottom: 14px; }
    .btn { min-height: 42px; min-width: 120px; padding: 10px 22px; font-size: 0.88rem; }
    .new-projects-section { padding: 60px 4%; }
    .projects-massive-title { font-size: clamp(2.8rem, 14vw, 4rem); }
    .bento-section, .bento-section1 { padding: 0 4% 30px; }
}
@media (max-width: 360px) {
    .statue { height: min(116vh, 740px); }
    .main-heading { font-size: clamp(1.25rem, 7vw, 2rem); }
    .services-list { display: none; }
    .desc { font-size: 0.65rem; margin-bottom: 8px; }
    .btn { min-width: 76px; padding: 6px 10px; font-size: 0.68rem; }

    .statue-wrap { inset: auto 0 -8vh 0; }
}

/* ── Scroll reveal ── */
.sr {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
                transform 0.75s cubic-bezier(0.16,1,0.3,1);
    transition-delay: var(--sr-delay, 0ms);
}
.sr.sr-left  { transform: translateX(-36px); }
.sr.sr-scale { transform: scale(0.94); }
.sr.in {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ── Shared footer z-index fix (bg-noise/bg-vignette are z-index 0/1) ── */
#site-footer { position: relative; z-index: 10; }