/*! YouSee360 CSS bundle — 8 files, exact concatenation of:
 * perf-fixes.css
 * mobile.css
 * wow.css
 * v2-extras.css
 * motion.css
 * aurora.css
 * refine.css
 * a11y-fixes.css
 */
/* ===== perf-fixes.css ===== */
/* ============================================================
   YOUSEE360 — SCROLL PERFORMANCE FIXES
   Loaded LAST. Strips expensive paint triggers off elements that
   don't benefit from them, so native scrolling stays smooth.
   ============================================================ */

/* 1. Kill backdrop-filter on static cards/panels — they sit on a
      solid dark bg so the blur is pure cost with no visual benefit.
      Keep blur only on the nav and dropdown which actually overlap content. */
.ds-card,
.bento-card,
.value-card,
.ys-package,
.ys-testimonial,
.ys-portfolio-tile,
.ys-contact-card,
.glass-panel,
.featured-tour-container,
.utility-page-content,
.ys-trust,
.ys-trust-badge,
.contact-item,
.faq-item,
.accordion-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. The custom-cursor CSS used mix-blend-mode: difference, which
      promotes layers and causes paint storms even when the cursor is
      hidden. Force it off site-wide. */
.ys-cursor-dot,
.ys-cursor-ring {
  mix-blend-mode: normal !important;
}

/* 3. Limit will-change to the elements that animate. Indiscriminate
      will-change on transitions makes the GPU hold layers forever. */
.ds-card, .bento-card, .value-card, .ys-package,
.ys-testimonial, .ys-portfolio-tile, .nav-cta,
.portfolio-card, .ys-trust-badge, .ds-btn {
  will-change: auto;
}
.ds-card:hover, .bento-card:hover, .value-card:hover,
.ys-package:hover, .ys-portfolio-tile:hover, .nav-cta:hover,
.portfolio-card:hover, .ds-btn:hover {
  will-change: transform;
}

/* 4. Off-screen sections skip layout/paint until near viewport. */
section, .ys-section, .ds-section,
.ys-portfolio-teaser, .ys-testimonials, .ys-pricing,
.values-section, .mission-section, .founder-section,
.process-timeline, .industry-applications, .strategic-benefits {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
/* Don't apply to hero — first paint matters there */
.hero-section, section.hero-section,
.about-hero, .portfolio-hero,
section[id="Hero"], #Hero {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/* 5. Disable expensive card cursor-tracking glow on mid/low-power
      devices and during scroll. */
@media (max-width: 1024px), (pointer: coarse) {
  .ds-card::before, .bento-card::before { display: none !important; }
}

/* 6. Tone down hover transition that animates box-shadow on big cards
      (shadow re-blur during scroll = janky on weaker GPUs). */
.ds-card, .bento-card, .value-card,
.ys-package, .portfolio-card {
  transition: transform .3s cubic-bezier(0.16,1,0.3,1),
              border-color .3s ease !important;
}
.ds-card:hover, .bento-card:hover, .value-card:hover,
.ys-package:hover, .portfolio-card:hover {
  box-shadow: none !important;
}
.ds-card:hover, .bento-card:hover, .value-card:hover,
.ys-package:hover, .portfolio-card:hover,
.ys-portfolio-tile:hover {
  transform: translateY(-3px);
}

/* 7. Pannellum + tour iframes — promote to their own layer so they
      don't repaint with surrounding content. */
.ys-360-hero, .featured-tour-container, [data-pannellum] {
  transform: translateZ(0);
}

/* 8. The marquee animation — confine to its own layer */
.ys-marquee-track {
  will-change: transform;
  transform: translateZ(0);
}

/* 9. Body / html — let the browser scroll natively */
html { scroll-behavior: auto !important; }
body { overflow-x: hidden; }

/* 10. Reveal animations — shorten transition + don't animate filters */
[data-reveal] {
  transition: opacity .5s ease-out, transform .5s ease-out !important;
}

/* ============================================================
   HOMEPAGE SERVICES — replace clipping slider with clean grid
   ============================================================ */
.modern-services-slider-container {
  overflow: visible !important;
  padding: var(--s-5, 48px) clamp(20px, 4vw, 40px) !important;
  max-width: 1200px !important;
}
.modern-services-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--s-3, 24px) !important;
  transform: none !important;
  cursor: default !important;
  overflow: visible !important;
}
.modern-slide {
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}
.modern-service-card {
  height: 100% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)), #0f1219 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-lg, 24px) !important;
  padding: var(--s-5, 40px) var(--s-4, 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), border-color .3s !important;
  box-shadow: none !important;
}
.modern-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,136,0.3) !important;
  box-shadow: none !important;
}
.service-icon-circle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(0,255,136,0.18), rgba(1,228,228,0.08)) !important;
  border: 1px solid rgba(0,255,136,0.22);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3, 20px) !important;
  color: var(--ys-green, #00ff88) !important;
  font-size: 1.25rem !important;
}
.service-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  line-height: 1.25 !important;
  word-break: normal !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.service-title strong { color: var(--ys-green, #00ff88); font-weight: 800; }
.service-description {
  font-size: 0.9375rem !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 1;
}

/* Hide the slider controls (no longer needed) */
.slider-navigation,
.modern-services-slider-container .slider-button,
.modern-services-slider-container .slider-pagination {
  display: none !important;
}

@media (max-width: 980px) {
  .modern-services-slider { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .modern-services-slider { grid-template-columns: 1fr !important; }
  .modern-service-card { padding: 32px 24px !important; }
}

/* ===== mobile.css ===== */
/* ============================================================
   YOUSEE360 — MOBILE EXPERIENCE
   Full mobile redesign: menu, sticky action bar, FAB, 360 gyro,
   typography. Loaded last; mobile-first conversion-focused.
   ============================================================ */

/* The JS-injected mobile menu CTA — hidden on desktop, only shown
   when the mobile menu is open (rules inside @media below). */
.ys-mobile-top-cta {
  display: none !important;
}

/* ============================================================
   1. MOBILE NAV FIX — close behavior + X icon + CTA-first
   ============================================================ */
@media (max-width: 980px) {

  /* The menu container */
  .navigation-menu,
  .navigation-menu.w-nav-menu {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    background: rgba(6, 7, 10, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 88px 20px max(20px, env(safe-area-inset-bottom)) !important;
    gap: 2px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%) !important;
    transition: transform .35s cubic-bezier(0.16,1,0.3,1) !important;
    z-index: 99998 !important;
    visibility: hidden;
    pointer-events: none;
  }
  .w-nav[data-nav-menu-open] .navigation-menu,
  .navigation-menu.w--nav-menu-open,
  .navigation-menu.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Persistent mobile CTA at TOP of open menu — real <a> element */
  .navigation-menu::before { content: none !important; }
  .ys-mobile-top-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 22px !important;
    margin: 0 0 14px 0;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #00ff88, #2dffa6) !important;
    color: #001a10 !important;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 8px 24px -8px rgba(0,255,136,0.5);
    flex-shrink: 0;
    min-height: 56px;
    width: 100%;
  }
  .ys-mobile-top-cta::after { content: "→"; transition: transform .2s; }
  .ys-mobile-top-cta:active::after { transform: translateX(3px); }
  .navigation-menu .nav-cta {
    display: none !important; /* hide the bottom-positioned one — replaced by ys-mobile-top-cta */
  }
  /* On mobile, show the top CTA inside the open menu */
  .navigation-menu .ys-mobile-top-cta { display: flex !important; }

  /* Each link gets a big tap target + chevron */
  .navigation-link,
  .w-dropdown-toggle {
    width: 100%;
    padding: 18px 20px !important;
    font-size: 1.0625rem !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04);
    margin: 0 !important;
    min-height: 56px;
    justify-content: space-between !important;
    color: rgba(255,255,255,0.92) !important;
  }
  .navigation-link:hover,
  .navigation-link:active,
  .w-dropdown-toggle:active {
    background: rgba(0,255,136,0.06) !important;
    border-color: rgba(0,255,136,0.18) !important;
  }
  .navigation-link.w--current {
    background: rgba(0,255,136,0.08) !important;
    border-color: rgba(0,255,136,0.25) !important;
  }
  .navigation-link.w--current::after { display: none; }

  /* Right side block in menu — language switch only on mobile */
  .navigation-menu .nav-right {
    display: flex !important;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    width: 100%;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .nav-lang-switch {
    width: auto !important;
    padding: 10px 16px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.7) !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  /* Dropdown panel (Services / Industries) */
  .w-dropdown { width: 100%; }
  .w-dropdown.is-open .w-dropdown-toggle,
  .w-dropdown.w--open .w-dropdown-toggle {
    background: rgba(0,255,136,0.06) !important;
    border-color: rgba(0,255,136,0.18) !important;
    color: #fff !important;
  }
  .w-dropdown.is-open .w-icon-dropdown-toggle,
  .w-dropdown.w--open .w-icon-dropdown-toggle { transform: rotate(180deg); }
  /* High specificity selectors to override nav-v2.css desktop rules */
  .navigation-menu .w-dropdown-list,
  .navigation-menu .w-dropdown-list.w--open,
  .w-dropdown .w-dropdown-list,
  .w-dropdown.w--open .w-dropdown-list,
  .w-dropdown.is-open .w-dropdown-list {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 4px 0 6px !important;
    grid-template-columns: 1fr !important;
    background: rgba(0,255,136,0.03) !important;
    border: 1px solid rgba(0,255,136,0.08) !important;
    padding: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important;
    border-radius: 13px !important;
    box-shadow: none !important;
  }
  .w-dropdown.is-open .w-dropdown-list,
  .w-dropdown.w--open .w-dropdown-list,
  .navigation-menu .w-dropdown.is-open .w-dropdown-list,
  .navigation-menu .w-dropdown.w--open .w-dropdown-list { display: grid !important; }
  .w-dropdown-link {
    padding: 14px 16px !important;
    font-size: 0.9375rem !important;
    min-height: 48px;
    border-radius: 13px !important;
  }
  .w-dropdown-link::before { font-size: 0.6875rem !important; }
  .w-dropdown-link[data-icon]::after {
    font-size: 1rem !important;
    top: 14px !important;
  }

  /* Hamburger BUTTON — animate to X when open */
  .hamburger-button {
    width: 48px !important;
    height: 48px !important;
    z-index: 100000 !important;
    position: relative !important;
  }
  .hamburger-button .icon::before,
  .hamburger-button .icon::after,
  .hamburger-button .icon span {
    background: #fff !important;
  }
  .navigation-bar.is-menu-open .hamburger-button .icon::before {
    top: 7px !important;
    transform: rotate(45deg);
  }
  .navigation-bar.is-menu-open .hamburger-button .icon::after {
    bottom: 7px !important;
    transform: rotate(-45deg);
  }
  .navigation-bar.is-menu-open .hamburger-button .icon span {
    opacity: 0;
    transform: scaleX(0);
  }

  /* When menu is open, lock the nav bg so it doesn't flicker */
  .navigation-bar.is-menu-open {
    background: rgba(6,7,10,0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Body lock when menu open */
  body.menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }
}

/* ============================================================
   2. STICKY BOTTOM ACTION BAR (mobile only)
   ============================================================ */
.ys-mob-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9990;
  display: none;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  background: rgba(8, 10, 14, 0.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 21px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1), opacity .25s ease;
}
.ys-mob-bar.is-hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.ys-mob-bar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  transition: transform .15s ease, background .25s ease;
}
.ys-mob-bar a:active { transform: scale(0.97); }
.ys-mob-bar a.btn-call {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.ys-mob-bar a.btn-wa {
  background: rgba(37,211,102,0.15);
  color: #25d366;
  border: 1px solid rgba(37,211,102,0.35);
}
.ys-mob-bar a.btn-quote {
  background: linear-gradient(135deg, #00ff88, #2dffa6);
  color: #001a10;
  flex: 1.4;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(0,255,136,0.5);
}
.ys-mob-bar i { font-size: 1rem; }

@media (max-width: 768px) {
  .ys-mob-bar { display: flex; }
  /* Sticky bar clearance handled by body padding below */

  /* Portfolio tour cards: taller (portrait) so the 360 is more visible */
  body.aurora-on .portfolio-card-media,
  .portfolio-card-media {
    aspect-ratio: 3 / 4 !important;
  }
  /* Featured tour taller on mobile too */
  .featured-tour-container { min-height: 70vh; }

  /* Portfolio: force single column + contain width (no horizontal overflow) */
  .portfolio-showcase {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .portfolio-card { max-width: 100% !important; }
  .portfolio-grid-section,
  .portfolio-filter-section,
  .featured-project-section,
  .portfolio-hero { overflow-x: clip; }
  .portfolio-filter-bar {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 8px !important;
    padding: 0 16px !important;
  }
  .featured-tour-container { max-width: 100% !important; }
}

/* ============================================================
   3. FLOATING CONTACT FAB (mobile only)
   Tap to expand contact methods radially.
   ============================================================ */
.ys-fab {
  position: fixed;
  right: 16px;
  bottom: calc(86px + env(safe-area-inset-bottom)); /* above the action bar */
  z-index: 9991;
  display: none;
}
.ys-fab-trigger {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00ff88, #2dffa6);
  color: #001a10;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0,255,136,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
  -webkit-tap-highlight-color: transparent;
}
.ys-fab.is-open .ys-fab-trigger { transform: rotate(45deg); }

.ys-fab-options {
  position: absolute;
  right: 4px;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ys-fab.is-open .ys-fab-options {
  opacity: 1;
  pointer-events: auto;
}
.ys-fab-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(10px);
  transition: transform .25s cubic-bezier(0.16,1,0.3,1) calc(var(--i, 0) * .04s), background .2s;
}
.ys-fab.is-open .ys-fab-option { transform: translateY(0); }
.ys-fab-option:active { background: rgba(0,255,136,0.15); }
.ys-fab-option i { color: var(--ys-green, #00ff88); width: 18px; }

@media (max-width: 768px) {
  .ys-fab { display: block; }
}

/* ============================================================
   4. GYROSCOPE 360 — overlay + permission prompt
   ============================================================ */
.ys-gyro-prompt {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  text-align: center;
  padding: 24px;
}
.ys-gyro-prompt.is-visible { display: flex; }
.ys-gyro-prompt-inner {
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ys-gyro-prompt-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,136,0.25), rgba(1,228,228,0.1));
  border: 1px solid rgba(0,255,136,0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ys-green, #00ff88);
  font-size: 1.5rem;
  animation: gyro-tilt 2s ease-in-out infinite;
}
@keyframes gyro-tilt {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}
.ys-gyro-prompt h4 {
  font-size: 1.0625rem !important;
  margin: 0 !important;
  font-weight: 700 !important;
}
.ys-gyro-prompt p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  margin: 0 !important;
}
.ys-gyro-prompt button {
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00ff88, #2dffa6);
  color: #001a10;
  border: none;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ys-gyro-active-badge {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,255,136,0.18);
  border: 1px solid rgba(0,255,136,0.4);
  color: var(--ys-green, #00ff88);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 6px;
}
.ys-gyro-active-badge.is-visible { display: inline-flex; }
.ys-gyro-active-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ys-green, #00ff88);
  box-shadow: 0 0 8px rgba(0,255,136,0.8);
  animation: ds-pulse 1.5s ease-in-out infinite;
}

/* ============================================================
   5. MOBILE TYPOGRAPHY & SPACING TIGHTENING
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-display: clamp(2.25rem, 9vw, 3.25rem);
    --fs-h1: clamp(1.875rem, 6.5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 5vw, 2rem);
    --fs-body: 1rem;
    --section-py: clamp(48px, 8vw, 80px);
    --section-py-lg: clamp(64px, 10vw, 96px);
  }
  h1, .h1, .heading, .hero-heading,
  .apple-heading, .hero-section h1, .about-hero h1, .portfolio-hero h1 {
    font-size: clamp(2rem, 8.5vw, 3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  h2, .h2, .section-heading, .heading-2,
  .sexy-heading, .mission-title {
    font-size: clamp(1.625rem, 5.5vw, 2.25rem) !important;
    line-height: 1.1 !important;
  }
  h3, .h3, .bento-title, .service-title { font-size: 1.125rem !important; }

  /* Service/industry heroes shorten on mobile; homepage video hero stays full */
  .hero-section[data-service], .hero-section[data-industry], .hero-section.bg-dark:not(#Hero) {
    min-height: auto !important;
    padding: 100px 16px 40px !important;
  }
  #Hero.hero-section {
    height: 100vh !important;
    min-height: 560px !important;
    padding: 0 !important;
  }
  .about-hero, .portfolio-hero {
    min-height: auto !important;
    padding: 100px 16px 40px !important;
  }

  /* Reduce extreme padding everywhere */
  .ds-section, .section, section, .ys-section { padding: 56px 0 !important; }
  .container, .w-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Cards smaller padding */
  .ds-card, .bento-card, .value-card, .ys-package,
  .ys-testimonial, .modern-service-card { padding: 24px !important; }

  /* Why Us bento — clean 3-stat row + 2-feature row, no overlapping */
  #WhyUs .bento-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
  }
  /* Override ALL col-X rules on mobile */
  #WhyUs .bento-card,
  #WhyUs .bento-card.col-4,
  #WhyUs .bento-card.col-6,
  #WhyUs .bento-card.col-8,
  #WhyUs .bento-card.col-12 {
    grid-column: span 1 !important;
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 10px !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(0,255,136,0.04), rgba(255,255,255,0.005)), #0f1219 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Feature cards (col-6) span full row of 3 */
  #WhyUs .bento-card.col-6 {
    grid-column: span 3 !important;
    padding: 22px 18px !important;
  }
  #WhyUs .bento-content {
    width: 100% !important;
    text-align: center !important;
  }
  #WhyUs .bento-stat {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
    color: var(--ys-cyan, #01e4e4) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
  }
  #WhyUs .bento-text {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    color: rgba(255,255,255,0.65) !important;
    margin: 0 !important;
  }
  #WhyUs .bento-card.col-6 .bento-text {
    font-size: 0.8125rem !important;
  }
  #WhyUs .bento-title {
    font-size: 1rem !important;
    margin: 8px 0 4px !important;
    color: #fff !important;
  }
  #WhyUs .bento-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 8px !important;
    font-size: 0.875rem !important;
  }
  /* Belt-and-braces fallback under 380px: stack stats vertically */
  @media (max-width: 380px) {
    #WhyUs .bento-grid { grid-template-columns: 1fr 1fr !important; }
    #WhyUs .bento-card.col-6 { grid-column: span 2 !important; }
    #WhyUs .bento-card { padding: 16px 8px !important; }
    #WhyUs .bento-stat { font-size: 1.375rem !important; }
  }

  /* Bottom-of-page padding so last section doesn't sit under action bar (single source of truth) */
  body { padding-bottom: 88px !important; }

  /* Marquee smaller */
  .ys-marquee-item { font-size: clamp(1.5rem, 7vw, 2rem) !important; }

  /* Testimonials stack already done */
  /* Portfolio grid mobile */
  .ys-portfolio-grid { min-height: 0; grid-template-rows: none !important; }
  .ys-portfolio-grid > a:nth-child(1) { grid-row: auto !important; }

  /* Trust strip wraps tighter */
  .ys-trust-badges { gap: 8px !important; }
  .ys-trust-badge { padding: 8px 12px !important; font-size: 0.8125rem !important; }

  /* Hide nav-right items on mobile when collapsed (they appear inside open menu) */
  .navigation-bar .nav-right { display: none !important; }

  /* Footer CTA tighter */
  .ys-footer-v2 .ys-footer-cta h2 { font-size: 1.875rem !important; line-height: 1.1 !important; }

  /* Buttons grow tap target */
  .ds-btn, .btn-primary, .nav-cta { min-height: 48px; padding: 13px 22px !important; }

  /* The 360 hero on service pages — reduce height */
  .ys-360-hero { height: 360px !important; }
  /* body padding-bottom set above (single source) */
}

