/*! YouSee360 CSS bundle — 5 files, exact concatenation of:
 * v2-extras.css
 * motion.css
 * aurora.css
 * refine.css
 * a11y-fixes.css
 */
/* ===== 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;
}

/* ============================================================
   HERO LAYOUT
   The nav clearance itself lives on #Hero in design-system.css and
   mobile.css, which lock the section with !important. This is the
   measure fix that goes with it.
   ============================================================ */
/* The measure that forced the subheading onto five lines. A little
   wider keeps it to three without hurting readability (~72ch). */
#Hero .hero-subheading[class] {
  max-width: 40rem;
  text-wrap: balance;
}

/* The Spanish homepage hero is <section class="hero hero-section"> with no
   id="Hero", so the clearance rule in design-system.css misses it. Same
   overlap: measured -61px against the nav at 1280x720. */
.hero.hero-section {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(80px + 1.5rem);
  padding-bottom: 2.5rem;
  box-sizing: border-box;
}

.hero.hero-section .hero-subheading[class] {
  max-width: 40rem;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .hero.hero-section {
    padding-top: calc(64px + 1rem);
    padding-bottom: 2rem;
  }
}