/* Final request overrides loaded after the legacy stylesheet. */

.site-header {
  width: min(1120px, calc(100vw - 40px)) !important;
  max-width: 1120px !important;
  min-height: 68px !important;
  margin: 14px auto 0 !important;
  padding: 8px 14px !important;
  gap: clamp(12px, 1.8vw, 24px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03) 46%, rgba(0, 0, 0, 0.22)),
    rgba(5, 7, 8, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 18px 46px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
}

.site-header::after {
  right: 7% !important;
  left: 7% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), rgba(255, 242, 189, 0.48), transparent) !important;
  box-shadow: 0 0 14px rgba(255, 242, 189, 0.2) !important;
}

.brand-mark {
  display: block !important;
  flex: 0 0 clamp(176px, 15vw, 205px) !important;
  width: clamp(176px, 15vw, 205px) !important;
  min-width: clamp(176px, 15vw, 205px) !important;
  height: 52px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-mark:hover {
  transform: none !important;
  box-shadow: none !important;
}

.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.22)) !important;
}

.brand-wordmark {
  display: none !important;
}

.main-nav {
  gap: clamp(22px, 3.4vw, 48px) !important;
}

.site-header .nav-link {
  color: #ffffff !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
}

.site-header .quote-button {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.is-active,
.site-header .quote-button:hover {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.34) !important;
}

.guides-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  width: min(1180px, 100%) !important;
  margin: 42px auto 0 !important;
}

.guide-card {
  display: grid !important;
  align-content: start !important;
  min-height: 0 !important;
  padding: clamp(24px, 2.4vw, 34px) !important;
  text-align: right !important;
}

.guide-card:nth-child(1),
.guide-card:nth-child(2) {
  grid-column: span 3 !important;
}

.guide-card:nth-child(3),
.guide-card:nth-child(4),
.guide-card:nth-child(5) {
  grid-column: span 2 !important;
}

.guide-card-top {
  justify-content: flex-start !important;
}

.guide-card-top small {
  display: none !important;
}

.guide-card h2 {
  margin-top: 16px !important;
  font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
  line-height: 1.2 !important;
}

.guide-card > p {
  color: rgba(255, 248, 221, 0.82) !important;
  font-size: 1.02rem !important;
  line-height: 1.85 !important;
}

.guide-card-body {
  display: grid;
  gap: 12px;
  margin: 18px 0 16px;
}

.guide-card-body p {
  margin: 0;
  color: rgba(226, 222, 208, 0.82);
  font-size: 0.98rem;
  line-height: 1.86;
}

.footer-legal {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.footer-legal a,
.accessibility-panel a,
.privacy-consent a {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
}

.site-footer {
  position: relative;
  z-index: 35;
  pointer-events: auto;
}

.legal-modal {
  z-index: 120 !important;
}

.premium-contact-form input.field::placeholder,
.premium-contact-form textarea.field::placeholder {
  color: rgba(255, 248, 221, 0.62);
  opacity: 1;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 28px);
  margin: 0 clamp(16px, 4vw, 56px) 22px auto;
  padding: 8px 14px;
  color: rgba(255, 248, 221, 0.68);
  font-size: 0.92rem;
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.breadcrumbs a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.breadcrumbs span[aria-current="page"] {
  color: var(--gold, #d6b25e);
  font-weight: 800;
}

.guide-directory {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  width: min(1160px, 100%);
  margin: 38px auto 0;
}

.guide-directory-card {
  grid-column: span 4;
  min-height: 260px;
  color: inherit;
  text-decoration: none;
}

.guide-directory-card:nth-child(1),
.guide-directory-card:nth-child(2) {
  grid-column: span 6;
}

.guide-card-action,
.inline-route-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 9px 15px;
  border: 1px solid rgba(214, 178, 94, 0.48);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  background: rgba(214, 178, 94, 0.12);
  box-shadow: 0 0 18px rgba(214, 178, 94, 0.12);
}

.guide-article-layout,
.service-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(20px, 3vw, 36px);
  width: min(1120px, 100%);
  margin: 34px auto 0;
  align-items: start;
  text-align: right;
}

.guide-article-content,
.guide-article-cta,
.service-page-panel,
.service-page-faq {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.guide-article-content,
.service-page-panel {
  padding: clamp(24px, 3vw, 42px);
}

.guide-article-cta,
.service-page-faq {
  position: sticky;
  top: 116px;
  padding: clamp(20px, 2.4vw, 30px);
}

.guide-article-content p,
.service-page-panel p,
.guide-article-cta p {
  color: rgba(234, 230, 216, 0.86);
  font-size: 1.04rem;
  line-height: 1.95;
}

.guide-article-content h2,
.service-page-panel h2,
.service-page-faq h2 {
  margin: 18px 0 10px;
  color: #fff8dd;
}

.guide-article-content li,
.service-page-panel li {
  margin: 10px 0;
  color: rgba(255, 248, 221, 0.82);
  line-height: 1.75;
}

.contact-compact {
  padding-top: clamp(118px, 13vh, 168px) !important;
}

.testimonials-fan-section {
  width: min(1120px, calc(100vw - 32px));
  margin: clamp(42px, 6vw, 74px) auto 0;
  text-align: center;
}

.testimonials-fan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
  perspective: 1200px;
}

.testimonial-card {
  min-height: 230px;
  padding: 24px 20px;
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 18px;
  text-align: right;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
  transform-origin: bottom center;
}

.testimonial-card:nth-child(1) {
  transform: rotate(-7deg) translateY(18px);
}

.testimonial-card:nth-child(2) {
  transform: rotate(-4deg) translateY(4px);
}

.testimonial-card:nth-child(3) {
  transform: rotate(-1deg) translateY(-8px);
}

.testimonial-card:nth-child(4) {
  transform: rotate(1deg) translateY(-8px);
}

.testimonial-card:nth-child(5) {
  transform: rotate(4deg) translateY(4px);
}

.testimonial-card:nth-child(6) {
  transform: rotate(7deg) translateY(18px);
}

.testimonial-card span {
  color: var(--gold, #d6b25e);
  font-weight: 900;
}

.testimonial-card p {
  color: rgba(255, 248, 221, 0.82);
  line-height: 1.75;
}

.testimonial-card strong {
  color: #fff;
}

.lightbox-seo-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 16px 0 0;
}

.lightbox-seo-details div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
}

.lightbox-seo-details dt {
  margin-bottom: 5px;
  color: var(--gold, #d6b25e);
  font-weight: 900;
}

.lightbox-seo-details dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .guide-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-directory-card,
  .guide-directory-card:nth-child(n) {
    grid-column: auto;
  }

  .guide-article-layout,
  .service-page-layout {
    grid-template-columns: 1fr;
  }

  .guide-article-cta,
  .service-page-faq {
    position: static;
  }

  .testimonials-fan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonial-card:nth-child(n) {
    transform: none;
  }
}

@media (max-width: 980px) {
  .site-header {
    width: min(940px, calc(100vw - 28px)) !important;
  }

  .brand-mark {
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    height: 44px !important;
  }

  .site-header .nav-link {
    font-size: 1rem !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    top: 8px !important;
    width: calc(100vw - 16px) !important;
    min-height: 58px !important;
    margin: 8px 8px 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
  }

  .brand-mark,
  .site-header .brand-mark {
    display: block !important;
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    height: 34px !important;
  }

  .main-nav {
    display: none !important;
    gap: 18px !important;
  }

  .main-nav.is-open {
    display: flex !important;
  }

  .site-header .nav-link {
    font-size: 1.1rem !important;
  }

  .guides-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 430px !important;
    margin-top: 32px !important;
  }

  .guide-directory {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 430px;
  }

  .guide-directory-card {
    min-height: auto;
  }

  .guide-article-layout,
  .service-page-layout,
  .testimonials-fan-section {
    width: min(430px, calc(100vw - 24px));
  }

  .testimonials-fan {
    grid-template-columns: 1fr;
  }

  .contact-compact {
    padding-top: 96px !important;
  }

  .lightbox-seo-details {
    grid-template-columns: 1fr;
  }

  .decor-layers canvas {
    opacity: 0.42;
  }

  .portfolio-3d-wrapper {
    transition: transform 260ms ease, opacity 260ms ease !important;
  }

  .guide-card,
  .guide-card:nth-child(n) {
    grid-column: auto !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
  }

  .footer-inner.compact-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    width: min(430px, calc(100vw - 24px)) !important;
    gap: 8px !important;
  }

  .footer-legal {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
}

@media (max-width: 420px) {
  .brand-mark,
  .site-header .brand-mark {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 31px !important;
  }

  .site-header .quote-button {
    max-width: 108px !important;
  }
}

/* Open-task refinements */

.typewriter-copy,
.typewriter-copy [data-typewriter-output] {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.12) !important;
}

@media (min-width: 1180px) {
  .service-grid,
  .service-detail-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(1320px, calc(100vw - 56px)) !important;
  }

  .service-grid {
    gap: 16px !important;
  }

  .service-detail-grid {
    gap: 16px !important;
  }
}

.premium-intake-map .map-step,
.premium-intake-map .map-step:nth-of-type(odd),
.premium-intake-map .map-step:nth-of-type(even) {
  transform: none !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease !important;
}

.premium-intake-map .map-step:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 242, 189, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 221, 0.22),
    0 18px 38px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(216, 185, 106, 0.2) !important;
}

.site-footer {
  padding: 18px 0 !important;
}

.footer-inner.compact-footer {
  width: min(1080px, calc(100vw - 32px)) !important;
  max-width: 1080px !important;
  min-height: 58px !important;
  padding-inline: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  white-space: nowrap !important;
}

.footer-signature {
  color: rgba(255, 248, 221, 0.78);
  font-weight: 800;
  letter-spacing: 0;
}

.footer-legal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.footer-legal a {
  white-space: nowrap !important;
  border-radius: 8px !important;
}

.guide-directory {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.5vw, 22px) !important;
  width: min(1320px, calc(100vw - 48px)) !important;
  align-items: stretch !important;
}

.guide-directory-card,
.guide-directory-card:nth-child(n) {
  grid-column: auto !important;
  min-height: 0 !important;
}

.guide-card {
  position: relative !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 14px !important;
  padding: clamp(22px, 1.9vw, 28px) !important;
  overflow: hidden !important;
}

.guide-card-number {
  width: fit-content;
  color: rgba(255, 248, 221, 0.62);
  font-weight: 900;
  transition:
    color 220ms ease,
    text-shadow 220ms ease,
    filter 220ms ease;
}

.guide-card:hover .guide-card-number,
.guide-card:focus-visible .guide-card-number {
  color: var(--gold, #d6b25e);
  text-shadow:
    0 0 8px rgba(216, 185, 106, 0.92),
    0 0 18px rgba(216, 185, 106, 0.48),
    0 0 28px rgba(255, 248, 221, 0.18);
}

.guide-card h2 {
  position: relative;
  display: -webkit-box !important;
  min-height: 2.42em !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #fff8dd !important;
  font-size: clamp(1.62rem, 1.85vw, 2.08rem) !important;
  line-height: 1.18 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.guide-card h2::after {
  position: absolute;
  right: 0;
  bottom: 0.02em;
  width: 100%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, rgba(216, 185, 106, 0.95), rgba(255, 248, 221, 0.85));
  box-shadow: 0 0 14px rgba(216, 185, 106, 0.36);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 0.8, 0.22, 1);
}

.guide-card:hover h2::after,
.guide-card:focus-visible h2::after {
  transform: scaleX(1);
}

.guide-card > p {
  margin: 0 !important;
  color: rgba(255, 248, 221, 0.78) !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
}

.guide-card-action {
  justify-self: start !important;
  min-width: 132px !important;
  min-height: 42px !important;
  margin-top: 4px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.contact-page-shell {
  width: min(1180px, calc(100vw - 40px));
  margin: 0 auto;
  padding-top: clamp(118px, 13vh, 154px);
  text-align: center;
}

.page-contact .breadcrumbs {
  margin-bottom: clamp(22px, 3vw, 34px) !important;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: stretch;
  direction: rtl;
  text-align: right;
}

.contact-layout > .contact-info-card,
.contact-layout > .premium-contact-form {
  grid-column: auto !important;
  grid-row: auto !important;
}

.contact-info-card,
.premium-contact-form {
  min-width: 0;
  border: 1px solid rgba(255, 242, 189, 0.28) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03) 58%, rgba(216, 185, 106, 0.045)),
    rgba(8, 9, 9, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 221, 0.14),
    0 24px 58px rgba(0, 0, 0, 0.32) !important;
}

.contact-info-card {
  position: relative;
  padding: clamp(28px, 3vw, 42px) !important;
  overflow: hidden;
}

.contact-info-logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 22px rgba(255, 242, 189, 0.18));
}

.contact-info-logo img {
  display: block;
  width: min(78%, 460px);
  height: auto;
  object-fit: contain;
}

.contact-info-card > *:not(.contact-info-logo) {
  position: relative;
  z-index: 1;
}

/* Portfolio empty state */
.portfolio-empty-state {
  margin: clamp(40px, 6vw, 80px) auto;
  max-width: 640px;
  text-align: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 248, 221, 0.04), rgba(255, 248, 221, 0.01));
  border: 1px solid rgba(255, 242, 189, 0.14);
}
.portfolio-empty-title {
  font-size: clamp(22px, 3vw, 30px);
  color: rgba(255, 248, 221, 0.95);
  margin: 0 0 12px;
  font-weight: 600;
}
.portfolio-empty-copy {
  color: rgba(255, 248, 221, 0.72);
  line-height: 1.8;
  margin: 0 0 22px;
}

.contact-copy .page-title {
  margin-block: 10px 18px !important;
}

.contact-copy p {
  max-width: 68ch;
  color: rgba(255, 248, 221, 0.82) !important;
  line-height: 1.9 !important;
}

.contact-promises {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 22px 0 !important;
  padding: 0 !important;
}

.contact-promises li {
  padding: 10px 13px;
  border: 1px solid rgba(216, 185, 106, 0.28);
  border-radius: 8px;
  color: #fff;
  background: rgba(216, 185, 106, 0.08);
}

.compact-metrics {
  margin-top: 24px !important;
}

.contact-form-title {
  margin: 0 0 18px !important;
  color: #fff8dd;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.15;
}

.premium-contact-form {
  padding: clamp(24px, 2.6vw, 34px) !important;
}

.testimonials-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  min-height: 330px;
  margin-top: 34px;
  isolation: isolate;
}

.testimonial-stack-card {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  width: min(360px, 100%);
  min-height: 236px;
  margin-inline: auto;
  cursor: pointer;
  transform: translateX(0) translateY(0) rotate(0deg);
  transition:
    transform 260ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    z-index 0s;
  z-index: calc(10 - var(--stack-index));
}

.testimonial-stack-card:nth-child(1) {
  transform: translateX(180px) translateY(18px) rotate(8deg);
}

.testimonial-stack-card:nth-child(2) {
  transform: translateX(108px) translateY(6px) rotate(5deg);
}

.testimonial-stack-card:nth-child(3) {
  transform: translateX(36px) translateY(-8px) rotate(2deg);
}

.testimonial-stack-card:nth-child(4) {
  transform: translateX(-36px) translateY(-8px) rotate(-2deg);
}

.testimonial-stack-card:nth-child(5) {
  transform: translateX(-108px) translateY(6px) rotate(-5deg);
}

.testimonial-stack-card:nth-child(6) {
  transform: translateX(-180px) translateY(18px) rotate(-8deg);
}

.testimonial-stack-card:hover,
.testimonial-stack-card:focus-visible {
  z-index: 30;
  border-color: rgba(255, 242, 189, 0.72) !important;
  transform: translateY(-20px) scale(1.03) rotate(0deg);
  box-shadow:
    0 32px 70px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(216, 185, 106, 0.22) !important;
}

@media (max-width: 1180px) {
  .guide-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(860px, calc(100vw - 32px)) !important;
  }

  .service-grid,
  .service-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .contact-page-shell {
    width: min(520px, calc(100vw - 24px));
    padding-top: 86px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-info-logo {
    opacity: 0.07;
  }

  .testimonials-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
  }

  .testimonial-stack-card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .hero {
    padding-top: 84px !important;
  }

  .simple-hero,
  .contact-page-shell {
    padding-top: 82px !important;
  }

  .page-about,
  .about-premium-layout,
  .about-layout,
  .about-signals,
  .about-faq,
  .about-panel {
    width: min(430px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .site-header .quote-button {
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
  }

  .guide-directory,
  .service-grid,
  .service-detail-grid {
    grid-template-columns: 1fr !important;
    width: min(430px, calc(100vw - 24px)) !important;
  }

  .guide-card h2 {
    font-size: clamp(1.42rem, 8vw, 1.85rem) !important;
  }

  .footer-inner.compact-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(430px, calc(100vw - 24px)) !important;
    min-height: auto !important;
    white-space: normal !important;
  }
}