/* ============================================================
   6. SCROLL FATIGUE REDUCTION — collapse heavy sections
   ============================================================ */
@media (max-width: 768px) {
  /* Hide marquee on mobile — too much visual noise alongside everything else */
  .ys-marquee { display: none !important; }

  /* Hide the homepage social-proof-bar duplicate (it appears twice) */
  .social-proof-bar { padding: 24px 16px !important; }
}

/* ============================================================
   7. ENTRY ANIMATIONS — subtle for mobile
   ============================================================ */
@media (max-width: 768px) {
  [data-reveal] {
    transition: opacity .4s ease-out, transform .4s ease-out !important;
    transform: translateY(12px) !important;
  }
  [data-reveal].is-visible { transform: none !important; }
}

/* ============================================================
   9. HOW WE WORK — centered, contained on mobile
   ============================================================ */
@media (max-width: 768px) {
  #How.section,
  section#How {
    padding: 56px 0 !important;
  }
  #How .container { padding: 0 !important; }
  .process-tabs {
    padding: 0 !important;
    max-width: 100%;
  }

  /* Tab buttons: horizontal scroll snap row, centered start */
  .process-tab-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 8px !important;
    padding: 4px 16px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
  }
  .process-tab-buttons::-webkit-scrollbar { display: none; }
  .process-tab-btn {
    flex: 0 0 auto !important;
    scroll-snap-align: center;
    padding: 10px 18px !important;
    font-size: 0.8125rem !important;
    border-radius: 999px !important;
    white-space: nowrap;
    min-height: 40px;
    text-transform: uppercase !important;
    letter-spacing: 0.08em;
  }

  /* Panel: contained inside viewport, centered, glass card */
  .process-tab-panels {
    padding: 0 16px;
    margin: 0;
    box-sizing: border-box;
  }
  .process-tab-panel {
    padding: 0 !important;
    margin: 0 !important;
  }
  .process-tab-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
    text-align: center !important;
    padding: 28px 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border-radius: 21px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)), #0f1219 !important;
    border: 1px solid rgba(0,255,136,0.15) !important;
  }
  .process-tab-text {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .process-tab-text .step-number {
    display: inline-block !important;
    margin-bottom: 12px !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--ys-green, #00ff88) !important;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.22);
  }
  .process-tab-text h3,
  .process-tab-text .sexy-heading {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
    margin: 8px 0 12px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center !important;
    letter-spacing: -0.02em;
  }
  .process-tab-text p,
  .process-tab-text .bento-description {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.7) !important;
    margin: 0 !important;
  }
  /* Visual icon: smaller, centered, with glow circle */
  .process-tab-visual {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    font-size: 1.75rem !important;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,255,136,0.18), rgba(1,228,228,0.08)) !important;
    border: 1px solid rgba(0,255,136,0.3);
    color: var(--ys-green, #00ff88) !important;
    text-shadow: none !important;
    order: -1;
  }

  /* === ROI CALCULATOR mobile fix === */
  #ROICalculator.section .section-title-group,
  #ROICalculator .section-title-group {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 16px;
  }
  #ROICalculator h2.sexy-heading {
    text-align: center !important;
    font-size: clamp(1.625rem, 5.5vw, 2.25rem) !important;
    line-height: 1.1 !important;
    margin: 0 auto var(--s-2) !important;
  }
  #ROICalculator .section-subheading {
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    font-size: 0.9375rem !important;
  }
  #ROICalculator .glass-card {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    margin: 24px 16px 0 !important;
    padding: 20px !important;
    gap: 24px !important;
  }
  #ROICalculator .roi-results,
  #ROICalculator .roi-inputs {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* === Contact section heading center on mobile === */
  #Contact .section-title-group,
  #Contact h2 { text-align: center !important; }
}

/* ============================================================
   10. SERVICES GRID — elegant horizontal swipe-card carousel on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* ============================================================
     SERVICES — IMMERSIVE CARD STACK (mobile)
     Vertical stack of full-width cards, unique accent color per
     service, animated sheen on press, counter badges, staggered
     reveal. No more horizontal swipe, no more tiny tiles.
     ============================================================ */

  /* Force section into single-column block layout */
  main#What.section,
  #What.section.wwd {
    display: block !important;
    padding: 64px 0 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #What .container-8,
  #What .container-8.w-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Section heading row — centered, full width */
  main#What .section-title-group,
  #What .section-title-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    margin: 0 0 36px !important;
    text-align: center !important;
    float: none !important;
  }

  /* Hide ALL old slider controls */
  .slider-navigation,
  .modern-services-slider-container .slider-button,
  .modern-services-slider-container .slider-pagination,
  .modern-services-slider-container::before,
  .modern-services-slider-container::after {
    display: none !important;
  }

  .modern-services-slider-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: none !important;
  }

  /* Vertical stack — counter-reset for the badge numbers */
  .modern-services-slider {
    counter-reset: ys-svc !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    scroll-snap-type: none !important;
  }

  .modern-slide {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-increment: ys-svc !important;
    position: relative;
  }

  /* Brand colors only — green + cyan (consistent across all cards) */
  .modern-slide .modern-service-card { --accent: #00ff88; --accent2: #22d3ee; }

  /* THE IMMERSIVE CARD */
  .modern-service-card {
    --accent: #00ff88;
    --accent2: #2dffa6;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 26px 24px !important;
    border-radius: 21px !important;
    background:
      radial-gradient(140% 110% at 100% -10%, rgba(0,255,136,0.16), transparent 55%),
      radial-gradient(130% 90% at -10% 110%, rgba(1,228,228,0.10), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005)),
      #0a0d14 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow:
      0 28px 56px -28px rgba(0,0,0,0.6),
      0 0 0 1px rgba(255,255,255,0.02) inset !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .3s cubic-bezier(0.16,1,0.3,1),
                border-color .35s ease,
                box-shadow .35s ease !important;
    text-align: left !important;
    isolation: isolate;
  }

  /* Diagonal accent strip top-left — visual identity */
  .modern-service-card > .service-icon-circle {
    width: 54px !important;
    height: 54px !important;
    margin: 0 0 16px !important;
    border-radius: 13px !important;
    font-size: 1.4rem !important;
    background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
    border: none !important;
    color: #04120c !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px -10px rgba(0,255,136,0.6);
    position: relative;
    z-index: 2;
  }
  .modern-service-card > .service-icon-circle i {
    color: #04120c !important;
  }

  /* Counter badge top-right ("01" "02" etc.) */
  .modern-service-card::after {
    content: counter(ys-svc, decimal-leading-zero);
    position: absolute;
    top: 22px;
    right: 22px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: color-mix(in srgb, var(--accent) 75%, white);
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,0.4));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    z-index: 3;
    backdrop-filter: blur(8px);
  }

  /* Animated sheen on press */
  .modern-service-card::before {
    content: "";
    position: absolute;
    top: -120%; left: -20%;
    width: 140%; height: 340%;
    background: linear-gradient(
      45deg,
      transparent 42%,
      color-mix(in srgb, var(--accent) 14%, transparent) 50%,
      transparent 58%
    );
    opacity: 0;
    transform: translateY(40%);
    transition: opacity .4s ease, transform .9s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
    z-index: 1;
  }
  .modern-service-card:active::before {
    opacity: 1;
    transform: translateY(0);
  }

  /* Active state */
  .modern-service-card:active {
    transform: scale(0.985);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
    box-shadow:
      0 28px 56px -28px rgba(0,0,0,0.7),
      0 0 32px -8px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset !important;
  }

  /* Title — large, bold, left-aligned */
  .modern-service-card > .service-title {
    position: relative;
    z-index: 2;
    font-size: 1.25rem !important;
    margin: 0 0 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: #ffffff !important;
    text-align: left !important;
    width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .modern-service-card > .service-title strong {
    color: var(--accent);
    font-weight: 700;
  }

  /* Description — brighter for legibility */
  .modern-service-card > .service-description {
    position: relative;
    z-index: 2;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.82) !important;
    margin: 0 0 16px !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1;
  }

  /* "Explore →" CTA pinned at bottom-right of each card */
  .modern-service-card .service-cta,
  .modern-slide .modern-service-card::after {
    /* keeping ::after for counter, will inject CTA via JS or rely on description ::after */
  }
  /* Inject Explore CTA in the corner via container */
  .modern-slide::after {
    content: "Explore →";
    position: absolute;
    bottom: 22px;
    right: 24px;
    z-index: 3;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--accent, #00ff88) 90%, white);
    pointer-events: none;
    transition: transform .3s cubic-bezier(0.16,1,0.3,1);
  }
  .modern-slide:active::after { transform: translateX(4px); }

  /* Staggered entrance reveal */
  .modern-slide {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s cubic-bezier(0.16,1,0.3,1),
                transform .55s cubic-bezier(0.16,1,0.3,1);
  }
  .modern-slide.is-visible { opacity: 1; transform: none; }
  .modern-slide:nth-child(1) { transition-delay: 0.06s; }
  .modern-slide:nth-child(2) { transition-delay: 0.12s; }
  .modern-slide:nth-child(3) { transition-delay: 0.18s; }
  .modern-slide:nth-child(4) { transition-delay: 0.24s; }
  .modern-slide:nth-child(5) { transition-delay: 0.30s; }
  .modern-slide:nth-child(6) { transition-delay: 0.36s; }
}

/* Fallback: browsers without color-mix support — keep accent visible */
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  @media (max-width: 768px) {
    .modern-service-card {
      background:
        radial-gradient(140% 110% at 100% -10%, rgba(0,255,136,0.16), transparent 55%),
        #0a0d14 !important;
      border-color: rgba(0,255,136,0.2) !important;
    }
    .modern-service-card::after {
      color: var(--accent, #00ff88) !important;
      background: rgba(0,255,136,0.1) !important;
      border-color: rgba(0,255,136,0.3) !important;
    }
  }
}

