/* Viking Off-Road motion v1: restrained, accessible, low-overhead. */

/* Brand emblem: orbiting engraved rings and breathing red V emblem. */
.hero-art{isolation:isolate}
.hero-art .art-rings{
  z-index:0;
  border-color:#6a555743;
  box-shadow:0 0 0 67px #1a1a1b26,0 0 0 69px #8a4b5236;
  animation:viking-orbit 34s linear infinite;
  will-change:transform;
}
.hero-art .art-rings::before{
  border:1px dashed #8e646580;
  animation:viking-counter-orbit 18s linear infinite;
}
.hero-art .art-rings::after{
  content:"";position:absolute;inset:-4%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #bf515a44 0deg 1deg,transparent 1deg 29deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
}
.hero-art img{
  position:relative;
  transform-origin:center center;
  animation:viking-emblem-heartbeat 4.8s ease-in-out infinite;
  will-change:transform,filter;
}
.hero-art .v-stroke{animation:viking-big-v-breathe 6.5s ease-in-out infinite}
@keyframes viking-orbit{from{transform:rotate(-15deg)}to{transform:rotate(345deg)}}
@keyframes viking-counter-orbit{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes viking-emblem-heartbeat{
  0%,100%{transform:scale(1);filter:drop-shadow(10px 30px 14px #0009)}
  45%{transform:scale(1.05);filter:drop-shadow(0 0 22px #c32e3c55) drop-shadow(10px 30px 14px #0009)}
  60%{transform:scale(1.025);filter:drop-shadow(0 0 12px #d8425040) drop-shadow(10px 30px 14px #0009)}
}
@keyframes viking-big-v-breathe{0%,100%{opacity:.8}50%{opacity:1}}

/* Headline rotation uses only the line space already occupied by the hero. */
.hero h1.hero-changing{min-height:2.49em;display:block}
.hero-changing .hero-phrase{
  display:block;
  opacity:1;
  transform:translate3d(0,0,0);
  transition:opacity .55s ease,transform .55s ease;
}
.hero-changing .hero-phrase.is-leaving{opacity:0;transform:translate3d(0,12px,0)}
.hero-changing .hero-phrase.is-entering{opacity:0;transform:translate3d(0,-12px,0)}

/* Per-card slide images, deliberately UNDER the R/X letter and all copy. */
.service-card{isolation:isolate}
.service-card .service-visuals{
  position:absolute;inset:0;
  overflow:hidden;z-index:0;
  pointer-events:none;
  background:#222427;
}
.service-card .service-visuals::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(0deg,#1c1e20ef 0%,#1c1e20c7 22%,#1c1e20aa 40%,transparent 87%),
    linear-gradient(90deg,#1b1d1fd1 0%,#1b1d1fa8 37%,#14161866 77%,#15171871 100%);
}
.service-card .service-slide{
  position:absolute;inset:0;z-index:1;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:60% 38%;
  filter:grayscale(.18) saturate(.85) contrast(1.08);
  opacity:0;
  transform:scale(1.03);
  transition:opacity 1.65s ease,transform 6.5s ease;
  will-change:opacity;
}
.service-card .service-slide.is-active{opacity:.67;transform:scale(1)}
.service-card.road .service-slide:nth-child(2){object-position:56% 40%}
.service-card.road .service-slide:nth-child(3){object-position:55% 46%}
.service-card.sxs .service-slide:nth-child(1){object-position:57% 37%}
.service-card.sxs .service-slide:nth-child(2){object-position:53% 44%}
.service-card.sxs .service-slide:nth-child(3){object-position:48% 44%}
.service-card .card-bg-letter{
  z-index:1;color:#ffffff12;pointer-events:none;
  text-shadow:0 0 30px #10111245;
}
.service-card .service-head,
.service-card .service-bottom{position:relative;z-index:3}
.service-card .service-bottom p{color:#e0dfe0;text-shadow:0 1px 5px #000a}
.service-card .service-bottom h3{text-shadow:0 2px 12px #000c}
.service-card .service-head .card-no{text-shadow:0 2px 7px #000e}

/* Minimal footer attribution, consistent with existing links. */
.foot-grid>div:last-child{gap:7px 16px;display:flex;flex-wrap:wrap;align-items:center}
.foot-grid>div:last-child>a{white-space:nowrap}

@media(max-width:720px){
  .hero-art .art-rings{animation-duration:44s}
  .service-card .service-slide.is-active{opacity:.52}
  .service-card .service-visuals::after{
    background:linear-gradient(0deg,#1c1e20f6 0%,#1c1e20dc 34%,#1517188c 70%,#15171896 100%);
  }
  .service-card .card-bg-letter{color:#ffffff18}
  .hero h1.hero-changing{min-height:2.49em}
}
@media(prefers-reduced-motion:reduce){
  .hero-art .art-rings,.hero-art .art-rings::before,
  .hero-art img,.hero-art .v-stroke{animation:none!important;will-change:auto}
  .hero-changing .hero-phrase,.service-card .service-slide{transition:none!important;will-change:auto}
}
