/* =====================================================
   VAYUVERSE — Site Enhancements v2
   ===================================================== */

/* ── 2. LABEL / COUNTER VISIBILITY FIX ── */
/* --tx3 (#38352f) is near-invisible on dark bg. Override all affected elements. */
.sec-lbl,
.page-hdr-lbl,
.ftcta-lbl,
.cta-sec-lbl,
.svc-num,
.price-tier,
.ft-col-t,
.hero-scroll {
  color: rgba(244, 240, 234, 0.42) !important;
}

.sec-lbl::before,
.page-hdr-lbl::before,
.ftcta-lbl::before,
.cta-sec-lbl::before {
  background: rgba(244, 240, 234, 0.42) !important;
}

.hero-scroll-line {
  background: rgba(244, 240, 234, 0.3) !important;
}

.tech-item span,
.int-item span {
  color: rgba(244, 240, 234, 0.35) !important;
}

/* ── 2b. TECH ITEM — light / hybrid mode fixes ── */
html.theme-light .tech-item span,
html.theme-light .int-item span,
[data-hybrid-light] .tech-item span,
[data-hybrid-light] .int-item span {
  color: rgba(13, 11, 8, 0.45) !important;
}

html.theme-light .tech-grid,
[data-hybrid-light] .tech-grid {
  background: rgba(13, 11, 8, 0.1) !important;
  border-color: rgba(13, 11, 8, 0.12) !important;
}

html.theme-light .tech-item,
[data-hybrid-light] .tech-item {
  background: #faf9f6 !important;
}

html.theme-light .tech-item:hover,
[data-hybrid-light] .tech-item:hover {
  background: #f0ece4 !important;
}

html.theme-light .tech-item img,
[data-hybrid-light] .tech-item img {
  filter: grayscale(1) brightness(0.4) !important;
  opacity: 0.45 !important;
}

html.theme-light .tech-item:hover img,
[data-hybrid-light] .tech-item:hover img {
  filter: none !important;
  opacity: 0.9 !important;
}

html.theme-light .tech-placeholder svg,
[data-hybrid-light] .tech-placeholder svg {
  opacity: 0.45 !important;
}

html.theme-light .tech-item:hover .tech-placeholder svg,
[data-hybrid-light] .tech-item:hover .tech-placeholder svg {
  opacity: 0.9 !important;
}

/* Svc-num: make it distinct — use accent color */
.svc-num {
  color: var(--ac) !important;
  opacity: 0.7;
}

/* ── 3. BUTTON HOVER — PRIMARY COLOR ── */
.btn-lime,
.nav-cta,
.price-cta-lime {
  position: relative;
  overflow: hidden;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s !important;
}

.btn-lime:hover,
.nav-cta:hover,
.price-cta-lime:hover {
  background: #d96b38 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(243, 129, 79, 0.32) !important;
}

/* Shimmer on CTA buttons */
.btn-lime::before,
.price-cta-lime::before,
.nav-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}

.btn-lime:hover::before,
.price-cta-lime:hover::before,
.nav-cta:hover::before {
  left: 160%;
}

/* Ghost button hover improvement */
.btn-ghost:hover,
.price-cta-ghost:hover {
  border-color: var(--ac) !important;
  color: var(--ac) !important;
  transform: translateY(-2px) !important;
}

/* ── 4. WORK LIST — horizontal premium layout ── */
#workGrid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
}

#workGrid .work-item,
.sec .work-grid .work-item {
  aspect-ratio: unset !important;
  grid-column: unset !important;
  height: auto !important;
  min-height: unset !important;
}

/* Premium overlay — slightly visible by default */
.work-over {
  opacity: 0.3 !important;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.1) 60%, transparent 100%) !important;
}

.work-item:hover .work-over {
  opacity: 1 !important;
}

/* Work item info — always partially readable */
.work-name {
  transform: translateY(0) !important;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem) !important;
}

.work-tag {
  transform: translateY(0) !important;
  opacity: 0.6;
}

.work-item:hover .work-tag {
  opacity: 1;
}

/* ── 5. HERO / PAGE-HDR / ART-HDR BACKGROUND ANIMATION ── */
.hero,
.page-hdr,
.art-hdr {
  position: relative;
  overflow: hidden;
}

/* Magnetic node canvas — sits at z-index 0, behind orbs (z:1) and content */
.hero-node-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  image-rendering: pixelated;
}



/* Subtle floating dots */
.hero-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-dot-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(244, 240, 234, 0.25);
  border-radius: 50%;
  animation: dotFloat linear infinite;
}

@keyframes dotFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120px) translateX(var(--dx, 20px)); opacity: 0; }
}