/* ============================================================
   Z. HIDE DUPLICATES on mobile
   The bottom action bar already gives Call + WhatsApp + Quote.
   The old floating widgets are removed for the mobile breakpoint.
   ============================================================ */
@media (max-width: 768px) {
  /* Old standalone WhatsApp floater */
  .whatsapp-float,
  a.whatsapp-float,
  .whatsapp-floating-button { display: none !important; }
  /* Old "Book Your Tour Now" sticky CTA on home */
  .mobile-sticky-cta,
  a.mobile-sticky-cta { display: none !important; }
  /* Any leftover floating contact widgets */
  .floating-contact,
  .floating-cta:not(.ys-fab):not(.ys-mob-bar) { display: none !important; }
}

/* On desktop keep the original whatsapp floater visible only if user wants it */
@media (min-width: 769px) {
  .whatsapp-float { z-index: 9989; }
}

/* ============================================================
   8. SUPER-COOL TOUCH RIPPLE on .ripple-able buttons
   ============================================================ */
.ripple-able { position: relative; overflow: hidden; }
.ripple-able .ys-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  pointer-events: none;
  animation: ys-ripple .55s cubic-bezier(0.16,1,0.3,1);
}
@keyframes ys-ripple {
  to { transform: scale(3.5); opacity: 0; }
}

/* ===== wow.css ===== */
/* ============================================================
   YOUSEE360 — WOW LAYER
   Coolest-ever effects: mesh bg, magnetic CTAs, 3D tilt, hero
   text reveal, counters, spotlight cursor, page transitions.
   Loaded last in the cascade.
   ============================================================ */

/* ============================================================
   1. ANIMATED MESH GRADIENT BACKGROUND (body)
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(at 22% 18%, rgba(0,255,136,0.16) 0px, transparent 38%),
    radial-gradient(at 78% 32%, rgba(1,228,228,0.10) 0px, transparent 42%),
    radial-gradient(at 30% 78%, rgba(255,61,166,0.06) 0px, transparent 40%),
    radial-gradient(at 88% 90%, rgba(0,255,136,0.07) 0px, transparent 42%);
  filter: blur(40px);
  opacity: 0.65;
  animation: ys-mesh-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,7,10,0.4) 0%, rgba(6,7,10,0.92) 100%);
}
@keyframes ys-mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
/* Only show on dark sections (which is everywhere) */
.ys-error-page,
.utility-page-wrap {
  isolation: isolate; /* keep error pages from sitting under the mesh */
}

/* ============================================================
   2. MAGNETIC CTA — buttons drift toward cursor (desktop)
   JS sets --mag-x / --mag-y, CSS animates.
   ============================================================ */
.ys-magnetic {
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.ys-magnetic.is-near {
  transform: translate(var(--mag-x, 0), var(--mag-y, 0));
}
@media (hover: none) {
  .ys-magnetic { transform: none !important; }
}

/* ============================================================
   3. 3D CARD TILT — perspective + cursor-following depth
   ============================================================ */
.ys-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.ys-tilt > * { transform: translateZ(20px); transform-style: preserve-3d; }
.ys-tilt .icon-wrap,
.ys-tilt .service-icon-circle,
.ys-tilt .bento-icon-wrapper,
.ys-tilt .value-icon { transform: translateZ(40px); }
@media (hover: none), (max-width: 980px) {
  .ys-tilt { transform: none !important; }
  .ys-tilt > * { transform: none !important; }
}

/* ============================================================
   4. HERO TEXT REVEAL — letter-by-letter mask
   ============================================================ */
.ys-reveal-text {
  display: inline-block;
  /* overflow was hidden to mask the per-word slide-up. With that animation
     removed it only risks clipping descenders on g, y and p. */
  overflow: visible;
  vertical-align: bottom;
}
/* These spans are injected into hero H1s at runtime by wow.js. They used to be
   opacity:0 with a translateY, made visible only when a CSS animation ran to
   completion — so a headline's legibility depended on an animation finishing.
   A paused animation clock (a background tab at load, or throttling on a slow
   phone) holds the first keyframe indefinitely and leaves the headline blank,
   clipped by the wrapper's overflow. That was reported in the wild: a hero
   headline rendering only its first line.
   The per-word animation is therefore gone. The heading still reveals as a
   whole via .ys-heading-reveal in motion.css, which is transition-based and
   whose resting state cannot trap the text invisible. */
.ys-reveal-text > .ys-letter,
.ys-reveal-text > .ys-word {
  display: inline-block;
  transform: none;
  opacity: 1;
  animation: none;
  white-space: pre;
}
@media (prefers-reduced-motion: reduce) {
  .ys-reveal-text > .ys-letter,
  .ys-reveal-text > .ys-word { transform: none; opacity: 1; animation: none; }
}

/* ============================================================
   5. SPOTLIGHT CURSOR — radial light follows pointer
   Subtle ambient illumination of the section under the cursor.
   ============================================================ */
.ys-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,255,136,0.10) 0%,
    rgba(0,255,136,0.04) 30%,
    transparent 65%);
  transform: translate(-50%, -50%) translate3d(0,0,0);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform, opacity;
}
.ys-spotlight.is-visible { opacity: 1; }
@media (hover: none), (max-width: 980px) { .ys-spotlight { display: none; } }

/* ============================================================
   6. CINEMATIC PAGE TRANSITION
   ============================================================ */
.ys-page-transition {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: linear-gradient(135deg, #00ff88 0%, #2dffa6 50%, #01e4e4 100%);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}
.ys-page-transition.is-entering {
  transform: translateY(0);
  transition: transform .55s cubic-bezier(0.65, 0, 0.35, 1);
}
.ys-page-transition.is-leaving {
  transform: translateY(-100%);
  transition: transform .55s cubic-bezier(0.65, 0, 0.35, 1) .05s;
}
.ys-page-transition .ys-loader-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(0,26,16,0.15);
  border: 2px solid rgba(0,26,16,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001a10;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  animation: ys-spin 1s linear infinite;
}
@keyframes ys-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ============================================================
   7. ANIMATED COUNTERS
   ============================================================ */
.ys-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1ch;
}

/* ============================================================
   8. SHIMMER LINK — green underline animates under links
   ============================================================ */
.ys-shimmer {
  position: relative;
  display: inline-block;
}
.ys-shimmer::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -3px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--ys-green, #00ff88), transparent);
  transition: right .4s cubic-bezier(0.16,1,0.3,1);
}
.ys-shimmer:hover::after { right: 0; }

/* ============================================================
   9. NOISY GLITCH on key headings (opt-in via .glitch)
   ============================================================ */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.glitch:hover::before {
  color: var(--ys-cyan, #01e4e4);
  transform: translate(-2px, 0);
  animation: ys-glitch-1 .35s ease;
  opacity: 0.85;
}
.glitch:hover::after {
  color: var(--ys-accent-pink, #ff3da6);
  transform: translate(2px, 0);
  animation: ys-glitch-2 .35s ease;
  opacity: 0.85;
}
@keyframes ys-glitch-1 {
  0%,100% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(10% 0 70% 0); }
  40% { clip-path: inset(50% 0 25% 0); }
  60% { clip-path: inset(75% 0 5% 0); }
  80% { clip-path: inset(20% 0 60% 0); }
}
@keyframes ys-glitch-2 {
  0%,100% { clip-path: inset(0 0 0 0); }
  25% { clip-path: inset(60% 0 15% 0); }
  50% { clip-path: inset(15% 0 70% 0); }
  75% { clip-path: inset(40% 0 30% 0); }
}

/* ============================================================
   10. SECTION ENTRY — staggered fade-up by index
   ============================================================ */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
}
[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1),
              transform .8s cubic-bezier(0.16,1,0.3,1);
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   11. SCROLL BORDER ACCENT — green line draws on as you scroll
   ============================================================ */
.ys-side-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(0,255,136,0) 0%, rgba(0,255,136,0.4) 50%, rgba(0,255,136,0) 100%);
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.ys-side-rail.is-visible { opacity: 1; }
@media (max-width: 980px) { .ys-side-rail { display: none; } }

/* ============================================================
   12. CTA AURORA — green aura around primary CTAs
   ============================================================ */
.ds-btn-primary,
.nav-cta,
.pkg-btn:not(.ghost) {
  position: relative;
  isolation: isolate;
}
.ds-btn-primary::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, rgba(0,255,136,0.6), rgba(45,255,166,0.6), rgba(1,228,228,0.4));
  border-radius: inherit;
  filter: blur(10px);
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease;
}
.ds-btn-primary:hover::before,
.nav-cta:hover::before { opacity: 0.85; }

/* ===== v2-extras.css ===== */
/* ============================================================
   YOUSEE360 — V2 EXTRAS
   Trusted-by logos strip, quote estimator, service-page enrichment.
   ============================================================ */

/* ============================================================
   1. TRUSTED BY — auto-scrolling logo strip
   ============================================================ */
.ys-trusted {
  padding: var(--s-6, 64px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, transparent, rgba(0,255,136,0.015), transparent);
  overflow: hidden;
  position: relative;
}
.ys-trusted-label {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin: 0 0 var(--s-4, 32px);
  font-weight: 600;
}
.ys-trusted-track-mask {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ys-trusted-track {
  display: flex;
  width: max-content;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  animation: ys-trusted-scroll 38s linear infinite;
  padding-right: clamp(40px, 6vw, 80px);
}
.ys-trusted-track:hover { animation-play-state: paused; }
.ys-trusted-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.375rem);
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  transition: color .3s;
}
.ys-trusted-item:hover { color: #fff; }
.ys-trusted-item i {
  color: rgba(0,255,136,0.6);
  font-size: 0.875em;
}
@keyframes ys-trusted-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ys-trusted-track { animation: none; }
}

/* ============================================================
   2. QUOTE ESTIMATOR — interactive 3-step widget
   ============================================================ */
.ys-estimator {
  padding: var(--section-py) 0;
  position: relative;
}
.ys-estimator-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.ys-estimator-card {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(0,255,136,0.05), rgba(1,228,228,0.02) 50%, rgba(255,255,255,0.01) 100%), #0c0e15;
  border: 1px solid rgba(0,255,136,0.18);
  border-radius: var(--radius-lg, 24px);
  box-shadow: 0 30px 80px -40px rgba(0,255,136,0.3), 0 0 0 1px rgba(255,255,255,0.03) inset;
  overflow: hidden;
}
.ys-estimator-card::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0,255,136,0.18) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.ys-estimator-header {
  text-align: center;
  margin-bottom: var(--s-5, 40px);
  position: relative;
  z-index: 1;
}
.ys-estimator-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin: 0 0 8px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ys-estimator-header p {
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  margin: 0;
}

.ys-estimator-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: var(--s-5, 40px);
  position: relative;
  z-index: 1;
}
.ys-estimator-step {
  text-align: center;
  padding: 14px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
}
.ys-estimator-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.3);
  color: var(--ys-green, #00ff88);
  margin-bottom: 6px;
}
.ys-estimator-step.is-active .num {
  background: linear-gradient(135deg, #00ff88, #2dffa6);
  color: #001a10;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(0,255,136,0.15);
}
.ys-estimator-step .label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}
.ys-estimator-step.is-active .label { color: #fff; }

.ys-estimator-body { position: relative; z-index: 1; }
.ys-estimator-panel {
  display: none;
}
.ys-estimator-panel.is-active { display: block; animation: ys-fade-in .3s ease; }
@keyframes ys-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ys-estimator-panel h3 {
  font-size: 1.125rem !important;
  margin: 0 0 16px !important;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ys-estimator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ys-estimator-option {
  position: relative;
  padding: 16px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255,255,255,0.85);
}
.ys-estimator-option:hover {
  background: rgba(0,255,136,0.05);
  border-color: rgba(0,255,136,0.25);
}
.ys-estimator-option.is-selected {
  background: linear-gradient(135deg, rgba(0,255,136,0.12), rgba(1,228,228,0.04));
  border-color: rgba(0,255,136,0.5);
  box-shadow: 0 0 0 3px rgba(0,255,136,0.08);
}
.ys-estimator-option:active { transform: scale(0.98); }
.ys-estimator-option .opt-emoji {
  font-size: 1.25rem;
  line-height: 1;
}
.ys-estimator-option .opt-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: 4px;
}
.ys-estimator-option .opt-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

