/* Bright service imagery and motion layer — owner direction, 2026-07-26. */
.service-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 13rem;
  background: linear-gradient(135deg, #f8fcff, #eaf7fb);
}
.service-visual > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-motion-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.service-motion-graphic {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgb(13 139 171 / 34%));
}
.service-motion-layer:is([data-motion-kind="litter-count"], [data-motion-kind="street-cai"], [data-motion-kind="grass-health"], [data-motion-kind="tree-pruning"]).motion-image-locked .service-motion-graphic {
  position: absolute;
  max-width: none;
  max-height: none;
}
.service-motion-graphic :is(path, circle, rect) { vector-effect: non-scaling-stroke; }
.service-motion-graphic :is(.motion-route, .motion-road-line, .motion-trajectory) {
  fill: none;
  stroke: #0b88a6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12 18;
  animation: service-route-flow 4.8s linear infinite;
}
.service-motion-graphic .motion-surge {
  fill: none;
  stroke: #effdff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 52 950;
  opacity: 0;
  animation: service-surge-flow 6.4s cubic-bezier(.2, .68, .2, 1) infinite;
}
.service-motion-graphic .motion-result {
  fill: none;
  stroke: #21845a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 110;
  animation: service-result-draw 4.6s ease-in-out infinite;
}

/* Litter: one calm scan, three object locks, then an explicit count. */
[data-motion-kind="litter-count"] .motion-count-link {
  stroke: #087f9c;
  stroke-width: 2.5;
  stroke-dasharray: 8 16;
  opacity: .58;
}
[data-motion-kind="litter-count"] .motion-litter-beam {
  fill: rgb(8 127 156 / 12%);
  stroke: rgb(255 255 255 / 72%);
  stroke-width: 1;
  transform: translateY(-125px);
  animation: service-litter-beam 6.2s ease-in-out infinite;
}
[data-motion-kind="litter-count"] .motion-litter-markers rect {
  fill: rgb(255 255 255 / 8%);
  stroke: #087f9c;
  stroke-width: 3;
  stroke-dasharray: 18 10;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-detection-lock 5.4s ease-in-out infinite;
}
[data-motion-kind="litter-count"] .motion-litter-markers rect:nth-child(2) { animation-delay: -3.6s; }
[data-motion-kind="litter-count"] .motion-litter-markers rect:nth-child(3) { animation-delay: -1.8s; }
[data-motion-kind="litter-count"] .motion-count-badges g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-count-badge 5.4s ease-in-out infinite;
}
[data-motion-kind="litter-count"] .motion-count-badges g:nth-child(2) { animation-delay: -3.6s; }
[data-motion-kind="litter-count"] .motion-count-badges g:nth-child(3) { animation-delay: -1.8s; }
[data-motion-kind="litter-count"] .motion-count-badges circle {
  fill: #043b5c;
  stroke: #fff;
  stroke-width: 2;
}
[data-motion-kind="litter-count"] .motion-count-badges text {
  fill: #fff;
  font: 700 17px/1 system-ui, sans-serif;
  text-anchor: middle;
}
[data-motion-kind="litter-count"] .motion-litter-locks circle {
  fill: #effdff;
  stroke: #087f9c;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-count-confirm 5.4s ease-in-out infinite;
}
[data-motion-kind="litter-count"] .motion-litter-locks circle:nth-child(2) { animation-delay: -3.6s; }
[data-motion-kind="litter-count"] .motion-litter-locks circle:nth-child(3) { animation-delay: -1.8s; }