/* ── 6. THEME TOGGLE BUTTON ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg3, #141414);
  border: 1px solid var(--bd2);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
  margin-left: 1rem;
  flex-shrink: 0;
}

.theme-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  transition: all 0.2s var(--eo, ease);
  font-size: 11px;
  line-height: 1;
  color: var(--tx2);
}

.theme-toggle-btn.active {
  background: var(--ac);
  color: #050505;
}

.theme-toggle-btn:hover:not(.active) {
  background: rgba(244, 240, 234, 0.08);
  color: var(--tx);
}

@media (max-width: 768px) {
  .nav .theme-toggle {
    display: none;
  }
}

/* ── 7. LIGHT THEME ── */
html.theme-light {
  --bg:  #f5f2ec;
  --bg2: #ede9e2;
  --bg3: #e2ddd5;
  --tx:  #0d0b08;
  --tx2: #5c5852;
  --tx3: rgba(13, 11, 8, 0.42);
  --bd:  rgba(13, 11, 8, .08);
  --bd2: rgba(13, 11, 8, .15);
  --ac2: rgba(201, 241, 53, .18);
  --ac3: rgba(201, 241, 53, .1);
}

html.theme-light body {
  background: var(--bg);
  color: var(--tx);
}

/* Nav light */
html.theme-light .nav.solid {
  background: rgba(245, 242, 236, 0.92) !important;
  border-color: rgba(13, 11, 8, .1) !important;
}

html.theme-light .mobnav {
  background: var(--bg) !important;
}

/* Re-apply label visibility for light */
html.theme-light .sec-lbl,
html.theme-light .page-hdr-lbl,
html.theme-light .ftcta-lbl,
html.theme-light .cta-sec-lbl,
html.theme-light .ft-col-t,
html.theme-light .hero-scroll {
  color: rgba(13, 11, 8, 0.42) !important;
}

html.theme-light .sec-lbl::before,
html.theme-light .page-hdr-lbl::before,
html.theme-light .ftcta-lbl::before,
html.theme-light .cta-sec-lbl::before {
  background: rgba(13, 11, 8, 0.42) !important;
}

html.theme-light .svc-num {
  color: var(--ac) !important;
}

html.theme-light .hero-scroll-line {
  background: rgba(13, 11, 8, 0.3) !important;
}




html.theme-light body::after {
  opacity: 0.015;
}

/* Button dark text in light mode stays */
html.theme-light .btn-lime,
html.theme-light .nav-cta {
  color: #050505 !important;
}

/* Filter buttons — light mode text fix */
html.theme-light .filter-btn {
  color: rgba(13, 11, 8, 0.55) !important;
  border-color: rgba(13, 11, 8, .12) !important;
}

html.theme-light .filter-btn:hover {
  color: rgba(13, 11, 8, 0.85) !important;
  border-color: rgba(13, 11, 8, .28) !important;
}

html.theme-light .filter-btn.active {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
  color: #050505 !important;
}

html.theme-light .work-over {
  background: linear-gradient(to top, rgba(13, 11, 8, 0.92) 0%, rgba(13, 11, 8, 0.1) 60%, transparent 100%) !important;
}

/* ── 8. HYBRID THEME ── */
/* Sections with [data-hybrid-light] get light background */
[data-hybrid-light] {
  --bg:  #f0ece4;
  --bg2: #e8e4db;
  --bg3: #e2ddd5;
  --tx:  #0d0b08;
  --tx2: #5c5852;
  --tx3: rgba(13, 11, 8, 0.42);
  --bd:  rgba(13, 11, 8, .08);
  --bd2: rgba(13, 11, 8, .15);
  background: var(--bg) !important;
  color: var(--tx) !important;
}

[data-hybrid-light] .sec-h,
[data-hybrid-light] .inc-t,
[data-hybrid-light] .proc-t,
[data-hybrid-light] .feat-t,
[data-hybrid-light] .price-name,
[data-hybrid-light] .faq-q {
  color: #0d0b08 !important;
}

[data-hybrid-light] .sec-lbl,
[data-hybrid-light] .svc-num {
  color: rgba(13, 11, 8, 0.4) !important;
}

[data-hybrid-light] .sec-lbl::before {
  background: rgba(13, 11, 8, 0.4) !important;
}

[data-hybrid-light] .inc-d,
[data-hybrid-light] .proc-d,
[data-hybrid-light] .feat-d,
[data-hybrid-light] .price-desc,
[data-hybrid-light] .faq-a,
[data-hybrid-light] p {
  color: #5c5852 !important;
}