.ys-estimator-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-4, 32px);
  position: relative;
  z-index: 1;
}
.ys-estimator-back, .ys-estimator-next {
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s, background .2s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ys-estimator-back {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.ys-estimator-back:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ys-estimator-back:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.ys-estimator-next {
  background: linear-gradient(135deg, #00ff88, #2dffa6);
  color: #001a10;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(0,255,136,0.5);
}
.ys-estimator-next:active { transform: scale(0.97); }
.ys-estimator-next:hover {
  box-shadow: 0 12px 26px -6px rgba(0,255,136,0.7);
}

.ys-estimator-result {
  text-align: center;
  padding: var(--s-4, 32px) 0;
}
.ys-estimator-result .price {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #00ff88, #2dffa6 50%, #01e4e4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
  margin: 8px 0 4px;
}
.ys-estimator-result .price-range {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--s-3, 24px);
}
.ys-estimator-result .price-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.25);
  color: var(--ys-green, #00ff88);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.ys-estimator-result .breakdown {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin: 16px 0 24px;
}
.ys-estimator-result .breakdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: left;
}
.ys-estimator-result .breakdown li {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ys-estimator-result .breakdown li::before {
  content: "✓";
  color: var(--ys-green, #00ff88);
}
.ys-estimator-result .actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.ys-estimator-result .actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: transform .2s;
}
.ys-estimator-result .actions a:active { transform: scale(0.97); }
.ys-estimator-result .actions .primary {
  background: linear-gradient(135deg, #00ff88, #2dffa6);
  color: #001a10;
  box-shadow: 0 8px 24px -8px rgba(0,255,136,0.5);
}
.ys-estimator-result .actions .ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}

@media (max-width: 600px) {
  .ys-estimator-steps { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .ys-estimator-step { padding: 10px 6px; }
  .ys-estimator-step .num { width: 26px; height: 26px; font-size: 0.75rem; }
  .ys-estimator-step .label { font-size: 0.625rem; letter-spacing: 0.12em; }
}

/* ============================================================
   3. SERVICE PAGE ENRICHMENT BLOCKS — "What's Included" + FAQ + Specs
   ============================================================ */
.ys-includes {
  padding: var(--section-py) 0;
}
.ys-includes-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.ys-includes h2 {
  font-size: var(--fs-h2) !important;
  margin: 0 0 var(--s-2);
  font-weight: 700;
}
.ys-includes > .ys-includes-inner > p.lead {
  color: rgba(255,255,255,0.65);
  font-size: 1.0625rem;
  margin: 0 0 var(--s-5);
  max-width: 720px;
}
.ys-includes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ys-includes-item {
  padding: 22px 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  transition: border-color .25s;
}
.ys-includes-item:hover { border-color: rgba(0,255,136,0.25); }
.ys-includes-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem !important;
  margin: 0 0 8px !important;
  color: #fff;
  font-weight: 600;
}
.ys-includes-item h3 i {
  color: var(--ys-green, #00ff88);
  font-size: 0.875em;
}
.ys-includes-item p {
  color: rgba(255,255,255,0.6);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

/* Service FAQ */
.ys-faq {
  padding: var(--section-py) 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ys-faq-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.ys-faq h2 {
  font-size: var(--fs-h2) !important;
  margin: 0 0 var(--s-4);
  text-align: center;
  font-weight: 700;
}
.ys-faq-item {
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  border-radius: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s;
}
.ys-faq-item:hover { border-color: rgba(0,255,136,0.18); }
.ys-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ys-faq-question::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--ys-green, #00ff88);
  transition: transform .25s;
  flex-shrink: 0;
}
.ys-faq-item.is-open .ys-faq-question::after {
  transform: rotate(45deg);
}
.ys-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(0.16,1,0.3,1);
}
.ys-faq-item.is-open .ys-faq-answer { max-height: 400px; }
.ys-faq-answer p {
  padding: 0 22px 18px;
  color: rgba(255,255,255,0.65);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* ===== motion.css ===== */
/* ============================================================
   YOUSEE360 — MOTION LAYER (award-winning patterns)
   - Split-text reveals
   - Scroll-velocity skew typography
   - Magnetic CTAs
   - Image hover pan-zoom
   - Cursor halo light (desktop)
   - Marquee scroll-direction reversal
   - Pinned counter animations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ys-split-char, .ys-split-word { opacity: 1 !important; transform: none !important; }
  .ys-skew-host { transform: none !important; }
  .ys-magnetic { transform: none !important; }
}

/* ============================================================
   1. HEADING REVEAL — whole-element fade-up
   ============================================================ */
.ys-heading-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
              transform .7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.ys-heading-reveal.is-revealed {
  opacity: 1;
  transform: none;
}
/* Legacy classes (in case old wrapping persisted on cached pages) */
.ys-split-word,
.ys-split-word > span,
.ys-split-char {
  display: inline !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ============================================================
   2. SCROLL-VELOCITY SKEW (signature awwwards effect)
   Sections wrapped in .ys-skew-host get a subtle skewY based on
   scroll velocity (driven via CSS variable set by JS).
   ============================================================ */
.ys-skew-host {
  transform: skewY(var(--ys-skew, 0deg));
  transform-origin: 50% 0;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ============================================================
   3. MAGNETIC CTAs (mouse-pull on hover within radius)
   Set via JS; CSS just defines the smooth transform.
   ============================================================ */
.ys-magnetic {
  display: inline-block;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ============================================================
   4. HOVER PAN-ZOOM IMAGES (portfolio tiles, related cards)
   Subtle internal pan + zoom while keeping container static.
   ============================================================ */
.ys-portfolio-tile img,
.ys-includes-item img,
.modern-service-card img {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter .6s ease;
  will-change: transform;
}
.ys-portfolio-tile:hover img {
  transform: scale(1.08) translate(-1%, -2%);
}
/* Subtle parallax pan based on mouse position (set --px / --py in JS) */
.ys-portfolio-tile.has-pan img {
  transform: scale(1.08) translate(calc(var(--px, 0) * -1%), calc(var(--py, 0) * -1%));
}

/* ============================================================
   5. CURSOR HALO (desktop only)
   A soft radial glow that follows the mouse on sections marked
   .ys-halo. Provides "lit" atmosphere on dark sections.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .ys-halo {
    position: relative;
    isolation: isolate;
  }
  .ys-halo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      360px circle at var(--mx, 50%) var(--my, 50%),
      rgba(0, 255, 136, 0.06),
      transparent 60%
    );
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .ys-halo:hover::before { opacity: 1; }
  /* Lift halo children above the glow. Wrapped in :where() so this carries
     ZERO specificity — a component that positions itself (e.g. the absolutely
     positioned .scroll-indicator) keeps its own `position` instead of being
     silently forced back to `relative` and flung off-screen by its own
     `left: 50%`. Elements with no positioning of their own still get lifted. */
  :where(.ys-halo) > :where(*) { position: relative; z-index: 1; }
}

/* ============================================================
   6. MARQUEE — scroll-direction-driven speed/direction
   ============================================================ */
.ys-marquee-track,
.ys-trusted-track {
  /* Drive via CSS variable for direction (1 = forward, -1 = reverse) */
  animation-direction: normal;
  animation-play-state: var(--marquee-state, running);
}
.ys-marquee.is-reversed .ys-marquee-track,
.ys-trusted.is-reversed .ys-trusted-track {
  animation-direction: reverse;
}
/* Scroll-down speed boost */
.ys-marquee.is-fast .ys-marquee-track,
.ys-trusted.is-fast .ys-trusted-track {
  animation-duration: 20s;
}

/* ============================================================
   7. NUMBER COUNTERS — pinned animation effect
   ============================================================ */
[data-counter-up] {
  font-variant-numeric: tabular-nums;
}
[data-counter-up]::after {
  content: attr(data-suffix);
}

/* ============================================================
   8. LINK UNDERLINE THAT FOLLOWS MOUSE
   ============================================================ */
.ys-link-anim {
  position: relative;
  display: inline-block;
}
.ys-link-anim::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--lx, 0%) center;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ys-link-anim:hover::after { transform: scaleX(1); }

/* ============================================================
   9. BUTTON LIQUID HOVER (CTAs)
   Subtle morph + sheen on green primary CTAs.
   ============================================================ */
.nav-cta,
.ds-btn-primary,
.pkg-btn,
.ys-fab-trigger,
.ys-mob-bar a.btn-quote,
.ys-mobile-top-cta,
.ys-form-submit,
.ys-estimator-next {
  position: relative;
  overflow: hidden;
}
.nav-cta::before,
.ds-btn-primary::before,
.pkg-btn::before,
.ys-mob-bar a.btn-quote::before,
.ys-mobile-top-cta::before,
.ys-form-submit::before,
.ys-estimator-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.nav-cta:hover::before,
.ds-btn-primary:hover::before,
.pkg-btn:hover::before,
.ys-mob-bar a.btn-quote:hover::before,
.ys-mobile-top-cta:hover::before,
.ys-form-submit:hover::before,
.ys-estimator-next:hover::before {
  transform: translateX(120%);
}
.nav-cta > *,
.ds-btn-primary > *,
.pkg-btn > * {
  position: relative;
  z-index: 2;
}

/* ============================================================
   10. SECTION INTRO — scroll-driven reveal with mask
   Sections with [data-mask-reveal] expose content from bottom
   via clip-path as they enter viewport.
   ============================================================ */
[data-mask-reveal] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
[data-mask-reveal].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   11. FLOATING ORBS background (subtle dark-section atmosphere)
   ============================================================ */
.ys-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.ys-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: ys-orb-drift 22s ease-in-out infinite;
}
.ys-orbs span:nth-child(1) {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.35), transparent 60%);
  top: -8%; left: 12%;
}
.ys-orbs span:nth-child(2) {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(1, 228, 228, 0.25), transparent 60%);
  bottom: -10%; right: 5%;
  animation-delay: -7s;
}
.ys-orbs span:nth-child(3) {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255, 61, 166, 0.18), transparent 60%);
  top: 35%; right: 30%;
  animation-delay: -14s;
}
@keyframes ys-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.1); }
  66% { transform: translate(-40px, 50px) scale(0.95); }
}

/* ============================================================
   12a. IMPRESSIVE HEADINGS — more visual weight
   Heavier weight, tighter tracking, more dramatic line-height
   ============================================================ */
.sexy-heading,
.apple-heading,
.hero-heading,
.ds-section-header h2,
.ys-section-header h2,
.section-title-group h2,
.ys-includes h2,
.ys-faq h2,
.ys-related h2,
.ys-pricing .header h2,
.ys-testimonials .header h2,
.ys-estimator-header h2,
.ys-footer-cta h2,
.ys-portfolio-teaser .header h2 {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  font-feature-settings: "ss01", "ss02";
  text-wrap: balance;
}
.sexy-heading,
.apple-heading,
.section-title-group h2,
.ds-section-header h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
}