/* Street cleanliness: follow the road, sample four sections, reveal CAI 1–4. */
[data-motion-kind="street-cai"] .motion-cai-route {
  stroke-width: 3.5;
  stroke-dasharray: 10 16;
  opacity: .7;
}
[data-motion-kind="street-cai"] .motion-cai-zones path {
  fill: rgb(8 127 156 / 7%);
  stroke: #087f9c;
  stroke-width: 2.5;
  stroke-dasharray: 14 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-cai-zone-read 7.2s ease-in-out infinite;
}
[data-motion-kind="street-cai"] .motion-cai-zones path:nth-child(2) { animation-delay: -5.4s; }
[data-motion-kind="street-cai"] .motion-cai-zones path:nth-child(3) { animation-delay: -3.6s; }
[data-motion-kind="street-cai"] .motion-cai-zones path:nth-child(4) { animation-delay: -1.8s; }
[data-motion-kind="street-cai"] .motion-debris-boxes rect {
  fill: rgb(255 255 255 / 7%);
  stroke: #effdff;
  stroke-width: 2;
  stroke-dasharray: 9 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-debris-lock 7.2s ease-in-out infinite;
}
[data-motion-kind="street-cai"] .motion-debris-boxes rect:nth-child(2) { animation-delay: -4.8s; }
[data-motion-kind="street-cai"] .motion-debris-boxes rect:nth-child(3) { animation-delay: -2.4s; }
[data-motion-kind="street-cai"] .motion-cai-badges g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-cai-badge 7.2s ease-in-out infinite;
}
[data-motion-kind="street-cai"] .motion-cai-badges g:nth-child(2) { animation-delay: -5.4s; }
[data-motion-kind="street-cai"] .motion-cai-badges g:nth-child(3) { animation-delay: -3.6s; }
[data-motion-kind="street-cai"] .motion-cai-badges g:nth-child(4) { animation-delay: -1.8s; }
[data-motion-kind="street-cai"] .motion-cai-badges circle {
  fill: #043b5c;
  stroke: #fff;
  stroke-width: 2;
}
[data-motion-kind="street-cai"] .motion-cai-badges text {
  fill: #fff;
  font: 700 16px/1 system-ui, sans-serif;
  text-anchor: middle;
}
[data-motion-kind="street-cai"] .motion-cai-samples circle {
  fill: #effdff;
  stroke: #087f9c;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-cai-sample 7.2s ease-in-out infinite;
}
[data-motion-kind="street-cai"] .motion-cai-samples circle:nth-child(2) { animation-delay: -5.4s; }
[data-motion-kind="street-cai"] .motion-cai-samples circle:nth-child(3) { animation-delay: -3.6s; }
[data-motion-kind="street-cai"] .motion-cai-samples circle:nth-child(4) { animation-delay: -1.8s; }
[data-motion-kind="street-cai"] .motion-cai-scanner .motion-scanner-ring {
  fill: rgb(255 255 255 / 8%);
  stroke: #effdff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-scanner-pulse 1.7s ease-out infinite;
}
[data-motion-kind="street-cai"] .motion-cai-scanner .motion-scanner-core {
  fill: #effdff;
  stroke: #087f9c;
  stroke-width: 3;
}

