:root {
  --bg-color: #F4F2EE;
  --bg-darker: #EBE8E3;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAFAF8;
  --text-main: #222221;
  --text-muted: #666460;
  --accent: #B26A4D;
  --accent-light: #C98B72;
  --accent-hover: #965239;
  --gradient-main: #222221;
  --border: rgba(34, 34, 33, 0.1);
  --glass: rgba(244, 242, 238, 0.85);
  --shadow-glow: 0 4px 15px rgba(0, 0, 0, 0.05);
  
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  
  --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-dramatic: cubic-bezier(0.22, 1, 0.36, 1);
  
  --nav-fade: rgba(244, 242, 238, 0.95);
}

:root.dark-mode {
  --bg-color: #121212;
  --bg-darker: #1A1A1A;
  --bg-card: #222222;
  --bg-card-hover: #2A2A2A;
  --text-main: #F4F2EE;
  --text-muted: #A0A09F;
  --border: rgba(255, 255, 255, 0.1);
  --glass: rgba(18, 18, 18, 0.85);
  --shadow-glow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --gradient-main: #F4F2EE;
  --nav-fade: rgba(18, 18, 18, 0.95);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background-color: var(--bg-color); }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* iOS Safe Area Cover Bars
   These permanently paint the correct background over the notch/home indicator zones.
   They sit above all page content (z-index 1999) but below the mobile menu (2000).
   CSS variables update instantly on theme change, making stale safe-area colors impossible. */
