/* Website Design Galaxy v213: restrained precision, depth, and motion. */

html[data-theme] {
  --v213-divider: rgba(255, 255, 255, .11);
  --v213-card-edge: rgba(255, 255, 255, .18);
  --v213-card-shadow: 0 18px 42px rgba(2, 7, 12, .24);
  --v213-card-shadow-hover: 0 24px 52px rgba(2, 7, 12, .32);
  --v213-panel-shadow: 0 22px 58px rgba(2, 7, 12, .2);
  --v213-title-glass: rgba(7, 14, 22, .82);
  --v213-copy-glass: rgba(7, 14, 22, .76);
  --v213-signal: linear-gradient(
    90deg,
    transparent 0%,
    var(--studio-metal) 12%,
    var(--studio-accent-soft) 50%,
    var(--studio-accent) 78%,
    transparent 100%
  );
}

html[data-theme="light"] {
  --v213-divider: rgba(36, 19, 60, .12);
  --v213-card-edge: rgba(36, 19, 60, .17);
  --v213-card-shadow: 0 18px 42px rgba(32, 25, 54, .12);
  --v213-card-shadow-hover: 0 25px 54px rgba(32, 25, 54, .18);
  --v213-panel-shadow: 0 22px 58px rgba(32, 25, 54, .13);
  --v213-title-glass: rgba(255, 253, 248, .9);
  --v213-copy-glass: rgba(255, 253, 248, .86);
}

/* A precise header edge makes the persistent navigation feel intentionally engineered. */
html[data-theme] body .site-header {
  isolation: isolate;
}

html[data-theme] body .site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 4;
  height: 2px;
  pointer-events: none;
  background: var(--v213-signal);
  background-size: 220% 100%;
  background-position: 100% 0;
  opacity: .72;
  transition: background-position 620ms ease, opacity 220ms ease;
}

html[data-theme] body .site-header:is(:hover, :focus-within)::after {
  background-position: 0 0;
  opacity: 1;
}

/* Quiet section dividers create rhythm without turning the page into stacked cards. */
html[data-theme] body main > section + section {
  border-top: 1px solid var(--v213-divider);
}

html[data-theme] body :is(
  .section-intro,
  .services-router-intro,
  .pricing-hero-grid,
  .process-hero-copy,
  .service-detail-grid,
  .service-builder-hero-grid,
  .contact-hero .page-grid,
  .home-trust-shell,
  .home-snapshot-grid
) {
  position: relative;
}

html[data-theme] body :is(
  .section-intro,
  .services-router-intro,
  .pricing-hero-grid,
  .process-hero-copy,
  .service-detail-grid,
  .service-builder-hero-grid,
  .contact-hero .page-grid
)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(210px, 42%);
  height: 2px;
  pointer-events: none;
  background: var(--v213-signal);
  transform-origin: left center;
}

/* Shared cards gain a small active edge instead of a generic heavy outline. */
html[data-theme] body :is(
  .standalone-service-card,
  .process-card,
  .work-card,
  .price-column,
  .package-card,
  .service-menu-card,
  .service-detail-panel,
  .service-option-card,
  .service-type-card,
  .service-builder-panel,
  .service-estimate-card,
  .contact-panel,
  .principle-card,
  .home-trust-links > a,
  .package-card-link > .tier-card
) {
  position: relative;
  overflow: hidden;
  box-shadow: var(--v213-card-shadow) !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

html[data-theme] body :is(
  .standalone-service-card,
  .process-card,
  .work-card,
  .price-column,
  .package-card,
  .service-menu-card,
  .service-detail-panel,
  .service-option-card,
  .service-type-card,
  .service-builder-panel,
  .service-estimate-card,
  .contact-panel,
  .principle-card,
  .home-trust-links > a,
  .package-card-link > .tier-card
)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: var(--v213-signal);
  opacity: .76;
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform 360ms ease, opacity 220ms ease;
}