[data-hybrid-light] .inc-card,
[data-hybrid-light] .proc-step,
[data-hybrid-light] .feat-card,
[data-hybrid-light] .price-card {
  background: #f0ece4 !important;
}

[data-hybrid-light] .inc-card:hover,
[data-hybrid-light] .proc-step:hover,
[data-hybrid-light] .feat-card:hover {
  background: #e8e4db !important;
}

[data-hybrid-light] .inc-grid,
[data-hybrid-light] .proc-grid,
[data-hybrid-light] .feat-grid,
[data-hybrid-light] .price-grid {
  background: rgba(13, 11, 8, .08) !important;
  border-color: rgba(13, 11, 8, .08) !important;
}

[data-hybrid-light] .faq-item {
  border-color: rgba(13, 11, 8, .08) !important;
}

[data-hybrid-light] .faq-list {
  border-color: rgba(13, 11, 8, .08) !important;
}

/* ── 9. FOOTER ENHANCEMENTS ── */
footer {
  background: #020202 !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--bd) !important; /* Simple standard project border */
}

/* Remove the ft-grid divider line that cuts through the VAYUVERSE watermark */
footer .ft-grid {
  border-bottom: none !important;
}

/* Gradient top line - Removed in favor of simple standard border */
footer::before {
  display: none !important;
}

/* Watermark brand text */
footer::after {
  content: 'VAYUVERSE';
  position: absolute;
  bottom: -0.08em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff);
  font-weight: 800;
  font-size: clamp(2rem, 12vw, 10.5rem);
  letter-spacing: -.03em;
  color: rgba(244, 240, 234, 0.028);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
}

/* Logo bigger, with hover */
.ft-logo {
  font-size: 1.35rem !important;
  letter-spacing: .08em !important;
  transition: letter-spacing 0.3s ease !important;
}

.ft-logo:hover {
  letter-spacing: .12em !important;
}

/* Footer links with arrow-slide effect */
.ft-links {
  position: relative;
}

.ft-links li {
  position: relative;
  overflow: hidden;
}

.ft-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
  padding-left: 0 !important;
  transition: color 0.2s, padding-left 0.25s ease !important;
  cursor: pointer !important;
}

.ft-links a::before {
  content: '→';
  position: absolute;
  left: -16px;
  opacity: 0;
  font-size: .7rem;
  color: var(--ac);
  transition: opacity 0.2s, left 0.25s ease;
  pointer-events: none;
}

.ft-links a:hover {
  color: var(--tx) !important;
  padding-left: 16px !important;
}

.ft-links a:hover::before {
  opacity: 1;
  left: 0;
}

/* Column headings */
.ft-col-t {
  color: rgba(244, 240, 234, 0.42) !important;
  letter-spacing: .18em !important;
  font-size: .6rem !important;
}

/* Social icons */
.ft-soc a {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(244, 240, 234, 0.28) !important;
  background: rgba(244, 240, 234, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s var(--eo) !important;
}

.ft-soc svg {
  width: 15px !important;
  height: 15px !important;
  color: rgba(244, 240, 234, 0.85) !important;
  transition: color 0.3s var(--eo) !important;
}

.ft-soc a:hover {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 8px 20px rgba(243, 129, 79, 0.35) !important;
}

.ft-soc a:hover svg {
  color: #050505 !important;
}

/* Light mode social overrides — Keep silver on the dark footer background */
html.theme-light .ft-soc a {
  border-color: rgba(244, 240, 234, 0.28) !important;
  background: rgba(244, 240, 234, 0.05) !important;
}

html.theme-light .ft-soc svg {
  color: rgba(244, 240, 234, 0.85) !important;
}

html.theme-light .ft-soc a:hover {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
}

html.theme-light .ft-soc a:hover svg {
  color: #050505 !important;
}

/* ft-desc subtle */
.ft-desc {
  font-size: .8rem !important;
  line-height: 1.7 !important;
  color: rgba(244, 240, 234, 0.38) !important;
}

/* Bottom bar */
.ft-bot {
  position: relative;
  z-index: 1;
  color: rgba(244, 240, 234, 0.28) !important;
  font-size: .72rem !important;
}

/* ── 10. FOOTER CTA ENHANCEMENTS ── */
.ftcta {
  background-color: var(--bg2) !important;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(128, 128, 128, 0.06),
    rgba(128, 128, 128, 0.06) 30px,
    transparent 30px,
    transparent 60px
  ) !important;
  border-top: 1px solid var(--bd) !important;
  padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 56px) !important;
}

/* Glassmorphic border glow dividing line at the top - Removed */
.ftcta::before {
  display: none !important;
}