/* Emergency structure correction: keep testimonials and footer simple, visible and slim. */

.testimonials-fan-section {
  width: min(1180px, calc(100vw - 32px)) !important;
  margin: clamp(34px, 4vw, 54px) auto 0 !important;
}

.testimonials-stack {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  min-height: 0 !important;
  margin-top: 28px !important;
  perspective: none !important;
}

.testimonial-stack-card,
.testimonial-stack-card:nth-child(n),
.testimonial-card:nth-child(n) {
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-height: 170px !important;
  margin: 0 !important;
  padding: 20px 18px !important;
  transform: none !important;
  z-index: 1 !important;
}

.testimonial-stack-card:hover,
.testimonial-stack-card:focus-visible {
  transform: translateY(-5px) !important;
  z-index: 2 !important;
}

.testimonial-card p {
  margin: 12px 0 14px !important;
  font-size: 0.95rem !important;
  line-height: 1.62 !important;
}

.site-footer {
  width: min(1040px, calc(100vw - 28px)) !important;
  margin: 28px auto 12px !important;
  padding: 6px 0 !important;
  overflow: visible !important;
  border-radius: 14px !important;
}

.footer-inner.compact-footer {
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  white-space: nowrap !important;
}

.footer-inner.compact-footer > span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.footer-signature {
  flex: 0 1 auto !important;
  font-size: 0.86rem !important;
}

.footer-legal {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.footer-legal a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(216, 185, 106, 0.34) !important;
  border-radius: 7px !important;
  color: #fff8dd !important;
  background: rgba(216, 185, 106, 0.08) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .testimonials-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-signature {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .testimonials-stack {
    grid-template-columns: 1fr !important;
  }

  .site-footer {
    width: min(430px, calc(100vw - 24px)) !important;
    padding: 7px 0 !important;
  }

  .footer-inner.compact-footer {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    white-space: normal !important;
  }

  .footer-legal {
    justify-content: center !important;
  }
}

/* Global layout stabilization for home, guides and portfolio cinema gallery. */

.app-shell {
  width: min(1320px, calc(100vw - 32px)) !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-top: clamp(92px, 8vw, 124px) !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.page,
.page-home,
.page-guides,
.page-portfolio {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.page-home > *,
.page-guides > *,
.page-portfolio > * {
  position: relative !important;
  z-index: 1 !important;
}

.hero-home {
  width: min(1120px, 100%) !important;
  min-height: min(560px, calc(100vh - 150px)) !important;
  margin: 0 auto clamp(48px, 5vw, 78px) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  text-align: center !important;
}

.hero-copy {
  width: min(920px, 100%) !important;
  margin-inline: auto !important;
  justify-self: center !important;
  text-align: center !important;
}

.hero-copy h1 {
  margin-inline: auto !important;
  text-align: center !important;
}

.hero-copy p {
  margin-inline: auto !important;
  text-align: center !important;
}

.guides-hero,
.page-guides .simple-hero {
  width: min(1180px, 100%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  text-align: center !important;
  overflow: visible !important;
}

.guides-hero > *,
.page-guides .simple-hero > * {
  max-width: 100% !important;
}

.guides-intro {
  max-width: 760px !important;
  margin-inline: auto !important;
}

.section-title,
.stats-grid,
.service-grid,
.service-detail-grid,
.premium-intake-map,
.luxury-timeline,
.trust-grid,
.guide-directory,
.portfolio-cinema-section {
  margin-right: auto !important;
  margin-left: auto !important;
}

.section-title::before,
.section-title::after,
.neon-card::before,
.neon-card::after,
.service-detail-card::before,
.service-detail-card::after,
.map-step::before,
.map-step::after,
.guide-card::before,
.guide-card::after,
.portfolio-3d-card::before,
.portfolio-3d-card::after {
  pointer-events: none !important;
}

.portfolio-cinema-section {
  width: min(1320px, calc(100vw - 28px)) !important;
  max-width: 1320px !important;
  padding: clamp(14px, 2vw, 24px) 0 clamp(36px, 5vw, 62px) !important;
  perspective: 1400px !important;
}

.portfolio-cinema-grid {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.84fr) minmax(340px, 1.22fr) minmax(220px, 0.84fr) !important;
  gap: clamp(20px, 2.6vw, 34px) !important;
  align-items: center !important;
  padding: clamp(8px, 1vw, 14px) 0 !important;
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
}

.portfolio-cinema-grid .portfolio-3d-wrapper,
.portfolio-cinema-grid .portfolio-3d-wrapper:nth-child(n) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  perspective: 1000px !important;
  transform: translateZ(0) !important;
}

.portfolio-cinema-grid .portfolio-3d-wrapper:nth-child(3n + 1) {
  --base-rotate-y: -13;
  --base-x: 10px;
  --base-z: -32px;
  --base-y: 22px;
  --base-scale: 0.94;
}

.portfolio-cinema-grid .portfolio-3d-wrapper:nth-child(3n + 2) {
  --base-rotate-y: 0;
  --base-x: 0px;
  --base-z: 68px;
  --base-y: -6px;
  --base-scale: 1.04;
}

.portfolio-cinema-grid .portfolio-3d-wrapper:nth-child(3n) {
  --base-rotate-y: 13;
  --base-x: -10px;
  --base-z: -32px;
  --base-y: 22px;
  --base-scale: 0.94;
}

.portfolio-cinema-grid .portfolio-3d-card {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 242, 189, 0.18),
    0 0 28px rgba(216, 185, 106, 0.08) !important;
}

.portfolio-cinema-grid .portfolio-3d-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.portfolio-cinema-grid .portfolio-3d-overlay {
  transform: translateZ(54px) !important;
}

@media (max-width: 1100px) {
  .portfolio-cinema-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 860px !important;
  }

  .portfolio-cinema-grid .portfolio-3d-wrapper:nth-child(n) {
    --base-rotate-y: 0;
    --base-x: 0px;
    --base-z: 0px;
    --base-y: 0px;
    --base-scale: 1;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100%, calc(100vw - 24px)) !important;
    padding-top: 76px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .hero-home {
    min-height: auto !important;
    margin-bottom: 42px !important;
  }

  .guides-hero,
  .page-guides .simple-hero {
    width: min(430px, 100%) !important;
  }

  .portfolio-cinema-grid {
    grid-template-columns: 1fr !important;
    width: min(430px, 100%) !important;
    max-width: 430px !important;
    gap: 18px !important;
    perspective: none !important;
  }

  .portfolio-cinema-grid .portfolio-3d-wrapper:nth-child(n) {
    --base-scale: 1;
  }
}

/* Current task: layout, service pages, guides, portfolio modal and performance */

.page-home {
  overflow: visible !important;
}

.page-home > .section-title,
.page-home > .stats-grid,
.page-home > .service-grid,
.page-home > .service-detail-grid,
.page-home > .premium-intake-map,
.page-home > .luxury-timeline,
.page-home > .trust-grid {
  position: relative !important;
  z-index: 1 !important;
  width: min(1320px, calc(100vw - 48px)) !important;
  max-width: 1320px !important;
}

.premium-intake-map.mindmap-4d {
  width: min(1160px, calc(100vw - 48px)) !important;
  min-height: clamp(760px, 64vw, 860px) !important;
  margin-top: clamp(42px, 5vw, 76px) !important;
  margin-bottom: clamp(86px, 8vw, 132px) !important;
  overflow: visible !important;
  contain: layout !important;
}

.premium-intake-map.mindmap-4d::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

.premium-intake-map.mindmap-4d .mindmap-links {
  z-index: 1 !important;
}

.premium-intake-map.mindmap-4d .mindmap-core {
  z-index: 4 !important;
}

.premium-intake-map.mindmap-4d .mind-node,
.premium-intake-map.mindmap-4d .mind-node:nth-of-type(odd),
.premium-intake-map.mindmap-4d .mind-node:nth-of-type(even) {
  position: absolute !important;
  top: var(--y) !important;
  left: var(--x) !important;
  z-index: 3 !important;
  width: clamp(220px, 22vw, 286px) !important;
  transform: translate(-50%, -50%) translateZ(var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease !important;
  will-change: auto !important;
}

.premium-intake-map.mindmap-4d .mind-node:hover,
.premium-intake-map.mindmap-4d .mind-node:focus-visible {
  transform: translate(-50%, calc(-50% - 5px)) translateZ(var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) !important;
  border-color: rgba(255, 242, 189, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 221, 0.2),
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(216, 185, 106, 0.2) !important;
}

.luxury-timeline,
.trust-grid {
  clear: both !important;
  margin-top: clamp(18px, 2.8vw, 34px) !important;
  margin-bottom: clamp(52px, 6vw, 88px) !important;
  isolation: isolate !important;
}

.luxury-timeline::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

.luxury-timeline > *,
.trust-grid > * {
  position: relative !important;
  z-index: 1 !important;
}

.guide-card h2::after {
  display: none !important;
}

.guide-card-top {
  display: flex !important;
  justify-content: flex-start !important;
  min-height: 34px !important;
}

.guide-card-top span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding-bottom: 8px !important;
  color: var(--gold, #d6b25e) !important;
  font-size: clamp(1.08rem, 1.25vw, 1.32rem) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.guide-card-top span::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216, 185, 106, 0.98), rgba(255, 248, 221, 0.9));
  box-shadow: 0 0 14px rgba(216, 185, 106, 0.42);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(0.22, 0.8, 0.22, 1);
}

.guide-card:hover .guide-card-top span::after,
.guide-card:focus-visible .guide-card-top span::after {
  transform: scaleX(1);
}

.guide-card-action,
.inline-route-link,
.ghost-button,
.contact-form .ghost-button,
.premium-contact-form .ghost-button,
.service-page-faq .ghost-button {
  border-radius: 8px !important;
}

.service-page-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
  gap: clamp(24px, 3vw, 42px) !important;
}

.service-page-panel,
.service-page-faq {
  border-radius: 14px !important;
}

.service-page-panel h2 {
  margin-top: clamp(22px, 2vw, 30px) !important;
}

.service-page-panel h2:first-child {
  margin-top: 0 !important;
}

.service-page-panel ul {
  display: grid !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
  padding-inline-start: 1.15em !important;
}

.service-page-faq {
  display: grid !important;
  gap: 14px !important;
}

.service-page-faq .faq-item {
  margin: 0 !important;
}

.service-page-faq .faq-item + .faq-item,
.page-service .faq-item + .faq-item {
  margin-top: 12px !important;
}

.service-page-faq .ghost-button {
  width: fit-content !important;
  min-height: 44px !important;
  margin-top: 14px !important;
  padding: 12px 20px !important;
}

.lightbox {
  align-items: start !important;
  overflow: auto !important;
  padding: clamp(14px, 2vw, 26px) !important;
}

.lightbox figure {
  grid-template-rows: auto auto !important;
  width: min(1120px, calc(100vw - 28px)) !important;
  max-height: none !important;
  overflow: visible !important;
}

.lightbox-media {
  max-height: min(68vh, 680px) !important;
  overflow: hidden !important;
}

.lightbox-media img {
  width: 100% !important;
  height: auto !important;
  max-height: min(68vh, 680px) !important;
  object-fit: contain !important;
}

.lightbox figcaption {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  max-height: none !important;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.4vw, 28px) !important;
  border-top: 1px solid rgba(255, 242, 189, 0.22) !important;
  background: rgba(0, 0, 0, 0.92) !important;
}