/* Highlight word: brighter glow + gradient */
.highlight {
  background: linear-gradient(135deg, #00ff88 0%, #2dffa6 40%, #01e4e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(0, 255, 136, 0.45));
  font-weight: 800;
  display: inline-block;
}

/* ============================================================
   SECTION-TAG REDESIGN — bigger, bolder, kinetic
   Three layered elements: animated indicator bar, big number,
   tracked label. Gradient border. Glow. Feels like a proper
   badge instead of a tiny pill.
   ============================================================ */
.section-tag {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px !important;
  border-radius: 21px !important;
  background:
    linear-gradient(135deg, rgba(0,255,136,0.12), rgba(1,228,228,0.06)),
    rgba(0,0,0,0.4) !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
  color: #fff !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(0,255,136,0.25),
    0 8px 24px -10px rgba(0,255,136,0.35),
    0 0 32px -16px rgba(0,255,136,0.55);
  backdrop-filter: blur(8px);
  margin-bottom: 28px !important;
}
/* Animated gradient ring around the tag */
.section-tag::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(0,255,136,0.7) 0%,
    rgba(1,228,228,0.5) 35%,
    transparent 50%,
    rgba(0,255,136,0.5) 75%,
    rgba(0,255,136,0.7) 100%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ys-tag-border 4s linear infinite;
}
@keyframes ys-tag-border {
  to { background-position: 300% 0; }
}
/* Lead indicator — three vertical bars equalizer effect */
.section-tag::before {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image:
    linear-gradient(var(--ys-green, #00ff88), var(--ys-green, #00ff88)),
    linear-gradient(var(--ys-green, #00ff88), var(--ys-green, #00ff88)),
    linear-gradient(var(--ys-green, #00ff88), var(--ys-green, #00ff88));
  background-repeat: no-repeat;
  background-size: 2px 100%, 2px 100%, 2px 100%;
  background-position: 0 50%, 50% 50%, 100% 50%;
  animation: ys-tag-eq 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(0,255,136,0.7));
}
@keyframes ys-tag-eq {
  0%, 100% { background-size: 2px 35%, 2px 100%, 2px 60%; }
  35%      { background-size: 2px 100%, 2px 50%, 2px 85%; }
  70%      { background-size: 2px 60%, 2px 80%, 2px 35%; }
}
/* Center-aligned section tags: subtle entrance lift */
.section-title-group.centered .section-tag,
.ys-section-header .section-tag {
  margin-bottom: 24px !important;
}
@media (max-width: 768px) {
  .section-tag {
    font-size: 0.75rem !important;
    padding: 10px 18px 10px 14px !important;
    letter-spacing: 0.24em !important;
    gap: 10px;
    border-radius: 13px !important;
  }
  .section-tag::before { width: 12px; height: 12px; }
}

@media (max-width: 768px) {
  .sexy-heading,
  .apple-heading,
  .hero-heading,
  .section-title-group h2 {
    font-size: clamp(1.625rem, 7vw, 2.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
  }
}

/* ============================================================
   12. KINETIC EYEBROW — small bouncing arrow on labels
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  animation: ys-eyebrow-tick 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ys-eyebrow-tick {
  0%, 100% { width: 12px; opacity: 0.6; }
  50% { width: 36px; opacity: 1; }
}

/* ===== aurora.css ===== */
/* ============================================================
   YOUSEE360 — AURORA (brand green + cyan)
   Immersive Three.js stage + glassmorphism content overlays.
   Loads AFTER all other CSS to take precedence.
   ============================================================ */

:root {
  /* Brand palette — green + cyan only */
  --aurora-bg:        #02060a;
  --aurora-bg-deep:   #03090e;

  --aurora-green:     #00ff88;
  --aurora-green-2:   #2dffa6;
  --aurora-cyan:      #22d3ee;
  --aurora-cyan-2:    #01e4e4;
  --aurora-teal:      #2dd4bf;

  --aurora-glow-green: rgba(0, 255, 136, 0.55);
  --aurora-glow-cyan:  rgba(34, 211, 238, 0.5);
  --aurora-glow-teal:  rgba(45, 212, 191, 0.4);

  --aurora-text:       #eaf7f0;
  --aurora-text-muted: rgba(234, 247, 240, 0.62);
  --aurora-text-dim:   rgba(234, 247, 240, 0.38);

  --aurora-border:        rgba(255,255,255,0.08);
  --aurora-border-strong: rgba(255,255,255,0.15);

  --ease-aurora: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   THE AURORA CANVAS — fixed full-viewport Three.js stage
   ============================================================ */
.ys-aurora {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: -2;
  pointer-events: none;
  background: transparent;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  body.ys-aurora-interactive .ys-aurora {
    pointer-events: auto;
    cursor: grab;
  }
  body.ys-aurora-interactive.ys-aurora-dragging .ys-aurora {
    cursor: grabbing;
  }
}
.ys-aurora-fallback {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, var(--aurora-glow-green) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 15%, var(--aurora-glow-cyan)  0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, var(--aurora-glow-teal)  0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(0, 255, 136, 0.25)     0%, transparent 60%),
    var(--aurora-bg);
  animation: aurora-shift-fallback 22s ease-in-out infinite alternate;
}
@keyframes aurora-shift-fallback {
  0%   { filter: hue-rotate(-6deg) brightness(0.95) saturate(1.05); }
  100% { filter: hue-rotate(8deg)  brightness(1.05) saturate(1.15); }
}

/* ============================================================
   BODY — transparent dark so aurora shows behind content
   ============================================================ */
body.aurora-on {
  background: var(--aurora-bg) !important;
  color: var(--aurora-text);
  position: relative;
}
/* Aurora canvas sits at z-index:-2, so normal content paints above it
   without forcing position on children (which previously broke fixed
   overlays like the mobile bar, FAB and contact modal — dropping them
   into flow and creating large empty space below the footer). */

body.aurora-on .navigation-bar { z-index: 99999 !important; }

/* ============================================================
   SECTION TRANSPARENCY — let aurora bleed through dark sections
   ============================================================ */
body.aurora-on .section,
body.aurora-on section.section,
body.aurora-on .ys-section,
body.aurora-on main,
body.aurora-on .ys-pricing,
body.aurora-on .ys-testimonials,
body.aurora-on .ys-trusted,
body.aurora-on .ys-portfolio-teaser,
body.aurora-on .ys-estimator,
body.aurora-on .ys-related,
body.aurora-on .ys-includes,
body.aurora-on .ys-faq,
body.aurora-on .case-studies-section,
body.aurora-on .strategic-benefits,
body.aurora-on .industry-applications,
body.aurora-on .process-timeline,
body.aurora-on .recommendations-section,
body.aurora-on .stats-section {
  background: transparent !important;
  background-image: none !important;
  position: relative;
}

body.aurora-on .section::before,
body.aurora-on section.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(2,6,10,0.55) 100%);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   GLASSMORPHISM CARDS — green-tinted glass
   ============================================================ */
body.aurora-on .ds-card,
body.aurora-on .bento-card,
body.aurora-on .ys-package,
body.aurora-on .ys-testimonial,
body.aurora-on .ys-portfolio-tile,
body.aurora-on .ys-includes-item,
body.aurora-on .ys-faq-item,
body.aurora-on .ys-related-card,
body.aurora-on .ys-trust-badge,
body.aurora-on .modern-service-card,
body.aurora-on .glass-card,
body.aurora-on .glass-panel,
body.aurora-on .case-study-card,
body.aurora-on .featured-tour-container {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(4, 10, 14, 0.55) !important;
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
body.aurora-on .ds-card:hover,
body.aurora-on .bento-card:hover,
body.aurora-on .ys-package:hover {
  border-color: rgba(0, 255, 136, 0.4) !important;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 255, 136, 0.25),
    0 0 60px -10px rgba(0, 255, 136, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Estimator + Contact glass card — deeper blur.
   NOTE: only apply to elements that are actually styled as cards (they carry
   their own padding + border-radius). Applying this to bare layout wrappers
   such as .ys-footer-cta or .modal-form-section produced hard-edged green
   rectangles hugging the content, because those have padding:0 / radius:0. */
body.aurora-on .ys-estimator-card,
body.aurora-on .ys-contact-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    rgba(3, 8, 12, 0.6) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(0, 255, 136, 0.2) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 255, 136, 0.15) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   NAV — refined glass over green aurora
   ============================================================ */
body.aurora-on .navigation-bar {
  background: rgba(3, 8, 12, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 255, 136, 0.1) !important;
}
body.aurora-on .navigation-bar.scrolled {
  background: rgba(2, 6, 10, 0.85) !important;
}

/* ============================================================
   TYPOGRAPHY ACCENT — green→cyan gradient text
   ============================================================ */
body.aurora-on .highlight {
  background: linear-gradient(120deg,
    var(--aurora-green) 0%,
    var(--aurora-green-2) 35%,
    var(--aurora-cyan) 70%,
    var(--aurora-green) 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(0, 255, 136, 0.55))
          drop-shadow(0 0 48px rgba(34, 211, 238, 0.3));
  animation: aurora-gradient-shift 9s ease-in-out infinite;
  font-weight: 800;
  text-shadow: none !important;
}
@keyframes aurora-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   SECTION TITLES — REDESIGNED FROM SCRATCH (authoritative)
   Editorial aurora style: gradient accent lines flanking a tracked
   label, a tight high-contrast heading with one gradient word, and a
   calm muted subhead. Overrides all legacy chip/equalizer/border styles.
   ============================================================ */

/* --- Eyebrow label: line · LABEL · line (no box, no blink) --- */
body.aurora-on .section-tag,
body.aurora-on .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 0 1.15rem !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: auto !important;
  color: var(--aurora-green, #00ff88) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-shadow: 0 0 18px rgba(0, 255, 136, 0.45);
}
/* Flanking gradient lines (reuse the legacy pseudos, fully restyled) */
body.aurora-on .section-tag::before,
body.aurora-on .section-tag::after,
body.aurora-on .eyebrow::before,
body.aurora-on .eyebrow::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  inset: auto !important;
  width: 26px !important;
  height: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, var(--aurora-green, #00ff88), var(--aurora-cyan, #22d3ee)) !important;
  background-size: auto !important;
  -webkit-mask: none !important;
          mask: none !important;
  -webkit-mask-composite: add !important;
          mask-composite: add !important;
  animation: none !important;
  filter: none !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.55) !important;
  opacity: 0.9;
}
/* Left-aligned eyebrows (e.g. inside split bento cards): only a leading line */
body.aurora-on .bento-card .section-tag { margin-bottom: 0.9rem !important; }
body.aurora-on .bento-card .section-tag::after { display: none !important; }

/* --- Section heading: tight, premium, single gradient highlight --- */
body.aurora-on .section-title-group .apple-heading,
body.aurora-on .section-title-group .sexy-heading,
body.aurora-on .section-title-group h2,
body.aurora-on .ys-section-header h2,
body.aurora-on .ys-includes h2,
body.aurora-on .ys-faq h2,
body.aurora-on .ys-related h2,
body.aurora-on .ys-pricing .header h2,
body.aurora-on .ys-testimonials .header h2,
body.aurora-on .success-stories h2,
body.aurora-on .strategic-benefits h2,
body.aurora-on .industry-applications h2,
body.aurora-on .process-timeline h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(1.85rem, 3.6vw, 2.78rem) !important; /* phi^2 = 44.5px */
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  margin: 0 0 1rem !important;
  text-shadow: none !important;
  text-wrap: balance;
}

/* --- Subheading: calm, readable, constrained --- */
body.aurora-on .section-subheading,
body.aurora-on .section-title-group p,
body.aurora-on .ys-section-header p {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
  color: var(--aurora-text-muted) !important;
  max-width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Group spacing + centering --- */
body.aurora-on .section-title-group {
  margin-bottom: clamp(2.5rem, 6vw, 4rem) !important;
}
body.aurora-on .section-title-group.centered { text-align: center; }
body.aurora-on .section-title-group.centered .section-tag { justify-content: center; }

/* Mobile: tighten the eyebrow + heading */
@media (max-width: 768px) {
  body.aurora-on .section-tag {
    font-size: 0.68rem !important;
    letter-spacing: 0.22em !important;
    gap: 9px !important;
  }
  body.aurora-on .section-tag::before,
  body.aurora-on .section-tag::after { width: 18px !important; }
}

/* ============================================================
   BUTTONS — primary CTAs become green→cyan pills
   ============================================================ */
body.aurora-on .nav-cta,
body.aurora-on .ds-btn-primary,
body.aurora-on .pkg-btn.is-featured,
body.aurora-on .pkg-btn,
body.aurora-on .ys-form-submit,
body.aurora-on .ys-estimator-next,
body.aurora-on .ys-mob-bar a.btn-quote,
body.aurora-on .ys-mobile-top-cta,
body.aurora-on .ys-fab-trigger {
  background:
    linear-gradient(135deg, var(--aurora-green) 0%, var(--aurora-green-2) 55%, var(--aurora-cyan) 100%) !important;
  color: #001a10 !important;
  box-shadow:
    0 12px 32px -8px rgba(0, 255, 136, 0.55),
    0 0 32px -8px rgba(34, 211, 238, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}
body.aurora-on .nav-cta:hover,
body.aurora-on .ds-btn-primary:hover {
  box-shadow:
    0 18px 44px -8px rgba(0, 255, 136, 0.7),
    0 0 48px -6px rgba(34, 211, 238, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* ============================================================
   HERO — homepage video hero gets aurora vignette tint
   ============================================================ */
body.aurora-on #Hero .hero-overlay {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0, 255, 136, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(34, 211, 238, 0.22) 0%, transparent 50%),
    radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%) !important;
}

/* Service / industry heroes — constellation bg gives way to aurora */
body.aurora-on .hero-section[data-service],
body.aurora-on .hero-section[data-industry],
body.aurora-on .hero-section.bg-dark:not(#Hero) {
  background: transparent !important;
}

/* ============================================================
   AURORA HINT (desktop)
   ============================================================ */
.ys-aurora-hint {
  position: fixed;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(2, 6, 10, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: rgba(234, 247, 240, 0.8);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease-aurora) .8s;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  body.ys-aurora-interactive .ys-aurora-hint { display: block; opacity: 1; }
  body.ys-aurora-hint-dismissed .ys-aurora-hint { opacity: 0; transition-delay: 0s; }
}
.ys-aurora-hint::before {
  content: "✥ ";
  color: var(--aurora-green);
}

/* ============================================================
   FOOTER — collapse trailing space
   ============================================================ */
body.aurora-on .footer,
body.aurora-on .ys-footer-v2 {
  margin-bottom: 0 !important;
  padding-bottom: 32px !important;
}
body.aurora-on .footer::after,
body.aurora-on .ys-footer-v2::after {
  content: none !important;
}
/* No bottom padding on desktop. Mobile gets its 88px from mobile.css. */
body.aurora-on { padding-bottom: 0 !important; }
@media (max-width: 768px) {
  body.aurora-on { padding-bottom: 88px !important; }
}

/* ============================================================
   LIVE 360 HERO (service + industry pages)
   The page title sits over a real, draggable 360 panorama instead
   of a dead starfield.
   ============================================================ */
body.aurora-on .ys-hero-live {
  position: relative !important;
  overflow: hidden !important;
  min-height: 88vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 40px) clamp(60px, 9vh, 110px) !important;
  background: #05070d !important;
}
.ys-hero-360-bg {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}
.ys-hero-360-bg .pnlm-container,
.ys-hero-360-bg canvas { width: 100% !important; height: 100% !important; }
/* Readability scrim over the pano */
.ys-hero-live-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(5,7,13,0.25) 0%, rgba(5,7,13,0.78) 78%),
    linear-gradient(180deg, rgba(5,7,13,0.55) 0%, transparent 28%, transparent 60%, rgba(5,7,13,0.85) 100%);
}
/* Title overlay — pointer-events off so drags reach the pano */
body.aurora-on .ys-hero-live .container,
body.aurora-on .ys-hero-live .container.centered {
  position: relative;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  max-width: 1000px;
}
body.aurora-on .ys-hero-live .container a,
body.aurora-on .ys-hero-live .container button { pointer-events: auto; }
/* Live badge pinned bottom-center */
.ys-hero-badge {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(4,8,6,0.6);
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: var(--aurora-green, #00ff88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  pointer-events: none;
  animation: hero-eyebrow-in 1s var(--ease-aurora) both;
}
.ys-hero-badge::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aurora-green, #00ff88);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.9);
  animation: live-pulse 1.4s ease-in-out infinite;
}
/* Industry stat counters over the pano — glassy chips */
body.aurora-on .ys-hero-live .industry-stats {
  margin-top: 1.6rem;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
body.aurora-on .ys-hero-live .industry-stats .stat-item {
  padding: 12px 22px;
  border-radius: 21px;
  background: rgba(4,8,12,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
@media (max-width: 600px) {
  body.aurora-on .ys-hero-live { min-height: 78vh !important; }
}

/* ============================================================
   HOMEPAGE HERO — premium eyebrow, trust strip, buttons
   ============================================================ */
body.aurora-on #Hero .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}
/* Eyebrow chip */
body.aurora-on .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: clamp(0.7rem, 1.4vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aurora-text);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.14), rgba(34,211,238,0.07)), rgba(4,6,12,0.5);
  border: 1px solid rgba(0, 255, 136, 0.3);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 30px -10px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: hero-eyebrow-in 0.9s var(--ease-aurora) both;
}
body.aurora-on .hero-eyebrow i { color: var(--aurora-green, #00ff88); }
@keyframes hero-eyebrow-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
/* Hero heading: crisper, gradient highlight handled by .highlight rule */
body.aurora-on #Hero .hero-heading {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
body.aurora-on #Hero .hero-subheading {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--aurora-text-muted);
  font-weight: 400;
}
/* Hero buttons — premium pills */
body.aurora-on #Hero .hero-buttons { gap: 14px; margin-top: 0.4rem; }
body.aurora-on #Hero .btn-primary {
  padding: 16px 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee)) !important;
  color: #04120c !important;
  box-shadow: 0 16px 40px -12px rgba(0, 255, 136, 0.65), 0 0 40px -10px rgba(34,211,238,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .35s var(--ease-aurora), box-shadow .35s ease;
}
body.aurora-on #Hero .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 54px -12px rgba(0, 255, 136, 0.8), 0 0 60px -8px rgba(34,211,238,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
}
body.aurora-on #Hero .btn-hollow {
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--aurora-text) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(10px);
  transition: border-color .35s, background .35s, transform .35s var(--ease-aurora);
}
body.aurora-on #Hero .btn-hollow:hover {
  border-color: rgba(0, 255, 136, 0.55) !important;
  background: rgba(0, 255, 136, 0.08) !important;
  transform: translateY(-3px);
}
/* Hero trust strip */
body.aurora-on .hero-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 0.8rem;
  padding: 12px 22px;
  border-radius: 21px;
  background: rgba(4,6,12,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  font-size: clamp(0.72rem, 1.5vw, 0.85rem);
  color: var(--aurora-text-muted);
}
body.aurora-on .hero-trust-strip span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
body.aurora-on .hero-trust-strip i { color: var(--aurora-green, #00ff88); }
body.aurora-on .hero-trust-strip .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.25); padding: 0; }
@media (max-width: 600px) {
  body.aurora-on .hero-trust-strip .dot { display: none; }
  body.aurora-on .hero-trust-strip { gap: 8px 14px; padding: 10px 16px; }
}

/* ============================================================
   FOOTER v2 — premium aurora treatment
   ============================================================ */
body.aurora-on .ys-footer-v2 {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(2,4,10,0.85) 35%, rgba(2,4,10,0.96)) !important;
  border-top: 1px solid rgba(0, 255, 136, 0.18);
  overflow: hidden;
}
/* Glowing top accent line */
body.aurora-on .ys-footer-v2::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee), transparent);
  opacity: 0.7;
}
/* Soft aurora bloom behind the footer CTA */
body.aurora-on .ys-footer-v2::after {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  width: 70%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 255, 136, 0.1), transparent 65%);
  pointer-events: none;
}
body.aurora-on .ys-footer-cta { position: relative; z-index: 1; }
body.aurora-on .ys-footer-cta h2 {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
body.aurora-on .ys-footer-cta .eyebrow {
  color: var(--aurora-green, #00ff88);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}
/* Footer logo lockup */
body.aurora-on .ys-footer-brand .logo-stack {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}
body.aurora-on .ys-footer-brand .logo-stack img {
  width: 40px; height: auto;
  filter: drop-shadow(0 0 12px rgba(0, 255, 136, 0.4));
}
body.aurora-on .ys-footer-brand .logo-stack span {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.aurora-on .ys-footer-brand .tagline {
  color: var(--aurora-text-muted);
  line-height: 1.6;
  max-width: 320px;
}
/* Footer column titles */
body.aurora-on .footer-col-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-text);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.6rem;
}
body.aurora-on .footer-col-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee));
}
/* Footer links */
/* display:block, not inline-block: as inline-block these wrap into shared rows,
   so a column of eight links rendered as run-on sentences ("360° Photography
   360° Videography Drone 360° Media") instead of a readable list. */
