/* RC11-D — looped mobile carousel, stable section progress, real typewriter, spacing and motion polish. */

/* Typewriter: reserve a stable inline box so typing never shifts the Hero. */
.nhs.nhs-preset-seo .nhs-typewriter{
  min-height:24px;align-items:center;overflow:visible
}
.nhs.nhs-preset-seo .nhs-typewriter b{
  inline-size:min(calc(var(--nhs-typewriter-ch,18) * 1ch),26ch);
  min-inline-size:12ch;max-inline-size:26ch;
  overflow:hidden;white-space:nowrap;text-overflow:clip;
  will-change:contents
}
.nhs.nhs-preset-seo .nhs-typewriter b::after{margin-inline-start:5px;margin-left:0}

/* The service picker behaves as a controlled loop on touch layouts instead of a free scroll strip. */
@media(max-width:1100px){
  .nhs .nhs-service-tab-tools{display:flex;justify-content:center;gap:10px;margin-bottom:10px}
  .nhs .nhs-service-counter{min-width:74px;padding:0 8px;font-size:9px;color:var(--nhs-t2)}
  .nhs .nhs-service-arrow{width:42px;height:42px;border-radius:14px;box-shadow:none}
  .nhs .nhs-service-index{
    position:relative;display:block!important;overflow:hidden!important;
    min-height:82px;height:82px;padding:0!important;border:0!important;background:transparent!important;
    box-shadow:none!important;scroll-snap-type:none!important;overscroll-behavior:none
  }
  .nhs .nhs-service-index button{
    position:absolute!important;top:4px;inset-inline-start:50%;
    width:min(74vw,310px)!important;max-width:min(74vw,310px)!important;min-width:0!important;
    min-height:72px!important;height:72px;margin:0!important;
    opacity:0;pointer-events:none;z-index:1;
    transform:translateX(-50%) scale(.92);
    transition:transform .30s cubic-bezier(.22,.61,.36,1),opacity .22s ease,border-color .18s ease,background .18s ease!important;
    will-change:transform,opacity
  }
  [dir="rtl"] .nhs .nhs-service-index button{transform:translateX(50%) scale(.92)}
  .nhs .nhs-service-index button.is-active{
    opacity:1;pointer-events:auto;z-index:3;
    transform:translateX(-50%) scale(1)
  }
  [dir="rtl"] .nhs .nhs-service-index button.is-active{transform:translateX(50%) scale(1)}
  .nhs .nhs-service-index button.is-carousel-prev,
  .nhs .nhs-service-index button.is-carousel-next{opacity:.34;z-index:2;pointer-events:auto}
  .nhs .nhs-service-index button.is-carousel-prev{inset-inline-start:6%;transform:translateX(-82%) scale(.88)}
  .nhs .nhs-service-index button.is-carousel-next{inset-inline-start:94%;transform:translateX(-18%) scale(.88)}
  [dir="rtl"] .nhs .nhs-service-index button.is-carousel-prev{transform:translateX(82%) scale(.88)}
  [dir="rtl"] .nhs .nhs-service-index button.is-carousel-next{transform:translateX(18%) scale(.88)}
  .nhs .nhs-service-index button.is-carousel-prev em,
  .nhs .nhs-service-index button.is-carousel-next em,
  .nhs .nhs-service-index button.is-carousel-prev b,
  .nhs .nhs-service-index button.is-carousel-next b{opacity:.72}
}

/* Stable section progress: on phones it becomes a compact horizontal progress capsule,
   never sitting over paragraph text. */