.lightbox-seo-details {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.lightbox-seo-details div {
  padding: 10px 12px !important;
}

.lightbox-seo-details dd {
  line-height: 1.45 !important;
}

.neon-card,
.stat-card,
.service-detail-card,
.map-step,
.timeline-step,
.trust-card,
.guide-card,
.faq-item,
.service-page-panel,
.service-page-faq,
.contact-info-card,
.premium-contact-form,
.guide-article-content,
.guide-article-cta {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.decor-layers canvas {
  opacity: 0.34 !important;
}

.decor {
  will-change: auto !important;
}

.reveal {
  transition-duration: 260ms !important;
  will-change: auto !important;
}

/* Fail-safe: content must never disappear if IntersectionObserver/animations are delayed or fail. */
.app-shell .reveal:not(.is-visible) {
  opacity: 1 !important;
  translate: 0 0 !important;
  transform: none !important;
}

.portfolio-3d-card {
  will-change: auto !important;
}

@media (max-width: 980px) {
  .page-home > .section-title,
  .page-home > .stats-grid,
  .page-home > .service-grid,
  .page-home > .service-detail-grid,
  .page-home > .premium-intake-map,
  .page-home > .luxury-timeline,
  .page-home > .trust-grid {
    width: min(620px, calc(100vw - 24px)) !important;
  }

  .premium-intake-map.mindmap-4d {
    display: grid !important;
    gap: 16px !important;
    min-height: 0 !important;
    margin-top: 30px !important;
    margin-bottom: 58px !important;
    contain: none !important;
    perspective: none !important;
  }

  .premium-intake-map.mindmap-4d::before,
  .premium-intake-map.mindmap-4d .mindmap-links,
  .premium-intake-map.mindmap-4d .mindmap-depth {
    display: none !important;
  }

  .premium-intake-map.mindmap-4d .mindmap-core,
  .premium-intake-map.mindmap-4d .mind-node,
  .premium-intake-map.mindmap-4d .mind-node:nth-of-type(odd),
  .premium-intake-map.mindmap-4d .mind-node:nth-of-type(even),
  .premium-intake-map.mindmap-4d .mind-node:hover,
  .premium-intake-map.mindmap-4d .mind-node:focus-visible {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  .luxury-timeline {
    grid-template-columns: 1fr !important;
  }

  .luxury-timeline::before {
    display: none !important;
  }

  .service-page-layout {
    grid-template-columns: 1fr !important;
  }

  .service-page-faq {
    position: static !important;
  }

  .lightbox-seo-details {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .guide-card-top span {
    font-size: 1.12rem !important;
  }

  .lightbox {
    padding: 10px !important;
    padding-top: clamp(120px, 28vw, 180px) !important;
  }

  .lightbox-media,
  .lightbox-media img {
    max-height: 52vh !important;
  }

  .decor-layers canvas,
  .decor-layers::before,
  .decor-layers::after {
    opacity: 0.18 !important;
  }

  .mindmap-core::before,
  .mindmap-core::after,
  .portfolio-3d-card::after {
    animation: none !important;
  }
}

/* Current spacing and alignment pass */

.service-detail-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.service-detail-card .inline-route-link {
  margin-top: auto !important;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  align-self: flex-start !important;
}

.page-home > .section-title + .premium-intake-map.mindmap-4d {
  margin-top: clamp(78px, 7vw, 112px) !important;
}

.contact-page-shell {
  padding-top: clamp(28px, 4.2vh, 52px) !important;
}

.page-contact .breadcrumbs {
  margin-bottom: clamp(16px, 2.2vw, 26px) !important;
}

.contact-layout {
  align-items: start !important;
}

.premium-contact-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.contact-form-title {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  text-align: center !important;
}

.premium-contact-form .budget-range,
.premium-contact-form select[name="urgency"],
.premium-contact-form textarea.field,
.premium-contact-form .privacy-consent,
.premium-contact-form .ghost-button {
  grid-column: 1 / -1 !important;
}

.premium-contact-form .budget-range {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.premium-contact-form .budget-range .field {
  min-width: 0 !important;
}

.page-guides {
  display: grid !important;
  justify-items: center !important;
}

.page-guides .guides-hero,
.page-guides .guide-directory {
  justify-self: center !important;
  margin-inline: auto !important;
}

.page-guides .guide-directory {
  width: min(1320px, calc(100vw - 48px)) !important;
}

/* Hard center fix for guides route */

.page-guides {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.page-guides .guides-hero,
.page-guides .simple-hero {
  width: min(1320px, calc(100vw - 48px)) !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transform: none !important;
  translate: none !important;
}

.page-guides .breadcrumbs,
.page-guides .guides-kicker,
.page-guides .page-title,
.page-guides .guides-intro,
.page-guides .guide-directory {
  margin-inline: auto !important;
  align-self: center !important;
  transform: none !important;
  translate: none !important;
}

/* Keep the breadcrumb in the same top-right position as every other page */
.page-guides {
  align-items: stretch !important;
}
.page-guides .breadcrumbs {
  align-self: auto !important;
  width: max-content !important;
  max-width: calc(100vw - 28px) !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  margin-left: auto !important;
  margin-right: clamp(16px, 4vw, 56px) !important;
}

.page-guides .guide-directory {
  width: 100% !important;
  max-width: 1320px !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 860px) {
  .contact-page-shell {
    padding-top: clamp(18px, 3.2vh, 34px) !important;
  }

  .premium-contact-form {
    grid-template-columns: 1fr !important;
  }

  .premium-contact-form .budget-range {
    grid-template-columns: 1fr !important;
  }

  .page-guides .guide-directory {
    width: min(520px, calc(100vw - 24px)) !important;
  }

  .page-guides .guides-hero,
  .page-guides .simple-hero {
    width: min(520px, calc(100vw - 24px)) !important;
  }
}

/* Shutter-style logo intro requested for the architectural reveal */

body .cinematic-gate.architectural-logo-reveal {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 242, 189, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.26)) !important;
  animation: premiumShutterGate 4300ms cubic-bezier(0.18, 0.72, 0.12, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal::before,
body .cinematic-gate.architectural-logo-reveal::after {
  z-index: 12 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255, 242, 189, 0.055) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(14, 14, 12, 0.96), rgba(2, 3, 4, 0.98)) !important;
  box-shadow:
    inset 0 0 34px rgba(255, 242, 189, 0.08),
    0 0 34px rgba(0, 0, 0, 0.72) !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

body .cinematic-gate.architectural-logo-reveal::before {
  bottom: 50% !important;
  animation: premiumShutterTop 4300ms cubic-bezier(0.18, 0.72, 0.12, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal::after {
  top: 50% !important;
  animation: premiumShutterBottom 4300ms cubic-bezier(0.18, 0.72, 0.12, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-stage {
  animation: premiumShutterStage 4300ms cubic-bezier(0.18, 0.72, 0.12, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-logo-final {
  animation: premiumShutterMaterial 4300ms cubic-bezier(0.14, 0.86, 0.14, 1) forwards !important;
}

@keyframes premiumShutterGate {
  0% {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(22px) brightness(0.36) saturate(1.04);
  }
  72% {
    opacity: 1;
    backdrop-filter: blur(13px) brightness(0.58) saturate(1.04);
  }
  92% {
    opacity: 1;
    backdrop-filter: blur(9px) brightness(0.68) saturate(1.04);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0) brightness(1) saturate(1);
  }
}

@keyframes premiumShutterTop {
  0%,
  12% {
    transform: translate3d(0, 0, 0);
  }
  31%,
  72% {
    transform: translate3d(0, -102%, 0);
  }
  92%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes premiumShutterBottom {
  0%,
  12% {
    transform: translate3d(0, 0, 0);
  }
  31%,
  72% {
    transform: translate3d(0, 102%, 0);
  }
  92%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes premiumShutterStage {
  0%,
  14% {
    opacity: 0;
    transform: translate3d(0, 10px, -120px) scale(0.9);
    filter: blur(2px);
  }
  36% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  74% {
    opacity: 1;
    transform: translate3d(0, -1px, 24px) scale(1.015);
    filter: blur(0);
  }
  92% {
    opacity: 0.72;
    transform: translate3d(0, -5px, 80px) scale(1.05);
    filter: blur(0.8px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -8px, 128px) scale(1.08);
    filter: blur(1px);
  }
}

@keyframes premiumShutterMaterial {
  0%,
  30% {
    opacity: 0;
    clip-path: inset(44% 44% 44% 44%);
    transform: translateZ(-24px) scale(0.96);
  }
  54% {
    opacity: 0.82;
    clip-path: inset(0 0 28% 0);
  }
  70% {
    opacity: 1;
    clip-path: inset(0);
    transform: translateZ(0) scale(1);
  }
  86% {
    opacity: 1;
    transform: translateZ(24px) scale(1.018);
  }
  100% {
    opacity: 0;
    clip-path: inset(0);
    transform: translate3d(0, -5px, 110px) scale(1.065);
  }
}

@media (max-width: 760px) {
  .decor-layers {
    display: none !important;
  }

  body .cinematic-gate.architectural-logo-reveal,
  body .cinematic-gate.architectural-logo-reveal::before,
  body .cinematic-gate.architectural-logo-reveal::after,
  body .cinematic-gate.architectural-logo-reveal .architect-stage,
  body .cinematic-gate.architectural-logo-reveal .architect-logo-final {
    animation-duration: 3000ms !important;
  }

  body .cinematic-gate.architectural-logo-reveal {
    backdrop-filter: blur(8px) brightness(0.72) !important;
  }

  .hero-copy h1 {
    max-width: min(100%, 330px) !important;
    font-size: clamp(1.85rem, 8.8vw, 2.45rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-kicker {
    max-width: calc(100vw - 28px) !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app-shell,
  .page,
  .page > *,
  .simple-hero,
  .hero-home,
  .hero-copy,
  .guide-directory,
  .guides-grid,
  .contact-page-shell,
  .contact-layout,
  .service-page-hero,
  .service-page-grid,
  .page-about,
  .page-guides,
  .page-contact,
  .page-portfolio {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .neon-card,
  .service-detail-card,
  .guide-card,
  .contact-info-card,
  .premium-contact-form,
  .about-panel,
  .about-signal,
  .trust-card,
  .faq-item,
  .portfolio-3d-wrapper,
  .portfolio-3d-card,
  .legal-page {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .guide-card,
  .contact-info-card,
  .premium-contact-form {
    padding-inline: 18px !important;
  }

  .guide-card h2,
  .contact-info-card h1,
  .simple-hero h1,
  .page-title {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .guide-card h2 {
    font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  .contact-actions,
  .contact-promises,
  .premium-contact-form,
  .premium-contact-form .budget-range {
    grid-template-columns: 1fr !important;
  }

  .contact-actions a,
  .contact-actions button,
  .guide-card .ghost-button,
  .service-detail-card .ghost-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
  }
}

/* Release QA: strict mobile containment for RTL pages after image/performance pass. */

@media (max-width: 760px) {
  html,
  body {
    position: relative !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    overflow-x: clip !important;
  }

  body {
    min-inline-size: 0 !important;
  }

  .app-shell {
    inline-size: 100% !important;
    max-inline-size: 100vw !important;
    padding-inline: 14px !important;
    overflow-x: clip !important;
  }

  .page,
  .page > section,
  .hero-home,
  .simple-hero,
  .page-guides,
  .page-guides .guides-hero,
  .page-guides .simple-hero,
  .page-guides .guide-directory,
  .contact-page-shell,
  .contact-layout {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    transform: none !important;
    translate: none !important;
  }

  .hero-kicker {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    padding: 9px 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: clamp(0.78rem, 3.2vw, 0.9rem) !important;
    line-height: 1.35 !important;
  }

  .page-guides .guides-kicker,
  .page-guides .page-title,
  .page-guides .guides-intro {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: center !important;
  }

  .page-guides .guide-directory {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    justify-items: stretch !important;
  }

  .page-guides .guide-card,
  .page-guides .guide-directory-card,
  .page-guides .guide-directory-card:nth-child(n),
  .contact-info-card,
  .premium-contact-form {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    grid-column: auto !important;
    padding-inline: 18px !important;
    overflow: hidden !important;
    transform: none !important;
    translate: none !important;
  }

  .page-guides .guide-card *,
  .contact-info-card *,
  .premium-contact-form * {
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
  }

  .page-guides .guide-card-number {
    align-self: start !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
  }

  .page-guides .guide-card h2,
  .page-guides .guide-card p {
    inline-size: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
  }

  .page-guides .guide-card h2 {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  .page-guides .guide-card-action {
    justify-self: stretch !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    white-space: nowrap !important;
  }

  .contact-info-card {
    padding: 28px 18px !important;
    text-align: right !important;
  }

  .contact-info-card .page-title {
    text-align: center !important;
  }

  .contact-copy p,
  .contact-promises,
  .compact-metrics {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }
}

@media (max-width: 760px) {
  .page > section,
  .hero-home,
  .simple-hero,
  .page-guides .guides-hero,
  .page-guides .simple-hero,
  .contact-page-shell {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }

  .hero-kicker {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 56px) !important;
    margin-inline: auto !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .page-guides .guide-directory,
  .page-guides .guide-card,
  .contact-layout,
  .contact-info-card,
  .premium-contact-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-kicker,
  .page-guides .guide-directory,
  .page-guides .guide-card,
  .contact-info-card,
  .premium-contact-form {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .page-guides .guide-card h2 {
    font-size: clamp(1.18rem, 6.2vw, 1.55rem) !important;
    line-height: 1.22 !important;
  }

  .page-guides .guide-card p {
    font-size: 0.95rem !important;
    line-height: 1.62 !important;
  }

  .contact-info-card p,
  .contact-promises li {
    font-size: 0.95rem !important;
  }
}

/* Mobile experience pass: make the first visit feel like a premium showroom, not a stack of cards. */

.mobile-showroom {
  display: none;
}

@media (max-width: 760px) {
  .mobile-showroom {
    position: relative;
    display: grid;
    width: calc(100vw - 32px);
    max-width: 430px;
    min-height: 312px;
    margin: 8px auto 34px;
    padding: 28px 22px 22px;
    overflow: hidden;
    isolation: isolate;
    border-block: 1px solid rgba(216, 185, 106, 0.34);
    background:
      linear-gradient(135deg, rgba(255, 248, 221, 0.06), transparent 34%),
      radial-gradient(circle at 22% 18%, rgba(216, 185, 106, 0.17), transparent 28%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  }

  .mobile-showroom::before {
    position: absolute;
    inset: 16px 0 auto;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 248, 221, 0.72), transparent);
    box-shadow: 0 0 24px rgba(216, 185, 106, 0.34);
  }

  .mobile-showroom::after {
    position: absolute;
    inset: auto -24px -70px;
    height: 150px;
    content: "";
    border: 1px solid rgba(216, 185, 106, 0.22);
    border-radius: 50% 50% 0 0;
    transform: perspective(520px) rotateX(58deg);
    opacity: 0.72;
    z-index: -1;
  }

  .mobile-showroom-signal {
    position: absolute;
    inset-inline-start: 18px;
    top: 28px;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(216, 185, 106, 0.36);
    border-radius: 999px;
    background:
      linear-gradient(90deg, transparent 49%, rgba(216, 185, 106, 0.38) 50%, transparent 51%),
      linear-gradient(0deg, transparent 49%, rgba(216, 185, 106, 0.28) 50%, transparent 51%),
      radial-gradient(circle, rgba(216, 185, 106, 0.2), transparent 62%);
    box-shadow: 0 0 36px rgba(216, 185, 106, 0.16);
    animation: mobileSignalPulse 4.8s ease-in-out infinite;
  }

  .mobile-showroom-copy {
    position: relative;
    z-index: 1;
    text-align: right;
  }

  .mobile-showroom-copy span {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--gold, #d6b25e);
    font-weight: 900;
    font-size: 0.86rem;
  }

  .mobile-showroom-copy h2 {
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: clamp(1.6rem, 7.2vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: 0;
    word-spacing: 0.05em;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.14);
  }

  .mobile-showroom-copy p {
    max-width: 27ch;
    margin: 18px 0 0;
    color: rgba(255, 248, 221, 0.82);
    font-size: 1.02rem;
    line-height: 1.75;
  }

  .mobile-showroom-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    align-self: end;
    margin-top: 28px;
    border: 1px solid rgba(216, 185, 106, 0.2);
    background: rgba(216, 185, 106, 0.15);
  }

  .mobile-showroom-steps span {
    min-height: 42px;
    display: grid;
    place-items: center;
    color: #fff8dd;
    font-weight: 900;
    background: rgba(2, 4, 5, 0.72);
  }

  .page-home > .stats-grid {
    display: flex !important;
    width: calc(100vw - 32px) !important;
    max-width: 430px !important;
    gap: 0 !important;
    margin: 0 auto 38px !important;
    border: 1px solid rgba(216, 185, 106, 0.72) !important;
    border-radius: 16px !important;
    background: rgba(8, 12, 20, 0.6) !important;
    box-shadow: 0 0 24px rgba(216, 185, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden !important;
  }

  .page-home > .stats-grid .stat-card {
    min-height: 92px !important;
    padding: 12px 8px !important;
    border: 0 !important;
    border-inline-start: 1px solid rgba(216, 185, 106, 0.55) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .page-home > .stats-grid .stat-card:last-child {
    border-inline-start: 0 !important;
  }

  .page-home > .stats-grid .stat-card .icon {
    display: none !important;
  }

  .page-home > .stats-grid .stat-card strong {
    font-size: 1.6rem !important;
  }

  .page-home > .stats-grid .stat-card span {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
  }

  .page-home > .service-grid,
  .page-home > .service-detail-grid {
    gap: 0 !important;
    border-block: 1px solid rgba(216, 185, 106, 0.24);
  }

  .page-home > .service-grid .neon-card,
  .page-home > .service-detail-grid .service-detail-card {
    border: 0 !important;
    border-bottom: 1px solid rgba(216, 185, 106, 0.16) !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(216, 185, 106, 0.055), transparent 72%) !important;
    box-shadow: none !important;
  }

  .page-home > .service-grid .neon-card:last-child,
  .page-home > .service-detail-grid .service-detail-card:last-child {
    border-bottom: 0 !important;
  }

  .page-home > .service-grid .card-icon,
  .page-home > .service-detail-grid .service-detail-icon {
    border-radius: 12px !important;
    background: rgba(216, 185, 106, 0.1) !important;
  }
}

@keyframes mobileSignalPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Mobile stability pass: slower shutter, larger header logo, and strict centered layout. */

@keyframes premiumShutterTop {
  0%,
  24% {
    transform: translate3d(0, 0, 0);
  }
  58%,
  76% {
    transform: translate3d(0, -102%, 0);
  }
  94%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes premiumShutterBottom {
  0%,
  24% {
    transform: translate3d(0, 0, 0);
  }
  58%,
  76% {
    transform: translate3d(0, 102%, 0);
  }
  94%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

body .cinematic-gate.architectural-logo-reveal,
body .cinematic-gate.architectural-logo-reveal::before,
body .cinematic-gate.architectural-logo-reveal::after,
body .cinematic-gate.architectural-logo-reveal .architect-stage,
body .cinematic-gate.architectural-logo-reveal .architect-logo-final {
  animation-duration: 5200ms !important;
}

@media (max-width: 760px) {
  html,
  body {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    overflow-x: clip !important;
  }

  body .cinematic-gate.architectural-logo-reveal,
  body .cinematic-gate.architectural-logo-reveal::before,
  body .cinematic-gate.architectural-logo-reveal::after,
  body .cinematic-gate.architectural-logo-reveal .architect-stage,
  body .cinematic-gate.architectural-logo-reveal .architect-logo-final {
    animation-duration: 5200ms !important;
  }

  .site-header {
    display: grid !important;
    grid-template-columns: minmax(74px, 104px) minmax(134px, 1fr) 42px !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 7px !important;
    inline-size: calc(100dvw - 16px) !important;
    max-inline-size: calc(100dvw - 16px) !important;
    min-inline-size: 0 !important;
    min-height: 60px !important;
    margin: 8px auto 0 !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
  }

  .site-header .brand-mark {
    grid-column: 2 !important;
    justify-self: center !important;
    display: block !important;
    inline-size: clamp(136px, 43vw, 172px) !important;
    min-inline-size: clamp(136px, 43vw, 172px) !important;
    block-size: 44px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .site-header .brand-mark img {
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .site-header .quote-button {
    grid-column: 1 !important;
    justify-self: stretch !important;
    min-inline-size: 0 !important;
    max-inline-size: 104px !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 0.68rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  .site-header .menu-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
    inline-size: 40px !important;
    min-inline-size: 40px !important;
  }

  .app-shell {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100dvw !important;
    margin-inline: auto !important;
    padding-inline: 14px !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .page {
    inline-size: min(100%, 430px) !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
    translate: none !important;
  }

  .page > section,
  .hero-home,
  .simple-hero,
  .mobile-showroom,
  .stats-grid,
  .service-grid,
  .service-detail-grid,
  .premium-intake-map,
  .luxury-timeline,
  .trust-grid,
  .about-layout,
  .about-panel,
  .about-story,
  .about-signals,
  .about-faq,
  .faq-list {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    transform: none !important;
    translate: none !important;
  }

  .hero-home {
    min-height: auto !important;
    padding: 120px 0 28px !important;
    text-align: center !important;
  }

  .hero-copy {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .hero-copy h1,
  .typewriter-line {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .hero-copy p,
  .typewriter-copy {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .about-layout,
  .about-premium-layout,
  .about-signals,
  .about-signal-grid,
  .about-micro-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .neon-card,
  .stat-card,
  .service-detail-card,
  .map-step,
  .timeline-step,
  .trust-card,
  .about-panel,
  .about-signal,
  .faq-item {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .site-header {
    grid-template-columns: minmax(68px, 96px) minmax(126px, 1fr) 40px !important;
    gap: 6px !important;
  }

  .site-header .brand-mark {
    inline-size: clamp(126px, 40vw, 152px) !important;
    min-inline-size: clamp(126px, 40vw, 152px) !important;
    block-size: 40px !important;
  }

  .site-header .quote-button {
    max-inline-size: 96px !important;
    font-size: 0.62rem !important;
  }
}

/* V2 design refresh: smoother logo reveal + screen-size responsive showroom layout. */

:root {
  --v2-bg: #020403;
  --v2-ink: #ffffff;
  --v2-muted: rgba(255, 248, 221, 0.72);
  --v2-soft: rgba(255, 255, 255, 0.075);
  --v2-surface: rgba(12, 13, 12, 0.62);
  --v2-surface-strong: rgba(18, 18, 16, 0.82);
  --v2-border: rgba(216, 185, 106, 0.28);
  --v2-border-soft: rgba(255, 255, 255, 0.12);
  --v2-gold: var(--gold, #d6b25e);
  --v2-gold-bright: #fff2bd;
  --v2-radius: 18px;
  --v2-page: min(1320px, calc(100dvw - 40px));
  --v2-page-mobile: min(100%, calc(100dvw - 28px));
}

html {
  background: var(--v2-bg) !important;
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(180deg, rgba(216, 185, 106, 0.055), transparent 18rem),
    radial-gradient(circle at 50% -12%, rgba(255, 242, 189, 0.13), transparent 34rem),
    linear-gradient(180deg, #050605 0%, #020403 38%, #030504 100%) !important;
  color: var(--v2-ink) !important;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 242, 189, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 242, 189, 0.028) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  opacity: 0.38;
}

body .cinematic-gate.architectural-logo-reveal {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 242, 189, 0.16), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(3, 4, 4, 0.96), rgba(0, 0, 0, 0.98)) !important;
  animation: v2GateFocus 5200ms cubic-bezier(0.45, 0, 0.55, 1) forwards !important;
  backdrop-filter: blur(24px) brightness(0.52) saturate(1.05) !important;
}

body .cinematic-gate.architectural-logo-reveal::before {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  background:
    linear-gradient(rgba(255, 242, 189, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 242, 189, 0.035) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255, 242, 189, 0.09), transparent 36%) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  box-shadow: none !important;
  animation: v2BlueprintField 5200ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal::after {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(78vw, 680px) !important;
  height: min(78vw, 680px) !important;
  z-index: 2 !important;
  border: 1px solid rgba(255, 242, 189, 0.28) !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  transform: translate3d(-50%, -50%, 0) scale(0.82) !important;
  background:
    conic-gradient(from 140deg, transparent, rgba(255, 242, 189, 0.42), transparent 36%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(circle, transparent 54%, rgba(255, 242, 189, 0.12), transparent 72%) !important;
  box-shadow:
    0 0 70px rgba(216, 185, 106, 0.18),
    inset 0 0 44px rgba(255, 242, 189, 0.08) !important;
  animation: v2ArchitectHalo 5200ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-stage {
  z-index: 4 !important;
  width: min(78vw, 620px) !important;
  max-width: 620px !important;
  aspect-ratio: 1315 / 984 !important;
  animation: v2StageSettle 5200ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-frame {
  opacity: 0.74 !important;
  border-color: rgba(255, 242, 189, 0.24) !important;
  box-shadow:
    inset 0 0 34px rgba(216, 185, 106, 0.08),
    0 0 44px rgba(216, 185, 106, 0.08) !important;
  animation: v2FrameCalibrate 5200ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-grid,
body .cinematic-gate.architectural-logo-reveal .architect-strokes {
  z-index: 3 !important;
  opacity: 0.28 !important;
  mix-blend-mode: screen !important;
  animation: v2PlanFade 5200ms cubic-bezier(0.45, 0, 0.55, 1) forwards !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-text-lines,
body .cinematic-gate.architectural-logo-reveal .architect-logo-wire {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-logo-lines {
  opacity: 0.42 !important;
}

body .cinematic-gate.architectural-logo-reveal .architect-logo-final {
  z-index: 5 !important;
  opacity: 0;
  clip-path: circle(0% at 50% 42%);
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.14))
    drop-shadow(0 0 28px rgba(216, 185, 106, 0.16))
    saturate(1.02);
  transform: translate3d(0, 0, 0) scale(0.95);
  animation: v2LogoReconstruction 5200ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes v2GateFocus {
  0% {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(26px) brightness(0.36) saturate(1);
  }
  78% {
    opacity: 1;
    backdrop-filter: blur(16px) brightness(0.58) saturate(1.05);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0) brightness(1) saturate(1);
  }
}

@keyframes v2BlueprintField {
  0% {
    opacity: 0;
    background-position: 0 0, 0 0, center;
  }
  20%,
  72% {
    opacity: 0.72;
    background-position: 18px 28px, -20px 12px, center;
  }
  100% {
    opacity: 0;
    background-position: 42px 54px, -48px 30px, center;
  }
}

@keyframes v2ArchitectHalo {
  0%,
  14% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.7) rotate(-18deg) !important;
  }
  42% {
    opacity: 0.88;
    transform: translate3d(-50%, -50%, 0) scale(1) rotate(42deg) !important;
  }
  74% {
    opacity: 0.62;
    transform: translate3d(-50%, -50%, 0) scale(1.04) rotate(150deg) !important;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.12) rotate(210deg) !important;
  }
}

@keyframes v2StageSettle {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, -90px) scale(0.92);
  }
  28%,
  78% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -5px, 70px) scale(1.035);
  }
}

@keyframes v2FrameCalibrate {
  0%,
  12% {
    opacity: 0;
    transform: scale(0.94);
  }
  34%,
  66% {
    opacity: 0.72;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes v2PlanFade {
  0%,
  16% {
    opacity: 0;
  }
  36%,
  62% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
  }
}

@keyframes v2LogoReconstruction {
  0%,
  22% {
    opacity: 0;
    clip-path: circle(0% at 50% 42%);
    filter: blur(3px) drop-shadow(0 0 0 rgba(216, 185, 106, 0));
    transform: scale(0.94);
  }
  48% {
    opacity: 0.7;
    clip-path: circle(38% at 50% 42%);
    filter:
      blur(0.8px)
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.14))
      drop-shadow(0 0 34px rgba(216, 185, 106, 0.2));
    transform: scale(0.985);
  }
  70%,
  92% {
    opacity: 1;
    clip-path: circle(78% at 50% 42%);
    filter:
      blur(0)
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.16))
      drop-shadow(0 0 32px rgba(216, 185, 106, 0.18));
    transform: scale(1);
  }
  100% {
    opacity: 0;
    clip-path: circle(82% at 50% 42%);
    transform: scale(1.02);
  }
}

.site-header {
  inline-size: min(1180px, calc(100dvw - 36px)) !important;
  max-inline-size: calc(100dvw - 36px) !important;
  min-height: 64px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(4, 5, 5, 0.46) !important;
  border-color: rgba(255, 248, 221, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 60px rgba(0, 0, 0, 0.28) !important;
}

.site-header .brand-mark {
  inline-size: clamp(166px, 15vw, 218px) !important;
  min-inline-size: clamp(166px, 15vw, 218px) !important;
  block-size: 48px !important;
}

.main-nav {
  flex: 1 1 auto !important;
  justify-content: center !important;
}

.site-header .nav-link,
.site-header .quote-button {
  color: #fff !important;
}

.app-shell {
  inline-size: var(--v2-page) !important;
  max-inline-size: var(--v2-page) !important;
  padding-top: clamp(104px, 8vw, 134px) !important;
  overflow: visible !important;
}

.page,
.page > section,
.page-home,
.page-about,
.page-guides,
.page-contact,
.page-portfolio {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.hero-home {
  position: relative !important;
  min-height: clamp(520px, 64vh, 720px) !important;
  margin-bottom: clamp(54px, 6vw, 96px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 242, 189, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%) !important;
}

.hero-home::before {
  display: none !important;
  content: none !important;
}

.hero-copy {
  inline-size: min(900px, 100%) !important;
  padding-inline: clamp(12px, 3vw, 42px) !important;
}

.hero-kicker {
  border-color: rgba(216, 185, 106, 0.44) !important;
  background: rgba(216, 185, 106, 0.08) !important;
  color: #fff8dd !important;
}

.hero-copy h1,
.page-title {
  color: #fff !important;
  background: none !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.16) !important;
}

.hero-copy p,
.guides-intro,
.contact-copy p,
.about-panel p,
.service-page-panel p,
.guide-article-content p {
  color: var(--v2-muted) !important;
}

.hero-cta,
.ghost-button,
.guide-card-action,
.inline-route-link,
.site-header .quote-button {
  border-radius: 12px !important;
  border-color: rgba(216, 185, 106, 0.46) !important;
  background:
    linear-gradient(180deg, rgba(255, 242, 189, 0.17), rgba(216, 185, 106, 0.08)),
    rgba(7, 7, 6, 0.68) !important;
  box-shadow: 0 0 24px rgba(216, 185, 106, 0.12) !important;
}

.stats-grid,
.service-grid,
.service-detail-grid,
.premium-intake-map,
.luxury-timeline,
.trust-grid,
.about-layout,
.guide-directory,
.contact-layout,
.service-page-layout,
.guide-article-layout,
.portfolio-cinema-section {
  inline-size: min(1220px, 100%) !important;
  max-inline-size: 100% !important;
  margin-inline: auto !important;
}

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.7vw, 22px) !important;
}

.service-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.service-detail-grid,
.trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.neon-card,
.stat-card,
.service-detail-card,
.map-step,
.timeline-step,
.trust-card,
.about-panel,
.about-signal,
.guide-card,
.guide-directory-card,
.contact-info-card,
.premium-contact-form,
.service-page-panel,
.service-page-faq,
.guide-article-content,
.guide-article-cta {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: var(--v2-radius) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    var(--v2-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 22px 58px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

.neon-card::before,
.neon-card::after,
.service-detail-card::before,
.service-detail-card::after,
.map-step::before,
.map-step::after,
.guide-card::before,
.guide-card::after,
.trust-card::before,
.trust-card::after,
.stat-card::before,
.stat-card::after {
  display: none !important;
}

.neon-card:hover,
.service-detail-card:hover,
.guide-card:hover,
.trust-card:hover,
.map-step:hover {
  border-color: rgba(255, 242, 189, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 28px 70px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(216, 185, 106, 0.12) !important;
}

.section-title {
  inline-size: min(980px, 100%) !important;
  margin-block: clamp(52px, 7vw, 88px) clamp(24px, 3vw, 36px) !important;
}

.premium-intake-map.mindmap-4d {
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(216, 185, 106, 0.14), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
}

.mindmap-4d .mindmap-core {
  border-color: rgba(216, 185, 106, 0.42) !important;
  background: rgba(8, 8, 7, 0.76) !important;
  box-shadow: 0 0 54px rgba(216, 185, 106, 0.12) !important;
}

.about-layout,
.about-premium-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
  gap: clamp(18px, 2.6vw, 34px) !important;
  align-items: stretch !important;
}

.about-signals,
.about-signal-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.contact-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.88fr) minmax(320px, 1.12fr) !important;
  gap: clamp(18px, 3vw, 36px) !important;
  align-items: start !important;
}

.premium-contact-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.premium-contact-form h2,
.premium-contact-form textarea,
.premium-contact-form .budget-range,
.premium-contact-form .privacy-consent,
.premium-contact-form button {
  grid-column: 1 / -1 !important;
}

.site-footer {
  border-top-color: rgba(216, 185, 106, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18)),
    rgba(2, 3, 3, 0.76) !important;
}

@media (max-width: 1180px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .service-detail-grid,
  .trust-grid,
  .guide-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  :root {
    --v2-page: var(--v2-page-mobile);
  }

  .site-header {
    grid-template-columns: minmax(74px, 102px) minmax(138px, 1fr) 42px !important;
    inline-size: calc(100dvw - 18px) !important;
    max-inline-size: calc(100dvw - 18px) !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
  }

  .site-header .brand-mark {
    inline-size: clamp(138px, 44vw, 180px) !important;
    min-inline-size: clamp(138px, 44vw, 180px) !important;
    block-size: 44px !important;
  }

  .app-shell {
    inline-size: var(--v2-page-mobile) !important;
    max-inline-size: var(--v2-page-mobile) !important;
    padding-top: 96px !important;
  }

  .hero-home {
    min-height: auto !important;
    padding-block: 64px 34px !important;
    border-radius: 22px !important;
  }

  .hero-copy {
    padding-inline: 0 !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.45rem, 11.8vw, 3.55rem) !important;
    line-height: 1.03 !important;
  }

  .hero-copy p {
    font-size: clamp(1.02rem, 4.4vw, 1.18rem) !important;
    line-height: 1.72 !important;
  }

  .stats-grid,
  .service-grid,
  .service-detail-grid,
  .trust-grid,
  .about-layout,
  .about-premium-layout,
  .contact-layout,
  .service-page-layout,
  .guide-article-layout,
  .guide-directory {
    grid-template-columns: 1fr !important;
    inline-size: 100% !important;
  }

  .premium-contact-form {
    grid-template-columns: 1fr !important;
  }

  .premium-intake-map.mindmap-4d {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px 0 0 !important;
    border-radius: 22px !important;
    background: transparent !important;
    contain: none !important;
  }

  .premium-intake-map.mindmap-4d::before,
  .premium-intake-map.mindmap-4d .mindmap-links,
  .premium-intake-map.mindmap-4d .mindmap-depth {
    display: none !important;
  }

  .premium-intake-map.mindmap-4d .mindmap-core,
  .premium-intake-map.mindmap-4d .mind-node,
  .premium-intake-map.mindmap-4d .mind-node:nth-of-type(odd),
  .premium-intake-map.mindmap-4d .mind-node:nth-of-type(even),
  .premium-intake-map.mindmap-4d .mind-node:hover,
  .premium-intake-map.mindmap-4d .mind-node:focus-visible {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  .premium-intake-map.mindmap-4d .mind-node:hover,
  .premium-intake-map.mindmap-4d .mind-node:focus-visible {
    transform: translateY(-4px) !important;
  }

  .section-title {
    margin-block: 46px 20px !important;
  }

  .page-about .simple-hero,
  .page-about .about-layout,
  .page-about .about-premium-layout,
  .page-about .about-panel,
  .page-about .about-story,
  .page-about .about-signals,
  .page-about .about-faq,
  .page-about .faq-list {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    justify-self: center !important;
    overflow-wrap: break-word !important;
  }

  .page-about {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .page-about .about-premium-layout,
  .page-about .about-signals,
  .page-about .about-signal-grid {
    justify-items: center !important;
    place-items: center !important;
  }

  .page-about .about-panel,
  .page-about .about-signal,
  .page-about .faq-item {
    padding-inline: 18px !important;
    overflow: hidden !important;
  }

  .page-about .about-kicker,
  .page-about .about-quote,
  .page-about .about-panel p,
  .page-about .about-signal h3,
  .page-about .about-signal p,
  .page-about .faq-item summary,
  .page-about .faq-item p {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-wrap: pretty !important;
  }

  .page-about .about-quote {
    font-size: clamp(1.35rem, 7vw, 1.82rem) !important;
    line-height: 1.3 !important;
  }

  .page-about .about-micro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  body .cinematic-gate.architectural-logo-reveal .architect-stage {
    width: min(86vw, 360px) !important;
  }

  body .cinematic-gate.architectural-logo-reveal::after {
    width: 92vw !important;
    height: 92vw !important;
  }

  .site-header {
    grid-template-columns: minmax(68px, 96px) minmax(130px, 1fr) 40px !important;
    gap: 6px !important;
  }

  .site-header .brand-mark {
    inline-size: clamp(130px, 42vw, 158px) !important;
    min-inline-size: clamp(130px, 42vw, 158px) !important;
    block-size: 40px !important;
  }

  .site-header .quote-button {
    max-inline-size: 96px !important;
    font-size: 0.62rem !important;
    padding-inline: 7px !important;
  }

  .hero-kicker {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  .neon-card,
  .stat-card,
  .service-detail-card,
  .map-step,
  .timeline-step,
  .trust-card,
  .about-panel,
  .about-signal,
  .guide-card,
  .guide-directory-card,
  .contact-info-card,
  .premium-contact-form {
    padding-inline: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .cinematic-gate.architectural-logo-reveal,
  body .cinematic-gate.architectural-logo-reveal::before,
  body .cinematic-gate.architectural-logo-reveal::after,
  body .cinematic-gate.architectural-logo-reveal .architect-stage,
  body .cinematic-gate.architectural-logo-reveal .architect-logo-final {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* === Background cleanup: remove the blue cover and keep the real layers visible === */
html,
body {
  background:
    linear-gradient(180deg, #050604 0%, #020403 48%, #010202 100%) !important;
  background-attachment: scroll !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 242, 189, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 242, 189, 0.022) 1px, transparent 1px);
  background-size: 86px 86px, 86px 86px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 76%);
  opacity: 0.34;
}

.hero-home {
  background: transparent !important;
  overflow: visible !important;
}

.decor-layers { z-index: 0 !important; }
.site-header,
.app-shell,
.site-footer,
.accessibility-toggle,
.accessibility-panel { position: relative; z-index: 2; }

/* Legal modal must stay as a fixed overlay above everything */
.legal-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}
.legal-modal[hidden] { display: none !important; }

/* === Animated neuron background (lightweight, CSS-only) === */
:root {
  --lior-neuron-blue: rgba(104, 223, 255, 0.42);
  --lior-gold-soft: rgba(216, 185, 106, 0.11);
}

.decor-layers {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate;
}

.decor-layers::before {
  content: "";
  position: absolute;
  inset: -10vmax;
  background:
    radial-gradient(ellipse at 16% 14%, rgba(104, 223, 255, 0.055), transparent 24rem),
    radial-gradient(ellipse at 84% 56%, rgba(183, 241, 255, 0.045), transparent 25rem);
  opacity: 0.86;
  transform: translate3d(0, 0, 0);
  animation: liorAmbientShift 10s ease-in-out infinite;
  pointer-events: none;
}

.decor-layers::after {
  opacity: 0.22 !important;
}

.decor {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  user-select: none;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 14px var(--lior-neuron-blue))
    drop-shadow(0 0 30px rgba(104, 223, 255, 0.14));
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: liorNeuronFloat 7.5s ease-in-out infinite;
}

.decor-neuron-top {
  top: 12px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(150px, 18vw, 250px) !important;
  height: auto !important;
  opacity: 0.68 !important;
}

.decor-neuron-right {
  top: 32vh !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(210px, 26vw, 360px) !important;
  height: auto !important;
  opacity: 0.64 !important;
  animation-delay: -2.8s;
}

.decor-neuron-bottom {
  bottom: 24px !important;
  left: 18px !important;
  top: auto !important;
  right: auto !important;
  width: clamp(160px, 21vw, 280px) !important;
  height: auto !important;
  opacity: 0.54 !important;
  rotate: 18deg;
  animation-delay: -5s;
}

@keyframes liorAmbientShift {
  0%, 100% { opacity: 0.72; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 1;    transform: translate3d(1.2rem, -0.8rem, 0) scale(1.035); }
}

@keyframes liorNeuronFloat {
  0%, 100% { opacity: var(--neuron-op, 0.52); transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 0.82; transform: translate3d(18px, -22px, 0) scale(1.045); }
}

@media (max-width: 760px) {
  .decor-layers { display: block !important; }
  .decor-layers canvas { opacity: 0.24 !important; }
  .decor-layers::before { opacity: 0.32 !important; }
  .decor-layers::after { opacity: 0.14 !important; }
  .decor-neuron-top    { top: 168px !important; left: 8px !important; width: min(52vw, 205px) !important; opacity: 0.78 !important; }
  .decor-neuron-right  { top: 48vh !important; right: 6px !important; width: min(54vw, 210px) !important; opacity: 0.68 !important; }
  .decor-neuron-bottom { bottom: 32px !important; left: 8px !important; width: min(52vw, 205px) !important; opacity: 0.58 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .decor, .decor-layers::before { animation: none !important; }
}

/* Disable intro cinematic gate completely: it was the main risk for a visually blank site. */
body .cinematic-gate,
body .cinematic-gate.architectural-logo-reveal {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body .cinematic-gate::before,
body .cinematic-gate::after,
body .cinematic-gate.architectural-logo-reveal::before,
body .cinematic-gate.architectural-logo-reveal::after {
  display: none !important;
  content: none !important;
}

/* ===========================================================
   Mobile responsiveness + Core Web Vitals hardening (final)
   =========================================================== */

/* Skip-link must stay off-screen unless focused */
.skip-link {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  transform: translateY(-200%) !important;
  transition: transform 160ms ease !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0) !important;
}

/* Reduce CLS: reserve space for decor neurons */
.decor-layers img.decor {
  contain: layout paint;
}

/* ---------- Tablet + small desktop (≤1024px) ---------- */
@media (max-width: 1024px) {
  .site-header {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }
  .hero-home {
    min-height: clamp(440px, 56vh, 640px) !important;
  }
}

/* ---------- Tablet portrait (≤820px) ---------- */
@media (max-width: 820px) {
  .app-shell {
    width: calc(100vw - 24px) !important;
    padding-top: clamp(96px, 14vh, 140px) !important;
  }
  .hero-copy h1,
  .page-title {
    font-size: clamp(2rem, 6.5vw, 3.2rem) !important;
    line-height: 1.18 !important;
  }
  .hero-copy p {
    font-size: clamp(1rem, 2.4vw, 1.18rem) !important;
    line-height: 1.7 !important;
  }
}

/* ---------- Mobile (≤760px): header + hero rebuild ---------- */
@media (max-width: 760px) {
  /* Header: clean 3-column layout that NEVER overflows */
  .site-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    /* Drop expensive effects on mobile for INP */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 9, 12, 0.92) !important;
  }
  .site-header .brand-mark,
  .brand-mark {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 110px !important;
    min-width: 110px !important;
    height: 32px !important;
  }
  .site-header .main-nav {
    order: 2 !important;
  }
  .site-header .quote-button {
    order: 3 !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    max-width: none !important;
    padding: 0 12px !important;
    font-size: 0.84rem !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }
  .site-header .menu-toggle {
    order: 4 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 36px !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(216, 185, 106, 0.5) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .site-header .menu-toggle span {
    width: 18px;
    height: 2px;
    margin: 3px auto;
    background: #fff;
    box-shadow: none;
  }

  /* Mobile dropdown nav */
  .site-header .main-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 18px !important;
    border: 1px solid rgba(216, 185, 106, 0.32) !important;
    border-radius: 14px !important;
    background: rgba(8, 10, 14, 0.97) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48) !important;
  }

  /* Hero on mobile */
  .hero-home {
    min-height: auto !important;
    margin-bottom: 32px !important;
    padding: 28px 14px 32px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .hero-copy {
    padding-inline: 4px !important;
  }
  .hero-copy h1,
  .page-title {
    font-size: clamp(1.7rem, 7.6vw, 2.4rem) !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
  }
  .hero-copy p {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }
  .hero-cta {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }
  .hero-kicker {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  /* Performance: kill backdrop-blur sitewide on mobile (INP/LCP) */
  .guide-article-content,
  .guide-article-cta,
  .service-page-panel,
  .service-page-faq,
  .accessibility-panel,
  .privacy-consent,
  .legal-modal,
  .lightbox {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Show neurons but lighter (CWV friendly) */
  .decor-layers {
    display: block !important;
  }
  .decor-layers .antigravity-field {
    display: none !important; /* heavy canvas off on mobile */
  }
  .decor-layers img.decor {
    opacity: 0.55 !important;
    will-change: transform, opacity !important;
    animation: liorNeuronFloat 9s ease-in-out infinite !important;
  }
}

/* ---------- Small mobile (≤390px) ---------- */
@media (max-width: 390px) {
  .site-header .brand-mark,
  .brand-mark {
    width: 92px !important;
    min-width: 92px !important;
    height: 28px !important;
  }
  .site-header .quote-button {
    font-size: 0.76rem !important;
    padding: 0 9px !important;
    min-height: 34px !important;
  }
  .hero-copy h1,
  .page-title {
    font-size: clamp(1.55rem, 7.4vw, 2rem) !important;
  }
}

/* ---------- Tiny mobile (≤340px) ---------- */
@media (max-width: 340px) {
  .site-header .quote-button {
    /* drop CTA at extreme width — hamburger covers nav to contact */
    display: none !important;
  }
  .site-header .brand-mark,
  .brand-mark {
    width: 86px !important;
    min-width: 86px !important;
  }
}

/* Reduce motion users: hard stop animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .decor-layers .antigravity-field { display: none !important; }
}

/* ===========================================================
   Final fixes round 2
   - Remove gold/cyan ellipse outline behind hero title
   - Center cards on mobile, ensure full card frame visible
   - Make hamburger button look like an actual button
   - Keep neurons animating on mobile (handled above)
   =========================================================== */

/* Kill the ellipse ring drawn around the hero art */
.hero-art::before,
.hero-art::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
}

/* Mobile: keep all card grids inside the viewport, centered, with full frames visible */
@media (max-width: 760px) {
  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Any horizontal scroll strip → become a centered single column */
  .scroll-row,
  .horizontal-strip,
  .snap-row,
  [class*="-scroll"],
  [class*="scroll-x"],
  .portfolio-3d-grid,
  .portfolio-cinema-grid,
  .neon-grid,
  .stat-grid,
  .service-grid,
  .trust-grid,
  .guide-directory,
  .guide-grid,
  .map-steps,
  .timeline,
  .audience-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    justify-items: stretch !important;
  }

  /* Cards: full width inside the shell, with their full border visible */
  .neon-card,
  .stat-card,
  .service-detail-card,
  .map-step,
  .timeline-step,
  .trust-card,
  .about-panel,
  .about-signal,
  .guide-card,
  .guide-directory-card,
  .contact-info-card,
  .premium-contact-form,
  .portfolio-3d-wrapper,
  .portfolio-3d-card,
  .audience-card,
  .faq-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Force card containers to leave breathing room so the border is visible on both sides */
  section,
  .section,
  .page > section {
    overflow-x: clip !important;
  }

  /* Hamburger button — clearly a button with icon + label */
  .site-header .menu-toggle {
    width: auto !important;
    min-width: 56px !important;
    height: 38px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    border: 1px solid rgba(216, 185, 106, 0.55) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(216,185,106,0.18), rgba(216,185,106,0.06)) !important;
    color: #f6e9c4 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
  }
  .site-header .menu-toggle::after {
    content: "תפריט";
    color: #f6e9c4;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .site-header .menu-toggle span {
    background: #f6e9c4 !important;
    box-shadow: 0 0 6px rgba(246, 233, 196, 0.55) !important;
  }
}

/* Portfolio empty card placeholder — make sure removing images doesn't leave dead boxes */
.portfolio-3d-card:not(.has-shot) {
  min-height: 260px;
  background: linear-gradient(160deg, rgba(20,24,30,0.9), rgba(10,12,16,0.95));
}

/* Kill the mindmap ellipse outline behind the homepage hero title */
.mindmap-4d::before,
.mindmap-4d::after,
.mindmap-depth,
.hero-ring {
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* ============================================================
   MOBILE HEADER REDESIGN — clean, premium, breathing room
   ============================================================ */
@media (max-width: 760px) {
  .site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    inline-size: calc(100dvw - 16px) !important;
    max-inline-size: calc(100dvw - 16px) !important;
    min-height: 64px !important;
    margin: 10px auto 0 !important;
    padding: 8px 12px !important;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.92), rgba(8, 10, 14, 0.78)) !important;
    border: 1px solid rgba(216, 185, 106, 0.22) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  }

  /* Hide the cramped header CTA on mobile — menu has all nav + CTA */
  .site-header .quote-button {
    display: none !important;
  }

  .site-header .brand-mark {
    grid-column: auto !important;
    justify-self: start !important;
    flex: 0 0 auto !important;
    inline-size: clamp(150px, 46vw, 200px) !important;
    min-inline-size: clamp(150px, 46vw, 200px) !important;
    block-size: 46px !important;
  }

  /* Premium menu button — clearly tappable, gold accent */
  .site-header .menu-toggle {
    grid-column: auto !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important;
    gap: 8px !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(216, 185, 106, 0.6) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(216, 185, 106, 0.22), rgba(216, 185, 106, 0.08)) !important;
    color: #f6e9c4 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 14px rgba(216, 185, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  }
  .site-header .menu-toggle:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(216, 185, 106, 0.22) !important;
  }
  .site-header .menu-toggle::after {
    content: "תפריט" !important;
    color: #f6e9c4 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
  }
  /* Compact icon stack to the side of the label */
  .site-header .menu-toggle span {
    display: none !important;
  }

  /* Open state — X feel via small visual change */
  .site-header .menu-toggle[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(216, 185, 106, 0.32), rgba(216, 185, 106, 0.16)) !important;
  }
  .site-header .menu-toggle[aria-expanded="true"]::after {
    content: "סגור" !important;
  }

  /* Mobile dropdown nav — premium card, full-width inside header padding */
  .site-header .main-nav {
    background: linear-gradient(180deg, rgba(10, 12, 16, 0.97), rgba(8, 10, 14, 0.94)) !important;
    border: 1px solid rgba(216, 185, 106, 0.22) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    margin-top: 8px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
  }
  .site-header .main-nav .nav-link {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #f4ecd8 !important;
    text-align: start !important;
  }
  .site-header .main-nav .nav-link:hover,
  .site-header .main-nav .nav-link.is-active {
    background: rgba(216, 185, 106, 0.12) !important;
    color: #ffd97a !important;
  }

  .app-shell {
    padding-top: 14px !important;
  }

  /* Breadcrumbs — render directly under the fixed header, outside the hero */
  .page > .breadcrumbs {
    display: flex !important;
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
    margin: 8px auto 14px !important;
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
    order: -1 !important;
  }

  .page-about .simple-hero,
  .page-portfolio .simple-hero,
  .page-guides .simple-hero,
  .page-contact .contact-page-shell,
  .page-service .service-page-hero,
  .page-guide-article .guide-article-hero {
    padding-top: 8px !important;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding: 7px 10px !important;
    min-height: 60px !important;
  }
  .site-header .brand-mark {
    inline-size: clamp(140px, 44vw, 170px) !important;
    min-inline-size: clamp(140px, 44vw, 170px) !important;
    block-size: 42px !important;
  }
  .site-header .menu-toggle {
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 0.76rem !important;
  }
  .site-header .menu-toggle::after {
    font-size: 0.76rem !important;
  }
}

/* ============================================================
   Contact form — toast + inline success/error feedback
   Visible on both mobile and desktop
   ============================================================ */
.form-toast {
  top: auto !important;
  bottom: 24px !important;
  z-index: 9999 !important;
}
.form-toast.is-success {
  border-color: rgba(126, 232, 156, 0.7) !important;
  background: linear-gradient(180deg, rgba(8, 28, 18, 0.97), rgba(5, 18, 12, 0.97)) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(126, 232, 156, 0.28) !important;
  color: #d6ffe1 !important;
}
.form-toast.is-error {
  border-color: rgba(255, 130, 130, 0.7) !important;
  background: linear-gradient(180deg, rgba(34, 8, 10, 0.97), rgba(22, 5, 7, 0.97)) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 130, 130, 0.28) !important;
  color: #ffd9d9 !important;
}

.contact-form-status {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  line-height: 1.45;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: #f4ecd8;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.contact-form-status.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.contact-form-status.is-success {
  border-color: rgba(126, 232, 156, 0.55);
  background: linear-gradient(180deg, rgba(16, 50, 32, 0.5), rgba(10, 30, 20, 0.5));
  color: #d6ffe1;
  box-shadow: 0 0 24px rgba(126, 232, 156, 0.18);
}
.contact-form-status.is-error {
  border-color: rgba(255, 130, 130, 0.55);
  background: linear-gradient(180deg, rgba(50, 18, 22, 0.5), rgba(34, 10, 14, 0.5));
  color: #ffd9d9;
}

@media (max-width: 760px) {
  .form-toast {
    bottom: 16px !important;
    inline-size: calc(100dvw - 24px) !important;
    min-width: 0 !important;
    font-size: 0.95rem !important;
    padding: 14px 18px !important;
  }
  .contact-form-status {
    font-size: 0.95rem;
    padding: 14px 16px;
  }
}

/* =========================================================
   MOBILE ALIGNMENT FIX — ABOUT PAGE LEFT SHIFT
   Fixes content leaning left / leaving the viewport
========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

body {
  margin: 0;
  position: relative;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#app,
.app-shell {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Main page sections must stay centered */
#app > *,
.app-shell > *,
main > section,
section,
.about-page,
.about-section,
.about-hero,
.about-content,
.about-wrapper,
.about-grid,
.about-inner,
.content-section,
.section-inner,
.page-section,
.faq-section,
.faq-wrapper {
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile hard fix */
@media (max-width: 768px) {
  #app,
  .app-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  #app > *,
  .app-shell > *,
  main > section,
  section,
  .about-page,
  .about-section,
  .about-hero,
  .about-content,
  .about-wrapper,
  .about-grid,
  .about-inner,
  .content-section,
  .section-inner,
  .page-section,
  .faq-section,
  .faq-wrapper {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Cards / panels */
  .card,
  .glass-card,
  .about-card,
  .about-panel,
  .service-card,
  .value-card,
  .faq-card,
  .faq-item,
  .question-card,
  .accordion-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    overflow: hidden;
  }

  /* Text must not escape the card */
  h1,
  h2,
  h3,
  h4,
  p,
  span,
  a,
  button {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Big titles on mobile */
  h1 {
    font-size: clamp(2.4rem, 12vw, 4rem) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
    line-height: 1.15 !important;
  }

  /* FAQ rows */
  .faq-card,
  .faq-item,
  .question-card,
  .accordion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
}

/* =========================================================
   ABOUT V2 — keeps original visual identity (cards/colors)
   Adds only mobile centering + no-overflow guards
   Scope: .page-about  (route: /about/)
========================================================= */
.page-about,
.page-about .about-hero,
.page-about .about-layout,
.page-about .about-panel,
.page-about .about-signals,
.page-about .about-signal,
.page-about .about-faq,
.page-about .faq-list,
.page-about .faq-item {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .page-about .about-layout,
  .page-about .about-premium-layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    gap: 18px !important;
  }
  .page-about .about-panel,
  .page-about .about-signal {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    transform: none !important;
  }
  .page-about .about-signal-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .page-about .about-micro-grid {
    justify-content: center !important;
  }
  .page-about .faq-list,
  .page-about .faq-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .page-about .page-title {
    text-align: center !important;
  }
}

/* About story panel — branded logo backdrop */
.page-about .about-story {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-about .about-story::before {
  content: "";
  position: absolute;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  background-image: url("/assets/lior-web-services-logo-full.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(80%, 520px);
  opacity: 0.28;
  filter: drop-shadow(0 14px 36px rgba(104, 223, 255, 0.28));
  pointer-events: none;
  z-index: 0;
}
.page-about .about-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(2, 5, 10, 0) 0%,
    rgba(2, 5, 10, 0) 60%,
    rgba(2, 5, 10, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Kicker pill — fit content, compact */
.page-about .about-story .about-kicker {
  display: inline-flex !important;
  width: auto !important;
  align-self: flex-start;
  justify-self: start;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
}
.page-about .about-story > * {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .page-about .about-story::before {
    background-size: min(90%, 380px);
    opacity: 0.28;
  }
}

/* About micro-grid chips — fit content, centered, compact */
.page-about .about-micro-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 10px;
  grid-template-columns: none !important;
}
.page-about .about-micro-grid span {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  padding: 2px 10px !important;
  font-size: 0.85rem !important;
  line-height: 1.15 !important;
  border-radius: 4px !important;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .page-about .about-micro-grid {
    justify-content: center;
  }
}


/* ============================================================
   Portfolio — Editorial Magazine Gallery (refined, premium)
   ============================================================ */
.page-portfolio .portfolio-lead {
  max-width: 640px;
  margin: 14px auto 0;
  color: rgba(230, 236, 245, 0.72);
  font-size: 0.98rem;
  line-height: 1.7;
  text-align: center;
}

.portfolio-editorial {
  padding: 56px clamp(16px, 4vw, 64px) 72px;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 44px);
  max-width: 1240px;
  margin: 0 auto;
}

.edi-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: none;
  text-align: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.edi-card:hover { transform: translateY(-4px); }
.edi-card:focus-visible {
  outline: 2px solid rgba(212, 175, 110, 0.7);
  outline-offset: 6px;
  border-radius: 4px;
}

.edi-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0f18;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
}
.edi-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 5, 10, 0) 60%, rgba(2, 5, 10, 0.35) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.edi-card:hover .edi-frame::after { opacity: 1; }

.edi-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  filter: saturate(1.02);
}
.edi-card:hover .edi-image { transform: scale(1.04); }

.edi-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 2px;
}

.edi-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 175, 110, 0.92);
}
.edi-num {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: rgba(212, 175, 110, 0.95);
  text-transform: none;
}
.edi-cat {
  position: relative;
  padding-right: 14px;
  color: rgba(230, 236, 245, 0.55);
  font-weight: 500;
}
.edi-cat::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(212, 175, 110, 0.55);
}

.edi-title {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: #f4f6fa;
  margin: 0;
  letter-spacing: -0.005em;
}

.edi-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(220, 226, 236, 0.68);
  margin: 0;
  max-width: 95%;
}

.edi-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(212, 175, 110, 0.95);
  position: relative;
  padding-bottom: 4px;
  width: fit-content;
}
.edi-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: rgba(212, 175, 110, 0.45);
  transform-origin: right;
  transform: scaleX(0.35);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.edi-card:hover .edi-link::after { transform: scaleX(1); }
.edi-arrow {
  display: inline-block;
  transition: transform 0.4s ease;
}
.edi-card:hover .edi-arrow { transform: translateX(-4px); }

/* Tablet */
@media (max-width: 900px) {
  .editorial-grid { gap: 32px; }
}

/* Mobile */
@media (max-width: 640px) {
  .portfolio-editorial { padding: 32px 18px 56px; }
  .editorial-grid { grid-template-columns: 1fr; gap: 36px; }
  .edi-card { gap: 14px; }
  .edi-frame { aspect-ratio: 4 / 3; }
  .edi-title { font-size: 1.08rem; }
  .edi-desc { font-size: 0.88rem; }
  .edi-row { font-size: 0.7rem; }
}

/* === Fix pass: static titles + uncut card buttons ===
   1) Section titles and card titles are static — no translate/transform on scroll.
      This also guarantees content never stays invisible if the reveal observer
      misses an element (e.g. when the user lands deep on the page on mobile).
   2) Service detail cards must grow with their content so the "קרא עוד" button
      is never clipped. Removes the legacy overflow:hidden + fixed min-heights
      that caused the bottom of the card to crop on small screens.
   3) Touching/scrolling on a title must scroll the page — never animate the title.
*/

.reveal,
.reveal.is-visible,
.section-title,
.section-title.reveal,
.service-detail-card,
.service-detail-card h3,
.service-detail-head,
.neon-card,
.neon-card h3,
.trust-card,
.trust-card h3,
.map-step,
.map-step h3,
.timeline-step,
.about-signal,
.about-signal h3,
.about-panel,
.faq-item,
.guide-card {
  opacity: 1 !important;
  translate: 0 0 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  touch-action: pan-y !important;
}

.service-detail-card {
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding-block: clamp(20px, 3vw, 28px) !important;
}

.service-detail-card .inline-route-link,
.service-detail-card .ghost-button {
  display: inline-flex !important;
  margin-top: 16px !important;
  align-self: flex-start !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure the card content area never collapses below its natural size. */
.service-detail-grid,
.service-grid,
.trust-grid {
  align-items: stretch !important;
}

/* Card titles must stay where they are — never tied to scroll position. */
.service-detail-card h3,
.neon-card h3,
.section-title {
  position: static !important;
  top: auto !important;
  will-change: auto !important;
}

/* === OBSIDIAN GRADIENT MESH BACKGROUND (React + static pages) === */
html, body {
  background: #05080F !important;
}
body {
  background:
    radial-gradient(60% 55% at 88% 8%, rgba(22, 42, 78, 0.55), transparent 62%),
    radial-gradient(55% 50% at 12% 92%, rgba(74, 48, 28, 0.38), transparent 65%),
    radial-gradient(45% 45% at 50% 50%, rgba(14, 24, 44, 0.40), transparent 70%),
    #05080F !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  min-height: 100vh !important;
}
#root {
  background: transparent !important;
}
body::before, body::after { display: none !important; background: none !important; }
.grid-bg { background-image: none !important; mask-image: none !important; }

/* Old neuron/decor background — fully removed (do not re-add) */
.decor,
.decor-layers,
.decor-layers::before,
.decor-layers::after,
.decor-neuron-top,
.decor-neuron-right,
.decor-neuron-bottom,
.neuron-bg,
.ambient-bg,
.bg-decor,
.background-decor {
  display: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* === Intake map (DNA עסקי) — soft, gradual icon glow (no traffic-light blink) === */
@keyframes intakeIconSoftGlow {
  0%, 100% {
    opacity: 0.78;
    filter: drop-shadow(0 0 6px rgba(104, 223, 255, 0.18));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(104, 223, 255, 0.55))
            drop-shadow(0 0 22px rgba(183, 241, 255, 0.22));
  }
}

.premium-intake-map .map-step-icon,
.premium-intake-map .map-step-icon svg,
.premium-intake-map.mindmap-4d .mind-node .map-step-icon {
  animation: intakeIconSoftGlow 7.5s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  animation-delay: calc(var(--step, 1) * -1.25s) !important;
  transition: filter 600ms ease, opacity 600ms ease !important;
  will-change: opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  .premium-intake-map .map-step-icon,
  .premium-intake-map .map-step-icon svg,
  .premium-intake-map.mindmap-4d .mind-node .map-step-icon {
    animation: none !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 0 8px rgba(104, 223, 255, 0.28)) !important;
  }
}

/* More breathing room between the "מפת שיחת האפיון" title and the map */
.page-home > .section-title + .premium-intake-map.mindmap-4d,
.page-home .section-title + .premium-intake-map {
  margin-top: clamp(120px, 11vw, 180px) !important;
}
@media (max-width: 860px) {
  .page-home > .section-title + .premium-intake-map.mindmap-4d,
  .page-home .section-title + .premium-intake-map {
    margin-top: clamp(72px, 14vw, 110px) !important;
  }
}

/* Remove gold/yellow underline glow under header nav links on hover/active.
   The previous ::after underline looked like a stray yellow layer. */
.site-header .nav-link::after,
.site-header .nav-link:hover::after,
.site-header .nav-link.is-active::after,
.site-header .nav-link:focus::after,
.site-header .nav-link:focus-visible::after {
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* Kill the thick gold "flash" stripe that appears when hovering About cards.
   Removes the decorative ::before hairline + ::after sweep on the .about-panel
   itself, while keeping the .about-story logo backdrop and vignette intact. */
.page-about .about-panel::before,
.page-about .about-panel:hover::before,
.page-about .about-panel:focus-within::before {
  content: none !important;
  background: none !important;
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  animation: none !important;
}
/* Restore the .about-story logo backdrop ::before — the rule above accidentally
   killed it because .about-story is also an .about-panel. */
.page-about .about-story::before,
.page-about .about-story:hover::before,
.page-about .about-story:focus-within::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  opacity: 0.28 !important;
  background-image: url("/assets/lior-web-services-logo-full.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: min(80%, 520px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
}
.page-about .about-panel:not(.about-story)::after,
.page-about .about-panel:not(.about-story):hover::after {
  content: none !important;
  background: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
/* Stop any pulsing/flashing animation on the panel and its kicker on hover. */
.page-about .about-panel,
.page-about .about-panel:hover,
.page-about .about-story,
.page-about .about-story:hover,
.page-about .about-kicker,
.page-about .about-kicker:hover {
  animation: none !important;
}

/* About page — soften the pulsing icon glow on .about-signal cards.
   The previous whiteIconGlow strobed brightly (6px → 18px+22px every 3s)
   which read as a thick flashing band on the card. Replace it with a much
   softer, slower opacity fade and stagger each icon. */
@keyframes aboutSignalIconSoftGlow {
  0%, 100% {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.28));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.42));
  }
}
.page-about .about-signal > div {
  animation: aboutSignalIconSoftGlow 7s cubic-bezier(0.4, 0.6, 0.6, 1) infinite !important;
}
.page-about .about-signal:nth-of-type(1) > div { animation-delay: 0s !important; }
.page-about .about-signal:nth-of-type(2) > div { animation-delay: -1.75s !important; }
.page-about .about-signal:nth-of-type(3) > div { animation-delay: -3.5s !important; }
.page-about .about-signal:nth-of-type(4) > div { animation-delay: -5.25s !important; }
@media (prefers-reduced-motion: reduce) {
  .page-about .about-signal > div { animation: none !important; opacity: 1 !important; }
}

/* Contact page — bigger eyebrow + move logo from card background to under the form. */
.page-contact .contact-eyebrow {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem) !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 14px !important;
}


/* === White card titles from "השירותים שלי" downward (mobile + desktop) === */
.service-detail-card h3,
.service-detail-head h3,
.map-step h3,
.trust-card h3,
.portfolio-3d-wrapper h3,
.portfolio-card h3,
.faq-item h3,
.faq-item summary,
.about-panel h3,
.intro-panel h3,
.guide-card h3 {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* === Mobile Futuristic/Tech visibility + touch stability === */
.hero-home::before,
.hero-home::after {
  content: "" !important;
  position: absolute !important;
  inset: -18% -12% auto -12% !important;
  height: 78% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.hero-home::before {
  background:
    radial-gradient(42% 50% at 18% 28%, rgba(104, 223, 255, 0.28), transparent 72%),
    radial-gradient(38% 44% at 82% 18%, rgba(128, 116, 255, 0.22), transparent 70%),
    radial-gradient(46% 46% at 54% 82%, rgba(216, 185, 106, 0.12), transparent 72%) !important;
  filter: blur(48px) saturate(130%) !important;
  opacity: 0.78 !important;
  animation: mobileAuroraDrift 18s ease-in-out infinite alternate !important;
}

.hero-home::after {
  display: none !important;
}

.hero-home .hero-copy,
.hero-home .hero-copy > * {
  position: relative !important;
  z-index: 1 !important;
}

.hero-proof-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 20px auto 0 !important;
}

.hero-proof-strip span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(104, 223, 255, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(6, 14, 24, 0.58) !important;
  color: rgba(244, 250, 255, 0.88) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px rgba(104, 223, 255, 0.10) !important;
}

@keyframes mobileAuroraDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.06); }
}

