/* Independent original artwork layers, scoped to the mobile home page. */
:is(#hero, #welcome-title) {
  --hero-screen-height: 100vh;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: var(--hero-viewport-height, var(--hero-screen-height));
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: max(env(safe-area-inset-top, 0px), var(--combajn-native-safe-top, 0px))
    max(env(safe-area-inset-right, 0px), var(--combajn-native-safe-right, 0px))
    max(env(safe-area-inset-bottom, 0px), var(--combajn-native-safe-bottom, 0px), calc(var(--hero-nav-height, 76px) + 8px))
    max(env(safe-area-inset-left, 0px), var(--combajn-native-safe-left, 0px));
  overflow: hidden;
  background: #031923;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none;
}
@supports (height: 100dvh) {
  :is(#hero, #welcome-title) { --hero-screen-height: 100dvh; }
}
:is(#hero, #welcome-title)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Fine rays, softer beams and distant filaments share the globe's origin. */
  background:
    repeating-conic-gradient(from 3deg at var(--hero-rays-x, 50%) var(--hero-rays-y, 50%),
      transparent 0deg, rgba(255, 213, 123, .025) .42deg,
      rgba(255, 213, 123, .25) .64deg, rgba(238, 174, 54, .035) .92deg,
      transparent 1.8deg 6deg),
    repeating-conic-gradient(from -8deg at var(--hero-rays-x, 50%) var(--hero-rays-y, 50%),
      transparent 0deg, rgba(226, 169, 67, .025) 2.1deg,
      rgba(246, 191, 89, .13) 2.75deg, rgba(226, 169, 67, .025) 3.5deg,
      transparent 5.2deg 17deg),
    repeating-conic-gradient(from 1deg at var(--hero-rays-x, 50%) var(--hero-rays-y, 50%),
      transparent 0deg, rgba(255, 224, 156, .07) .16deg,
      transparent .38deg 2.5deg);
  -webkit-mask-image: radial-gradient(ellipse farthest-corner at var(--hero-rays-x, 50%) var(--hero-rays-y, 50%), #000 0%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .38) 100%);
  mask-image: radial-gradient(ellipse farthest-corner at var(--hero-rays-x, 50%) var(--hero-rays-y, 50%), #000 0%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .38) 100%);
}
:is(#hero, #welcome-title)::after {
  content: "";
  position: absolute;
  left: var(--hero-rays-x, 50%);
  top: var(--hero-rays-y, 50%);
  width: var(--hero-glow-size, 80vmin);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(249, 178, 49, .04) 26%, rgba(249, 178, 49, .09) 52%, rgba(211, 150, 46, .025) 64%, transparent 74%);
}

:is(#hero, #welcome-title) .hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  touch-action: pan-y pinch-zoom;
}
:is(#hero, #welcome-title) .hero-stage {
  display: grid;
  place-items: center;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
:is(#hero, #welcome-title) .hero-artwork {
  --hero-brand-height: 18%;
  --hero-taglines-height: 22%;
  --hero-layer-gap: 4px;
  position: relative;
  display: grid;
  grid-template-areas: "brand" "emblem" "taglines";
  grid-template-rows: var(--hero-header-space, var(--hero-brand-height)) minmax(0, 1fr) var(--hero-taglines-height);
  gap: var(--hero-layer-gap);
  box-sizing: border-box;
  padding-top: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
:is(#hero, #welcome-title) .hero-brand-region,
:is(#hero, #welcome-title) .hero-emblem-region,
:is(#hero, #welcome-title) .hero-taglines-region {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}
:is(#hero, #welcome-title) .hero-brand-region { grid-area: brand; align-items: start; }
:is(#hero, #welcome-title) .hero-emblem-region { grid-area: emblem; }
:is(#hero, #welcome-title) .hero-taglines-region { grid-area: taglines; }
:is(#hero, #welcome-title) .hero-brand-region,
:is(#hero, #welcome-title) .hero-taglines-region {
  position: relative;
  isolation: isolate;
}
:is(#hero, #welcome-title) .hero-constellation {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 12dvh;
  transform: translateX(-50%);
  display: block;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
:is(#hero, #welcome-title) .hero-constellation--sagittarius { width: calc(var(--hero-available-width, 100vw) * .75); height: var(--hero-brand-height); }
:is(#hero, #welcome-title) .hero-content > .hero-constellation--orion {
  left: 0;
  top: var(--hero-orion-top, 65%);
  width: 60dvw;
    margin-top: -5dvh;
    left: 20dvw;
 
  height: var(--hero-orion-height, 30%);
  transform: none;
}
:is(#hero, #welcome-title) .hero-stage,
:is(#hero, #welcome-title) .hero-clock-controls { position: relative; z-index: 1; }
.hero-constellation-star { fill: #fff0c9; }
:is(#hero, #welcome-title) .hero-brand,
:is(#hero, #welcome-title) .hero-taglines { position: relative; z-index: 1; }
:is(#hero, #welcome-title) .hero-artwork[data-hero-layout="landscape"] {
  grid-template-areas: "emblem brand" "emblem taglines";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
:is(#hero, #welcome-title) .hero-artwork[data-hero-layout="landscape"] .hero-brand-region { align-items: start; }
:is(#hero, #welcome-title) .hero-artwork[data-hero-layout="landscape"] .hero-taglines-region { align-items: end; }
:is(#hero, #welcome-title) .hero-artwork[data-hero-layout="landscape"] .hero-constellation--sagittarius { left: auto; right: 0; transform: none; height: var(--hero-brand-height); }
:is(#hero, #welcome-title) .hero-brand,
:is(#hero, #welcome-title) .hero-emblem,
:is(#hero, #welcome-title) .hero-taglines {
  display: block;
  top: 3dvh;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
}
:is(#hero, #welcome-title) .hero-brand { width: var(--hero-brand-width, 100%); height: var(--hero-brand-height, 100%); }
:is(#hero, #welcome-title) .hero-taglines { width: var(--hero-taglines-width, 100%); height: var(--hero-taglines-height, 100%); margin: 1dvh;}
:is(#hero, #welcome-title) .hero-emblem-stack {
  position: relative;
  width: var(--hero-emblem-width, 100%);
  height: var(--hero-emblem-height, 100%);
  max-width: 100%;
  max-height: 100%;
}
:is(#hero, #welcome-title) .hero-emblem { width: 100%; height: 100%; }
:is(#hero, #welcome-title) .categories-carousel-vertical,
:is(#hero, #welcome-title) #heroVerticalSwiper,
:is(#hero, #welcome-title) .services-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}
:is(#hero, #welcome-title) .categories-carousel-vertical { touch-action: none; }
:is(#hero, #welcome-title) #heroVerticalSwiper { touch-action: pan-x; }
:is(#hero, #welcome-title) .services-swiper { touch-action: pan-y; }
:is(#hero, #welcome-title) .swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}
:is(#hero, #welcome-title) #heroVerticalSwiper > .swiper-wrapper { flex-direction: column; }
:is(#hero, #welcome-title) .services-swiper > .swiper-wrapper { flex-direction: row; }
:is(#hero, #welcome-title) .swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
:is(#hero, #welcome-title) .service-card { cursor: pointer; text-align: center; color: #fff; }
:is(#hero, #welcome-title) .service-card,
:is(#hero, #welcome-title) .service-card * { touch-action: manipulation; }
:is(#hero, #welcome-title) .service-icon {
  position: absolute;
  top: 32.23%;
  left: 37.55%;
  width: 24.91%;
  height: 31.33%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  font-size: calc(var(--hero-emblem-width, 320px) * .14);
}
:is(#hero, #welcome-title) .service-icon img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4));
  transition: transform .2s ease;
}
:is(#hero, #welcome-title) .service-card:active .service-icon img,
:is(#hero, #welcome-title) .service-card.active-touch .service-icon img { transform: scale(1.03); }
:is(#hero, #welcome-title) .service-name,
:is(#hero, #welcome-title) .service-desc,
:is(#hero, #welcome-title) .category-title {
  position: absolute;
  left: 6%;
  right: 6%;
  margin: 0;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 4px #000;
}
:is(#hero, #welcome-title) .service-name { top: 24.06%; font-size: max(14px, calc(var(--hero-emblem-width, 320px) * .0346)); font-weight: 700; }
:is(#hero, #welcome-title) .service-desc { top: 67.65%; font-size: max(11px, calc(var(--hero-emblem-width, 320px) * .0228)); }
:is(#hero, #welcome-title) .category-title { top: 74.46%; font-size: max(12px, calc(var(--hero-emblem-width, 320px) * .0277)); font-weight: 700; }
/*:is(#hero, #welcome-title) #heroVerticalSwiper > .swiper-pagination { left: auto; right: 2%; }
:is(#hero, #welcome-title) .services-swiper > .swiper-pagination { bottom: 3%; }
:is(#hero, #welcome-title) .swiper-pagination-bullet { background: #b4a36c; }
:is(#hero, #welcome-title) .swiper-pagination-bullet-active { background: #ffc451; }*/
@media (prefers-reduced-motion: reduce) {
  :is(#hero, #welcome-title) .service-icon img { transition: none; }
}

/* Welcome and home share the artwork; only home reserves space for navigation. */
#welcome-title { --hero-nav-height: 0px; }
#welcome-title .hero-content { grid-template-rows: minmax(0, 1fr) auto; }

/* Quiet, open astronomical scales; no opaque dial covers the original artwork. */
.hero-clock-rings { pointer-events: none; }
.hero-clock-tick { fill: none; stroke: #cdb980; stroke-width: 2; opacity: .42; }
.hero-clock-tick--hour { stroke-width: 3; opacity: .8; }
.hero-clock-number { font: 400 54px Georgia, 'Times New Roman', serif; text-anchor: middle; dominant-baseline: central; fill: #e0cc99; fill-opacity: 1; stroke: #031923; stroke-opacity: .85; stroke-width: 2; paint-order: stroke; }
.hero-clock-ring--lunar .hero-clock-number { font-size: 52px; fill: #d5ceb5; fill-opacity: .94; }
.hero-clock-ring--lunar .hero-clock-tick { stroke: #cbc7b6; opacity: .38; }
.hero-clock-ring--lunar .hero-clock-tick--hour { opacity: .72; }
.hero-clock-sun { fill: #dfc78d; fill-opacity: .78; stroke: #dfc78d; stroke-width: 1.8; stroke-opacity: .85; }
.hero-clock-moon { fill: #d5cdb5; fill-opacity: .9; }
.hero-clock-moon-craters { fill: #293b3f; fill-opacity: .45; }
/* Transparent cursors travel through the numeral centers. The split sightlines
   leave each numeral clear; their facing tips meet when the markers align. */
.hero-clock-reference { opacity: .8; }
.hero-clock-body { fill: none; stroke: #e2ce9d; stroke-opacity: .88; stroke-linecap: round; stroke-linejoin: round; }
.hero-clock-body--lunar { stroke: #ded8c5; stroke-opacity: .84; }
.hero-clock-cursor-outline { fill: none; stroke-width: 2; }
.hero-clock-cursor-axis { fill: none; stroke-width: 1.6; }
.hero-clock-index { fill: none; stroke: #c5b581; stroke-width: 1.4; opacity: .6; }
.hero-clock-controls { min-height: 32px; padding: 3px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hero-compass-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 12px; border: 1px solid rgba(209, 185, 126, .24); border-radius: 20px; color: #b9ae8d; background: rgba(3, 25, 35, .55); font: 400 10px/1.2 system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; touch-action: manipulation; }
.hero-compass-toggle[aria-pressed="true"] { color: #e0ce9a; border-color: rgba(209, 185, 126, .55); }
.hero-compass-toggle:focus-visible { outline: 1px solid #dcc386; outline-offset: 3px; }
.hero-compass-status { color: #bab29e; font: 400 10px/1.3 system-ui, sans-serif; max-width: 260px; text-align: center; }
.hero-compass-status:empty { display: none; }

.hero-timezone-status { flex-basis: 100%; color: #c7bc9c; font: 400 11px/1.4 system-ui, sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
.hero-timezone-status:empty { display: none; }

/* Keep the outer scale available for page scrolling; the card still handles carousel gestures. */
#hero .categories-carousel-vertical,
#hero .swiper-container,
#hero .swiper-wrapper,
#hero .swiper-slide,
#hero .service-card { pointer-events: none; }
#hero .service-icon,
#hero .service-name,
#hero .service-desc,
#hero .category-title,

#hero .swiper-pagination { pointer-events: auto; }

/* The vector globe and its longitude scale share one geographic rotation. */
.hero-earth-layer, .hero-earth-scale { pointer-events: none; }
.hero-earth-tick { fill: none; stroke: #efd184; stroke-width: 1.6; stroke-opacity: .7; }
.hero-earth-tick--major { stroke: #fff0b0; stroke-width: 2.5; stroke-opacity: .95; }
.hero-earth-degree { font: 400 34px Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: central; fill: #ffe9a4; stroke: #052334; stroke-width: 2; paint-order: stroke; letter-spacing: -.4px; }
.hero-earth-index { fill: none; stroke: #ffecb1; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-earth-locate { font-variant-numeric: tabular-nums; }