/* Elevated content layers to sit cleanly above backdrops */
.ftcta-lbl,
.ftcta-h,
.ftcta-acts {
  position: relative !important;
  z-index: 3 !important;
}


.ftcta-email {
  cursor: pointer !important;
  position: relative;
}

.ftcta-email::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ac);
  transition: width 0.3s ease;
}

.ftcta-email:hover::after {
  width: 100%;
}

/* ── 11. SECTION DIVIDERS / BACKGROUNDS ── */
/* Every alternating section gets a very subtle mesh */
.sec:nth-child(even) {
  background-image: linear-gradient(rgba(244, 240, 234, .012) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(244, 240, 234, .012) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── 12. WORK ITEM HOVER — list row style ── */
.work-item {
  transition: background 0.3s var(--eo) !important;
}

.work-item:hover {
  transform: none !important;
  z-index: 2;
}

/* Visible name bar at bottom */
.work-over {
  background: linear-gradient(to top,
    rgba(5, 5, 5, 0.92) 0%,
    rgba(5, 5, 5, 0.35) 40%,
    transparent 100%) !important;
}

.work-name {
  font-size: clamp(0.95rem, 1.8vw, 1.4rem) !important;
  letter-spacing: -.02em !important;
}

/* Arrow always visible on hover */
.work-arr {
  background: rgba(5, 5, 5, 0.5) !important;
  backdrop-filter: blur(4px);
}

.work-item:hover .work-arr {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
}

.work-item:hover .work-arr svg {
  color: #050505 !important;
  stroke: #050505 !important;
}

/* ── 13. PROCESS STEP NUMBERS — more visible ── */
.proc-n {
  color: var(--ac) !important;
  opacity: 0.85;
  font-size: .7rem !important;
}


/* ── 15. FILTER BUTTONS ── */
.filter-btn {
  transition: all 0.2s ease !important;
}

.filter-btn:hover {
  border-color: var(--ac) !important;
  color: var(--ac) !important;
}

/* ── 16. LIGHT MODE footer adjustments ── */
html.theme-light footer {
  background: #0d0b08 !important;
}

html.theme-light footer::after {
  color: rgba(244, 240, 234, 0.03);
}

/* ── 16b. LIGHT MODE — client logo marquee fix ── */
/* Dark mode uses brightness(2) to make logos show on dark bg.
   In light mode that blows them out to white; invert the filter. */
html.theme-light .marq-set img,
html.theme-light .marq img {
  filter: grayscale(1) brightness(0.12) !important;
  opacity: 0.55 !important;
}

/* Integration grid logos — same problem as marquee */
html.theme-light .int-item img {
  filter: grayscale(1) brightness(0.12) !important;
  opacity: 0.45 !important;
}

html.theme-light .int-item:hover img {
  filter: none !important;
  opacity: 0.9 !important;
}

/* Integration item hover bg in light mode */
html.theme-light .int-item {
  background: var(--bg) !important;
}

html.theme-light .int-item:hover {
  background: var(--bg2) !important;
}

html.theme-light .int-item span {
  color: rgba(13, 11, 8, 0.45) !important;
}

/* ── 16c. LIGHT MODE — theme toggle contrast fix ── */
html.theme-light .theme-toggle {
  background: #d8d3ca !important;
  border-color: rgba(13, 11, 8, 0.18) !important;
}

html.theme-light .theme-toggle-btn {
  color: #5c5852 !important;
}

html.theme-light .theme-toggle-btn:hover:not(.active) {
  background: rgba(13, 11, 8, 0.08) !important;
  color: #0d0b08 !important;
}

html.theme-light .theme-toggle-btn.active {
  background: var(--ac) !important;
  color: #050505 !important;
}



/* ── 18. FAQ + SVC HOVER improvements ── */
.faq-q:hover {
  color: var(--ac) !important;
}

.svc-row:hover .svc-title {
  color: var(--ac) !important;
}

/* ── 19. STATS / NUMBERS ── */
.stat-n em {
  position: relative;
}

/* ── 19b. HYBRID MODE — stats section visibility fix ── */
/* When stats-section gets [data-hybrid-light], numbers & labels must be dark */
[data-hybrid-light] .stat-n {
  color: #0d0b08 !important;
}

[data-hybrid-light] .stat-n em,
[data-hybrid-light] .stat-n span {
  color: var(--ac) !important;
}

[data-hybrid-light] .stat-l {
  color: #5c5852 !important;
}

[data-hybrid-light] .stat-item {
  border-color: rgba(13, 11, 8, 0.08) !important;
  /* override the dark var(--bg3) hover with a light alternative */
  background: transparent;
}

/* stat-item hover in a hybrid-light section: use light hover, not dark var(--bg3) */
[data-hybrid-light] .stat-item:hover {
  background: #e2ddd5 !important;
}

[data-hybrid-light] .stats-h,
[data-hybrid-light] .stats-d {
  color: #0d0b08 !important;
}

/* ── 19c. HYBRID MODE — services section visibility fix ── */
/* .svc-title / .svc-num use CSS vars (--tx, --tx3) which stay dark-themed.
   When the services section gets [data-hybrid-light] we must force dark text. */
[data-hybrid-light] .svc-title {
  color: #0d0b08 !important;
}

[data-hybrid-light] .svc-num {
  color: rgba(13, 11, 8, 0.4) !important;
}

[data-hybrid-light] .svc-desc,
[data-hybrid-light] .svc-sub {
  color: #5c5852 !important;
}

[data-hybrid-light] .svc-list,
[data-hybrid-light] .svc-row {
  border-color: rgba(13, 11, 8, 0.1) !important;
}

[data-hybrid-light] .svc-icon {
  border-color: rgba(13, 11, 8, 0.18) !important;
}

[data-hybrid-light] .svc-icon svg {
  color: #0d0b08 !important;
}

[data-hybrid-light] .svc-link {
  color: rgba(13, 11, 8, 0.55) !important;
}

[data-hybrid-light] .svc-link:hover {
  color: var(--ac) !important;
}

[data-hybrid-light] .svc-row:hover .svc-title {
  color: var(--ac) !important;
}

/* Services hover row bg in hybrid light section */
[data-hybrid-light] .svc-head-row:hover,
[data-hybrid-light] .svc-row:hover .svc-head-row {
  background: rgba(13, 11, 8, 0.03) !important;
}

/* ── 20b. BLOG CARDS ── */
.blog-card {
  cursor: pointer !important;
  transition: transform 0.3s var(--eo, ease), box-shadow 0.3s var(--eo, ease) !important;
}

.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(5, 5, 5, 0.35) !important;
}

.blog-link {
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.blog-link:hover {
  color: var(--ac) !important;
}

/* Blog category chips */
.blog-cat,
.agency-tag,
.tag-chip,
[class*="blog-tag"],
[class*="post-tag"] {
  cursor: default !important;
  color: rgba(244, 240, 234, 0.45) !important;
  border-color: rgba(244, 240, 234, 0.12) !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

html.theme-light .blog-cat,
html.theme-light .agency-tag,
html.theme-light .tag-chip,
html.theme-light [class*="blog-tag"],
html.theme-light [class*="post-tag"] {
  color: rgba(13, 11, 8, 0.45) !important;
  border-color: rgba(13, 11, 8, 0.15) !important;
}

/* Hover effect on clickable tags */
a.blog-cat:hover,
a.agency-tag:hover {
  cursor: pointer !important;
  color: var(--ac) !important;
  border-color: var(--ac) !important;
  background: rgba(243, 129, 79, 0.08) !important;
}

/* Blog article page: article content cursor fix */
.blog-article a,
.article-body a,
.post-content a {
  cursor: pointer !important;
  color: var(--ac) !important;
}

/* ── 21. CONTACT CARDS — "Reach Us Directly" ── */
/* Give cards a distinct background from the section so they're visible in all modes */
.contact-card {
  background: var(--bg3, #141414) !important;
  border-radius: 0 !important;
  transition: background 0.25s ease, transform 0.2s ease !important;
}

/* Remove cursor:none from card contents — cards are links, must show pointer */
.contact-card,
.contact-card *,
.contact-card-val,
.contact-card-lbl,
.contact-card-arr {
  cursor: pointer !important;
}

.contact-card:hover {
  background: var(--bg2, #0c0c0c) !important;
}

/* Card label visibility (--tx3 invisible on dark bg) */
.contact-card-lbl {
  color: rgba(244, 240, 234, 0.38) !important;
}

.contact-card-title {
  color: var(--tx, rgba(244, 240, 234, 0.88)) !important;
}

.contact-card-arr {
  color: rgba(244, 240, 234, 0.35) !important;
}

.contact-card:hover .contact-card-arr {
  color: var(--ac) !important;
}

/* ── 21b. CONTACT CARDS — light mode ── */
html.theme-light .contact-methods-grid {
  background: rgba(13, 11, 8, 0.1) !important;
  border-color: rgba(13, 11, 8, 0.12) !important;
}

html.theme-light .contact-card {
  background: #faf9f6 !important;
}

html.theme-light .contact-card:hover {
  background: #f0ece4 !important;
}

html.theme-light .contact-card-lbl {
  color: rgba(13, 11, 8, 0.38) !important;
}

html.theme-light .contact-card-title {
  color: #0d0b08 !important;
}

html.theme-light .contact-card-val {
  color: #5c5852 !important;
}

html.theme-light .contact-card-arr {
  color: rgba(13, 11, 8, 0.35) !important;
}

/* ── 22. FEAT-ICO — light & hybrid-light visibility ── */
/* --ac3 at 6–10% opacity is invisible on cream card backgrounds;
   use the orange accent at 15% for a clearly visible icon badge */
html.theme-light .feat-ico,
[data-hybrid-light] .feat-ico,
html.theme-light .why-ico,
[data-hybrid-light] .why-ico,
html.theme-light .tech-ico,
[data-hybrid-light] .tech-ico,
html.theme-light .build-ico,
[data-hybrid-light] .build-ico,
html.theme-light .schedule-perk-ico,
[data-hybrid-light] .schedule-perk-ico,
html.theme-light .inc-ico,
[data-hybrid-light] .inc-ico,
html.theme-light .mig-ico,
[data-hybrid-light] .mig-ico,
html.theme-light .plat-icon,
[data-hybrid-light] .plat-icon,
html.theme-light .seo-check-ico,
[data-hybrid-light] .seo-check-ico,
html.theme-light .how-step-ico,
[data-hybrid-light] .how-step-ico {
  background: rgba(243, 129, 79, 0.15) !important;
  border: 1px solid rgba(243, 129, 79, 0.2) !important;
}

/* ── 23. FOOTER LINKS — hover visibility in light mode ── */
/* Footer stays dark in light mode but var(--tx) resolves to #0d0b08,
   making hovered links invisible on the dark background */
html.theme-light footer .ft-links a:hover {
  color: rgba(244, 240, 234, 0.92) !important;
}

html.theme-light footer .ft-links a {
  color: rgba(244, 240, 234, 0.55) !important;
}

/* ── 24. CTA-SEC-H — hybrid mode visibility ── */
/* In hybrid mode cta-sec gets data-hybrid-light (light bg) but
   var(--tx) is still the dark-mode off-white — text disappears */
[data-hybrid-light] .cta-sec-h {
  color: #0d0b08 !important;
}

[data-hybrid-light] .cta-sec-lbl {
  color: rgba(13, 11, 8, 0.42) !important;
}

[data-hybrid-light] .cta-sec-lbl::before {
  background: rgba(13, 11, 8, 0.42) !important;
}

html.theme-light .contact-card:hover .contact-card-arr {
  color: var(--ac) !important;
}

html.theme-light .contact-card-ico {
  background: rgba(243, 129, 79, 0.12) !important;
}

/* ── 21c. CONTACT CARDS — hybrid mode ── */
[data-hybrid-light] .contact-card {
  background: #e8e4db !important;
}

[data-hybrid-light] .contact-card:hover {
  background: #dedad1 !important;
}

[data-hybrid-light] .contact-card-lbl {
  color: rgba(13, 11, 8, 0.38) !important;
}

[data-hybrid-light] .contact-card-title {
  color: #0d0b08 !important;
}

[data-hybrid-light] .contact-card-val {
  color: #5c5852 !important;
}

[data-hybrid-light] .contact-card-arr {
  color: rgba(13, 11, 8, 0.35) !important;
}

[data-hybrid-light] .contact-card:hover .contact-card-arr {
  color: var(--ac) !important;
}

[data-hybrid-light] .contact-card-ico {
  background: rgba(243, 129, 79, 0.12) !important;
}

[data-hybrid-light] .contact-methods-grid {
  background: rgba(13, 11, 8, 0.08) !important;
  border-color: rgba(13, 11, 8, 0.08) !important;
}

/* ── 20. MEDIA QUERY FIXES ── */
@media (max-width: 768px) {

}

/* ── 22. SERVICES MEGA-MENU DROPDOWN ── */
.nav-has-drop {
  position: relative;
}

.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer !important;
  transition: color .2s;
  font-family: var(--fb);
}

.nav-drop-trigger:hover,
.nav-has-drop:hover .nav-drop-trigger {
  color: var(--tx);
}

.nav-drop-trigger.svc-active {
  color: var(--tx);
}

.drop-arr {
  transition: transform .25s var(--eo);
  flex-shrink: 0;
  opacity: .55;
}

.nav-has-drop:hover .drop-arr {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 580px;
  background: var(--bg2);
  border: 1px solid var(--bd2);
  border-radius: 1rem;
  padding: .75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--eo), transform .22s var(--eo);
  z-index: 500;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .65), 0 0 0 1px rgba(244, 240, 234, .03);
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: var(--bg2);
  border-left: 1px solid var(--bd2);
  border-top: 1px solid var(--bd2);
}

/* invisible bridge so moving mouse to dropdown doesn't close it */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.nav-has-drop:hover .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.nav-drop-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: .625rem;
  cursor: pointer !important;
  transition: background .18s;
  text-decoration: none;
}

.nav-drop-item:hover {
  background: var(--bg3);
}

.nav-drop-item:hover .nav-drop-title {
  color: var(--ac);
}

.nav-drop-ico {
  width: 30px;
  height: 30px;
  border-radius: .375rem;
  background: rgba(243, 129, 79, .08);
  border: 1px solid rgba(243, 129, 79, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ac);
  margin-top: .05rem;
}

.nav-drop-ico svg {
  width: 13px;
  height: 13px;
}

.nav-drop-title {
  font-family: var(--ff);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(244, 240, 234, 0.92); /* Always bright on dark dropdown panel */
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: .15rem;
  transition: color .18s;
}

.nav-drop-desc {
  font-size: .7rem;
  color: rgba(244, 240, 234, 0.42); /* Visible muted text on dark panel */
  line-height: 1.45;
}

/* Active service highlight in dropdown */
.nav-drop-item.is-current {
  background: rgba(243, 129, 79, .06);
}

.nav-drop-item.is-current .nav-drop-title {
  color: var(--ac);
}

/* Light mode overrides */
html.theme-light .nav-dropdown {
  background: #f5f2ec !important;
  border-color: rgba(13, 11, 8, .15) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .18) !important;
}