@media (hover: none), (pointer: coarse), (max-width: 860px) {
  .nav-link:hover,
  .footer-link:hover,
  .site-header .nav-link:hover,
  .site-header .quote-button:hover,
  .hero-cta:hover,
  .ghost-button:hover,
  .inline-route-link:hover,
  .guide-card-action:hover,
  .brand-mark:hover,
  .neon-card:hover,
  .service-detail-card:hover,
  .guide-card:hover,
  .trust-card:hover,
  .map-step:hover,
  .timeline-step:hover,
  .testimonial-stack-card:hover,
  .premium-intake-map .map-step:hover,
  .premium-intake-map.mindmap-4d .mind-node:hover,
  .edi-card:hover,
  .edi-card:hover .edi-image,
  .edi-card:hover .edi-arrow,
  .edi-card:hover .edi-link::after {
    transform: none !important;
    translate: 0 0 !important;
  }

  h1:hover,
  h2:hover,
  h3:hover,
  .section-title:hover,
  .hero-copy:hover,
  .hero-copy h1:hover,
  .typewriter-line:hover,
  .page-title:hover {
    transform: none !important;
    translate: 0 0 !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 760px) {
  .hero-home {
    position: relative !important;
    /* Parity with desktop: hero background must be transparent so the
       global page background shows through identically on mobile.
       Do NOT add gold/amber tints here — see hero parity check. */
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hero-copy h1,
  .page-title,
  .section-title {
    transform: none !important;
    translate: 0 0 !important;
    transition: none !important;
    touch-action: pan-y !important;
  }

  .mobile-showroom {
    border: 1px solid rgba(104, 223, 255, 0.22) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 16% 18%, rgba(104, 223, 255, 0.20), transparent 34%),
      radial-gradient(circle at 84% 78%, rgba(128, 116, 255, 0.14), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.24) !important;
  }

  .mobile-showroom::before {
    background: linear-gradient(90deg, transparent, rgba(104, 223, 255, 0.76), rgba(255, 242, 189, 0.34), transparent) !important;
    box-shadow: 0 0 24px rgba(104, 223, 255, 0.22) !important;
  }

  .mobile-showroom-copy span,
  .section-title::before {
    color: rgba(104, 223, 255, 0.95) !important;
  }

  .section-title {
    position: relative !important;
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 0 0 26px rgba(104, 223, 255, 0.16) !important;
  }

  .section-title::before {
    content: "◇" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(104, 223, 255, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(104, 223, 255, 0.07) !important;
    box-shadow: 0 0 20px rgba(104, 223, 255, 0.13) !important;
    font-size: 0.78rem !important;
  }

  .neon-card,
  .service-detail-card,
  .map-step,
  .timeline-step,
  .trust-card,
  .stat-card {
    border-color: rgba(104, 223, 255, 0.20) !important;
    background:
      linear-gradient(145deg, rgba(104, 223, 255, 0.075), rgba(255, 255, 255, 0.025)),
      rgba(7, 12, 22, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 46px rgba(0, 0, 0, 0.22) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home::before { animation: none !important; }
}

/* === User request: header bottom-line only + spacing before first card === */
@media (max-width: 860px) {
  .site-header {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(216, 185, 106, 0.35) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: rgba(7, 9, 12, 0.95) !important;
  }
  /* Push first content card below fixed header */
  main, .page-main, .site-main {
    padding-top: 28px !important;
  }
  .hero-home,
  .page-hero,
  section:first-of-type {
    margin-top: 24px !important;
  }
}

/* === Header sticky + fully opaque on mobile === */
@media (max-width: 860px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #07090c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body {
    padding-top: 64px !important;
  }
}

/* === Header flush to top === */
@media (max-width: 860px) {
  html, body {
    margin-top: 0 !important;
  }
  .site-header {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }
}

/* === Transition title between hero and showroom === */
.transition-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: min(96%, 720px) !important;
  margin: 28px auto 24px !important;
  padding: 0 8px !important;
}
.transition-title-rule {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(216, 185, 106, 0.55), transparent) !important;
}
.transition-title {
  margin: 0 !important;
  padding: 10px 18px !important;
  font-size: clamp(0.95rem, 3.6vw, 1.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: #f7e6b0 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  background: linear-gradient(180deg, rgba(216, 185, 106, 0.08), rgba(216, 185, 106, 0.02)) !important;
  border: 1px solid rgba(216, 185, 106, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 22px rgba(216, 185, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  white-space: normal !important;
  min-height: 2.4em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.transition-title .typewriter-caret {
  display: inline-block !important;
  width: 2px !important;
  height: 1em !important;
  background: #f7e6b0 !important;
  margin-inline-start: 4px !important;
  transform: translateY(2px) !important;
}
.transition-title .typewriter-caret.is-blinking {
  animation: transitionCaretBlink 700ms steps(1, end) infinite !important;
}
@keyframes transitionCaretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (max-width: 480px) {
  .transition-title-wrap { gap: 8px !important; margin: 20px auto 18px !important; }
  .transition-title { padding: 9px 14px !important; }
}

/* === Sequential hero typewriter caret === */
.hero-copy .typewriter-caret.seq-caret {
  display: inline-block !important;
  width: 2px !important;
  height: 0.95em !important;
  background: currentColor !important;
  margin-inline-start: 4px !important;
  transform: translateY(2px) !important;
  vertical-align: baseline !important;
}
.hero-copy .typewriter-caret.seq-caret.is-blinking {
  animation: seqCaretBlink 700ms steps(1, end) infinite !important;
}
.hero-copy .typewriter-caret.seq-caret[hidden] { display: none !important; }
@keyframes seqCaretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Remove the remaining gold halo/background from the active hero headline. */
.hero-home::before {
  background:
    radial-gradient(42% 50% at 18% 28%, rgba(104, 223, 255, 0.26), transparent 72%),
    radial-gradient(38% 44% at 82% 18%, rgba(128, 116, 255, 0.18), transparent 70%) !important;
}

#homeTitle,
#homeTitle [data-typewriter-output],
.hero-copy h1,
.hero-copy h1 [data-typewriter-output] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  filter: none !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   Intake map — static narrow cards for tablet/desktop (≥768px).
   Mobile keeps the original .premium-intake-map mindmap.
   NO animations, NO transforms, NO hover-lift, NO DNA core.
   ============================================================ */
@media (max-width: 767.98px) {
  .intake-static-grid { display: none !important; }
}
@media (min-width: 768px) {
  .intake-mobile-only { display: none !important; }

  .intake-static-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 28px auto 56px;
    padding: 0 16px;
    list-style: none;
  }
  .intake-static-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 24px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(180, 210, 230, 0.18);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    max-width: 280px;
    width: 100%;
    margin-inline: auto;
  }
  .intake-static-card:hover { transform: none !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
  .intake-static-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(200, 220, 235, 0.55);
  }
  .intake-static-icon {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(120, 200, 230, 0.08);
    border: 1px solid rgba(150, 200, 220, 0.22);
    color: #cfeaf5;
  }
  .intake-static-icon svg { width: 18px; height: 18px; }
  .intake-static-card h3 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 4px 0 2px;
    color: #eaf3f7;
    font-weight: 600;
  }
  .intake-static-card p {
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(220, 230, 238, 0.72);
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .intake-static-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 1280px;
    gap: 16px;
  }
  .intake-static-card { max-width: none; }
}

/* (logo watermark on About page restored — block reverted at user request) */

/* === Header refresh: larger nav, larger logo, separators between items === */
.brand-mark {
  flex: 0 0 clamp(208px, 17vw, 240px) !important;
  width: clamp(208px, 17vw, 240px) !important;
  min-width: clamp(208px, 17vw, 240px) !important;
  height: 60px !important;
}

.site-header .nav-link {
  color: #ffffff !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  padding: 4px 6px !important;
  letter-spacing: 0.005em !important;
}

.site-header .main-nav {
  gap: clamp(14px, 2.2vw, 30px) !important;
}

/* Vertical separators between nav links, inspired by editorial site rules */
.site-header .main-nav .nav-link + .nav-link {
  position: relative !important;
  padding-inline-start: clamp(14px, 2vw, 28px) !important;
  margin-inline-start: clamp(2px, 0.4vw, 6px) !important;
}
.site-header .main-nav .nav-link + .nav-link::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 20px !important;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  pointer-events: none !important;
  display: block !important;
}

.site-header .quote-button {
  font-size: 1.02rem !important;
}

/* === About page — editorial layout === */
.about-new-editorial{
  position:relative;
  width:min(1180px,100%);
  margin:24px auto 96px;
  padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px);
  isolation:isolate;
}
.about-new-editorial .watermark{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none; z-index:0;
  overflow:hidden;
}
.about-new-editorial .watermark img{
  width:min(72%,720px); max-height:86%;
  object-fit:contain; opacity:.14;
  filter:blur(2px) drop-shadow(0 30px 80px rgba(104,223,255,.18));
  -webkit-mask-image:radial-gradient(ellipse at center,#000 35%,transparent 78%);
          mask-image:radial-gradient(ellipse at center,#000 35%,transparent 78%);
}
.about-new-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:start; margin-top:28px;
}
@media (max-width:880px){ .about-new-grid{ grid-template-columns:1fr; } }
.about-new-quote{
  font-size:clamp(1.55rem,3.2vw,2.6rem);
  line-height:1.2; letter-spacing:-.01em;
  margin:0 0 24px; color:transparent;
  background:linear-gradient(180deg,#fff 0%,#d7dddd 36%,#f7fbfb 52%,#98a4a8 100%);
  -webkit-background-clip:text; background-clip:text; font-weight:800;
}
.about-new-body p{
  margin:0 0 18px; color:rgba(226,233,235,.84);
  font-size:clamp(1rem,1.55vw,1.12rem); line-height:2;
}
.about-new-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.about-new-tags span{
  font-size:.78rem; letter-spacing:.1em;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgba(202,230,239,.35);
  color:var(--text); background:rgba(255,255,255,.03);
}
.about-new-chapters{
  position:relative;
  border-inline-start:1px solid rgba(202,230,239,.22);
  padding-inline-start:clamp(20px,3vw,44px);
}
.about-new-chapter{
  padding:22px 0;
  border-bottom:1px solid rgba(202,230,239,.16);
  display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start;
}
.about-new-chapter:last-child{ border-bottom:none; }
.about-new-chapter .num{
  font-size:1.9rem; line-height:1; color:transparent;
  background:linear-gradient(180deg,#fff,#98a4a8);
  -webkit-background-clip:text; background-clip:text;
  font-weight:800; letter-spacing:-.02em;
}
.about-new-chapter h3{
  margin:0 0 6px; font-size:1.08rem; font-weight:700;
  color:var(--text); letter-spacing:-.005em;
}
.about-new-chapter p{
  margin:0; color:rgba(226,233,235,.82);
  font-size:.96rem; line-height:1.75;
}

/* Small-screen safety: prevent grid items on About from blowing out of their tracks (<=375px especially) */
@media (max-width: 880px){
  .about-new-grid,
  .about-new-grid > *,
  .about-new-body,
  .about-new-body > *,
  .about-new-chapters,
  .about-new-chapter,
  .about-new-chapter > *{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .about-new-body p,
  .about-new-quote,
  .about-new-chapter h3,
  .about-new-chapter p{
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================
   HEADER REBUILD — full-width sticky bar, gold accent, no glow
   Appended last so it wins over every prior layered rule.
   ============================================================ */
.site-header,
header.site-header {
  position: sticky !important;
  top: 0 !important;
  inset-inline: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px clamp(18px, 4vw, 48px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(212, 175, 90, 0.32) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.78), rgba(8, 12, 18, 0.62)) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  box-shadow:
    0 1px 0 rgba(212, 175, 90, 0.22),
    0 10px 28px -14px rgba(180, 140, 50, 0.35),
    0 18px 40px -24px rgba(0, 0, 0, 0.55) !important;
}

/* Kill the decorative neon underline strip under the bar */
.site-header::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* No glow on the logo image */
.site-header .brand-mark,
.site-header .brand-mark:hover,
.site-header .brand-mark:focus,
.site-header .brand-mark:focus-visible {
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.site-header .brand-mark img,
.site-header .brand-mark:hover img,
.site-header .brand-mark:focus img {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* No glow on nav links — hover/active/focus */
.site-header .nav-link,
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link:focus-visible,
.site-header .nav-link.is-active,
.site-header .quote-button:hover,
.site-header .quote-button:focus,
.site-header .quote-button:focus-visible {
  text-shadow: none !important;
  filter: none !important;
}
.site-header .nav-link::after,
.site-header .nav-link::before,
.site-header .nav-link:hover::after,
.site-header .nav-link.is-active::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.site-header .nav-link:hover,
.site-header .nav-link.is-active {
  color: #f4d98a !important;
}

/* ============================================================
   HEADER FLUSH TOP + MOBILE NAV CLEANUP (final, wins over all)
   ============================================================ */
html, body { margin: 0 !important; }
body { padding-top: 0 !important; }

.site-header,
header.site-header {
  margin: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
  padding-top: max(10px, env(safe-area-inset-top)) !important;
  padding-bottom: 10px !important;
}

/* Hide the desktop inline vertical separators on mobile (they show up as
   misplaced bars on the right side of each item in the column menu) */
@media (max-width: 760px) {
  .site-header .main-nav .nav-link + .nav-link,
  .site-header .main-nav .nav-link + .nav-link::before {
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
    background: none !important;
    content: none !important;
    display: revert !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
  }
  .site-header .main-nav .nav-link + .nav-link::before { display: none !important; }

  /* Clean mobile menu panel */
  .site-header .main-nav.is-open {
    top: calc(100% + 8px) !important;
    right: 8px !important;
    left: 8px !important;
    padding: 6px !important;
    gap: 0 !important;
    border: 1px solid rgba(212, 175, 90, 0.45) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(10, 14, 22, 0.96), rgba(6, 9, 14, 0.96)) !important;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,90,.18) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  }
  .site-header .main-nav.is-open .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    text-align: center !important;
    color: #f4ecd2 !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 10px !important;
    border-bottom: 1px solid rgba(212, 175, 90, 0.18) !important;
    background: transparent !important;
  }
  .site-header .main-nav.is-open .nav-link:last-child {
    border-bottom: 0 !important;
  }
  .site-header .main-nav.is-open .nav-link.is-active {
    background: linear-gradient(180deg, rgba(212,175,90,.18), rgba(212,175,90,.08)) !important;
    color: #ffeaa3 !important;
  }
  /* kill underline pseudo inside open menu */
  .site-header .main-nav.is-open .nav-link::after,
  .site-header .main-nav.is-open .nav-link::before {
    display: none !important;
    content: none !important;
  }
}

/* ============================================================
   MOBILE MENU UX: smooth open/close animation
   ============================================================ */
@media (max-width: 760px) {
  .site-header .main-nav {
    /* When closed, panel is not rendered (display:none from base styles).
       When open, mount with fade+slide. */
  }
  .site-header .main-nav.is-open {
    animation: navOpen 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: top center;
    will-change: transform, opacity;
  }
  .site-header .main-nav.is-open.is-closing {
    animation: navClose 200ms ease-in both;
  }
  @keyframes navOpen {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes navClose {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-6px) scale(0.99); }
  }
  /* Stagger nav links in for a softer feel */
  .site-header .main-nav.is-open .nav-link {
    animation: navItemIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .site-header .main-nav.is-open .nav-link:nth-child(1) { animation-delay: 40ms; }
  .site-header .main-nav.is-open .nav-link:nth-child(2) { animation-delay: 80ms; }
  .site-header .main-nav.is-open .nav-link:nth-child(3) { animation-delay: 120ms; }
  .site-header .main-nav.is-open .nav-link:nth-child(4) { animation-delay: 160ms; }
  .site-header .main-nav.is-open .nav-link:nth-child(5) { animation-delay: 200ms; }
  @keyframes navItemIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Animated hamburger -> X */
  .menu-toggle { transition: transform 180ms ease; }
  .menu-toggle span { transition: transform 220ms ease, opacity 160ms ease; transform-origin: center; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .main-nav.is-open,
  .site-header .main-nav.is-open.is-closing,
  .site-header .main-nav.is-open .nav-link {
    animation: none !important;
  }
}

/* ============================================================
   MOBILE MENU v2: backdrop dim + clearer animation
   ============================================================ */
/* Dedicated backdrop element injected by JS — avoids fighting with
   the existing body::before that lives at z-index -3. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(2, 4, 8, 0.6);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.nav-backdrop.is-visible { opacity: 1; }

@media (max-width: 760px) {
  /* Ensure header sits above the backdrop */
  body.nav-open .site-header { z-index: 101 !important; }
}

  /* Stronger panel entry animation */
  .site-header .main-nav.is-open {
    animation: navOpenV2 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    transform-origin: top center !important;
  }
  .site-header .main-nav.is-open.is-closing {
    animation: navCloseV2 220ms ease-in both !important;
  }
  @keyframes navOpenV2 {
    0%   { opacity: 0; transform: translateY(-14px) scale(0.96); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes navCloseV2 {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scale(0.97); }
  }
}

/* ===========================================================
   HERO IMPACT — premium "First Impression Diagnostic System"
   Scoped to .hero-impact so it overrides legacy .hero-home rules
   =========================================================== */
.hero.hero-home.hero-impact {
  position: relative !important;
  min-height: auto !important;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 56px) clamp(64px, 8vw, 110px) !important;
  margin: 0 auto !important;
  max-width: 1320px !important;
  width: 100% !important;
  display: block !important;
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.hero-impact .hero-impact-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-impact .hero-impact-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, #000 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, #000 55%, transparent 85%);
  opacity: 0.55;
}
.hero-impact .hero-impact-glow {
  position: absolute; border-radius: 999px; filter: blur(120px); opacity: 0.55;
}
.hero-impact .hero-impact-glow-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,212,128,0.35), rgba(255,212,128,0) 70%);
  top: -120px; right: -120px;
}
.hero-impact .hero-impact-glow-2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(110,170,255,0.28), rgba(110,170,255,0) 70%);
  bottom: -160px; left: -120px;
}
.hero-impact .hero-impact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
/* TEXT COLUMN (right in RTL) */
.hero-impact .hero-impact-copy {
  grid-column: 1;
  text-align: right;
  max-width: 620px;
}
.hero-impact .hero-impact-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: rgba(255,232,176,0.92);
  background: linear-gradient(180deg, rgba(255,242,200,0.10), rgba(255,242,200,0.03));
  border: 1px solid rgba(255,232,176,0.28);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 18px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
}
.hero-impact .hero-impact-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: #ffd47a;
  box-shadow: 0 0 10px #ffd47a;
}
.hero-impact .hero-impact-title {
  font-family: "Heebo", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  margin: 22px 0 18px !important;
  color: #f5f1e6 !important;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
  background: none !important;
  -webkit-text-fill-color: initial !important;
}
.hero-impact .hero-impact-title-accent {
  display: block;
  background: linear-gradient(90deg, #ffe6a8 0%, #c9a14a 60%, #fff2c2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-impact .hero-impact-sub {
  font-family: "Heebo", system-ui, sans-serif !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.7 !important;
  color: rgba(232,232,236,0.78) !important;
  margin: 0 0 28px !important;
  max-width: 560px;
}
.hero-impact .hero-impact-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 18px;
}
.hero-impact .hero-impact-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  font-family: "Heebo", system-ui, sans-serif;
  font-weight: 700; font-size: 15px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero-impact .hero-impact-cta-primary {
  color: #1a1206;
  background: linear-gradient(180deg, #ffe6a8 0%, #d8ae5a 100%);
  border: 1px solid rgba(255,232,176,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(120,80,20,0.25),
    0 12px 30px rgba(216,174,90,0.28),
    0 0 0 0 rgba(255,232,176,0.0);
}
.hero-impact .hero-impact-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(120,80,20,0.25),
    0 18px 40px rgba(216,174,90,0.4);
}
.hero-impact .hero-impact-cta-secondary {
  color: #f5f1e6;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
}
.hero-impact .hero-impact-cta-secondary:hover {
  border-color: rgba(180,200,220,0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.hero-impact .hero-impact-tags {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 13px; color: rgba(220,220,230,0.6);
}
.hero-impact .hero-impact-tags li {
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-impact .hero-impact-tags li + li::before {
  content: "·"; color: rgba(255,232,176,0.5); margin-inline-end: 6px;
}

/* DASHBOARD COLUMN (left in RTL) */
.hero-impact .hero-impact-dashboard {
  grid-column: 2;
  position: relative;
  padding: 22px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 60%, rgba(0,0,0,0.25)),
    rgba(10,12,18,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,232,176,0.04),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(255,212,128,0.08);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  overflow: hidden;
}
.hero-impact .hero-impact-dashboard::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255,212,128,0.10), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(110,170,255,0.08), transparent 60%);
  border-radius: inherit;
}
.hero-impact .hero-impact-dash-head {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 4px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
  direction: ltr;
}
.hero-impact .hero-impact-dash-dots { display: inline-flex; gap: 6px; }
.hero-impact .hero-impact-dash-dots span {
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.hero-impact .hero-impact-dash-dots span:nth-child(1) { background: #ff6b6b; }
.hero-impact .hero-impact-dash-dots span:nth-child(2) { background: #ffce6b; }
.hero-impact .hero-impact-dash-dots span:nth-child(3) { background: #6bd391; }
.hero-impact .hero-impact-dash-title {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: "Heebo", system-ui, sans-serif;
  margin-inline-end: auto;
}
.hero-impact .hero-impact-dash-brand {
  font-weight: 800; font-size: 13px; letter-spacing: 0.18em;
  color: #ffe6a8;
}
.hero-impact .hero-impact-dash-name {
  font-weight: 500; font-size: 12.5px; letter-spacing: 0.04em;
  color: rgba(220,220,230,0.7); text-transform: uppercase;
}
.hero-impact .hero-impact-dash-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  color: #b8ffcf;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(45, 180, 110, 0.12);
  border: 1px solid rgba(110, 220, 160, 0.28);
}
.hero-impact .hero-impact-dash-status i {
  width: 6px; height: 6px; border-radius: 999px;
  background: #6bd391; box-shadow: 0 0 8px #6bd391;
  animation: heroImpactPulse 1.8s ease-in-out infinite;
}
@keyframes heroImpactPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.hero-impact .hero-impact-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-impact .hero-impact-card {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 6px;
  text-align: right;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-impact .hero-impact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,232,176,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 28px rgba(0,0,0,0.35);
}
.hero-impact .hero-impact-card-wide { grid-column: span 2; }
.hero-impact .hero-impact-card-label {
  font-size: 12px; color: rgba(220,220,230,0.62); font-weight: 500;
}
.hero-impact .hero-impact-card-value {
  font-size: 18px; font-weight: 800; color: #f5f1e6; letter-spacing: -0.01em;
}
.hero-impact .hero-impact-bar {
  display: block; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 4px;
}
.hero-impact .hero-impact-bar i {
  display: block; height: 100%; width: var(--p, 80%);
  background: linear-gradient(90deg, #ffe6a8, #d8ae5a);
  box-shadow: 0 0 12px rgba(255,212,128,0.45);
  border-radius: inherit;
  animation: heroImpactBar 1.6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes heroImpactBar { from { width: 0 } }
.hero-impact .hero-impact-insight {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  background:
    linear-gradient(180deg, rgba(255,232,176,0.10), rgba(255,232,176,0.03));
  border: 1px solid rgba(255,232,176,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 26px rgba(216,174,90,0.12);
}
.hero-impact .hero-impact-insight-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffe6a8;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255,232,176,0.35);
  background: rgba(255,232,176,0.06);
  white-space: nowrap;
}
.hero-impact .hero-impact-insight-text {
  font-family: "Heebo", system-ui, sans-serif;
  font-weight: 600; font-size: 15px;
  color: #f5f1e6;
  line-height: 1.45;
}

/* TABLET */
@media (max-width: 980px) {
  .hero.hero-home.hero-impact {
    padding-top: clamp(80px, 14vw, 120px) !important;
  }
  .hero-impact .hero-impact-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-impact .hero-impact-copy { grid-column: 1; max-width: 100%; }
  .hero-impact .hero-impact-dashboard { grid-column: 1; }
}

/* MOBILE */
@media (max-width: 640px) {
  .hero.hero-home.hero-impact {
    padding: 84px 16px 56px !important;
  }
  .hero-impact .hero-impact-title { font-size: clamp(28px, 8vw, 38px) !important; }
  .hero-impact .hero-impact-sub { font-size: 15px !important; }
  .hero-impact .hero-impact-actions { flex-direction: column; }
  .hero-impact .hero-impact-cta { width: 100%; padding: 14px 18px; font-size: 14.5px; }
  .hero-impact .hero-impact-dashboard { padding: 16px; border-radius: 18px; }
  .hero-impact .hero-impact-dash-grid { grid-template-columns: 1fr; }
  .hero-impact .hero-impact-card-wide { grid-column: span 1; }
  .hero-impact .hero-impact-glow { filter: blur(80px); opacity: 0.4; }
  .hero-impact .hero-impact-insight { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-impact .hero-impact-bar i,
  .hero-impact .hero-impact-dash-status i { animation: none !important; }
}

/* ============================================================
   FIX (2026-05-19): Header must stay glued to the top on every
   page (including contact). position:sticky was failing on
   contact due to ancestor overflow rules — switch to fixed.
   ============================================================ */
.site-header {
  position: fixed !important;
  top: 0 !important;
  inset-inline: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
  border-top: 0 !important;
  z-index: 200 !important;
  padding-inline: clamp(14px, 4vw, 40px) !important;
}
.site-header > * { position: relative; z-index: 1; }

/* Offset main content for fixed header */
body {
  padding-top: 78px !important;
}
@media (max-width: 760px) {
  body { padding-top: 66px !important; }
  .site-header { padding-inline: 14px !important; min-height: 60px !important; }
}
@media (max-width: 380px) {
  body { padding-top: 62px !important; }
}

/* Hero-impact already pads top; reduce since body now has offset */
.hero.hero-home.hero-impact {
  padding-top: clamp(36px, 6vw, 72px) !important;
}

/* New hero — better mobile title wrapping */
@media (max-width: 640px) {
  .hero-impact .hero-impact-title {
    font-size: clamp(26px, 7.6vw, 34px) !important;
    line-height: 1.15 !important;
    word-break: keep-all;
    hyphens: none;
  }
  .hero-impact .hero-impact-kicker {
    font-size: 11.5px;
    padding: 6px 12px;
  }
  .hero-impact .hero-impact-sub {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  .hero-impact .hero-impact-cta {
    padding: 13px 16px !important;
    font-size: 14px !important;
  }
}

/* Sticky was creating offset of 18px — neutralize legacy top */
.site-header { top: 0 !important; }

/* Final mobile pin: keep header glued to the physical viewport top, above all overlays. */
html,
body {
  margin-top: 0 !important;
  scroll-padding-top: 72px !important;
}

.site-header,
header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  inset-inline: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  z-index: 9999 !important;
}

@media (max-width: 860px) {
  body {
    padding-top: 64px !important;
  }

  .site-header,
  header.site-header {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: 14px !important;
    border-radius: 0 !important;
  }
}

/* === Hard kill: remove ALL gold/amber from the "צפה באתרים שבניתי" secondary CTA === */
.hero-impact .hero-impact-cta.hero-impact-cta-secondary,
.hero-impact .hero-impact-cta.hero-impact-cta-secondary:link,
.hero-impact .hero-impact-cta.hero-impact-cta-secondary:visited {
  color: #f5f7fa !important;
  /* Fully opaque dark fill so the neighboring gold CTA's warm halo
     cannot bleed through the translucent surface. */
  background: #0d1422 !important;
  background-image: none !important;
  border: 1px solid rgba(170,190,210,0.22) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 2 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-impact .hero-impact-cta.hero-impact-cta-secondary:hover,
.hero-impact .hero-impact-cta.hero-impact-cta-secondary:focus,
.hero-impact .hero-impact-cta.hero-impact-cta-secondary:focus-visible,
.hero-impact .hero-impact-cta.hero-impact-cta-secondary:active {
  color: #ffffff !important;
  background: #142036 !important;
  background-image: none !important;
  border-color: rgba(180,200,220,0.45) !important;
  box-shadow: 0 0 0 3px rgba(120,150,180,0.18) !important;
  outline: none !important;
}

/* Prevent the primary CTA's warm gold drop-shadow from spilling onto the
   secondary CTA that sits next to it inside the actions row. */
.hero-impact .hero-impact-actions {
  isolation: isolate;
}
.hero-impact .hero-impact-cta-primary {
  position: relative;
  z-index: 1;
}
.hero-impact .hero-impact-cta.hero-impact-cta-secondary::before,
.hero-impact .hero-impact-cta.hero-impact-cta-secondary::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* ===========================================================
   2026-05-25 — Hero kicker enlargement, hero top spacing trim,
   and card body text enlargement (services / intake / trust).
   =========================================================== */
.hero-impact .hero-impact-kicker {
  font-size: clamp(15px, 1.35vw, 18px) !important;
  padding: 9px 18px !important;
  letter-spacing: 0.01em;
  line-height: 1.35 !important;
}

/* Reduce empty space between fixed header and hero kicker */
.hero.hero-home.hero-impact {
  padding-top: clamp(72px, 7vw, 96px) !important;
}
@media (max-width: 720px) {
  .hero.hero-home.hero-impact {
    padding-top: clamp(56px, 14vw, 80px) !important;
  }
}

/* Enlarge body text of service cards (מערכת נוכחות דיגיטלית) */
.service-grid .neon-card .card-copy p,
.service-grid .neon-card p {
  font-size: clamp(15.5px, 1.15vw, 17.5px) !important;
  line-height: 1.7 !important;
}
.service-detail-grid .service-detail-card p {
  font-size: clamp(15.5px, 1.1vw, 17px) !important;
  line-height: 1.7 !important;
}

/* Enlarge text of intake (מפת שיחת האפיון) cards — both mind nodes and static grid */
.intake-map .map-step p,
.intake-map .mind-node p {
  font-size: clamp(14.5px, 1vw, 16px) !important;
  line-height: 1.65 !important;
}
.intake-static-grid .intake-static-card p {
  font-size: clamp(15.5px, 1.1vw, 17px) !important;
  line-height: 1.7 !important;
}

/* Enlarge text of trust cards (הוכחות אמון) */
.trust-grid .trust-card p {
  font-size: clamp(15.5px, 1.1vw, 17px) !important;
  line-height: 1.7 !important;
}
.trust-grid .trust-card h3 {
  font-size: clamp(17px, 1.25vw, 20px) !important;
}

/* Service card titles must use the full card width — no one-word-per-line wrapping */
.service-grid .neon-card .card-content {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.service-grid .neon-card .card-copy {
  min-width: 0 !important;
}
.service-grid .neon-card .card-copy h3 {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
  line-height: 1.25 !important;
}
.service-grid .neon-card .card-icon {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 4px !important;
}
.service-grid .neon-card .card-icon svg {
  width: 32px !important;
  height: 32px !important;
}

/* ============================================================
   Services section — distinct accent per card to break monotony
   Applies to .service-detail-card (the 5 detail cards under
   "השירותים שלי - מערכת נוכחות דיגיטלית")
   ============================================================ */
.page-home .service-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: clamp(18px, 1.8vw, 28px) !important;
  /* Reset the legacy negative top margin (-42px) that assumed the now-removed
     first .service-grid sat directly above. Without this reset, the cards
     pull up into the section title and the spacing looks broken. */
  margin-top: clamp(8px, 1.2vw, 18px) !important;
  margin-bottom: clamp(56px, 6vw, 82px) !important;
}

.page-home .service-detail-card {
  position: relative !important;
  overflow: hidden !important;
  --accent: 199 93% 65%;
  border: 1px solid hsl(var(--accent) / 0.22) !important;
  box-shadow:
    0 18px 50px -28px hsl(var(--accent) / 0.35),
    inset 0 1px 0 hsl(0 0% 100% / 0.04) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

.page-home .service-detail-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(120% 60% at 100% 0%, hsl(var(--accent) / 0.16), transparent 55%),
    radial-gradient(80% 50% at 0% 100%, hsl(var(--accent) / 0.08), transparent 60%) !important;
  pointer-events: none !important;
  opacity: .9 !important;
  z-index: 0 !important;
}

.page-home .service-detail-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  inset-inline: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--accent) / 0.85),
    transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.page-home .service-detail-card > * { position: relative; z-index: 2; }

.page-home .service-detail-card:hover {
  transform: translateY(-3px) !important;
  border-color: hsl(var(--accent) / 0.55) !important;
  box-shadow:
    0 28px 60px -22px hsl(var(--accent) / 0.55),
    inset 0 1px 0 hsl(0 0% 100% / 0.06) !important;
}

.page-home .service-detail-card .service-detail-icon {
  color: hsl(var(--accent)) !important;
  background: hsl(var(--accent) / 0.10) !important;
  border: 1px solid hsl(var(--accent) / 0.30) !important;
  box-shadow: 0 0 22px hsl(var(--accent) / 0.28) !important;
}
.page-home .service-detail-card .service-detail-icon svg,
.page-home .service-detail-card .service-detail-icon svg * {
  color: hsl(var(--accent)) !important;
  stroke: hsl(var(--accent)) !important;
}

.page-home .service-detail-card .inline-route-link {
  color: hsl(var(--accent)) !important;
  border-color: hsl(var(--accent) / 0.45) !important;
}
.page-home .service-detail-card .inline-route-link:hover {
  background: hsl(var(--accent) / 0.12) !important;
  border-color: hsl(var(--accent) / 0.75) !important;
}

/* Per-card accent hues — 5 distinct, brand-aligned colors */
.page-home .service-detail-grid .service-detail-card:nth-child(1) { --accent: 199 93% 65%; } /* cyan */
.page-home .service-detail-grid .service-detail-card:nth-child(2) { --accent: 260 85% 72%; } /* violet */
.page-home .service-detail-grid .service-detail-card:nth-child(3) { --accent: 165 75% 55%; } /* teal-mint */
.page-home .service-detail-grid .service-detail-card:nth-child(4) { --accent: 32 95% 62%;  } /* warm amber */
.page-home .service-detail-grid .service-detail-card:nth-child(5) { --accent: 320 80% 68%; } /* magenta */