/* Grass: scan the real lawn, then classify healthy, dry, and bare regions. */
[data-motion-kind="grass-health"] .motion-grass-route {
  stroke-width: 3.5;
  stroke-dasharray: 10 17;
  opacity: .72;
}
[data-motion-kind="grass-health"] .motion-grass-zones ellipse {
  stroke-width: 3;
  stroke-dasharray: 15 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-grass-zone-read 7.4s ease-in-out infinite;
}
[data-motion-kind="grass-health"] .motion-grass-zones .motion-zone-healthy {
  fill: rgb(33 132 90 / 9%);
  stroke: #21845a;
}
[data-motion-kind="grass-health"] .motion-grass-zones .motion-zone-dry {
  fill: rgb(224 168 55 / 12%);
  stroke: #d39a25;
  animation-delay: -4.93s;
}
[data-motion-kind="grass-health"] .motion-grass-zones .motion-zone-bare {
  fill: rgb(150 91 48 / 10%);
  stroke: #965b30;
  animation-delay: -2.46s;
}
[data-motion-kind="grass-health"] .motion-grass-labels g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-grass-label 7.4s ease-in-out infinite;
}
[data-motion-kind="grass-health"] .motion-grass-labels g:nth-child(2) { animation-delay: -4.93s; }
[data-motion-kind="grass-health"] .motion-grass-labels g:nth-child(3) { animation-delay: -2.46s; }
[data-motion-kind="grass-health"] .motion-grass-labels rect { stroke: #fff; stroke-width: 1.5; }
[data-motion-kind="grass-health"] .motion-label-healthy rect { fill: #21845a; }
[data-motion-kind="grass-health"] .motion-label-dry rect { fill: #b97809; }
[data-motion-kind="grass-health"] .motion-label-bare rect { fill: #7c4728; }
[data-motion-kind="grass-health"] .motion-grass-labels text {
  fill: #fff;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: .04em;
  text-anchor: middle;
}
[data-motion-kind="grass-health"] .motion-grass-samples circle {
  fill: #fff;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-grass-sample 7.4s ease-in-out infinite;
}
[data-motion-kind="grass-health"] .motion-sample-healthy { stroke: #21845a; }
[data-motion-kind="grass-health"] .motion-sample-dry { stroke: #d39a25; animation-delay: -4.93s; }
[data-motion-kind="grass-health"] .motion-sample-bare { stroke: #965b30; animation-delay: -2.46s; }
[data-motion-kind="grass-health"] .motion-grass-scanner .motion-scanner-ring {
  fill: rgb(255 255 255 / 8%);
  stroke: #effdff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-scanner-pulse 1.7s ease-out infinite;
}
[data-motion-kind="grass-health"] .motion-grass-scanner .motion-scanner-core {
  fill: #effdff;
  stroke: #087f9c;
  stroke-width: 3;
}

/* Tree pruning: trace the tree structure, mark three review reasons, then return a recommendation. */
[data-motion-kind="tree-pruning"] .motion-tree-route {
  stroke-width: 3.5;
  stroke-dasharray: 10 17;
  opacity: .72;
}
[data-motion-kind="tree-pruning"] .motion-tree-zones > * {
  fill: rgb(211 154 37 / 8%);
  stroke: #c78616;
  stroke-width: 3;
  stroke-dasharray: 15 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-tree-zone-read 7.8s ease-in-out infinite;
}
[data-motion-kind="tree-pruning"] .motion-tree-zones .motion-tree-low {
  animation-delay: -5.2s;
}
[data-motion-kind="tree-pruning"] .motion-tree-zones .motion-tree-dense {
  fill: rgb(8 127 156 / 7%);
  stroke: #087f9c;
  animation-delay: -2.6s;
}
[data-motion-kind="tree-pruning"] .motion-tree-labels g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-tree-label 7.8s ease-in-out infinite;
}
[data-motion-kind="tree-pruning"] .motion-tree-labels g:nth-child(2) { animation-delay: -5.2s; }
[data-motion-kind="tree-pruning"] .motion-tree-labels g:nth-child(3) { animation-delay: -2.6s; }
[data-motion-kind="tree-pruning"] .motion-tree-labels rect {
  fill: #9a630c;
  stroke: #fff;
  stroke-width: 1.5;
}
[data-motion-kind="tree-pruning"] .motion-tree-labels g:nth-child(3) rect { fill: #087f9c; }
[data-motion-kind="tree-pruning"] :is(.motion-tree-labels, .motion-tree-recommendation) text {
  fill: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .035em;
  text-anchor: middle;
}
[data-motion-kind="tree-pruning"] .motion-tree-samples circle {
  fill: #fff;
  stroke: #c78616;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-tree-sample 7.8s ease-in-out infinite;
}
[data-motion-kind="tree-pruning"] .motion-tree-samples circle:nth-child(2) { animation-delay: -5.2s; }
[data-motion-kind="tree-pruning"] .motion-tree-samples circle:nth-child(3) { stroke: #087f9c; animation-delay: -2.6s; }
[data-motion-kind="tree-pruning"] .motion-tree-scanner .motion-scanner-ring {
  fill: rgb(255 255 255 / 8%);
  stroke: #effdff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-scanner-pulse 1.7s ease-out infinite;
}
[data-motion-kind="tree-pruning"] .motion-tree-scanner .motion-scanner-core {
  fill: #effdff;
  stroke: #087f9c;
  stroke-width: 3;
}
[data-motion-kind="tree-pruning"] .motion-tree-recommendation {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-tree-recommendation 7.8s ease-in-out infinite;
}
[data-motion-kind="tree-pruning"] .motion-tree-recommendation rect {
  fill: #043b5c;
  stroke: #fff;
  stroke-width: 1.5;
}
[data-motion-kind="tree-pruning"] .motion-tree-recommendation text { font-size: 12px; }

/* Vehicle event: track the source, follow the object arc, then mark the review moment. */
[data-motion-kind="vehicle-event"] .motion-track-box {
  fill: rgb(255 255 255 / 5%);
  stroke: #0b88a6;
  stroke-width: 3;
  stroke-dasharray: 18 11;
  animation: service-track-focus 4.2s ease-in-out infinite;
}
[data-motion-kind="vehicle-event"] .motion-trajectory { stroke-width: 4; stroke-dasharray: 9 16; animation-duration: 3.9s; }
[data-motion-kind="vehicle-event"] .motion-event-ring {
  fill: rgb(255 255 255 / 7%);
  stroke: #0b88a6;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-event-pulse 3.6s ease-out infinite;
}
[data-motion-kind="vehicle-event"] .motion-event-core { fill: #effdff; stroke: #0b88a6; stroke-width: 3; }
[data-motion-kind="vehicle-event"] .motion-review-brackets path {
  fill: none;
  stroke: #effdff;
  stroke-width: 5;
  stroke-linecap: round;
  animation: service-review-lock 4.5s ease-in-out infinite;
}

/* Public service preview cards. */
.ic-public-brand [data-services-preview] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-public-brand .pub-service-card {
  overflow: hidden;
  padding: 0;
}
.ic-public-brand .pub-service-card::after,
.ic-public-brand .pub-catalog-card::after { display: none; }
.ic-public-brand .pub-service-card .service-visual { min-height: clamp(12rem, 18vw, 16rem); }
.pub-service-card-body { padding: clamp(1.4rem, 3vw, 2rem); }
.ic-public-brand .pub-service-card h3 { margin-top: 0; }

/* Services catalog — every entry is an image-led banner. */
.ic-public-brand .pub-catalog-card {
  display: grid;
  grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  padding: 0;
  border-radius: 1.35rem;
}
.pub-catalog-card .service-visual { min-height: 100%; }
.pub-catalog-body { padding: clamp(1.5rem, 4vw, 3rem); }
.pub-catalog-head { justify-content: flex-end; }
.pub-catalog-index { color: #8ca2af; }

/* Full service detail hero — bright image with readable light-space copy. */
.ic-public-brand .pub-detail-hero {
  min-height: clamp(34rem, 56vw, 47rem);
  display: grid;
  align-items: center;
  background: #f8fcff;
}
.ic-public-brand .pub-detail-hero::after {
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(90deg, #fffefa 0 29%, rgb(255 254 250 / 94%) 42%, rgb(255 254 250 / 44%) 64%, transparent 82%);
}
[dir="rtl"] .ic-public-brand .pub-detail-hero::after {
  background: linear-gradient(270deg, #fffefa 0 29%, rgb(255 254 250 / 94%) 42%, rgb(255 254 250 / 44%) 64%, transparent 82%);
}
.pub-detail-media { position: absolute; z-index: -2; inset: 0; }
.pub-detail-media > img { object-position: center; }
.pub-detail-hero .pub-wrap { position: relative; z-index: 3; }
.pub-detail-hero .pub-wrap > :not(.pub-actions) { max-width: min(42rem, 54%); }
.pub-detail-hero .pub-actions { max-width: min(42rem, 54%); }

/* Logo spotlight in the public and authenticated service hubs. */
.pub-services-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .7fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.pub-services-hero-copy { position: relative; z-index: 3; }
.pub-brand-spotlight {
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(100%, 25rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgb(4 38 74 / 10%);
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0 1.8rem 4.5rem rgb(4 38 74 / 13%);
}
.pub-brand-spotlight > img { display: block; width: 100%; height: 100%; object-fit: contain; }

.pub-connection-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(14rem, .75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid #cfe9ef;
  border-radius: 1.6rem;
  background: linear-gradient(135deg, #fff 0%, #f0fbfd 58%, #fff8e9 100%);
  box-shadow: 0 1.5rem 4rem rgb(4 38 74 / 8%);
}
.pub-connection-banner h2 { max-width: 14ch; }
.pub-connection-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pub-connection-step {
  min-height: 9rem;
  padding: 1.25rem;
  border: 1px solid rgb(23 106 178 / 14%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 .75rem 2rem rgb(4 38 74 / 6%);
}
.pub-connection-step span { display: block; margin-bottom: 1.8rem; color: #a5742f; font: 800 .78rem/1 ui-monospace, monospace; }
.pub-connection-step strong { color: #04264a; }

/* Authenticated service hub: bright rather than mysterious. */
.service-hub .service-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  border-color: #d1e7ef;
  background: linear-gradient(135deg, #fff 0%, #edf9fd 62%, #fff8ea 100%);
  color: #04264a;
  box-shadow: 0 1.5rem 4rem rgb(3 24 44 / 10%);
}
.service-hub .service-hub-hero::after { display: none; }
.service-hub .service-hub-hero h1 { color: #04264a; }
.service-hub .service-hub-hero p:last-child { color: #526875; }
.service-hub .service-eyebrow { color: #9a6d2e; }
.service-hub-brand { position: relative; isolation: isolate; overflow: hidden; border-radius: 1.5rem; background: #fff; box-shadow: 0 1rem 3rem rgb(3 24 44 / 10%); }
.service-hub-brand > img { display: block; width: 100%; height: auto; }
.service-family-card { overflow: hidden; padding-top: 13.5rem; }
.service-family-card > .service-visual { position: absolute; inset: 0 0 auto; height: 11.5rem; min-height: 0; }
.service-family-card::before { z-index: 3; }

/* Owner workspace hero uses the same bright vehicle visual. */
.service-workspace-hero {
  background-color: #f5fbff;
  background-image: var(--service-hero-image, none), linear-gradient(135deg, #fff, #edf9fd);
  color: #04264a;
}
.service-workspace-hero::after {
  background: linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 88%) 42%, rgb(255 255 255 / 18%) 72%, transparent 86%);
}
[dir="rtl"] .service-workspace-hero::after {
  background: linear-gradient(270deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 88%) 42%, rgb(255 255 255 / 18%) 72%, transparent 86%);
}
.service-workspace-hero h1 { color: #04264a; }
.service-workspace-hero-lead { color: #526875; }
.service-workspace-badge { border-color: rgb(4 38 74 / 15%); background: rgb(255 255 255 / 78%); color: #04264a; }

/* Public footer contrast: bright surface, dark readable type. */
.ic-public-brand footer.site {
  position: relative;
  border-top: 0;
  background: #edf7fa;
  color: #04264a;
}
.ic-public-brand footer.site::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #d0a35b 0 28%, #20cce5 28% 46%, #176ab2 46% 100%);
}
.ic-public-brand footer.site .foot { color: #2e556c; font-size: .78rem; font-weight: 700; }

@keyframes service-route-flow { to { stroke-dashoffset: -120; } }
@keyframes service-surge-flow {
  0%, 12% { stroke-dashoffset: 1000; opacity: 0; }
  20%, 76% { opacity: .88; }
  88%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes service-result-draw {
  0%, 24% { stroke-dashoffset: 110; opacity: 0; }
  42%, 78% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .28; }
}
@keyframes service-litter-beam {
  0%, 10% { transform: translateY(-125px); opacity: 0; }
  22%, 76% { opacity: .8; }
  90%, 100% { transform: translateY(285px); opacity: 0; }
}
@keyframes service-detection-lock {
  0%, 16%, 100% { opacity: .16; transform: scale(.94); stroke-dashoffset: 56; }
  34%, 78% { opacity: .95; transform: scale(1); stroke-dashoffset: 0; }
}
@keyframes service-count-badge {
  0%, 24%, 100% { opacity: 0; transform: translateY(7px); }
  38%, 76% { opacity: 1; transform: translateY(0); }
}
@keyframes service-count-confirm {
  0%, 22%, 100% { opacity: .22; transform: scale(.72); }
  38%, 70% { opacity: 1; transform: scale(1); }
}
@keyframes service-cai-zone-read {
  0%, 18%, 100% { opacity: .12; transform: scale(.97); stroke-dashoffset: 46; }
  34%, 66% { opacity: .88; transform: scale(1); stroke-dashoffset: 0; }
}
@keyframes service-cai-badge {
  0%, 26%, 100% { opacity: 0; transform: translateY(6px) scale(.88); }
  40%, 68% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes service-cai-sample {
  0%, 20%, 100% { opacity: .2; transform: scale(.65); }
  36%, 68% { opacity: 1; transform: scale(1); }
}
@keyframes service-debris-lock {
  0%, 18%, 100% { opacity: .12; transform: scale(.94); stroke-dashoffset: 38; }
  34%, 68% { opacity: .9; transform: scale(1); stroke-dashoffset: 0; }
}
@keyframes service-scanner-pulse {
  0% { opacity: .9; transform: scale(.72); }
  72%, 100% { opacity: 0; transform: scale(1.45); }
}
@keyframes service-grid-breathe {
  0%, 100% { opacity: .2; stroke-dashoffset: 0; }
  50% { opacity: .62; stroke-dashoffset: -80; }
}
@keyframes service-health-sweep {
  0%, 10% { transform: translateX(-260px); opacity: 0; }
  24%, 76% { opacity: .72; }
  90%, 100% { transform: translateX(560px); opacity: 0; }
}
@keyframes service-health-zone {
  0%, 100% { opacity: .18; transform: scale(.82); }
  48%, 72% { opacity: .82; transform: scale(1); }
}
@keyframes service-grass-zone-read {
  0%, 18%, 100% { opacity: .12; transform: scale(.9); stroke-dashoffset: 48; }
  32%, 67% { opacity: .92; transform: scale(1); stroke-dashoffset: 0; }
}
@keyframes service-grass-label {
  0%, 24%, 100% { opacity: 0; transform: translateY(7px) scale(.9); }
  36%, 68% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes service-grass-sample {
  0%, 18%, 100% { opacity: .2; transform: scale(.7); }
  34%, 70% { opacity: 1; transform: scale(1.22); }
}
@keyframes service-tree-zone-read {
  0%, 18%, 100% { opacity: .1; transform: scale(.92); stroke-dashoffset: 52; }
  33%, 67% { opacity: .9; transform: scale(1); stroke-dashoffset: 0; }
}
@keyframes service-tree-label {
  0%, 24%, 100% { opacity: 0; transform: translateY(7px) scale(.9); }
  36%, 68% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes service-tree-sample {
  0%, 18%, 100% { opacity: .2; transform: scale(.7); }
  34%, 70% { opacity: 1; transform: scale(1.22); }
}
@keyframes service-tree-recommendation {
  0%, 48%, 100% { opacity: 0; transform: translateY(8px) scale(.9); }
  60%, 86% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes service-track-focus {
  0%, 100% { opacity: .3; stroke-dashoffset: 0; }
  48% { opacity: .95; stroke-dashoffset: -90; }
}
@keyframes service-event-pulse {
  0% { opacity: .9; transform: scale(.45); }
  76%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes service-review-lock {
  0%, 100% { opacity: .3; transform: translateY(4px); }
  48%, 72% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
  .ic-public-brand [data-services-preview],
  .ic-public-brand .pub-catalog-card,
  .pub-services-hero-layout,
  .pub-connection-banner,
  .service-hub .service-hub-hero { grid-template-columns: 1fr; }
  .pub-brand-spotlight { justify-self: center; width: min(20rem, 80vw); }
  .pub-catalog-card .service-visual { min-height: 18rem; }
  .service-hub-brand { width: min(18rem, 72vw); justify-self: center; }
}

@media (max-width: 640px) {
  .ic-public-brand [data-services-preview] { grid-template-columns: 1fr; }
  .pub-connection-steps { grid-template-columns: 1fr; }
  .pub-connection-step { min-height: 0; }
  .pub-connection-step span { margin-bottom: .75rem; }
  .ic-public-brand .pub-detail-hero { min-height: 43rem; align-items: end; padding-top: 15rem; }
  .ic-public-brand .pub-detail-hero::after,
  [dir="rtl"] .ic-public-brand .pub-detail-hero::after {
    background: linear-gradient(0deg, #fffefa 0 45%, rgb(255 254 250 / 94%) 63%, transparent 88%);
  }
  .pub-detail-hero .pub-wrap > :not(.pub-actions), .pub-detail-hero .pub-actions { max-width: 100%; }
  .pub-detail-media > img { object-position: 70% center; }
  [dir="rtl"] .pub-detail-media > img { object-position: 30% center; }
  .pub-service-detail[data-service="tree-pruning-assessment"] .pub-detail-media > img { object-position: 75% center; }
  [dir="rtl"] .pub-service-detail[data-service="tree-pruning-assessment"] .pub-detail-media > img { object-position: 25% center; }
  .service-motion-graphic { filter: drop-shadow(0 0 5px rgb(13 139 171 / 30%)); }
}

@media (prefers-reduced-motion: reduce) {
  .service-motion-graphic * {
    animation-duration: 8.5s !important;
    animation-iteration-count: infinite !important;
  }
  .service-motion-graphic :is(.motion-health-sweep, .motion-litter-scan) { opacity: .42; }
}