html.theme-light .nav-dropdown::before {
  background: #f5f2ec !important;
  border-color: rgba(13, 11, 8, .15) !important;
}

html.theme-light .nav-drop-item:hover {
  background: #e8e4db !important;
}

html.theme-light .nav-drop-title {
  color: #0d0b08 !important;
}

html.theme-light .nav-drop-desc {
  color: rgba(13, 11, 8, .50) !important;
}

/* ── 22b. MOBILE NAVIGATION SYSTEM — OVERRIDE & PREMIUM REDESIGN ── */
.mobnav {
  display: flex !important; /* Always flex but invisible when closed to allow smooth transitions */
  position: fixed !important;
  inset: 0 !important;
  background: rgba(5, 5, 5, 0.98) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  z-index: 2000 !important; /* Ensure it is ABOVE the header nav (z-index: 1000) */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.96) !important;
  transition: opacity 0.4s var(--eo), transform 0.4s var(--eo) !important;
}

.mobnav.on {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
}

/* Scrollable container for menu contents */
.mobnav-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  height: 100%;
  padding: 100px 40px 40px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobnav-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
}

/* Standardized premium typography for ALL mobile links */
.mobnav-link,
.mobnav-svc-btn {
  font-family: var(--ff) !important;
  font-size: 1.7rem !important; /* Elegant size, not too huge */
  font-weight: 600 !important;
  color: var(--tx) !important;
  text-decoration: none !important;
  text-transform: none !important; /* Preserves premium Title-case */
  letter-spacing: -.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  align-self: flex-start !important;
  background: none !important;
  border: none !important;
  padding: 0.15rem 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  gap: 0.6rem !important;
  transition: color 0.3s var(--eo), transform 0.3s var(--eo) !important;
}

