/* ============================================================
   SPANCIVILS — PREMIUM ENHANCEMENT LAYER
   Navy · Amber · Copper · Gold
   ============================================================ */

/* ── 1. Keyframes ─────────────────────────────────────────── */
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmerSweep {
  0%   { left: -100%; }
  100% { left: 150%; }
}
@keyframes glowPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%       { opacity: .7;  transform: scale(1.08); }
}
@keyframes underlineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroOverlayShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 2. Section Dark Alternation ──────────────────────────── */
body { background: #0b1120 !important; }

.stats-bar        { background: #0e1829 !important; position: relative; overflow: hidden; }
.about.section    { background: #091426 !important; }
.services.section { background: #0d1a2e !important; }
.projects.section { background: #080f1d !important; }
.why-us.section   { background: #0c1829 !important; }
.testimonials.section { background: #071220 !important; }
.team.section     { background: #0d1b2e !important; }
.contact.section  { background: #080f1a !important; }

/* Colored glow radials per section */
.about.section::before,
.services.section::before,
.projects.section::before,
.why-us.section::before,
.testimonials.section::before,
.team.section::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite;
  z-index: 0;
}
.about.section       { position: relative; }
.about.section::before       { background: radial-gradient(circle, rgba(212,130,10,.12) 0%, transparent 70%); top: -100px; right: -150px; }
.services.section    { position: relative; }
.services.section::before    { background: radial-gradient(circle, rgba(44,74,122,.20) 0%, transparent 70%); top: -80px; left: -100px; }
.projects.section    { position: relative; }
.projects.section::before    { background: radial-gradient(circle, rgba(212,130,10,.10) 0%, transparent 70%); bottom: -100px; right: -100px; top: auto; }
.why-us.section      { position: relative; }
.why-us.section::before      { background: radial-gradient(circle, rgba(44,74,122,.18) 0%, transparent 70%); top: -60px; left: -60px; }
.testimonials.section { position: relative; }
.testimonials.section::before{ background: radial-gradient(circle, rgba(212,130,10,.08) 0%, transparent 70%); top: 50px; right: -80px; }

/* ── 3. Animated Gradient Text ────────────────────────────── */
.hero-headline {
  background: linear-gradient(270deg, #E8930A, #FFD580, #D4820A, #F5A623, #E8930A) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientFlow 6s ease infinite !important;
}

.section-title {
  background: linear-gradient(270deg, #D4820A, #FFD580, #B5700A, #E8930A, #D4820A);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 7s ease infinite;
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.section-title.left-align, .about-left .section-title { margin-left: 0; }
.section-title::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #D4820A, #FFD580, #D4820A);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
[data-aos].aos-animate .section-title::after,
.section-title.aos-animate::after { transform: scaleX(1); }

/* ── 4. Glassmorphism Navbar ──────────────────────────────── */
.navbar.scrolled {
  background: rgba(8, 15, 28, 0.82) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(212,130,10,.18) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.35) !important;
}

/* ── 5. Hero Animated Overlay ─────────────────────────────── */
.hero::before {
  background: linear-gradient(135deg, #0E1829 0%, #1B2A4A 40%, #14223a 70%, #0e1520 100%) !important;
  background-size: 300% 300% !important;
  animation: heroOverlayShift 12s ease infinite !important;
}

/* ── 6. Button Shimmer ────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 55%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
}
.btn:hover::after { left: 160%; }
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,130,10,.45) !important;
}

/* ── 7. Premium Card Hover ────────────────────────────────── */
.service-card, .project-card, .team-card, .testimonial-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease !important;
  border: 1px solid rgba(212,130,10,.1) !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px) !important;
}
.service-card:hover, .project-card:hover, .team-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(212,130,10,.25) !important;
  border-color: rgba(212,130,10,.35) !important;
}

/* ── 8. Stats Bar Premium ─────────────────────────────────── */
.stat-item .stat-number, .stat-number {
  background: linear-gradient(135deg, #E8930A, #FFD580);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}
.stat-icon, .stats-icon {
  background: rgba(212,130,10,.15);
  border: 1px solid rgba(212,130,10,.3);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(212,130,10,.25);
}

/* ── 9. Dot Grid Texture ──────────────────────────────────── */
.services.section, .projects.section, .testimonials.section {
  background-image: radial-gradient(circle, rgba(212,130,10,.06) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

/* ── 10. AOS Color Trigger ────────────────────────────────── */
.section-header[data-aos] { opacity: 0; transform: translateY(24px); }
.section-header[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}

/* ── 11. Hero Badge Glow ──────────────────────────────────── */
.hero-badge {
  background: rgba(212,130,10,.15) !important;
  border: 1px solid rgba(212,130,10,.35) !important;
  box-shadow: 0 0 20px rgba(212,130,10,.2) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── 12. Scroll Progress Bar ──────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 0%; height: 3px;
  background: linear-gradient(90deg, #D4820A, #FFD580);
  z-index: 9999;
  transition: width .1s linear;
}

/* ── 13. Section Dividers ─────────────────────────────────── */
.stats-bar::after,
.services.section::after,
.testimonials.section::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 60px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 1;
}

/* ── 14. Contact Form Premium ─────────────────────────────── */
.contact-section input,
.contact-section select,
.contact-section textarea,
.contact input, .contact select, .contact textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(212,130,10,.2) !important;
  color: #e2e8f0 !important;
  transition: border-color .3s, box-shadow .3s !important;
}
.contact-section input:focus,
.contact-section select:focus,
.contact-section textarea:focus,
.contact input:focus, .contact select:focus, .contact textarea:focus {
  border-color: rgba(212,130,10,.6) !important;
  box-shadow: 0 0 0 3px rgba(212,130,10,.12) !important;
  outline: none !important;
}

/* ── 15. Footer Dark Premium ──────────────────────────────── */
footer {
  background: linear-gradient(135deg, #060c18, #0a1428) !important;
  border-top: 1px solid rgba(212,130,10,.15) !important;
}

/* ============================================================
   HERO SECTION — PREMIUM ANIMATION ENHANCEMENTS
   ============================================================ */

/* ── Hero min-height & centering ────────────────────────────── */
.hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ── Canvas fills hero fully ─────────────────────────────────── */
.hero canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  transition: transform .08s linear !important;
}

/* ── Hero content above canvas ───────────────────────────────── */
/* only the content block: forcing position:relative on every hero child
   pulled the absolutely-positioned decorative layers into the flex flow */
.hero > .container {
  position: relative !important;
  z-index: 3 !important;
}

/* ── Constellation icons enhanced ───────────────────────────── */
[class*="constellation-icon"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: 1.3rem !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
[class*="constellation-icon"]:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 0 24px rgba(255,255,255,.2) !important;
}

/* ── Hero headline entrance ──────────────────────────────────── */
.hero-headline,
.hero-title,
.hero__headline {
  opacity: 0;
  animation: heroTitleIn 1s cubic-bezier(.16,1,.3,1) .3s both !important;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(40px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── Hero subtitle entrance ──────────────────────────────────── */
.hero-sub, .hero-description, .hero__description, .hero-subtitle {
  opacity: 0;
  animation: heroSubIn .9s cubic-bezier(.16,1,.3,1) .6s both !important;
}
@keyframes heroSubIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero CTA entrance ───────────────────────────────────────── */
.hero-ctas, .hero__ctas, .hero-actions {
  opacity: 0;
  animation: heroCTAIn .8s cubic-bezier(.16,1,.3,1) .9s both !important;
}
@keyframes heroCTAIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero badge entrance ─────────────────────────────────────── */
.hero-badge, .hero-tagline-badge, .hero__badge, .hero-eyebrow {
  opacity: 0;
  animation: heroBadgeIn .7s cubic-bezier(.16,1,.3,1) .1s both !important;
}
@keyframes heroBadgeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hero visual (right side icon cluster) ───────────────────── */
[class*="hero-split"][class*="visual"],
[class*="hero__visual"],
.hero-split__visual,
.hero-split-st__visual {
  opacity: 0;
  animation: heroVisualIn 1.1s cubic-bezier(.16,1,.3,1) .4s both !important;
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}

/* ── Orbiting icon cluster animations ───────────────────────── */
[class*="ic-orbit--1"], [class*="ic-st-orbit--1"] { animation: orbit1 12s linear infinite !important; }
[class*="ic-orbit--2"], [class*="ic-st-orbit--2"] { animation: orbit2 15s linear infinite !important; }
[class*="ic-orbit--3"], [class*="ic-st-orbit--3"] { animation: orbit3 18s linear infinite !important; }
[class*="ic-orbit--4"], [class*="ic-st-orbit--4"] { animation: orbit4 10s linear infinite !important; }
[class*="ic-orbit--5"], [class*="ic-st-orbit--5"] { animation: orbit5 22s linear infinite !important; }

@keyframes orbit1 {
  from { transform: rotate(0deg)   translateX(120px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}
@keyframes orbit2 {
  from { transform: rotate(72deg)  translateX(160px) rotate(-72deg); }
  to   { transform: rotate(432deg) translateX(160px) rotate(-432deg); }
}
@keyframes orbit3 {
  from { transform: rotate(144deg) translateX(110px) rotate(-144deg); }
  to   { transform: rotate(504deg) translateX(110px) rotate(-504deg); }
}
@keyframes orbit4 {
  from { transform: rotate(216deg) translateX(140px) rotate(-216deg); }
  to   { transform: rotate(576deg) translateX(140px) rotate(-576deg); }
}
@keyframes orbit5 {
  from { transform: rotate(288deg) translateX(130px) rotate(-288deg); }
  to   { transform: rotate(648deg) translateX(130px) rotate(-648deg); }
}

/* ── Center icon ring pulse ──────────────────────────────────── */
[class*="ic-center__ring"],
[class*="ic-st-ring"],
[class*="ic-center"] .ring {
  animation: ringPulse 3s ease-in-out infinite !important;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%       { transform: scale(1.15); opacity: 1; }
}

/* ── Sun animation (julflame) enhanced ───────────────────────── */
.sun-core {
  animation: sunCorePulse 3s ease-in-out infinite !important;
}
.ray {
  animation: rayRotate 8s linear infinite !important;
  transform-origin: center center !important;
}
@keyframes sunCorePulse {
  0%, 100% { box-shadow: 0 0 40px 10px rgba(245,158,11,.5), 0 0 80px 20px rgba(239,68,68,.3); }
  50%       { box-shadow: 0 0 60px 20px rgba(245,158,11,.8), 0 0 120px 40px rgba(239,68,68,.5); }
}
@keyframes rayRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Hero features list stagger ──────────────────────────────── */
[class*="hero-features"] li {
  opacity: 0;
  animation: featureIn .6s cubic-bezier(.16,1,.3,1) both !important;
}
[class*="hero-features"] li:nth-child(1) { animation-delay: .7s !important; }
[class*="hero-features"] li:nth-child(2) { animation-delay: .85s !important; }
[class*="hero-features"] li:nth-child(3) { animation-delay: 1s !important; }
@keyframes featureIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hero scroll indicator bounce ────────────────────────────── */
.hero-scroll-indicator, .hero-scroll-cue, .scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite !important;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ── Hero grid overlay animated ─────────────────────────────── */
.hero-grid-overlay, .hero-bg-grid, .hero-blueprint {
  animation: gridShift 20s linear infinite !important;
  background-size: 48px 48px !important;
}
@keyframes gridShift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* ── Stats bar entrance ──────────────────────────────────────── */
.stat-item, .stat-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important;
}
.stat-item:hover, .stat-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
}

/* ── Section titles get ::before decorative line ─────────────── */
.section-header {
  position: relative !important;
}
.section-header::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--scroll-bar-color, linear-gradient(90deg, #a855f7, #06b6d4)) !important;
  margin: 0 auto 16px !important;
  border-radius: 2px !important;
  animation: lineGrow 1s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes lineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 40px; opacity: 1; }
}

/* ── Navbar Logo Image ────────────────────────────────────── */
.nav-logo-img, .navbar-logo .nav-logo-img {
  height: 40px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  display: block !important;
}
.nav-logo, .navbar-logo, .navbar__logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── UNIQUE SECTION COLOR PALETTE — Spancivils ───────────────
   Navy hero → Amber gold → Deep slate → Warm charcoal → Rich navy → Dark amber → Slate
   ─────────────────────────────────────────────────────────── */
body                  { background: #0a1020 !important; }
.hero                 { background: linear-gradient(160deg, #0E1829 0%, #1B2A4A 60%, #0e1520 100%) !important; }
.stats-bar            { background: #1B2A4A !important; }
.about.section        { background: #0d1628 !important; }
.services.section     { background: #162038 !important; }
.projects.section     { background: #0a1020 !important; }
.why-us.section       { background: #1a2030 !important; }
.testimonials.section { background: #0e1829 !important; }
.team.section         { background: #14203a !important; }
.contact.section      { background: #080f1c !important; }

/* Text on light-ish sections stays readable */
.services.section h1, .services.section h2, .services.section h3,
.services.section p, .services.section li { color: #e2e8f0; }
.why-us.section h1, .why-us.section h2, .why-us.section h3,
.why-us.section p { color: #e2e8f0; }
.team.section h1, .team.section h2, .team.section h3,
.team.section p { color: #e2e8f0; }

/* ── HERO TEXT CENTERING — All Sites ─────────────────────────── */
.hero .container,
.hero .hero-split,
.hero .hero-split-st,
.hero .hero__inner,
.hero-content,
.hero .container > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Kill the two-column split — stack and center everything */
.hero-split,
.hero-split-st,
.hero__inner {
  grid-template-columns: 1fr !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Hide the right-side visual cluster (icon orbit / dashboard) on hero */
.hero-split__visual,
.hero-split-st__visual,
.hero__visual {
  display: none !important;
}

/* Text blocks */
.hero-split__text,
.hero-split-st__text,
.hero__text,
.hero-content {
  align-items: center !important;
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* Badges */
.hero-badge,
.hero-tagline-badge,
.hero__badge,
.hero-eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTA button row */
.hero-ctas,
.hero__ctas,
.hero-actions,
.hero-ctas-st {
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* Feature lists */
[class*="hero-features"] {
  justify-content: center !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 12px 24px !important;
}

/* Headline max-width */
.hero-headline,
.hero-title,
.hero__headline,
.hero-sub,
.hero-description,
.hero__description,
.hero-subtitle {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Constellation icons — reposition to background decorative layer */
[class*="constellation"] {
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Scroll indicator stays centered */
.hero-scroll-indicator,
.hero-scroll-cue,
.scroll-indicator {
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 auto !important;
}

/* Badge strip (sifotech bottom strip) */
.hero-badge-strip {
  justify-content: center !important;
}



/* ============================================================
   HERO TEXT CENTERING — FINAL OVERRIDE
   Uses !important to beat inline styles and any specificity war
   ============================================================ */

/* Full-width centered flex column for every hero container */
.hero,
.hero .container,
.hero .hero-content,
.hero .hero-split,
.hero .hero-split-st,
.hero .hero__inner,
.hero .hero-container,
.hero > div:not([aria-hidden]):not(.hero-overlay):not(.hero-glow):not(.hero-blueprint):not(.hero-diagonal):not(.hero-bg-grid):not(canvas) {
  text-align: center !important;
}

/* Text blocks — center aligned and max-width constrained */
.hero-split__text,
.hero-split-st__text,
.hero__text,
.hero-content {
  text-align: center !important;
  align-items: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* All direct headline/subtitle/description elements */
.hero h1, .hero h2,
.hero-title, .hero-headline, .hero__headline,
.hero-sub, .hero-subtitle, .hero-description, .hero__description,
.hero-eyebrow, .hero-badge, .hero-tagline-badge, .hero__badge {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTA rows */
.hero-ctas, .hero__ctas, .hero-actions,
.hero-features, .hero-features-st, [class*="hero-features"],
.hero-trust-badges, .hero-trust-badges-bp, [class*="trust-badges"],
.hero-badge-strip, .hero-icon-marquee {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

/* Section titles that have inline text-align:left — override */
.hero .section-title,
.hero h2[style],
section h2[style*="text-align"] {
  text-align: center !important;
}

/* ── CSS Variable Override (dark theme) ─────────────────────
   Redefine light variables so ALL elements using them go dark
   ────────────────────────────────────────────────────────── */
:root {
  --color-bg:          #0d1628;
  --color-bg-alt:      #111e35;
  --color-bg-dark:     #08101e;
  --color-card:        rgba(255,255,255,.05);
  --color-card-hover:  rgba(255,255,255,.08);
  --color-text:        #e2e8f0;
  --color-text-muted:  rgba(226,232,240,.65);
  --color-text-light:  rgba(226,232,240,.45);
  --color-border:      rgba(212,130,10,.15);
  --color-border-dark: rgba(212,130,10,.25);
  --white:             rgba(255,255,255,.05);
  --shadow-card:       0 4px 24px rgba(0,0,0,.4);
  --shadow-md:         0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:         0 16px 48px rgba(0,0,0,.5);
}
/* Keep headings readable */
h1, h2, h3, h4, h5, h6 { color: #e2e8f0; }
p, li, span:not(.gradient-text):not(.accent-text):not(.logo-text) { color: rgba(226,232,240,.85); }
.section-tag, .about-intro, .service-desc, .project-desc { color: rgba(226,232,240,.75) !important; }
/* Form fields */
input, textarea, select { background: rgba(255,255,255,.06) !important; color: #e2e8f0 !important; border-color: rgba(212,130,10,.2) !important; }
input::placeholder, textarea::placeholder { color: rgba(226,232,240,.4) !important; }


/* All card types — dark glass background + readable text */
.why-card, .service-card, .project-card, .team-card, .agent-card,
.testimonial-card, .stat-card, .stat-item, .process-card,
.process-step, .security-card, .step-card, .why-card,
.cred-card, .highlight-card, .contact-item, .contact-form-wrap,
.about-content, .dashboard {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Headings inside cards */
.why-card h3, .service-card h3, .project-card h3,
.team-card h3, .agent-card h3, .testimonial-card h4,
.stat-card h3, .process-card h3, .process-step h3,
.why-card h4, .service-card h4,
.why-card .card-title, .service-card .service-title,
.card-title, .service-title, .project-title {
  color: #f1f5f9 !important;
}

/* Body text inside cards */
.why-card p, .service-card p, .project-card p,
.team-card p, .testimonial-card p, .process-card p,
.process-step p, .card-desc, .service-desc,
.why-card .card-desc, .service-card .service-desc {
  color: rgba(226,232,240,.75) !important;
}

/* Section descriptions */
.section-sub, .section-desc, .section-intro,
.about-intro, .about-desc, .about-text p,
.why-desc, .process-desc {
  color: rgba(226,232,240,.75) !important;
}

/* Contact sections */
.contact-section, .contact, section#contact {
  color: #e2e8f0 !important;
}
.contact-label, .contact-value, .contact-info p {
  color: rgba(226,232,240,.8) !important;
}





/* ── Readability on the dark theme ─────────────────────────── */
.cred-content h3, .contact-info h3, .contact-item strong, .contact-form label, .team-info h3 { color: #f1f5f9; }
.project-category { color: #fff !important; background: rgba(5,9,18,.75) !important; }
.footer-bottom-inner p, .footer-legal a { color: rgba(226,232,240,.75); }
.footer-links a, .footer-contact a, .footer-contact span, .footer-brand p { color: #c3cddb; }
.footer-links a:hover, .footer-contact a:hover { color: #fff; }
.hamburger span { background: #fff; }
.contact-form select option { background: #161b2e; color: #e2e8f0; }
.team-role { color: #fdba74; }

/* ── Tap targets (>= 44px) ─────────────────────────────────── */
.hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.service-link-card, .project-link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
.footer-links a, .footer-legal a, .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.carousel-arrow, .back-to-top { min-width: 44px; min-height: 44px; }
.nav-logo { min-height: 44px; }
.contact-item a { display: inline-block; padding: 12px 0; }
.btn-full, .btn-lg { min-height: 44px; }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr !important; } }

/* Leadership portrait */
.team-grid--single .team-photo { aspect-ratio: 4 / 5; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

/* ── About the Managing Partner ─────────────────────────────── */
.leader { background: linear-gradient(180deg, #0b1424, #0f1b33); }
.leader-grid { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 64px; align-items: center; }
.leader-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 24px 60px rgba(0,0,0,.45); border: 1px solid rgba(212,130,10,.35); }
.leader-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,16,30,0) 60%, rgba(8,16,30,.35) 100%); }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.leader-body .section-title { margin-bottom: 8px; }
.leader-creds { color: #fdba74; font-weight: 700; letter-spacing: .08em; margin: 0 0 20px; font-size: 1.05rem; }
.leader-lead { color: #e2e8f0; font-size: 1.1rem; line-height: 1.75; margin: 0 0 24px; max-width: 56ch; }
.leader-quals { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.leader-quals li { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(212,130,10,.2); border-radius: 14px; padding: 14px 18px; color: #e2e8f0; }
.leader-quals i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #D4820A, #E8930A); color: #0b1020; flex-shrink: 0; }
.leader-quals strong { color: #fff; }
@media (max-width: 900px) { .leader-grid { grid-template-columns: 1fr; gap: 36px; } .leader-photo { max-width: 360px; margin: 0 auto; } }