.ios-safe-top {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background-color: var(--bg-color);
  z-index: 1999;
  pointer-events: none;
  /* No transition — must be instant to beat iOS compositing cache */
}
.ios-safe-bottom {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background-color: var(--bg-color);
  z-index: 1999;
  pointer-events: none;
  /* No transition — must be instant to beat iOS compositing cache */
}
@media (max-width: 900px) {
  .ios-safe-top,
  .ios-safe-bottom {
    display: block;
  }
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.gradient-text {
  color: var(--text-main);
}
.dot { color: var(--accent); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.relative { position: relative; z-index: 10; }
.bg-card { background-color: var(--bg-card); }
.bg-darker { background-color: var(--bg-darker); }

/* Header */
header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
}
.nav-fade-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 130px;
  background: linear-gradient(to bottom, var(--nav-fade) 15%, transparent 100%);
  /* backdrop-filter only activates when scrolled — at scroll=0 it creates a GPU compositing
     layer that conflicts with the WebGL canvas during overscroll bounce. The gradient fade
     shows immediately; the blur only kicks in once content scrolls under the nav. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  z-index: -2; pointer-events: none;
  transition: background 0.3s var(--ease-smooth);
}
header.scrolled .nav-fade-bg {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-container {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 70px;
}
.nav-container .logo { justify-self: start; }
.nav-container .nav-links { justify-self: center; }
.nav-container .header-actions { justify-self: end; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; text-decoration: none; color: var(--text-main); letter-spacing: -0.02em; display: flex; align-items: center;}
.logo-s { color: var(--text-main); }
.logo-rest { display: inline-block; overflow: hidden; white-space: nowrap; opacity: 1; }
.logo-dot { color: var(--text-main); }
.nav-links { display: flex; gap: 2.5rem; }
.nav-links a { text-decoration: none; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--text-main); }

/* Buttons */
.btn {
  display: inline-block; padding: 0.85rem 2rem; border-radius: 6px;
  font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: all 0.3s var(--ease-smooth); border: none; text-align: center;
}
/* Nav bar "Get a Quote" — smaller and slimmer than page-level CTAs */
.nav-container .btn {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  border-radius: 6px;
}
/* Desktop only: noticeably slimmer */
@media (min-width: 901px) {
  .nav-container .btn {
    padding: 0.42rem 1rem;
    font-size: 0.85rem;
  }
}
.btn-primary { background: var(--text-main); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-1px); background: #3b3b3a; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
:root.dark-mode .btn-primary { background: #F4F2EE; color: #121212; }
:root.dark-mode .btn-primary:hover { background: #FFFFFF; box-shadow: 0 6px 20px rgba(255,255,255,0.1); }
.btn-secondary { background-color: transparent; color: var(--text-main); border: 1px solid var(--border); }
.btn-secondary:hover { background-color: rgba(34,34,33,0.05); transform: translateY(-1px); }
:root.dark-mode .btn-secondary:hover { background-color: rgba(255,255,255,0.05); }

/* Theme Toggle Button */
.theme-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}
.theme-btn:hover {
  background: rgba(34,34,33,0.05);
  transform: translateY(-1px);
}
:root.dark-mode .theme-btn:hover {
  background: rgba(255,255,255,0.05);
}
.theme-btn svg { width: 17px; height: 17px; transition: transform 0.5s var(--ease-spring); }
.theme-btn .moon-icon { display: none; }
:root.dark-mode .theme-btn .sun-icon { display: none; }
:root.dark-mode .theme-btn .moon-icon { display: block; }

/* Base Sections */
section { padding: 5rem 0; position: relative; }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.section-header p { color: var(--text-muted); font-size: 1.1rem; }

/* ---------------------
   NEW LAYOUT: Hero Typography -> Media Block -> Social Proof 
   --------------------- */

.hero-typography {
  min-height: 80vh; /* Pushed significantly lower */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 15vh; padding-bottom: 2rem;
  text-align: center;
}

/* Elegant Colored Background Grid */
.hero-typography.relative { position: relative; }

/* Elegant 3D Gravity Bubble Grid */
.hero-typography.relative { position: relative; }

/* jQuery Ripples specific requirement */
.ripple-bg {
    /* Ripples.js strictly requires a background-image to refract */
    background-image: linear-gradient(to bottom, var(--bg-color), var(--bg-darker));
    background-size: cover;
    background-position: center;
}

/* Elegant Scroll Indicator */
.scroll-indicator-wrapper {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  margin-top: 5rem;
  opacity: 0.6;
}
.scroll-mouse {
  width: 24px; height: 38px;
  border: 1.5px solid var(--text-main);
  border-radius: 20px;
  position: relative;
  display: flex; justify-content: center;
}
.scroll-wheel {
  width: 4px; height: 6px;
  background: var(--text-main);
  border-radius: 4px;
  margin-top: 6px;
  animation: scrollWheelAnim 2s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite;
}
.scroll-text {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500;
}
@keyframes scrollWheelAnim {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: 0; }
  51% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.hero-media-section {
  padding: 0 2rem 6rem;
  display: flex; flex-direction: column; align-items: center;
}
.hero-media-block {
  width: 100%; max-width: 1400px; /* Expanded universally larger */
  height: 80vh; min-height: 600px; /* Much taller presence */
  border-radius: 32px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem 2rem;
  box-shadow: 0 40px 80px rgba(0,0,0,0.15); 
  position: relative;
  /* Hardware scaled perfectly by JS */
  transform-origin: center center;
}
.hero-video-bg {
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  object-fit: cover;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}
.media-content-overlay {
  position: relative; z-index: 10;
  width: 100%; max-width: 1100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  
  /* Start invisible, perfectly revealed by JS hardware lerp */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  will-change: opacity, transform;
}
.hero-btns-overlay {
  display: flex; gap: 1.2rem; justify-content: center;
  background: transparent;
}

.hero-content {
  text-align: center; width: 100%;
  margin: 0 auto;
  position: relative; z-index: 2;
}
.hero-typography h1 { font-size: clamp(3.4rem, 8vw, 7.2rem); line-height: 1.05; margin-bottom: 2rem; letter-spacing: -0.03em; }
.hero-typography p { color: var(--text-muted); font-size: clamp(1.1rem, 1.5vw, 1.35rem); margin: 0 auto 3rem; max-width: 600px; }

/* Social Proof overlays media block */
.media-social-proof { 
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; 
  width: 100%; padding: 2.5rem; 
  background: var(--glass);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.social-proof-item h4 { font-size: 1.25rem; color: var(--text-main); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.social-proof-item p { color: var(--text-main); opacity: 0.8; font-size: 0.95rem; line-height: 1.5; }
.border-left { border-left: 1px solid var(--border); }

/* The Approach */
.approach { padding: 8rem 0; }
.approach-container {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 6rem; align-items: flex-start;
}
.approach-sticky {
  position: sticky; top: 15vh;
}
.approach-sticky .section-header {
  text-align: left; margin: 0; max-width: none;
}
.approach-sticky h2 {
  font-size: 3.5rem; line-height: 1.1; letter-spacing: -0.03em;
}
.approach-content {
  display: flex; flex-direction: column; gap: 7rem; padding-top: 2rem; padding-bottom: 4rem;
}
.approach-block.reveal-up {
  transition-delay: 0s !important; /* Strips the built-in stagger delay resolving the slow third-load bug entirely */
}
.approach-block {
  max-width: 600px; /* Consistently less horizontal across all desktop sizes */
}
.approach-block h3 {
  font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-main);
}
.approach-block p {
  font-size: 1.15rem; line-height: 1.7; color: var(--text-muted);
}

/* 3D Visual Graphic Overlay */
.approach-visual {
  position: relative; width: 100%; max-width: 480px; height: 350px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}
.approach-visual img {
  width: 100%; height: 120%; object-fit: cover;
}

/* Services */
.services {
  padding: 12rem 0;
  background-color: var(--bg-darker); /* Distinct contrast separating it vividly from Approach */
  margin-top: 12rem; /* Massive structural gap completely separating it from the sticky scroll physics */
}
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.service-card {
  background: var(--bg-card); border-radius: 16px; padding: 2.5rem;
  border: 1px solid var(--border); backdrop-filter: none; box-shadow: var(--shadow-glow);
  transition: all 0.5s var(--ease-smooth); position: relative; overflow: hidden;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: rgba(34,34,33,0.3); background: var(--bg-card-hover); }
.service-icon { margin-bottom: 1.5rem; display: inline-block; }
.icon-gradient stroke { stroke: url(#grad1); }
.service-card h3 { font-size: 1.8rem; margin-bottom: 1rem; }
.service-card p { color: var(--text-muted); font-size: 1.1rem; }

/* Portfolio */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.portfolio-item {
  background: var(--bg-card); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); transition: all 0.5s var(--ease-smooth); position: relative; box-shadow: var(--shadow-glow);
}
.portfolio-item.reveal-fade { transition: all 0.5s var(--ease-smooth), opacity 1s var(--ease-smooth); }
.portfolio-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: rgba(34,34,33,0.3); background: var(--bg-card-hover); }
.portfolio-image { width: 100%; height: 320px; overflow: hidden; position: relative; }
.portfolio-image img { width: 100%; height: 120%; object-fit: cover; transition: transform 0.5s var(--ease-smooth); }
.portfolio-info { padding: 2rem; }
.portfolio-info h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }

/* Comparison Table */
.table-container { 
  background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--shadow-glow);
}
.compare-table { width: 100%; border-collapse: collapse; text-align: center; }
.compare-table th { padding: 1.5rem 1rem; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.compare-table td { padding: 1.5rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 1rem; transition: background-color 0.4s var(--ease-smooth); }
.compare-table .highlight-col { background: rgba(178, 106, 77, 0.04); color: var(--text-main); font-weight: 600; transition: background-color 0.4s var(--ease-smooth); }
.compare-table tbody tr:hover td { background-color: rgba(34, 34, 33, 0.03); }
.compare-table tbody tr:hover .highlight-col { background-color: rgba(178, 106, 77, 0.09); }
.check-icon, .cross-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
}
.check-icon.blue { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.check-icon.green { background: rgba(52, 211, 153, 0.1); color: #34d399; }
.cross-icon.red { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.table-footer { padding: 1.5rem; text-align: left; font-size: 0.95rem; color: var(--text-muted); background: rgba(34, 34, 33, 0.02); transition: background-color 0.4s var(--ease-smooth); }
.compare-table tfoot tr:hover .table-footer { background-color: rgba(34, 34, 33, 0.04); }

/* Dark Mode Table Overrides */
:root.dark-mode .compare-table td { border-bottom-color: rgba(255, 255, 255, 0.05); }
:root.dark-mode .compare-table .highlight-col { background-color: rgba(178, 106, 77, 0.08); }
:root.dark-mode .compare-table tbody tr:hover td { background-color: rgba(255, 255, 255, 0.03); }
:root.dark-mode .compare-table tbody tr:hover .highlight-col { background-color: rgba(178, 106, 77, 0.15); }
:root.dark-mode .table-footer { background: rgba(255, 255, 255, 0.02); }
:root.dark-mode .compare-table tfoot tr:hover .table-footer { background-color: rgba(255, 255, 255, 0.04); }

/* Testimonials */
.testimonials { position: relative; overflow: hidden; padding: 12rem 0; }
.testimonial-bg {
  position: absolute; top: -10%; left: -10%; right: -10%; bottom: -10%;
  background: url('assets/elegant_minimal_bg.png') no-repeat center center/cover;
  opacity: 0.4; z-index: 1; mix-blend-mode: normal; filter: none;
}
.testimonial-marquee-wrapper {
  overflow: hidden;
  padding: 1rem 0;
  margin: 0 -2rem; /* Soft bleed padding */
  /* Ultra-premium Edge Fading effect so it never cuts sharply */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonial-track { 
  display: flex; 
  overflow-x: auto;
  gap: 3rem; 
  padding: 0 2rem 2rem 2rem; /* Inner padding holds layout bounds */
  scroll-behavior: auto; /* MUST be auto for immediate loop snapping JS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 420px; /* Highly optimized card width */
  background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 2.5rem; border-radius: 20px; position: relative; box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}
:root.dark-mode .testimonial-card {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
/* Ensure dark mode section overrides apply if testimonials are ever dark */
.bg-dark-section .testimonial-card {
  background: rgba(40, 40, 40, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.quote-mark { position: absolute; top: 1rem; left: 1.5rem; font-size: 5rem; font-family: Georgia, serif; color: rgba(0,0,0,0.03); line-height: 1; }
:root.dark-mode .quote-mark { color: rgba(255, 255, 255, 0.04); }
.quote { font-size: 1.1rem; font-style: italic; margin-bottom: 1.5rem; position: relative; z-index: 2; line-height: 1.6; }
.client-info { display: flex; align-items: center; gap: 1rem; }
.avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--text-main); color: var(--bg-color); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; }
.client-info h4 { margin: 0; font-size: 1.1rem; }
.client-info span { color: var(--text-muted); font-size: 0.9rem; }

/* Contact CTA */
.contact { padding-bottom: 10rem; }
.contact-card {
  background: var(--bg-card-hover); border-radius: 24px; padding: 4rem;
  border: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  position: relative; box-shadow: var(--shadow-glow);
}
.gradient-border::before {
  content: ""; position: absolute; inset: -2px; border-radius: 34px; z-index: -1;
  background: var(--gradient-main); opacity: 0.5; filter: blur(10px);
}
.contact-content h2 { font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.1; }
.contact-content p { color: var(--text-muted); font-size: 1.2rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.input-group input, .input-group textarea {
  width: 100%; padding: 1rem 1.2rem; border-radius: 8px;
  border: 1px solid rgba(34,34,33,0.15); background: var(--bg-card);
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-main);
  transition: all 0.3s ease;
}
.input-group input:focus, .input-group textarea:focus {
  outline: none; border-color: var(--accent-light); background: #FFF; box-shadow: 0 0 0 3px rgba(178, 106, 77, 0.1);
}
:root.dark-mode .input-group input,
:root.dark-mode .input-group textarea {
  border-color: rgba(255, 255, 255, 0.15);
}
:root.dark-mode .input-group input:focus, 
:root.dark-mode .input-group textarea:focus {
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 3px rgba(178, 106, 77, 0.2);
}

/* Footer */
footer { padding: 4rem 0; background-color: var(--bg-darker); border-top: 1px solid var(--border); text-align: center; }
.footer-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 1rem; }
footer p { color: var(--text-muted); font-size: 0.95rem; }
footer .reveal-up { opacity: 1 !important; transform: translateY(0) !important; } /* Guarantees footer loads without relying on intersection thresholds on massive monitors */

/* Responsive */
/* Responsive & Scale Overrides */
/* Tablet Adjustments */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-typography h1 { font-size: clamp(3rem, 6vw, 5rem); }
  .hero-media-block { height: 60vh; min-height: 500px; }
  .media-social-proof { gap: 1rem; padding: 1.5rem; }
  .social-proof-item h4 { font-size: 1.1rem; }
  .social-proof-item p { font-size: 0.85rem; }
  .approach-container { gap: 3rem; }
  .contact-card { grid-template-columns: 1fr; padding: 3rem; }
}

@media (max-width: 900px) {
  /* Hero Typography Mobile Overrides */
  .hero-typography {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 120px 2rem 4rem 2rem !important;
    /* Sleek gradient background for mobile instead of water */
    background: radial-gradient(circle at top left, var(--bg-card), var(--bg-color)) !important;
  }
  :root.dark-mode .hero-typography {
    background: radial-gradient(circle at top left, #2a2a2a, #121212) !important;
  }
  
  /* Restrict hero width dynamically so text wraps cleanly */
  .hero-typography h1 { font-size: clamp(2.5rem, 10vw, 4rem); letter-spacing: -0.05em; margin-bottom: 1rem; }
  .hero-subtitle { 
    font-size: 1.15rem; 
    line-height: 1.7; 
    max-width: 100%; 
    padding: 0; 
    margin: 1.5rem auto 0 auto !important; 
    color: var(--text-muted);
  }
  
  .desktop-only { display: none !important; }
  
  /* Disable complicated staggered span animations on mobile so it flows normally */
  .hero-typography p .reveal-mask,
  .hero-typography p .hero-mask,
  .hero-typography p span {
    display: inline !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    margin: 0 !important; padding: 0 !important;
  }
  
  .hero-content { align-items: center; text-align: center; }
  .scroll-indicator-wrapper { display: none !important; } /* Fully remove scroll animation on mobile */

  /* Mobile Media Box Re-flow */
  .hero-media-section { padding: 0 1rem 4rem; }
  .hero-media-block {
    height: auto !important;
    min-height: auto !important;
    padding: 3rem 1.5rem;
    border-radius: 24px;
    transform: scale(1) !important; /* Block JS scaling */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    background: var(--bg-card);
    border: 1px solid var(--border);
  }
  :root.dark-mode .hero-media-block {
    background: #222222;
  }
  .hero-video-bg { display: none; } /* Hide heavy canvas entirely */
  .media-content-overlay {
    opacity: 1 !important;
    transform: none !important;
  }
  .media-social-proof {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1rem;
    background: transparent;
    border: none;
    backdrop-filter: none;
  }
  .hero-btns-overlay { flex-direction: column; gap: 1rem; width: 100%; }
  .hero-btns-overlay .btn { width: 100%; }

  /* Fix general text overlaps & grid issues */
  .approach-container { grid-template-columns: 1fr; gap: 4rem; }
  .approach-sticky { position: relative; top: 0; }
  .approach-sticky h2 { font-size: 2.5rem; }
  .approach-content { gap: 3rem; padding-bottom: 0; }
  .approach-block { max-width: 100%; }
  
  /* Kill sequence layout delays on vertical mobile scrolls */
  .portfolio-item, .service-card, .approach-block { transition-delay: 0s !important; }
  
  .social-proof-grid, .services-grid, .portfolio-grid, .contact-card { grid-template-columns: 1fr; }
  .services { margin-top: 0 !important; padding: 2rem 0 !important; background: transparent !important; } /* Strips the desktop block formatting entirely for seamless mobile flow */
  
  /* Mobile Testimonial adjustments */
  .testimonial-marquee-wrapper {
    margin: 0 -1rem; /* Safely bleed slightly on mobile */
    padding: 0;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }
  .testimonial-track {
    gap: 1.5rem;
    padding: 0 1rem 2rem 1rem;
  }
  .testimonial-card {
    flex: 0 0 300px; /* Robust size for seamless loop math */
    padding: 1.8rem 1.5rem;
  }
  .quote { font-size: 1rem; }
  
  .border-left { border-left: none; border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 0;}
  .contact-card { padding: 3.5rem 1.5rem; grid-template-columns: 1fr; gap: 2rem; }
  .contact-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .contact-content h2 { font-size: 2.5rem; line-height: 1.1; margin-bottom: 1rem; margin-left: auto; margin-right: auto; }
  .contact-content p { max-width: 95%; margin: 0 auto; font-size: 1.15rem; }
  .input-group input, .input-group textarea { padding: 1.2rem; border-radius: 14px; font-size: 1.05rem; }
  .contact-form .btn-primary { padding: 1.2rem; border-radius: 14px; font-size: 1.15rem; font-weight: 600; }
  .nav-links { display: none; }
  
  .table-container { display: none !important; }
  
  .display-mobile-only { display: block !important; }
  .compare-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  }
  :root.dark-mode .compare-card { background: #222222; }
  .compare-card h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
  .compare-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
  .compare-card li { 
    display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; color: var(--text-main); font-weight: 600; 
    background: var(--bg-darker); padding: 1rem 1.2rem; border-radius: 12px;
  }
  .compare-card li::before {
    content: ''; display: inline-block; width: 20px; height: 20px; min-width: 20px;
    background: rgba(99, 102, 241, 0.2); border-radius: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23818cf8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>');
    background-size: 12px; background-position: center; background-repeat: no-repeat;
  }
  
  /* Buttons */
  .btn { padding: 1rem 2rem; }
  
  .mobile-offcanvas {
    /* inset:0 pins all four edges to the fixed viewport — covers the full physical
       screen behind both the Dynamic Island AND the Safari URL bar, regardless of
       what 100vh / 100dvh / -webkit-fill-available resolves to on this device. */
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg-color);
    display: flex; flex-direction: column;
    padding: 1.5rem;
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease-spring), visibility 0s linear 0.5s;
  }
  .mobile-offcanvas.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s var(--ease-spring), visibility 0s linear 0s;
  }
  
  .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
  .mobile-menu-close, .mobile-menu-btn { background: none; border: none; color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mobile-menu-btn { display: flex !important; margin-left: 0.5rem; } /* Override display-mobile-only block natively */
  
  .mobile-nav-links { display: flex; flex-direction: column; gap: 2rem; padding: 2rem 1rem; flex-grow: 1; }
  .mobile-nav-links a { text-decoration: none; color: var(--text-main); font-size: 2.2rem; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; transition: transform 0.3s ease; }
  
  .mobile-menu-footer { display: flex; justify-content: space-between; align-items: center; padding: 2rem 1rem; border-top: 1px solid var(--border); }
  
  /* Clean up tight header real estate */
  #theme-toggle { display: none !important; }
  .header-actions { gap: 0.3rem !important; }
  .logo { font-size: 1.25rem; }

  /* Revert nav-container to simple flex on mobile — the 3-column grid is only needed
     on desktop to keep nav-links centered while the logo collapses. On mobile nav-links
     is hidden, so we just need logo left and actions right. */
  .nav-container {
    display: flex;
    justify-content: space-between;
  }
  
  /* Disable backdrop-filter on mobile nav — creates GPU compositing layers at the safe area zone */
  .nav-fade-bg {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ios-safe-top,
  .ios-safe-bottom {
    display: block;
  }
}

/* Base definitions for desktop omission */
.mobile-offcanvas { display: none; }
.display-mobile-only { display: none; }
@media (max-width: 900px) {
  .mobile-offcanvas { display: flex; }
}

/* --- Large Screen & 30-inch App Scaling --- */
@media (min-width: 1600px) {
  /* Scale up base container */
  .container { max-width: 1400px; }
  
  /* Scale typography smoothly up to massive proportions */
  .hero-typography h1 { font-size: clamp(7.2rem, 9vw, 12rem); }
  .hero-typography p { font-size: clamp(1.35rem, 1.8vw, 2.5rem); max-width: 900px; }
  
  /* Expand Media Block dimensions aggressively */
  .hero-media-block {
    max-width: 1800px;
    height: 85vh;
    min-height: 800px;
  }
  
  /* Scale other text */
  .btn { padding: 1.2rem 3rem; font-size: 1.15rem; }
  .header-actions .btn { padding: 0.42rem 1rem; font-size: 0.85rem; } /* Keep nav button slim on large screens */
  .section-header h2 { font-size: 3.5rem; }
  .section-header p { font-size: 1.3rem; }
  .approach-sticky h2 { font-size: 4.5rem; }
  .approach-content { gap: 8rem; padding-bottom: 3rem; } /* Refined physics tracking without breaking Viewport bounds */
  .approach-block { max-width: 650px; } /* Forces texts to strictly stack vertically rendering them 'less horizontal' */
  .approach-block h3 { font-size: 2rem; }
  .approach-block p { font-size: 1.4rem; }
  
  .social-proof-item h4 { font-size: 1.6rem; }
  .social-proof-item p { font-size: 1.2rem; }
}

@media (min-width: 2200px) {
  /* True 30-inch+ ultra scale overrides */
  .container { max-width: 1800px; }
  .hero-media-block { max-width: 2200px; height: 90vh; }
  .section-header h2 { font-size: 4.5rem; }
  .approach-sticky h2 { font-size: 5.5rem; }
}

/* Animation Utility Classes */
/* Global Native JS Fade Animations (Refined & Sped up) */
.reveal-up { opacity: 0; transform: translateY(15px); transition: opacity 0.4s var(--ease-spring), transform 0.4s var(--ease-spring); }
.reveal-fade { opacity: 0; transition: opacity 0.4s var(--ease-smooth); }
.reveal-fade.is-revealed, .reveal-up.is-revealed { opacity: 1; transform: translateY(0); }

/* Scroll Track Drag Suppression overrides natively */
.testimonial-track, .testimonial-track * { 
  user-select: none !important; 
  -webkit-user-select: none !important; 
  -moz-user-select: none !important; 
  -webkit-user-drag: none !important; /* Disables dragging images explicitly */
}
.testimonial-track.is-dragging { cursor: grabbing; }

/* Stacking Text Reveal */
.reveal-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.1; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.reveal-mask > span { display: inline-block; transform: translateY(100%); transition: transform 0.4s var(--ease-spring); }
.is-revealed .reveal-mask > span, .reveal-mask.is-revealed > span { transform: translateY(0); }
.reveal-mask.hero-mask > span { transition: transform 0.8s var(--ease-dramatic); }

/* Global Reveal Core */
.bg-transition { transition: background-color 0.4s var(--ease-smooth); }
.bg-transition.is-revealed { background-color: var(--bg-darker); }

/* Utility Reveals */
.icon-reveal { opacity: 0; transform: scale(0.95); transition: all 0.4s var(--ease-spring); }
.is-revealed .icon-reveal, .icon-reveal.is-revealed { opacity: 1; transform: scale(1); }

.is-revealed { opacity: 1; transform: translate(0) scale(1); }

/* Premium Dark Mode Section Accents */
.bg-dark-section {
  background-color: #161616;
  color: #F4F2EE;
  transition: background-color 1s ease;
}
.bg-dark-section .gradient-text {
  color: #F4F2EE;
}
.bg-dark-section p {
  color: #A0A09F;
}
.bg-dark-section .bg-card {
  background-color: #222222;
  border-color: rgba(255,255,255,0.08);
}
.bg-dark-section .table-container {
  background: #1E1E1E;
  border: 1px solid rgba(255,255,255,0.08);
}
.bg-dark-section .compare-table th {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #A0A09F;
}
.bg-dark-section .compare-table td {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: #F4F2EE;
}
.bg-dark-section .compare-table .highlight-col {
  background: rgba(178, 106, 77, 0.12);
  color: #FFF;
}
.bg-dark-section .table-footer {
  background: rgba(255,255,255,0.02);
  color: #A0A09F;
}
.bg-dark-section .check-icon.blue { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.bg-dark-section .check-icon.green { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.bg-dark-section .cross-icon.red { background: rgba(248, 113, 113, 0.15); color: #f87171; }

.display-mobile-only { display: none; }
.mobile-only { display: none; }

.bg-dark-section .contact-card {
  background-color: #1c1c1c;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.bg-dark-section .contact-content h2,
.bg-dark-section .contact-content p {
  color: #F4F2EE;
}
.bg-dark-section .input-group input, 
.bg-dark-section .input-group textarea {
  background: #111;
  border-color: rgba(255,255,255,0.1);
  color: #F4F2EE;
}
.bg-dark-section .input-group input:focus, 
.bg-dark-section .input-group textarea:focus {
  background: #1A1A1A;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(178, 106, 77, 0.2);
}

/* Card Mouse Flare Effects */
.portfolio-item, .contact-card {
  --mouse-x: -500px;
  --mouse-y: -500px;
  position: relative;
}
.portfolio-item::after, .contact-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(178, 106, 77, 0.08), transparent 40%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}
.portfolio-item:hover::after, .contact-card:hover::after {
  opacity: 1;
}
.portfolio-item > *, .contact-card > * {
  position: relative;
  z-index: 2; /* Content above glow */
}

/* Base WebGL Hardware Promotion
   Forces Chrome (and all browsers) to physically separate the canvas from the main DOM composite 
   thread, assigning it an independent dedicated GPU layer. This prevents CSS overlaps from crushing the framerate. */
.jquery-ripples > canvas {
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
}