.mobnav-link:hover,
.mobnav-svc-btn:hover {
  color: var(--ac) !important;
  transform: translateX(6px);
}



/* Call-to-action button in mobile nav */
.mobnav-link.cta {
  background: var(--ac) !important;
  color: #050505 !important;
  font-size: 0.8rem !important; /* Exact match with home page btn */
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 0.65rem 1.5rem !important; /* Exact match with home page btn */
  margin-top: 1rem !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  align-self: flex-start !important;
  transition: background 0.3s var(--eo), transform 0.3s var(--eo), box-shadow 0.3s var(--eo) !important;
}

.mobnav-link.cta .btn-arr {
  margin-left: 0.5em !important;
  width: 0.85em !important;
  height: 0.85em !important;
}

.mobnav-link.cta:hover {
  background: #d96b38 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(243, 129, 79, 0.25) !important;
}

/* Dropdown / accordion group styling */
.mobnav-svc-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobnav-svc-btn.open {
  color: var(--ac) !important;
}

.mobnav-svc-arr {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2px !important;
  transition: transform 0.3s var(--eo) !important;
  opacity: 0.6 !important;
}

.mobnav-svc-btn.open .mobnav-svc-arr {
  transform: rotate(180deg) !important;
  opacity: 1 !important;
  color: var(--ac) !important;
}