body.aurora-on .ys-footer-col a:not(.ys-footer-social a) {
  color: var(--aurora-text-muted);
  transition: color .25s, padding-left .25s var(--ease-aurora);
  display: block;
  width: fit-content;
  padding: 4px 0;
}
body.aurora-on .ys-footer-col > a:hover {
  color: var(--aurora-green, #00ff88);
  padding-left: 6px;
}
body.aurora-on .ys-footer-contact-item i { color: var(--aurora-green, #00ff88); }
/* Social icons — glass circles with glow on hover */
body.aurora-on .ys-footer-social { display: flex; gap: 10px; margin-top: 1.1rem; }
body.aurora-on .ys-footer-social a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--aurora-text-muted);
  transition: transform .3s var(--ease-aurora), opacity .3s var(--ease-aurora), color .3s var(--ease-aurora), background-color .3s var(--ease-aurora), border-color .3s var(--ease-aurora), box-shadow .3s var(--ease-aurora);
}
body.aurora-on .ys-footer-social a:hover {
  color: #04120c;
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee));
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(0, 255, 136, 0.6);
}
/* Footer bottom bar */
body.aurora-on .ys-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative; z-index: 1;
}
body.aurora-on .ys-footer-legal a {
  color: var(--aurora-text-muted);
  transition: color .25s;
}
body.aurora-on .ys-footer-legal a:hover { color: var(--aurora-green, #00ff88); }

/* ============================================================
   PREMIUM SECTION CARDS + HEADERS (global)
   Elevates every .bento-card / heading across service + industry
   pages to a high-tech luxury standard.
   ============================================================ */

/* --- Section headings: tighter, larger, with breathing room --- */
body.aurora-on .apple-heading,
body.aurora-on .sexy-heading {
  letter-spacing: -0.03em;
  line-height: 1.05;
}
body.aurora-on .section-title-group {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
body.aurora-on .section-title-group .section-subheading,
body.aurora-on .section-subheading {
  color: var(--aurora-text-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Bento cards: premium glass with top accent + lift --- */
body.aurora-on .bento-card {
  position: relative;
  border-radius: 21px !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  overflow: hidden;
  transition: transform .5s var(--ease-aurora),
              border-color .4s ease,
              box-shadow .4s ease !important;
}
/* Hairline gradient accent along the top edge */
body.aurora-on .bento-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aurora-green, #00ff88), var(--aurora-cyan, #22d3ee), transparent);
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity .45s ease;
}
body.aurora-on .bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 136, 0.4) !important;
  box-shadow:
    0 36px 70px -28px rgba(0, 0, 0, 0.65),
    0 0 60px -16px rgba(0, 255, 136, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
body.aurora-on .bento-card:hover::after { opacity: 1; }

/* Links that are cards: kill underline, keep glass */
body.aurora-on a.bento-card { text-decoration: none; color: inherit; }

/* --- Icon wrappers: gradient orb with glow --- */
body.aurora-on .bento-icon-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 58px !important; height: 58px !important;
  flex: 0 0 58px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 21px !important;
  background:
    linear-gradient(135deg, rgba(0, 255, 136, 0.22), rgba(34, 211, 238, 0.12)) !important;
  border: 1px solid rgba(0, 255, 136, 0.28);
  color: var(--aurora-green, #00ff88) !important;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow:
    0 12px 28px -12px rgba(0, 255, 136, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform .45s var(--ease-aurora), box-shadow .45s ease;
}
body.aurora-on .bento-card:hover .bento-icon-wrapper {
  transform: scale(1.08) rotate(-4deg);
  box-shadow:
    0 16px 34px -10px rgba(0, 255, 136, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body.aurora-on .bento-icon-wrapper i { color: var(--aurora-green, #00ff88) !important; }

/* --- Card typography hierarchy --- */
body.aurora-on .bento-title,
body.aurora-on .bento-card h3 {
  font-size: 1.35rem !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--aurora-text) !important;
  margin-bottom: 0.6rem !important;
  line-height: 1.2;
}
body.aurora-on .bento-description,
body.aurora-on .bento-card p {
  color: var(--aurora-text-muted) !important;
  line-height: 1.65;
  font-size: 1rem;
}

/* --- Big stat numbers (where present) --- */
body.aurora-on .bento-stat {
  font-size: clamp(2.5rem, 6vw, 3.75rem) !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--aurora-green, #00ff88), var(--aurora-cyan, #22d3ee));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(0, 255, 136, 0.35));
}

/* --- Process timeline + strategic benefits + success stories rhythm --- */
body.aurora-on .strategic-benefits,
body.aurora-on .success-stories,
body.aurora-on .industry-applications,
body.aurora-on .process-timeline {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* Quote / testimonial cards: refined italic + accent bar */
body.aurora-on .success-stories .bento-card .bento-description[style*="italic"],
body.aurora-on .bento-card .bento-description[style*="italic"] {
  position: relative;
  font-size: 1.05rem !important;
  color: var(--aurora-text) !important;
  padding-left: 1rem;
}
body.aurora-on .success-stories .bento-card .bento-description[style*="italic"]::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--aurora-green, #00ff88), var(--aurora-cyan, #22d3ee));
}

/* Industry/Service hero: larger, more cinematic heading */
body.aurora-on .industry-hero .apple-heading,
body.aurora-on .hero-section[data-service] .apple-heading,
body.aurora-on .portfolio-hero .apple-heading {
  font-size: clamp(2.5rem, 6.6vw, 4.5rem) !important;   /* phi^3 = 72px */
  line-height: 1.02;
  letter-spacing: -0.04em;
}

/* --- Blog cards: aurora glass + premium hover --- */
body.aurora-on .blog-card-premium {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(10, 8, 28, 0.5) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 21px !important;
  overflow: hidden;
  transition: transform .5s var(--ease-aurora), border-color .4s, box-shadow .4s !important;
}
body.aurora-on .blog-card-premium:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 136, 0.4) !important;
  box-shadow: 0 36px 70px -28px rgba(0,0,0,0.65), 0 0 60px -16px rgba(0, 255, 136, 0.3) !important;
}
body.aurora-on .card-category-tag {
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee)) !important;
  color: #04120c !important;
}

/* --- About founder + mission: premium glass --- */
body.aurora-on .founder-container,
body.aurora-on .mission-container {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    rgba(8, 6, 22, 0.5) !important;
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 21px !important;
}
body.aurora-on .founder-image-placeholder {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(34,211,238,0.12)) !important;
  border: 1px solid rgba(0, 255, 136, 0.3) !important;
}
body.aurora-on .founder-initials {
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   LIVE MINI-360 TOUR CARDS (portfolio)
   ============================================================ */
body.aurora-on .portfolio-card {
  border-radius: 21px !important;
  overflow: hidden;
  perspective: 1100px;
}
.portfolio-card-media {
  position: relative;
  overflow: hidden;
}
/* --- Felix & Paul-style reactive 3D tilt --- */
.portfolio-card-media.ys-tilt {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
/* --- Poster (the "first image") shown before the live tour loads --- */
.portfolio-card-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: scale(1.14) translate(var(--par-x, 0), var(--par-y, 0));
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.82) saturate(1.05);
}
/* Subtle vignette + brand wash over the poster for depth + legibility */
.portfolio-card-tour-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(2,6,10,0.55) 100%),
    linear-gradient(180deg, rgba(0, 255, 136, 0.06), transparent 40%, rgba(2,6,10,0.45) 100%);
}
/* Keep the spinner above the poster while loading */
.portfolio-card-tour-preview::after { z-index: 3; }
/* Animated loading shimmer shown until the live iframe paints */
.portfolio-card-tour-preview {
  position: absolute !important;
  inset: 0;
  background: #05070d !important;
}
.portfolio-card-tour-preview.is-behind { z-index: 0; }
/* No spinner — the real poster shows immediately; tour loads on tap */
.portfolio-card-tour-preview::after { content: none !important; display: none !important; }
.portfolio-card-play { display: none !important; }

/* Play affordance so the card reads as interactive */
.ys-tour-playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 12, 8, 0.45);
  border: 1.5px solid rgba(0, 255, 136, 0.6);
  color: var(--aurora-green, #00ff88);
  font-size: 1.2rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 30px -6px rgba(0, 255, 136, 0.5);
  pointer-events: none;
  transition: transform .3s var(--ease-aurora, cubic-bezier(0.16,1,0.3,1)), background .3s;
}
.ys-tour-playbtn i { margin-left: 3px; }
.portfolio-card:hover .ys-tour-playbtn {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(0, 255, 136, 0.2);
}