@media(max-width:782px){
  .nhs.nhs-preset-seo{--nhs-rail-safe:34px}
  .nhs.nhs-preset-seo .nhs-rail{
    position:fixed!important;z-index:60!important;
    top:calc(var(--nhs-head,72px) + 7px)!important;right:50%!important;left:auto!important;
    transform:translateX(50%)!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
    gap:3px!important;width:max-content!important;max-width:calc(100vw - 38px)!important;height:26px!important;max-height:none!important;
    padding:3px 7px!important;border:1px solid color-mix(in srgb,var(--nhs-line2) 72%,transparent)!important;
    border-radius:999px!important;background:color-mix(in srgb,var(--nhs-s1) 78%,transparent)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.08)!important;opacity:.72!important;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
  }
  .nhs.nhs-preset-seo .nhs-rail a{
    position:relative!important;width:14px!important;height:18px!important;min-width:14px!important;flex:0 0 14px!important;
    border:0!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important
  }
  .nhs.nhs-preset-seo .nhs-rail a::before{
    position:absolute!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;
    width:4px!important;height:4px!important;border-radius:50%!important;background:var(--nhs-t3)!important;opacity:.62
  }
  .nhs.nhs-preset-seo .nhs-rail a[aria-current="true"]{width:22px!important;min-width:22px!important;flex-basis:22px!important}
  .nhs.nhs-preset-seo .nhs-rail a[aria-current="true"]::before{
    width:14px!important;height:4px!important;border-radius:999px!important;background:var(--nh-accent)!important;
    opacity:1!important;box-shadow:0 0 10px color-mix(in srgb,var(--nh-accent) 34%,transparent)!important
  }
  .nhs.nhs-preset-seo .nhs-rail :is(.nhs-rail-title,.nhs-rail-no){display:none!important}
  .nhs.nhs-runtime-lite .nhs-rail{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--nhs-s1)!important}

  .nhs.nhs-preset-seo .nhs-typewriter{min-height:23px;margin-bottom:11px;overflow:hidden}
  .nhs.nhs-preset-seo .nhs-typewriter b{
    inline-size:min(calc(var(--nhs-typewriter-ch,18) * 1ch),52vw);
    min-inline-size:10ch;max-inline-size:52vw;font-size:9px!important
  }
  .nhs .nhs-service-index{height:78px;min-height:78px}
  .nhs .nhs-service-index button{top:3px;width:min(76vw,292px)!important;max-width:min(76vw,292px)!important;min-height:68px!important;height:68px}
  .nhs .nhs-service-index button.is-carousel-prev{inset-inline-start:3%}
  .nhs .nhs-service-index button.is-carousel-next{inset-inline-start:97%}

  /* Calm vertical rhythm: every scene gets enough separation for progress tracking. */
  .nhs.nhs-preset-seo .nhs-scene{scroll-margin-top:calc(var(--nhs-head,72px) + 44px)}
  .nhs.nhs-preset-seo .nhs-scene + .nhs-scene{border-top:1px solid color-mix(in srgb,var(--nhs-line) 58%,transparent)}
}

@media(max-width:430px){
  .nhs.nhs-preset-seo .nhs-rail{max-width:calc(100vw - 24px)!important;gap:2px!important;padding-inline:5px!important}
  .nhs.nhs-preset-seo .nhs-rail a{width:12px!important;min-width:12px!important;flex-basis:12px!important}
  .nhs.nhs-preset-seo .nhs-rail a[aria-current="true"]{width:18px!important;min-width:18px!important;flex-basis:18px!important}
  .nhs.nhs-preset-seo .nhs-typewriter-prefix{display:inline!important;font-size:7.5px!important}
  .nhs.nhs-preset-seo .nhs-typewriter b{font-size:8.4px!important;max-inline-size:47vw;inline-size:min(calc(var(--nhs-typewriter-ch,18) * 1ch),47vw)}
  .nhs .nhs-service-index button{width:min(78vw,280px)!important;max-width:min(78vw,280px)!important}
}

/* Motion should feel soft, not elastic or layout-driven. */
.nhs .nhs-service-panel,.nhs .nhs-service-stage,.nhs .nhs-service-map,.nhs .nhs-service-tabs-shell{transform:translateZ(0)}
.nhs .nhs-service-stage-shell.is-swapping .nhs-service-visual{opacity:.58}
.nhs .nhs-service-visual{transition:opacity .22s ease!important}
.nhs .nhs-reveal{transition-duration:.48s!important;transition-timing-function:cubic-bezier(.22,.61,.36,1)!important}

@media(prefers-reduced-motion:reduce){
  .nhs .nhs-service-index button{transition:none!important}
  .nhs.nhs-preset-seo .nhs-typewriter b::after{animation:none!important}
  .nhs .nhs-reveal{transition:none!important}
}

.nhs .nhs-service-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1100px){
  /* Keep the compact service-position map fully visible; it is navigation, not another scroller. */
  .nhs .nhs-service-map{
    display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr))!important;
    overflow:visible!important;justify-content:stretch!important;scroll-snap-type:none!important;
    gap:5px!important;padding:7px 8px!important
  }
  .nhs .nhs-service-map button{width:auto!important;min-width:0!important;height:34px!important;scroll-snap-align:none!important}
}
@media(max-width:430px){
  .nhs .nhs-service-map{gap:3px!important;padding:6px!important}
  .nhs .nhs-service-map button{height:32px!important;border-radius:9px!important;font-size:7.5px!important}
  .nhs .nhs-service-map button::before{right:5px!important;left:5px!important;bottom:4px!important}
}