/* Re-styled sub-list for Services */
.mobnav-svc-list {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  border-left: 1.5px solid var(--bd2) !important;
  margin: 0.5rem 0 0.5rem 0.5rem !important;
  padding-left: 1.25rem !important;
  transition: all 0.3s var(--eo) !important;
}

.mobnav-svc-list.open {
  display: flex !important;
}

.mobnav-svc-list a {
  font-family: var(--fb) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: var(--tx2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0.35rem 0 !important;
  display: block !important;
  transition: color 0.25s var(--eo), transform 0.25s var(--eo) !important;
}

.mobnav-svc-list a:hover {
  color: var(--ac) !important;
  transform: translateX(4px);
}

/* Premium circular Close button overlay */
.mobnav-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244, 240, 234, 0.12) !important;
  background: rgba(244, 240, 234, 0.03) !important;
  color: var(--tx) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2001 !important; /* Always sits above menu overlay content */
  transition: all 0.3s var(--eo) !important;
}

.mobnav-close:hover {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
  color: #050505 !important;
  transform: rotate(90deg) !important;
}

/* Menu footer at bottom */
.mobnav-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--bd);
  margin-top: 2rem;
  padding-top: 2rem;
}

.mobnav-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#mobThemeToggle .theme-toggle {
  margin-left: 0 !important; /* Reset desktop margin */
}