html[data-theme] body :is(
  .standalone-service-card,
  .process-card,
  .work-card,
  .price-column,
  .package-card,
  .service-menu-card,
  .service-detail-panel,
  .service-option-card,
  .service-type-card,
  .service-builder-panel,
  .service-estimate-card,
  .contact-panel,
  .principle-card,
  .home-trust-links > a,
  .package-card-link > .tier-card
):is(:hover, :focus-within)::after {
  opacity: 1;
  transform: scaleX(1);
}

html[data-theme] body :is(
  .standalone-service-card,
  .process-card,
  .work-card,
  .service-menu-card,
  .service-option-card,
  .service-type-card,
  .home-trust-links > a
):is(:hover, :focus-within) {
  border-color: var(--studio-accent) !important;
  box-shadow: var(--v213-card-shadow-hover) !important;
  transform: translateY(-3px) !important;
}

/* Media stays clear at rest and gains a subtle, deliberate response on interaction. */
html[data-theme] body :is(
  .work-card,
  .service-menu-card,
  .service-route-card,
  .service-offer-card,
  .visual-bg-card,
  .image-card,
  .hero-img-shell
) img {
  transition: transform 520ms cubic-bezier(.2, .7, .2, 1), filter 300ms ease !important;
}

@media (hover: hover) {
  html[data-theme] body :is(
    .work-card,
    .service-menu-card,
    .service-route-card,
    .service-offer-card,
    .visual-bg-card,
    .image-card,
    .hero-img-shell
  ):is(:hover, :focus-within) img {
    filter: saturate(1.08) contrast(1.04) brightness(1.04) !important;
    transform: scale(1.025);
  }
}

/* The homepage service selector is the main visual proof point. */
html[data-theme] body .showcase-service-grid {
  counter-reset: v213-service;
}

html[data-theme] body .showcase-service-card {
  counter-increment: v213-service;
  isolation: isolate;
  box-shadow: var(--v213-card-shadow) !important;
}

html[data-theme] body main section.home-hero-showcase .showcase-service-card > span {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: .48em !important;
  max-width: min(100%, 15ch) !important;
  padding: .42em .6em !important;
  border-width: 1px 1px 1px 3px !important;
  border-radius: 4px !important;
  background: var(--v213-title-glass) !important;
  box-shadow: 0 12px 30px rgba(2, 7, 12, .28), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(15px) saturate(1.14);
}

html[data-theme] body main section.home-hero-showcase .showcase-service-card > span::before {
  content: counter(v213-service, decimal-leading-zero);
  color: var(--studio-accent-soft) !important;
  -webkit-text-fill-color: var(--studio-accent-soft) !important;
  font-size: .48em;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
}

html[data-theme="light"] body main section.home-hero-showcase .showcase-service-card > span::before {
  color: var(--studio-accent-hover) !important;
  -webkit-text-fill-color: var(--studio-accent-hover) !important;
}

html[data-theme] body main section.home-hero-showcase .showcase-service-card > small {
  border-radius: 4px !important;
  background: var(--v213-copy-glass) !important;
  box-shadow: 0 12px 30px rgba(2, 7, 12, .24), inset 0 1px rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(15px) saturate(1.1);
}

html[data-theme] body main .showcase-service-card::after {
  transition: transform 760ms cubic-bezier(.2, .7, .2, 1), opacity 220ms ease !important;
  transform: translateX(-64%);
}

html[data-theme] body main .showcase-service-card:is(:hover, :focus-visible) {
  border-color: var(--studio-accent-soft) !important;
  box-shadow: var(--v213-card-shadow-hover) !important;
  transform: translateY(-4px) !important;
}

html[data-theme] body main .showcase-service-card:is(:hover, :focus-visible)::after {
  transform: translateX(64%);
}

/* Pull supporting copy together with consistent breathing room and better line length. */
html[data-theme] body :is(
  .section-intro,
  .services-router-intro,
  .home-trust-intro,
  .snapshot-copy,
  .service-builder-panel,
  .service-estimate-card,
  .contact-panel,
  .policy-box,
  .principle-card
) {
  padding-inline: clamp(20px, 2.3vw, 30px) !important;
}