/* Featured tour: live iframe replaces facade */
.featured-tour-facade.is-hidden { opacity: 0 !important; pointer-events: none !important; }
.featured-tour-frame.is-loaded { display: block !important; }
.featured-tour-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.portfolio-card-iframe-container {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  transition: opacity .6s var(--ease-aurora, cubic-bezier(0.16,1,0.3,1));
}
.portfolio-card-iframe-container.is-loaded { opacity: 1; }
.portfolio-card-iframe-container iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* Live badge */
.ys-tour-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(2, 8, 6, 0.7);
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: var(--aurora-green, #00ff88);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ys-tour-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aurora-green, #00ff88);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.9);
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* Drag hint — fades out once the user interacts */
.ys-tour-drag-hint {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(2, 8, 6, 0.6);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 0.7rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s ease;
}

/* Corner expand → fullscreen lightbox */
.ys-tour-expand {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(2, 8, 6, 0.65);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: var(--aurora-green, #00ff88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.ys-tour-expand:hover {
  background: rgba(0, 255, 136, 0.18);
  transform: scale(1.08);
  box-shadow: 0 0 22px -6px rgba(0, 255, 136, 0.6);
}

/* Premium card content treatment */
body.aurora-on .portfolio-card-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.aurora-on .portfolio-card-tag {
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee)) !important;
  color: #04120c !important;
  box-shadow: 0 6px 18px -8px rgba(0, 255, 136, 0.6);
}
body.aurora-on .portfolio-card-tag.adventure-tag {
  background: linear-gradient(135deg, #2dd4bf, #22d3ee) !important;
}
body.aurora-on .portfolio-card-tag.retreat-tag {
  background: linear-gradient(135deg, #22d3ee, #00ff88) !important;
}

/* ============================================================
   VERSATILITY CASE STUDY — 360 video vs 2D animated
   ============================================================ */
.ys-versatility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  max-width: 1100px;
  margin: 0 auto;
}
.ys-video-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), rgba(10,8,28,0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 21px;
  overflow: hidden;
  transition: transform .5s var(--ease-aurora), border-color .4s, box-shadow .4s;
}
.ys-video-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow: 0 36px 70px -28px rgba(0,0,0,0.6), 0 0 60px -16px rgba(0, 255, 136, 0.3);
}
.ys-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #05070d;
  overflow: hidden;
}
.ys-video-embed img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-aurora), filter .4s;
  filter: brightness(0.85);
}
.ys-video-card:hover .ys-video-embed img { transform: scale(1.06); filter: brightness(1); }
.ys-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.ys-video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--aurora-green,#00ff88), var(--aurora-cyan,#22d3ee));
  color: #04120c; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(0, 255, 136, 0.6);
  transition: transform .3s var(--ease-aurora);
  z-index: 3;
}
.ys-video-play i.fa-play { margin-left: 4px; }
.ys-video-card:hover .ys-video-play { transform: translate(-50%, -50%) scale(1.1); }
.ys-video-embed.is-playing .ys-video-play,
.ys-video-embed.is-playing img { display: none; }
.ys-video-meta { padding: clamp(18px, 2.5vw, 26px); }
.ys-video-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--aurora-green, #00ff88); margin-bottom: 0.6rem;
}
.ys-video-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.ys-video-desc { color: var(--aurora-text-muted, rgba(236,240,255,0.62)); line-height: 1.6; margin: 0; font-size: 0.98rem; }
.ys-video-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 0.5rem; font-weight: 600; white-space: nowrap;
  color: var(--aurora-cyan, #22d3ee); text-decoration: none;
  border-bottom: 1px solid rgba(34,211,238,0.35); transition: color .25s, border-color .25s;
}
.ys-video-link:hover { color: var(--aurora-green, #00ff88); border-color: rgba(0, 255, 136, 0.6); }
.ys-video-link i { font-size: 0.78em; }
.ys-versatility-note {
  text-align: center; margin: clamp(24px, 4vw, 40px) auto 0; max-width: 680px;
  color: var(--aurora-text-muted, rgba(236,240,255,0.62)); font-size: 0.95rem;
}
.ys-versatility-note i { color: var(--aurora-green, #00ff88); margin-right: 6px; }
@media (max-width: 768px) {
  .ys-versatility-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SIDE RAIL — desktop section progress indicator
   ============================================================ */
.ys-sidenav {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  border-radius: 999px;
  background: rgba(2, 6, 10, 0.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0, 255, 136, 0.12);
  box-shadow:
    0 16px 40px -16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .ys-sidenav { display: flex; }
}
.ys-sidenav-dot {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ys-sidenav-dot-inner {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background .35s var(--ease-aurora),
              transform .35s var(--ease-aurora),
              box-shadow .35s var(--ease-aurora);
}
.ys-sidenav-dot:hover .ys-sidenav-dot-inner {
  background: rgba(0, 255, 136, 0.6);
  transform: scale(1.4);
}
.ys-sidenav-dot.is-active .ys-sidenav-dot-inner {
  background: var(--aurora-green);
  transform: scale(1.55);
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.7),
              0 0 28px rgba(34, 211, 238, 0.4);
}
.ys-sidenav-tip {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(2, 6, 10, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 136, 0.2);
  color: var(--aurora-text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease-aurora);
}
.ys-sidenav-dot:hover .ys-sidenav-tip,
.ys-sidenav-dot.is-active .ys-sidenav-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ============================================================
   LIVE INLINE 360 VIEWER on homepage
   ============================================================ */
.ys-live-tour-host {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.ys-live-tour {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  border-radius: 21px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 136, 0.22);
  background: #000;
  box-shadow:
    0 40px 100px -30px rgba(0, 255, 136, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 80px -20px rgba(34, 211, 238, 0.25);
  cursor: grab;
}
.ys-live-tour:active { cursor: grabbing; }
.ys-live-tour [data-pannellum] {
  position: absolute;
  inset: 0;
}

/* --- Tap-to-load facade for the real embedded client tour --- */
.ys-live-tour-facade {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.ys-live-tour-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .8s var(--ease-aurora, cubic-bezier(0.16,1,0.3,1)), filter .5s ease;
}
.ys-live-tour-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,10,0.35) 0%, rgba(2,6,10,0) 38%, rgba(2,6,10,0.78) 100%);
  pointer-events: none;
}
.ys-live-tour-facade:hover .ys-live-tour-poster,
.ys-live-tour-facade:focus-visible .ys-live-tour-poster { transform: scale(1.06); }
.ys-live-tour-facade:focus-visible {
  outline: 2px solid var(--aurora-green, #00ff88);
  outline-offset: -4px;
}
.ys-live-tour-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aurora-green, #00ff88);
  font-size: 1.5rem;
  background: rgba(2, 6, 10, 0.6);
  border: 1px solid rgba(0, 255, 136, 0.45);
  box-shadow: 0 0 40px -6px rgba(0, 255, 136, 0.55);
  transition: transform .3s var(--ease-aurora, cubic-bezier(0.16,1,0.3,1)), background .3s;
}
.ys-live-tour-play i { margin-left: 5px; }
.ys-live-tour-facade:hover .ys-live-tour-play,
.ys-live-tour-facade:focus-visible .ys-live-tour-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(0, 255, 136, 0.18);
}
.ys-live-tour-meta {
  position: absolute;
  left: 22px;
  bottom: 20px;
  right: 78px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.ys-live-tour-name {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ys-live-tour-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.ys-live-tour-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ys-live-tour-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Once the real tour is mounted, retire the facade and the tap hint. */
.ys-live-tour.is-loaded .ys-live-tour-facade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ys-live-tour.is-loaded .ys-live-tour-hint { opacity: 0; }
.ys-live-tour.is-loaded .ys-live-tour-overlay { background: none; }
.ys-live-tour-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  pointer-events: none;
}
.ys-live-tour-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(2, 6, 10, 0.65);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: var(--aurora-green);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.ys-live-tour-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aurora-green);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.8);
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.45); opacity: 0.45; }
}
.ys-live-tour-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(2, 6, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
  opacity: 1;
  transition: opacity .6s ease;
}
.ys-live-tour.has-interacted .ys-live-tour-hint { opacity: 0; }
.ys-live-tour-expand {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(2, 6, 10, 0.7);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: var(--aurora-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  backdrop-filter: blur(12px);
  text-decoration: none;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.ys-live-tour-expand:hover {
  background: rgba(0, 255, 136, 0.15);
  transform: scale(1.06);
  box-shadow: 0 0 24px -6px rgba(0, 255, 136, 0.5);
}
/* Mobile tuning */
@media (max-width: 768px) {
  .ys-live-tour { aspect-ratio: 4 / 5; min-height: 380px; border-radius: 21px; }
  .ys-live-tour-overlay { padding: 14px 16px; }
  .ys-live-tour-hint { font-size: 0.6875rem; padding: 5px 11px; }
  .ys-live-tour-badge { font-size: 0.625rem; letter-spacing: 0.18em; padding: 5px 11px; }
  .ys-live-tour-play { width: 68px; height: 68px; font-size: 1.25rem; }
  .ys-live-tour-meta { left: 16px; right: 16px; bottom: 72px; }
  .ys-live-tour-name { font-size: 0.9375rem; }
  .ys-live-tour-sub { font-size: 0.75rem; }
}
/* Hide the legacy facade/frame if any leftovers from old build remain in cached HTML */
.tour-facade, .tour-frame { display: none !important; }

/* ============================================================
   FALLBACKS / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ys-aurora { display: none; }
  .ys-aurora-fallback { display: block !important; }
  body.aurora-on .highlight { animation: none; }
}

/* No-WebGL fallback */
body.aurora-no-webgl .ys-aurora { display: none; }
body.aurora-no-webgl .ys-aurora-fallback { display: block; }

/* ============================================================
   MOBILE TUNING
   ============================================================ */
@media (max-width: 768px) {
  body.aurora-on .ds-card,
  body.aurora-on .bento-card,
  body.aurora-on .ys-package,
  body.aurora-on .ys-testimonial,
  body.aurora-on .modern-service-card {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
}

/* ============================================================
   CONTENT-SECTION CONTAINER FIX
   The global `.w-container { display:flex; justify-content:space-between }`
   in theme.css was meant for the NAVBAR only, but it leaks onto every
   content section's `.w-container`, laying the section title group BESIDE
   the content (and squeezing grids like the services slider into a tiny
   right-hand column). Force content-section containers to stack as blocks.
   Scoped to `.section > .w-container` so the navbar is never affected.
   ============================================================ */
body.aurora-on .section > .w-container {
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
}

/* ===== refine.css ===== */
/* ============================================================
   YOUSEE360 — REFINEMENT LAYER
   Loaded last.

   Direction from Felix & Paul Studios and current Awwwards winners.
   Both read premium through RESTRAINT, not more effects: near-absent
   borders, one accent used sparingly, no glow on type, generous
   whitespace. The audit found the opposite here — 230 visible borders
   on the homepage, 62 coloured glows, 29 text-shadows, 6 competing
   corner radii, and two rival spacing systems (an 8pt grid in
   design-system.css fighting a phi scale in theme.css).

   APPROACH: this file overrides the design TOKENS rather than adding
   competing rules. The stylesheets here carry heavy !important and
   some ID-scoped selectors, so a new rule often loses the cascade;
   a redefined token is picked up by whichever rule wins. Both token
   families are set to the same golden-ratio ladder so the two systems
   finally agree.

   TYPE LADDER (x1.618 each step, from a 17px body):
     17 -> 27.5 -> 44.5 -> 72 -> 116.5
   SPACING: Fibonacci (phi in whole pixels)
     8, 13, 21, 34, 55, 89, 144, 233
   ============================================================ */

:root {
  --phi: 1.6180339887;

  /* ---------- TYPE: design-system.css family ---------- */
  --fs-display: clamp(2.75rem, 6.6vw, 7.28rem);   /* -> 116.5  phi^4 */
  --fs-h1:      clamp(2.25rem, 4.6vw, 4.5rem);    /* ->  72.0  phi^3 */
  --fs-h2:      clamp(1.75rem, 3.0vw, 2.78rem);   /* ->  44.5  phi^2 */
  --fs-h3:      clamp(1.375rem, 1.9vw, 1.72rem);  /* ->  27.5  phi   */
  --fs-h4:      1.35rem;                          /* ->  21.6  sqrt-phi step */
  --fs-body:    1.0625rem;                        /* ->  17.0  base  */
  --fs-body-lg: 1.35rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.6875rem;

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.68;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.2em;

  /* ---------- TYPE: theme.css family (same ladder) ---------- */
  --font-base: 1.0625rem;                         /* 17px, was 18 */

  /* ---------- SPACING: Fibonacci ---------- */
  --s-1:   8px;
  --s-2:   13px;
  --s-3:   21px;
  --s-4:   34px;
  --s-5:   55px;
  --s-6:   89px;
  --s-7:   144px;
  --s-8:   178px;
  --s-9:   233px;
  --s-10:  288px;

  --section-py:    clamp(55px, 9vw, 144px);
  --section-py-lg: clamp(89px, 12vw, 233px);

  /* Reading measure ~68 characters */
  --content-max-narrow: 34rem;

  /* ---------- RADII: Fibonacci, one family ---------- */
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   13px;
  --r-xl:   21px;
  --r-2xl:  34px;
  --r-pill: 999px;
  --radius-lg: 21px;              /* token already consumed by cards */
  --glass-border-radius: 13px;

  /* ---------- RESTRAINT DIALS ---------- */
  --ys-border:        rgba(255, 255, 255, 0.055);
  --ys-border-strong: rgba(255, 255, 255, 0.10);
  --color-glass-border: rgba(255, 255, 255, 0.055);

  /* Glow, dialled down from ~0.5 alpha. Raise to restore the old look. */
  --glow-primary:   0 0 22px rgba(1, 228, 228, 0.55);
  --glow-secondary: 0 0 22px rgba(0, 255, 136, 0.55);
  --glow-text:      0 0 10px rgba(255, 255, 255, 0.5);
  --glow-green:     0 0 22px rgba(0, 255, 136, 0.55), 0 0 45px rgba(0, 255, 136, 0.25);
  --shadow-card:    0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

/* ============================================================
   1. NO GLOW ON TYPE
   The single biggest dated tell, and it costs legibility.
   Neither reference uses it anywhere.
   ============================================================ */
/* Superseded by the NEON block at the end of this file — glow is a
   deliberate brand choice here. Body copy stays clean for legibility. */
p, .paragraph, .bento-description, .card-excerpt,
.section-subheading, li, td, .post-content {
  text-shadow: none !important;
}

/* ============================================================
   2. ONE ACCENT, FLAT
   ============================================================ */
/* .highlight keeps aurora's animated green->cyan gradient. */

/* ============================================================
   3. SURFACES — hairlines, one corner family, calm shadows
   Selectors carry [class] to outrank the single-class rules
   already in the sheets.
   ============================================================ */
.bento-card[class], .ds-card[class], .blog-card-premium[class],
.topic-card[class], .portfolio-card[class], .ys-package[class],
.recommendation-panel[class], .ys-contact-card[class],
.ys-estimator-card[class], .featured-article[class],
.timeline-content[class], .cs-shot img {
  border-radius: var(--r-xl) !important;
  border-color: var(--ys-border) !important;
  box-shadow: var(--shadow-card) !important;
}

.modal-input[class], .modal-textarea[class], .modal-select[class],
.cf-contact-form-field[class], .glass-panel[class] {
  border-radius: var(--r-lg) !important;
  border-color: var(--ys-border) !important;
}

.ds-btn[class], .btn-primary[class], .nav-cta[class], .filter-pill[class],
.pkg-btn[class], .modal-submit-btn[class], .btn-journey[class],
.btn-hollow[class], .ys-trust-badge[class], .section-tag[class] {
  border-radius: var(--r-pill) !important;
}

.bento-icon-wrapper[class], .topic-icon[class], .timeline-icon[class],
.viewer-play-btn[class] {
  border-radius: var(--r-lg) !important;
}

/* Coloured glow reduced to a whisper; depth now comes from black. */
.ds-btn-primary[class], .nav-cta[class], .btn-quote[class],
.ys-fab-trigger[class], .ys-mobile-top-cta[class],
.modal-submit-btn[class], .btn-primary[class] {
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.75),
              0 10px 34px -8px rgba(0, 255, 136, 0.55) !important;
}

.bento-card[class]:hover, .ds-card[class]:hover, .ys-package[class]:hover,
.blog-card-premium[class]:hover, .topic-card[class]:hover,
.portfolio-card[class]:hover {
  border-color: rgba(0, 255, 136, 0.45) !important;
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(0, 255, 136, 0.28),
              0 0 60px -12px rgba(0, 255, 136, 0.40) !important;
  transform: translateY(-4px);
}

/* Rules become whitespace. */
.ys-trusted[class] {
  border-top-color: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

/* ============================================================
   4. TYPOGRAPHIC FINISH
   Weight contrast, quieter sub-copy, wide-tracked eyebrows.
   ============================================================ */
.section-subheading[class], .hero-subheading[class] {
  font-weight: 380 !important;
  color: rgba(255, 255, 255, 0.60) !important;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.68;
}

.section-tag[class], .eyebrow[class], .card-category-tag[class],
.featured-category[class], .region-tag[class] {
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

p, .paragraph, .bento-description, .card-excerpt {
  line-height: var(--lh-body);
}

.post-content p, .blog-content p, .legal-content p {
  max-width: 34rem;
}

/* ============================================================
   5. MOTION — purposeful, and fully opt-out-able
   ============================================================ */
.bento-card, .ds-card, .blog-card-premium, .topic-card,
.portfolio-card, .ds-btn, .nav-cta, .filter-pill {
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .35s ease,
              box-shadow .45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   6. MOBILE — same rhythm, tighter ladder
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-display: clamp(2.25rem, 11vw, 3.5rem);
    --fs-h1:      clamp(2rem, 8.5vw, 2.78rem);
    --fs-h2:      clamp(1.5rem, 6.5vw, 2.125rem);
    --fs-h3:      1.35rem;
    --fs-body:    1rem;
    --s-7: 89px;
    --s-8: 110px;
    --s-9: 144px;
    --s-10: 178px;
    --section-py: clamp(48px, 12vw, 89px);
  }
}

/* ============================================================
   7. MOTION — Felix & Paul character
   Measured from felixandpaul.com rather than guessed:
     - opacity is the dominant animated property (77 declarations
       vs 24 for transform): things FADE, they do not fly
     - one easing, `ease`, used 94 times. No bespoke curves.
     - three durations only: .3s hover, .5s base, .66s entry
     - no will-change anywhere, no smooth-scroll library
     - the spectacle lives in a WebGL canvas, not in CSS tricks
   This site had the inverse: many different signature effects
   (scroll-skew, magnetic CTAs, cursor halo, sheen sweep) on a
   sharp expo curve. Lots of variety, little coherence.
   ============================================================ */

:root {
  --mo-fast:  0.3s;
  --mo-base:  0.5s;
  --mo-enter: 0.66s;
  --mo-ease:  ease;
}

/* --- One timing language across every interactive surface --- */
.bento-card, .ds-card, .blog-card-premium, .topic-card, .portfolio-card,
.ys-package, .recommendation-panel, .ds-btn, .nav-cta, .filter-pill,
.pkg-btn, .cs-link, .ys-footer-col a, .navigation-link, .w-dropdown-link,
.share-btn, .modal-checkbox, .modal-input, .modal-textarea, .modal-select {
  transition: opacity var(--mo-base) var(--mo-ease),
              transform var(--mo-base) var(--mo-ease),
              color var(--mo-fast) var(--mo-ease),
              background-color var(--mo-fast) var(--mo-ease),
              border-color var(--mo-fast) var(--mo-ease),
              box-shadow var(--mo-base) var(--mo-ease) !important;
}

/* --- Reveals become fade-dominant.
       The travel distance drops from ~24-40px to 10px so the eye reads
       a fade with a hint of rise, which is what their pages do. --- */
.ys-heading-reveal,
[data-reveal],
[data-scroll-animation],
.region-info,
.scroll-animation {
  transition: opacity var(--mo-base) var(--mo-ease),
              transform var(--mo-base) var(--mo-ease) !important;
}

.ys-heading-reveal:not(.is-revealed),
[data-reveal]:not(.visible):not(.is-visible),
[data-scroll-animation]:not(.visible):not(.is-visible) {
  transform: translateY(10px) !important;
}

.ys-heading-reveal.is-revealed,
[data-reveal].visible, [data-reveal].is-visible,
[data-scroll-animation].visible, [data-scroll-animation].is-visible {
  transform: none !important;
}

/* --- Retire the "look at me" effects they never use --- */

/* Scroll-velocity skew: the most un-Felix-&-Paul thing on the site. */
.ys-skew-host {
  transform: none !important;
  transition: none !important;
}

/* Magnetic cursor-pull on CTAs (JS writes an inline transform). */
.ys-magnetic {
  transform: none !important;
}

/* Cursor halo: kept, but as atmosphere rather than a spotlight. */
@media (hover: hover) and (pointer: fine) {
  .ys-halo::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
                rgba(0, 255, 136, 0.028), transparent 62%) !important;
    transition: opacity var(--mo-base) var(--mo-ease) !important;
  }
}

/* Button sheen sweep: slower and far fainter, so it reads as a
   material property rather than a swipe. */
.nav-cta::before, .ds-btn-primary::before, .pkg-btn::before,
.ys-mob-bar a.btn-quote::before, .ys-mobile-top-cta::before,
.ys-form-submit::before, .ys-estimator-next::before {
  background: linear-gradient(105deg, transparent 30%,
              rgba(255, 255, 255, 0.14) 50%, transparent 70%) !important;
  transition: transform 1.1s var(--mo-ease) !important;
}

/* Image hover: a slow, small push-in instead of a 1.4s pan. */
.ys-portfolio-tile img, .ys-includes-item img,
.modern-service-card img, .card-image, .portfolio-image {
  transition: transform var(--mo-enter) var(--mo-ease),
              opacity var(--mo-base) var(--mo-ease) !important;
}
.ys-portfolio-tile:hover img,
.blog-card-premium:hover .card-image,
.portfolio-card:hover .portfolio-image {
  transform: scale(1.04) !important;
}

/* Card hover lift: shorter travel, same calm timing. */
.bento-card[class]:hover, .ds-card[class]:hover, .ys-package[class]:hover,
.blog-card-premium[class]:hover, .topic-card[class]:hover,
.portfolio-card[class]:hover {
  transform: translateY(-3px) !important;
}

/* They declare will-change nowhere; it pins layers and costs memory
   on long pages for no benefit once a transition has settled. */
.ys-heading-reveal, .ys-skew-host, .ys-magnetic,
.ys-portfolio-tile img, [data-mask-reveal] {
  will-change: auto !important;
}

/* Mask reveal: softened from a hard clip wipe to a gentle one. */
[data-mask-reveal] {
  transition: clip-path var(--mo-enter) var(--mo-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ys-portfolio-tile:hover img,
  .blog-card-premium:hover .card-image,
  .portfolio-card:hover .portfolio-image,
  .bento-card[class]:hover, .ds-card[class]:hover {
    transform: none !important;
  }
}

/* Felix & Paul declare will-change nowhere. It promotes layers and holds
   GPU memory for the life of the page; on long pages that is a real cost
   for no gain once a transition has settled. The aurora canvas is the one
   place a persistent layer is justified. */
*:not(canvas):not(.ys-aurora) {
  will-change: auto !important;
}

/* ============================================================
   8. NEON — the house style
   You prefer the neon, so it is restored deliberately here rather
   than left as a leftover. This block is LAST, so it wins over the
   restraint rules above.

   What is kept from the refinement pass, because it is structural
   rather than stylistic:
     - the golden-ratio type ladder (17 / 27.5 / 44.5 / 72 / 116.5)
     - the Fibonacci corner-radius family
     - the Felix & Paul motion timing (ease, .3s / .5s)

   ONE DIAL: --neon. 1 is the current level; 0.6 is a half-step down,
   1.4 pushes it further. Every value below is derived from it.
   ============================================================ */

:root {
  --neon: 1;

  --neon-green: 0, 255, 136;
  --neon-cyan:  1, 228, 228;

  /* Text glow, two-stage: tight core + wide bloom */
  --neon-text:  0 0 12px rgba(var(--neon-green), calc(0.55 * var(--neon))),
                0 0 38px rgba(var(--neon-green), calc(0.28 * var(--neon)));
  --neon-text-cyan: 0 0 12px rgba(var(--neon-cyan), calc(0.55 * var(--neon))),
                    0 0 38px rgba(var(--neon-cyan), calc(0.25 * var(--neon)));

  /* Edge glow for chrome */
  --neon-edge:  0 0 0 1px rgba(var(--neon-green), calc(0.35 * var(--neon))),
                0 0 26px -6px rgba(var(--neon-green), calc(0.55 * var(--neon)));
}

/* --- Accent words carry the glow. This is the signature. --- */
.highlight,
h1 .highlight, h2 .highlight, h3 .highlight,
.glow, .text-glow, .accent-glow,
h1 .accent, h2 .accent, h3 .accent {
  text-shadow: var(--neon-text) !important;
}

/* --- Hero headlines glow; section headings get a restrained version so
       long pages stay readable. --- */
.hero-heading, .journey-title, .sexy-heading {
  text-shadow: 0 0 16px rgba(var(--neon-green), calc(0.30 * var(--neon))),
               0 0 48px rgba(var(--neon-green), calc(0.16 * var(--neon))) !important;
}

h2[class], .apple-heading {
  text-shadow: 0 0 20px rgba(var(--neon-green), calc(0.16 * var(--neon))) !important;
}

/* --- Eyebrows / tags: small, bright, unmistakably neon --- */
.section-tag[class], .eyebrow[class], .ys-trust-badge[class] {
  color: rgba(var(--neon-green), 1) !important;
  text-shadow: 0 0 10px rgba(var(--neon-green), calc(0.6 * var(--neon))) !important;
  border-color: rgba(var(--neon-green), calc(0.30 * var(--neon))) !important;
}

/* --- Stats and counters read as readouts --- */
.stat-value, .region-stat-value, .metric-value, [data-counter-up] {
  color: rgba(var(--neon-green), 1) !important;
  text-shadow: var(--neon-text) !important;
}

/* --- Card edges get their glow back on hover --- */
.bento-card[class]:hover, .ds-card[class]:hover, .ys-package[class]:hover,
.blog-card-premium[class]:hover, .topic-card[class]:hover,
.portfolio-card[class]:hover {
  border-color: rgba(var(--neon-green), calc(0.5 * var(--neon))) !important;
  box-shadow: 0 30px 64px -26px rgba(0, 0, 0, 0.75),
              var(--neon-edge) !important;
}

/* --- Primary actions glow at rest and bloom on hover --- */
.ds-btn-primary[class], .nav-cta[class], .btn-quote[class],
.ys-fab-trigger[class], .ys-mobile-top-cta[class],
.modal-submit-btn[class], .btn-primary[class] {
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7),
              0 10px 36px -8px rgba(var(--neon-green), calc(0.6 * var(--neon))) !important;
}

.ds-btn-primary[class]:hover, .nav-cta[class]:hover, .btn-quote[class]:hover,
.ys-fab-trigger[class]:hover, .modal-submit-btn[class]:hover,
.btn-primary[class]:hover {
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.7),
              0 14px 52px -6px rgba(var(--neon-green), calc(0.85 * var(--neon))) !important;
}

/* --- Focus rings glow too, so keyboard users get the same language --- */
:focus-visible {
  outline: 2px solid rgba(var(--neon-green), 1) !important;
  outline-offset: 3px;
  box-shadow: 0 0 22px -4px rgba(var(--neon-green), calc(0.7 * var(--neon))) !important;
}

/* --- Form fields light up on focus --- */
.modal-input[class]:focus, .modal-textarea[class]:focus,
.modal-select[class]:focus, input[type="text"]:focus,
input[type="email"]:focus, textarea:focus {
  border-color: rgba(var(--neon-green), calc(0.55 * var(--neon))) !important;
  box-shadow: 0 0 0 3px rgba(var(--neon-green), calc(0.12 * var(--neon))),
              0 0 26px -8px rgba(var(--neon-green), calc(0.55 * var(--neon))) !important;
}

/* --- Cursor halo back to a visible light source --- */
@media (hover: hover) and (pointer: fine) {
  .ys-halo::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
                rgba(var(--neon-green), calc(0.07 * var(--neon))),
                transparent 62%) !important;
  }
}