.mobnav-email {
  font-family: var(--fm) !important;
  font-size: 0.8rem !important;
  color: var(--tx2) !important;
  text-decoration: none !important;
  transition: color 0.3s var(--eo) !important;
  display: inline-block;
  align-self: flex-start;
}

.mobnav-email:hover {
  color: var(--ac) !important;
  text-decoration: underline !important;
}

.mobnav-soc {
  display: flex;
  gap: 0.75rem;
}

.mobnav-soc a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244, 240, 234, 0.25) !important;
  background: rgba(244, 240, 234, 0.05) !important;
  color: rgba(244, 240, 234, 0.85) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s var(--eo) !important;
}

.mobnav-soc a svg {
  width: 15px !important;
  height: 15px !important;
}

.mobnav-soc a:hover {
  border-color: var(--ac) !important;
  color: #050505 !important;
  background: var(--ac) !important;
  transform: translateY(-2.5px) !important;
  box-shadow: 0 4px 12px rgba(243, 129, 79, 0.2) !important;
}

/* Light Mode Overrides for Premium Mobile Menu */
html.theme-light .mobnav {
  background: rgba(245, 242, 236, 0.98) !important;
}

html.theme-light .mobnav-close {
  border-color: rgba(13, 11, 8, 0.12) !important;
  background: rgba(13, 11, 8, 0.03) !important;
}

html.theme-light .mobnav-close:hover {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
  color: #050505 !important;
}

html.theme-light .mobnav-soc a {
  border-color: rgba(13, 11, 8, 0.25) !important;
  background: rgba(13, 11, 8, 0.05) !important;
  color: rgba(13, 11, 8, 0.85) !important;
}

html.theme-light .mobnav-soc a:hover {
  border-color: var(--ac) !important;
  color: #050505 !important;
  background: var(--ac) !important;
}

/* ── 23. SVG BUTTON ARROW & HOVER EFFECTS ── */
.btn-arr {
  display: inline-block;
  vertical-align: middle;
  width: 0.82em;
  height: 0.82em;
  stroke: currentColor;
  stroke-width: 1.8px;
  flex-shrink: 0;
  transition: transform 0.25s var(--eo, ease);
  margin-left: 0.35em;
  position: relative;
  top: -0.05em;
}

.btn:hover .btn-arr,
.nav-cta:hover .btn-arr,
.svc-link:hover .btn-arr {
  transform: translate(1.5px, -1.5px);
}

/* ── 24. MOBILE FOOTER SPACING & WATERMARK OVERLAP FIX ── */
@media (max-width: 768px) {
  footer {
    padding-bottom: 4.5rem !important;
  }
  .ft-bot {
    margin-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }
  footer::after {
    bottom: 0.1em !important;
    font-size: clamp(2rem, 12.5vw, 5.5rem) !important;
  }
}

/* ── BRAND LOGO SVG STYLING ── */
svg.brand-logo {
  height: 1.15em; 
  width: auto;
  display: block;
}

.nav-logo svg.brand-logo {
  height: 2.2em; /* Increased size specifically for navbar */
}

.ft-logo svg.brand-logo,
footer svg.brand-logo {
  height: 1.7em; /* Increased size for footer */
  color: #f4f0ea !important; /* Footer is always dark, force text to white */
}