html[data-theme] body :is(
  .section-intro,
  .services-router-intro,
  .home-trust-intro,
  .snapshot-copy,
  .service-builder-panel,
  .contact-panel
) > :is(p, ul, ol) {
  max-width: 72ch;
}

/* Small interaction details make links read as purposeful controls. */
html[data-theme] body .home-trust-links > a b span[aria-hidden="true"],
html[data-theme] body .text-link,
html[data-theme] body .card-action-row a {
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease !important;
}

html[data-theme] body .home-trust-links > a:is(:hover, :focus-visible) b span[aria-hidden="true"] {
  display: inline-block;
  transform: translateX(3px);
}

html[data-theme] body :is(
  .btn.primary,
  .package-card-cta,
  .footer-cta-link,
  .header-coupon-apply
) {
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 8px 20px rgba(2, 7, 12, .14) !important;
}

html[data-theme] body :is(
  .btn.primary,
  .package-card-cta,
  .footer-cta-link,
  .header-coupon-apply
):is(:hover, :focus-visible) {
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 12px 26px rgba(2, 7, 12, .22) !important;
  transform: translateY(-2px) !important;
}

/* Keep the free-concept offer distinct from the page while respecting each theme. */
html[data-theme] body .three-concept-popup-card {
  border-color: var(--studio-metal) !important;
  box-shadow: 0 24px 60px rgba(2, 7, 12, .34), 0 0 0 1px var(--v213-card-edge) !important;
}

html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible) {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 28px 68px rgba(2, 7, 12, .4), 0 0 0 2px var(--v213-card-edge) !important;
  transform: translateY(-3px) !important;
}

@supports (overflow: clip) {
  html[data-theme] body :is(
    .standalone-service-card,
    .process-card,
    .work-card,
    .price-column,
    .package-card,
    .service-menu-card,
    .service-detail-panel,
    .service-option-card,
    .service-type-card,
    .service-builder-panel,
    .service-estimate-card,
    .contact-panel,
    .principle-card,
    .home-trust-links > a,
    .package-card-link > .tier-card
  ) {
    overflow: clip;
  }
}

@media (max-width: 760px) {
  html[data-theme] body main > section + section {
    border-top-color: var(--v213-divider);
  }

  html[data-theme] body main section.home-hero-showcase .showcase-service-card > span {
    gap: .38em !important;
    max-width: min(100%, 13ch) !important;
    padding: .36em .48em !important;
    border-left-width: 3px !important;
  }

  html[data-theme] body main section.home-hero-showcase .showcase-service-card > span::before {
    font-size: .5em;
  }

  html[data-theme] body :is(
    .section-intro,
    .services-router-intro,
    .home-trust-intro,
    .snapshot-copy,
    .service-builder-panel,
    .service-estimate-card,
    .contact-panel,
    .policy-box,
    .principle-card
  ) {
    padding-inline: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .site-header::after,
  html[data-theme] body .showcase-service-card::after,
  html[data-theme] body :is(
    .standalone-service-card,
    .process-card,
    .work-card,
    .price-column,
    .package-card,
    .service-menu-card,
    .service-detail-panel,
    .service-option-card,
    .service-type-card,
    .service-builder-panel,
    .service-estimate-card,
    .contact-panel,
    .principle-card,
    .home-trust-links > a,
    .package-card-link > .tier-card
  )::after {
    transition: none !important;
  }

  html[data-theme] body :is(
    .showcase-service-card,
    .standalone-service-card,
    .process-card,
    .work-card,
    .service-menu-card,
    .service-option-card,
    .service-type-card,
    .home-trust-links > a,
    .three-concept-popup-card
  ):is(:hover, :focus-within, :focus-visible) {
    transform: none !important;
  }

  html[data-theme] body :is(
    .work-card,
    .service-menu-card,
    .service-route-card,
    .service-offer-card,
    .visual-bg-card,
    .image-card,
    .hero-img-shell
  ):is(:hover, :focus-within) img {
    transform: none !important;
  }
}