/* Body copy stays clean — glow on running text costs legibility and the
   references are unanimous on that much at least. */
p, li, td, .bento-description, .card-excerpt, .section-subheading,
.post-content p, .blog-content p {
  text-shadow: none !important;
}

@media (max-width: 768px) {
  /* Slightly softer on small screens, where glow blooms more per pixel. */
  :root { --neon: 0.8; }
}

/* .highlight is gradient-clipped text (transparent fill + background-clip),
   and text-shadow cannot render through that — the accent word was the one
   thing on the page NOT glowing. filter: drop-shadow() operates on the
   painted result, so it works where text-shadow can't, and keeps aurora's
   animated green->cyan gradient. */
.highlight,
h1 .highlight, h2 .highlight, h3 .highlight {
  filter: drop-shadow(0 0 10px rgba(var(--neon-green), calc(0.55 * var(--neon))))
          drop-shadow(0 0 30px rgba(var(--neon-green), calc(0.30 * var(--neon)))) !important;
}

/* ============================================================
   9. SKIP LINK
   Clipped rather than translated off-screen: a transformed absolute
   element still contributes to the document box and was adding
   horizontal overflow on every page. clip + 1px box has zero layout
   footprint, and position:fixed on focus keeps it out of the flow.
   ============================================================ */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 14px 26px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 100000;
  border-radius: var(--r-lg, 13px);
  background: #00ff88;
  color: #001a10;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 10px 34px -8px rgba(0, 255, 136, 0.7);
  outline: 2px solid #fff;
  outline-offset: -4px;
}

#main:focus { outline: none; }
#main:focus-visible { outline: 2px solid var(--ys-green, #00ff88); outline-offset: -4px; }

/* The new <main> wrapper re-parented full-bleed sections that rely on
   100vw / negative margins. body clips those (overflow-x: hidden); main did
   not, so the document box grew and every page gained a horizontal scrollbar.
   `clip` contains them without creating a scroll container. */
main#main, main {
  overflow-x: clip;
}

/* Belt-and-braces: body already clips horizontally, but the root element
   does not, so a wide descendant could still stretch the document box and
   produce a horizontal scrollbar. The nav is position:fixed (not sticky),
   so clipping at the root is safe here. */
html {
  overflow-x: hidden;
}

/* ============================================================
   HERO HEADLINE LEGIBILITY GUARANTEE
   Loaded last, so this wins the cascade.

   Hero headings were invisible at rest and made visible only by a CSS
   animation or a GSAP tween. Any condition that stops that from completing --
   a paused animation clock, a throttled tab, a slow phone, a script that never
   runs -- leaves the most important text on the page blank. This was reported
   from a real device: a hero headline rendering only its first line.

   !important is deliberate. In the CSS cascade an !important declaration beats
   both animations and inline styles, which is exactly what is needed to
   override a stalled fadeInUp or a gsap.from() that set opacity to 0 and never
   finished. Section-level reveals elsewhere on the page are untouched.
   ============================================================ */
.hero-section h1,
.hero-heading,
h1.animated-heading,
h1.apple-heading,
h1.sexy-heading,
.blog-hero-title,
.hero-section h1 .ys-word,
.hero-section h1 .ys-reveal-text,
/* The supporting line carries the actual proposition, so it needs the same
   guarantee as the headline itself. */
.hero-subheading,
.hero-eyebrow,
.hero-trust-strip,
.about-hero .subtitle,
.blog-hero-subtitle {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

/* Buttons keep their own transitions; only guarantee they are visible. */
.hero-buttons,
.hero-buttons > * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== a11y-fixes.css ===== */
/* ============================================================
   ACCESSIBILITY & INTERACTION FIXES
   Loaded last in every bundle so it can correct rules that
   earlier stylesheets set with !important.
   ============================================================ */

/* --- Dark colour scheme ---------------------------------------------------
   Tells the UA to paint scrollbars, form controls, native selects and the
   spellcheck underline for a dark page. Without it Windows/Chrome renders
   <select> and <input> chrome in light mode on a black background. */
:root {
  color-scheme: dark;
}

/* --- Focus rings ----------------------------------------------------------
   Several stylesheets clear the outline on :focus (some with !important) and
   replace it with a border/box-shadow only. That also removes the ring for
   keyboard users, so restore a real :focus-visible ring here. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--ys-green, #00ff88) !important;
  outline-offset: 3px !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.w-input:focus-visible,
.w-select:focus-visible,
.modal-input:focus-visible,
.modal-textarea:focus-visible,
.modal-select:focus-visible,
.ys-form-field input:focus-visible,
.ys-form-field select:focus-visible,
.ys-form-field textarea:focus-visible,
.ys-protected-input:focus-visible,
.utility-page-form input:focus-visible,
.cf-contact-form-field:focus-visible,
.glass-input:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--ys-green, #00ff88) !important;
  outline-offset: 1px !important;
}

/* Checkbox/radio cards: the real control is visually hidden, so the ring has
   to show on the wrapping label instead. */
.modal-checkbox:focus-within,
.modal-radio:focus-within,
.ys-estimator-option:focus-visible {
  outline: 2px solid var(--ys-green, #00ff88) !important;
  outline-offset: 3px !important;
}

/* --- Anchor targets under the fixed header --------------------------------
   The navigation is position: fixed, so an in-page jump would otherwise land
   with the target hidden behind it. */
:target,
[id]:is(h1, h2, h3, h4, h5, h6),
section[id],
article[id],
div[id][class*="section"],
#main,
#What {
  scroll-margin-top: 96px;
}

@media (max-width: 768px) {
  :target,
  [id]:is(h1, h2, h3, h4, h5, h6),
  section[id],
  article[id],
  div[id][class*="section"],
  #main,
  #What {
    scroll-margin-top: 76px;
  }
}

/* --- Touch behaviour ------------------------------------------------------
   Removes the 300ms double-tap-to-zoom delay on tap targets without
   disabling pinch zoom on the page itself. */
a,
button,
summary,
label,
[role="button"],
[role="tab"],
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
.portfolio-filter-btn,
.faq-question,
.process-tab-btn,
.ys-estimator-option {
  touch-action: manipulation;
}

/* --- Scroll containment in overlays ---------------------------------------
   Keeps a modal/lightbox scroll from chaining to the page behind it. */
.contact-modal-overlay,
.contact-modal,
.modal-overlay,
.modal-body,
.ys-lightbox,
.lightbox-overlay,
.portfolio-lightbox,
.pricing-lightbox,
.mobile-menu,
.side-nav,
.nav-drawer {
  overscroll-behavior: contain;
}

/* --- Screen-reader-only helper -------------------------------------------- */
.ys-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Hero video pause control --------------------------------------------- */
.hero-video-toggle {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.hero-video-toggle:hover {
  background: rgba(0, 0, 0, 0.68);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero-video-toggle[hidden] {
  display: none;
}

/* --- Inline field errors (see js/form-a11y.js) ----------------------------- */
.ys-field-error {
  margin: 6px 0 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #ff8a94;
}

.ys-field-error[hidden] {
  display: none;
}

[aria-invalid="true"] {
  border-color: #ff5e69 !important;
}

/* --- Accordion triggers ---------------------------------------------------
   These were <div>s with click handlers; as real <button>s they need the UA
   button chrome stripped back to what the original markup looked like. */
.ys-faq-question {
  width: 100%;
  margin: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}