/*
  Registered non-inheriting so the per-frame parallax writes invalidate only the
  element that consumes them, not the hero's whole subtree. They are written on
  .hero-slides (the consumer), so unregistered engines behave identically.
*/
@property --hero-scroll-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --hero-px {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --hero-py {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

:root {
  --dur-press: 90ms;
  --dur-fast: 240ms;
  --dur-base: 420ms;
  --dur-slow: 620ms;
  --dur-xslow: 900ms;
  --stagger: 70ms;
  --stagger-cap: 5;
  --ease-settle: cubic-bezier(0.16, 0.84, 0.28, 1);
  --dir: 1;
  --origin-start: calc(50% - var(--dir) * 50%);
  --dir-side: right;
  --autoplay-duration: 6000ms;
  /* Hero camera move spans the slide's whole visible life: autoplay tick + crossfade. */
  --hero-motion-duration: calc(var(--autoplay-duration) + var(--dur-xslow));
  /* Absolute drift, so the four gestures stay comparable at every viewport. */
  --hero-drift-inline: clamp(15px, 1.75vw, 28px);
  --hero-drift-block: clamp(12px, 2vh, 20px);
  --shadow-lift:
    0 2px 6px rgb(7 30 45 / 0.1),
    0 24px 60px rgb(0 102 153 / 0.16);
}

html[dir="rtl"] {
  --dir: -1;
  --dir-side: left;
}

.header-sentinel {
  position: absolute;
  inline-size: 1px;
  block-size: 17px;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
}

.site-header::after {
  position: absolute;
  z-index: 1;
  block-size: 2px;
  inset-block-end: -1px;
  inset-inline: 0;
  background: linear-gradient(to var(--dir-side), var(--brand), var(--accent));
  content: "";
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: var(--origin-start) center;
}

.brand img {
  transform-origin: var(--origin-start) center;
  transition: transform var(--dur-base) var(--ease-settle);
}

.site-header.is-scrolled {
  backdrop-filter: blur(12px);
}

.site-header.is-scrolled .brand img {
  transform: scale(0.9);
  transform-origin: var(--origin-start) center;
  transition: transform var(--dur-base) var(--ease-settle);
}

/* Transparent-over-hero header state */
.hero-slider {
  margin-block-start: calc(var(--header-height) * -1);
}

.hero-slide__content {
  padding-block-start: calc(clamp(5rem, 10vh, 8rem) + var(--header-height));
}

html.has-motion .hero-slides {
  inset: -16px;
  transform:
    translate3d(
      calc(var(--hero-px, 0px) * var(--dir)),
      calc(var(--hero-scroll-y, 0px) + var(--hero-py, 0px)),
      0
    );
}

/*
  One camera: every plane drifts the same way, ordered by depth. The copy is the
  plane the reader is parsing, so it never moves. JS writes the grid's offset
  already relative to the plate it sits on.
*/
html.has-motion .hero-slider.is-hero-pointer-active
  .hero-slide.is-active
  .hero-slide__grid {
  transform:
    translate3d(
      calc(var(--hero-grid-px, 0px) * var(--dir)),
      var(--hero-grid-py, 0px),
      0
    );
  will-change: transform;
}

.site-header {
  transition:
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease;
}

.site-header:not(.is-scrolled) {
  border-block-end-color: rgb(255 255 255 / 0.16);
  background: linear-gradient(rgb(4 22 33 / 0.62), rgb(4 22 33 / 0.14));
  backdrop-filter: blur(10px);
}

.brand {
  padding-block: 0.34rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0);
  transition: background-color var(--dur-base) ease;
}

.site-header:not(.is-scrolled) .brand {
  background: rgb(255 255 255 / 0.94);
}

.site-header:not(.is-scrolled) .desktop-nav a {
  color: rgb(255 255 255 / 0.88);
}

.site-header:not(.is-scrolled) .desktop-nav a:hover {
  color: var(--white);
}

.site-header:not(.is-scrolled) :is(.language-toggle, .menu-toggle) {
  border-color: rgb(255 255 255 / 0.34);
  background: rgb(255 255 255 / 0.1);
  color: var(--white);
}

.site-header:not(.is-scrolled) :is(.language-toggle, .menu-toggle):hover {
  border-color: var(--accent);
  background: rgb(255 255 255 / 0.18);
}

.site-header:not(.is-scrolled) .menu-toggle span {
  background: var(--white);
}

body.menu-open .site-header:not(.is-scrolled) {
  border-block-end-color: rgb(148 163 184 / 0.2);
  background: rgb(255 255 255 / 0.985);
}

body.menu-open .site-header:not(.is-scrolled) .brand {
  background: rgb(255 255 255 / 0);
}

body.menu-open .site-header:not(.is-scrolled) :is(.language-toggle, .menu-toggle) {
  border-color: var(--neutral-300);
  background: var(--white);
  color: var(--brand-dark);
}

body.menu-open .site-header:not(.is-scrolled) .menu-toggle span {
  background: var(--navy);
}

html.has-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 18px), 0);
  transition:
    opacity var(--dur-slow) var(--ease) calc(var(--i, 0) * var(--stagger)),
    transform var(--dur-slow) var(--ease) calc(var(--i, 0) * var(--stagger));
}

html.has-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

html.has-motion [data-reveal] .eyebrow::before,
html.has-motion .eyebrow[data-reveal]::before {
  transform: scaleX(0);
  transform-origin: var(--origin-start) center;
  transition:
    transform var(--dur-slow) var(--ease)
    calc(var(--i, 0) * var(--stagger) + 160ms);
}

html.has-motion [data-reveal].is-revealed .eyebrow::before,
html.has-motion .eyebrow[data-reveal].is-revealed::before {
  transform: scaleX(1);
}

@supports (clip-path: inset(0 0 0 0)) {
  html.has-motion .hero-slide {
    clip-path: inset(0 0 100% 0);
    transition:
      opacity var(--dur-xslow) var(--ease),
      visibility var(--dur-xslow) ease,
      clip-path var(--dur-xslow) var(--ease);
  }

  html.has-motion .hero-slide.is-active {
    clip-path: inset(0 0 0 0);
  }
}

html.has-motion .hero-slide__image {
  transition: none;
}

/*
  Resting transform for a slide that carries no animation. Each one is the exact
  `to` frame of that slide's keyframes, so handing off in either direction is a
  no-op.
*/
html.has-motion .hero-slide:nth-child(1) .hero-slide__image {
  transform: translate3d(calc(var(--hero-drift-inline) * var(--dir) * -1), 0, 0)
    scale(1.15);
}

html.has-motion .hero-slide:nth-child(2) .hero-slide__image {
  transform: translate3d(0, var(--hero-drift-block), 0) scale(1.06);
}

html.has-motion .hero-slide:nth-child(3) .hero-slide__image {
  transform: translate3d(calc(var(--hero-drift-inline) * var(--dir)), 0, 0)
    scale(1.14);
}

html.has-motion .hero-slide:nth-child(4) .hero-slide__image {
  transform: translate3d(0, 0, 0) scale(1.16);
}

/*
  `alternate infinite` is deliberate: the camera can never reach a dead end and
  hold a frozen frame, however far the animation clock drifts from the slide
  clock after a pause. On the uninterrupted path one forward pass covers the
  slide's entire visible life exactly. `.is-leaving` keeps the outgoing plate
  moving through the crossfade so the dissolve is never static-into-moving.
*/
html.has-motion .hero-slide:is(.is-active, .is-leaving) .hero-slide__image {
  animation-duration: var(--hero-motion-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

html.has-motion
  .hero-slide:nth-child(1):is(.is-active, .is-leaving)
  .hero-slide__image {
  animation-name: sfal-hero-kenburns-1;
}

html.has-motion
  .hero-slide:nth-child(2):is(.is-active, .is-leaving)
  .hero-slide__image {
  animation-name: sfal-hero-kenburns-2;
}

html.has-motion
  .hero-slide:nth-child(3):is(.is-active, .is-leaving)
  .hero-slide__image {
  animation-name: sfal-hero-kenburns-3;
}

html.has-motion
  .hero-slide:nth-child(4):is(.is-active, .is-leaving)
  .hero-slide__image {
  animation-name: sfal-hero-kenburns-4;
}

html.has-motion .hero-slider.is-hero-in-view
  .hero-slide:is(.is-active, .is-leaving)
  .hero-slide__image {
  will-change: transform;
}

@keyframes sfal-hero-kenburns-1 {
  from {
    transform: translate3d(0, 0, 0) scale(1.06);
  }

  to {
    transform: translate3d(calc(var(--hero-drift-inline) * var(--dir) * -1), 0, 0)
      scale(1.15);
  }
}

@keyframes sfal-hero-kenburns-2 {
  from {
    transform: translate3d(0, 0, 0) scale(1.16);
  }

  to {
    transform: translate3d(0, var(--hero-drift-block), 0) scale(1.06);
  }
}

@keyframes sfal-hero-kenburns-3 {
  from {
    transform: translate3d(0, 0, 0) scale(1.05);
  }

  to {
    transform: translate3d(calc(var(--hero-drift-inline) * var(--dir)), 0, 0)
      scale(1.14);
  }
}

@keyframes sfal-hero-kenburns-4 {
  from {
    transform: translate3d(0, var(--hero-drift-block), 0) scale(1.07);
  }

  to {
    transform: translate3d(0, 0, 0) scale(1.16);
  }
}

html.has-motion .hero-slide .hero-copy > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

html.has-motion .hero-slide.is-active .hero-copy > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease) var(--d, 0ms),
    transform var(--dur-slow) var(--ease) var(--d, 0ms);
}

html.has-motion .hero-copy > :nth-child(1) {
  --d: 120ms;
}

html.has-motion .hero-copy > :nth-child(2) {
  --d: 210ms;
}

html.has-motion .hero-copy > :nth-child(3) {
  --d: 300ms;
}

html.has-motion .hero-copy > :nth-child(4) {
  --d: 390ms;
}

html.has-motion [data-current-slide] {
  display: inline-block;
  min-inline-size: 2ch;
}

html.has-motion [data-current-slide].is-flipping {
  animation: sfal-readout 260ms var(--ease) both;
}

@keyframes sfal-readout {
  from {
    opacity: 0;
    transform: translate3d(0, -55%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

html.has-motion .slider-dot::after {
  position: absolute;
  block-size: 3px;
  inset-block-start: 50%;
  inset-inline: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  content: "";
  pointer-events: none;
  transform: translateY(-50%) scaleX(0);
  transform-origin: var(--origin-start) center;
}

html.has-motion .slider-dot.is-active::after {
  animation: sfal-dot-fill var(--autoplay-duration) linear forwards;
}

.hero-slider.is-autoplay-paused .slider-dot.is-active::after {
  animation-play-state: paused;
}

/*
  Only an explicit stop (pause button, hidden tab, reduced motion) freezes the
  photography. Hover and focus pause the slide timer and the dot fill, but a slow
  camera move is not auto-advancing content — stopping it on hover would leave
  the hero dead for most of a desktop visit.
*/
html.has-motion .hero-slider.is-user-paused
  .hero-slide:is(.is-active, .is-leaving)
  .hero-slide__image {
  animation-play-state: paused;
}

@keyframes sfal-dot-fill {
  from {
    transform: translateY(-50%) scaleX(0);
  }

  to {
    transform: translateY(-50%) scaleX(1);
  }
}

.slider-pause {
  position: absolute;
  z-index: 5;
  display: grid;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  place-items: center;
  inset-block-end: 2rem;
  inset-inline-start: max(1.5rem, calc((100vw - var(--container)) / 2));
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: rgb(5 30 44 / 0.32);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}

.slider-pause svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.slider-pause[aria-pressed="false"] svg:last-child,
.slider-pause[aria-pressed="true"] svg:first-child {
  display: none;
}

html[dir="rtl"] .slider-pause svg:last-child {
  transform: scaleX(-1);
}

.button {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.button svg {
  transform: scaleX(var(--arrow-flip, 1)) translateX(var(--arrow-travel, 0px));
  transition: transform var(--dur-fast) var(--ease-settle);
}

html[dir="rtl"] .button > svg {
  --arrow-flip: -1;
  transform: scaleX(var(--arrow-flip)) translateX(var(--arrow-travel, 0px));
}

.slider-arrow {
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    transform var(--dur-base) var(--ease-settle);
}

.slider-arrow svg {
  transform: scaleX(var(--arrow-flip, 1)) translateX(var(--arrow-travel, 0px));
  transition: transform var(--dur-fast) var(--ease-settle);
}

html[dir="rtl"] .slider-arrow svg {
  --arrow-flip: -1;
  transform: scaleX(var(--arrow-flip)) translateX(var(--arrow-travel, 0px));
}

.button:focus-visible svg,
.slider-arrow:focus-visible svg {
  --arrow-travel: 4px;
}

.link-arrow {
  transform: scaleX(var(--arrow-flip, 1)) translateX(var(--arrow-travel, 0px));
  transition: transform var(--dur-fast) var(--ease-settle);
}

html[dir="rtl"] .link-arrow {
  --arrow-flip: -1;
}

a:focus-visible .link-arrow,
.service-tile:focus-visible .link-arrow,
.product-card:has(a:focus-visible) .link-arrow,
.facility-card:has(a:focus-visible) .link-arrow,
.news-card:has(a:focus-visible) .link-arrow {
  --arrow-travel: 4px;
}

:is(
  .text-link,
  .product-card__body > a,
  .facility-card__body > a,
  .news-card__body > a,
  .service-tile__link
) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: var(--origin-start) 100%;
  background-size: 0% 1.5px;
  transition:
    background-size var(--dur-base) var(--ease-settle),
    color var(--dur-fast) ease;
}

:is(
  .text-link,
  .product-card__body > a,
  .facility-card__body > a,
  .news-card__body > a
):focus-visible {
  background-size: 100% 1.5px;
  text-decoration: none;
}

.service-tile:focus-visible .service-tile__link {
  background-size: 100% 1.5px;
}

.stat {
  position: relative;
  border-inline-start: 2px solid transparent;
  transition:
    border-inline-start-color var(--dur-slow) var(--ease)
    calc(var(--i, 0) * var(--stagger)),
    background-color var(--dur-base) var(--ease) 120ms;
}

.stats-grid.is-revealed .stat {
  border-inline-start-color: var(--accent);
}

.stats-grid.is-reading .stat {
  background: rgb(225 239 246 / 0.55);
}

.stat strong {
  font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.1rem);
}

.stat strong .stat__num {
  display: inline-block;
  margin-block-start: 0;
  color: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: start;
}

/* LSTK line commissions itself from the reader's own scroll progress */
html.has-motion .process-list {
  --lstk-progress: 0;
}

html.has-motion .process-list.is-commissioned {
  --lstk-progress: 1;
}

html.has-motion .process-step {
  --step-start: calc(var(--i, 0) * 0.2);
  --p-node: clamp(0, (var(--lstk-progress) - var(--step-start)) / 0.22, 1);
  --p-line: clamp(0, (var(--lstk-progress) - var(--step-start) - 0.07) / 0.2, 1);
  --p-icon: clamp(0, (var(--lstk-progress) - var(--step-start) - 0.05) / 0.24, 1);
  --p-copy: clamp(0, (var(--lstk-progress) - var(--step-start) - 0.09) / 0.2, 1);
}

html.has-motion .process-step__node {
  opacity: var(--p-node);
  transform: scale(calc(0.84 + 0.16 * var(--p-node)));
}

html.has-motion .process-step:not(:last-child)::after {
  transform: scaleX(var(--p-line));
  transform-origin: var(--origin-start) center;
}

html.has-motion .process-step__node svg :is(path, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p-icon));
}

html.has-motion .process-step__node span,
html.has-motion .process-step h3,
html.has-motion .process-step p {
  opacity: var(--p-copy);
  transform: translate3d(0, calc(12px * (1 - var(--p-copy))), 0);
}

html.has-motion .process-list.is-commissioned :is(
  .process-step__node,
  .process-step__node span,
  .process-step h3,
  .process-step p
) {
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.service-tile {
  background:
    linear-gradient(
      160deg,
      rgb(255 255 255 / 0.075),
      rgb(255 255 255 / 0.025)
    );
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09);
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}

html.has-motion .service-tile[data-reveal].is-reveal-settled {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}

.service-tile__icon {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  transition: transform var(--dur-base) var(--ease-settle);
}

.service-tile:focus-visible,
html.has-motion .service-tile[data-reveal].is-revealed:focus-visible {
  border-color: rgb(0 164 247 / 0.62);
  box-shadow:
    0 0 0 1px rgb(0 164 247 / 0.45),
    0 18px 40px rgb(0 0 0 / 0.32),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
  transform: translateY(-5px);
}

.service-tile:focus-visible .service-tile__icon {
  transform: translateY(-3px);
}

.service-tile:focus-visible .service-tile__link {
  color: #7bd5ff;
}

html.has-motion .service-tile__icon svg :is(path, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset var(--dur-slow) var(--ease)
    calc(var(--i, 0) * var(--stagger) + 140ms);
}

html.has-motion .service-tile.is-revealed .service-tile__icon svg :is(path, circle) {
  stroke-dashoffset: 0;
}

.services-light {
  position: absolute;
  z-index: 0;
  inline-size: 34rem;
  block-size: 34rem;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(140 220 255 / 0.3) 0 6%,
      rgb(0 164 247 / 0.19) 22%,
      rgb(0 164 247 / 0.08) 40%,
      transparent 56%
    );
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform:
    translate3d(
      calc((var(--lx, 0px) - 17rem) * var(--dir)),
      calc(var(--ly, 0px) - 17rem),
      0
    );
  transition: opacity var(--dur-base) ease;
}

.services-section.is-lit .services-light {
  opacity: 1;
}

.product-card {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-base) var(--ease-settle);
}

html.has-motion .product-card[data-reveal].is-reveal-settled {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-base) var(--ease-settle);
}

.product-card::before {
  transform-origin: var(--origin-start) center;
  transition: transform var(--dur-base) var(--ease-settle);
}

.product-card__media::before {
  position: absolute;
  inline-size: 10.5rem;
  block-size: 10.5rem;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgb(0 102 153 / 0.18) 0 0.4deg,
      transparent 0.4deg 7.5deg
    );
  content: "";
  mask-image:
    radial-gradient(
      circle,
      transparent 0 46%,
      black 47% 50%,
      transparent 51%
    );
  pointer-events: none;
}

.product-card__media::after {
  inline-size: 9.5rem;
  block-size: 9.5rem;
  border: 1px dashed rgb(0 102 153 / 0.14);
  opacity: 1;
  transition:
    transform var(--dur-base) var(--ease-settle),
    opacity var(--dur-base) ease;
}

.product-card__media img {
  filter: drop-shadow(0 20px 16px rgb(4 52 78 / 0.18));
  transition: transform var(--dur-base) var(--ease-settle);
}

.product-card:has(a:focus-visible),
html.has-motion .product-card[data-reveal].is-revealed:has(a:focus-visible) {
  border-color: rgb(0 102 153 / 0.3);
  box-shadow: var(--shadow-lift);
  transform: translateY(-8px);
}

.product-card:has(a:focus-visible) .product-card__media img {
  transform: scale(1.045);
}

.product-card:has(a:focus-visible) .product-card__media::after {
  opacity: 0.7;
  transform: scale(1.1);
}

.product-card:has(a:focus-visible)::before {
  transform: scaleX(1);
}

html.has-motion .facility-card .facility-card__media,
html.has-motion .news-card .news-card__media {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 760ms var(--ease)
    calc(var(--i, 0) * var(--stagger));
}

html.has-motion .facility-card.is-revealed .facility-card__media,
html.has-motion .news-card.is-revealed .news-card__media {
  clip-path: inset(0 0 0 0);
}

html.has-motion .facility-card .facility-card__media img,
html.has-motion .news-card .news-card__media img {
  transform: scale(1.1);
  transition:
    transform var(--dur-xslow) var(--ease)
    calc(var(--i, 0) * var(--stagger));
}

html.has-motion .facility-card.is-revealed .facility-card__media img,
html.has-motion .news-card.is-revealed .news-card__media img {
  transform: scale(1);
}

.facility-card__city {
  padding-block: 0.45rem;
  padding-inline: 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-pill);
  background: rgb(5 30 44 / 0.55);
}

.facility-card,
.news-card {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-base) var(--ease-settle);
}

html.has-motion .facility-card[data-reveal].is-reveal-settled,
html.has-motion .news-card[data-reveal].is-reveal-settled {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-base) var(--ease-settle);
}

html.has-motion .facility-card[data-reveal].is-reveal-settled .facility-card__media img,
html.has-motion .news-card[data-reveal].is-reveal-settled .news-card__media img {
  transition: transform var(--dur-base) var(--ease-settle);
}

.facility-card:has(a:focus-visible),
html.has-motion .facility-card[data-reveal].is-revealed:has(a:focus-visible) {
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px);
}

.news-card:has(a:focus-visible),
html.has-motion .news-card[data-reveal].is-revealed:has(a:focus-visible) {
  box-shadow: var(--shadow-lift);
  transform: translateY(-5px);
}

html.has-motion .facility-card[data-reveal].is-revealed:has(a:focus-visible) .facility-card__media img {
  transform: scale(1.045);
}

html.has-motion .news-card[data-reveal].is-revealed:has(a:focus-visible) .news-card__media img {
  transform: scale(1.035);
}

:is(
  .product-card__number,
  .service-tile__index,
  .process-step__node span,
  .hero-index,
  .news-card time
) {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.12em;
}

html[lang="ar"] :is(
  .product-card__number,
  .service-tile__index,
  .news-card time
) {
  letter-spacing: 0.02em;
}

.product-card__number::before,
.service-tile__index::before {
  display: inline-block;
  inline-size: 1px;
  block-size: 0.9rem;
  margin-inline-end: 0.4rem;
  background: currentColor;
  content: "";
  opacity: 0.4;
  vertical-align: -0.12em;
}

.news-card time::before {
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(0 164 247 / 0.18);
  content: "";
  transition: box-shadow var(--dur-base) var(--ease-settle);
  vertical-align: 0.05em;
}

.news-card:has(a:focus-visible) time::before {
  box-shadow: 0 0 0 5px rgb(0 164 247 / 0.22);
}

html.has-motion .trust-chips span[data-reveal].is-reveal-settled {
  transition:
    transform var(--dur-base) var(--ease-settle),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-base) var(--ease-settle);
}

html.has-motion .about-photo-card[data-reveal] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
  transition: clip-path 820ms var(--ease);
}

html.has-motion .about-photo-card[data-reveal].is-revealed {
  clip-path: inset(0 0 0 0);
}

html.has-motion .about-photo-card[data-reveal] img {
  transform: scale(1.08);
  transition: transform var(--dur-xslow) var(--ease);
}

html.has-motion .about-photo-card[data-reveal].is-revealed img {
  transform: scale(1);
}

html.has-motion .stats-grid[data-reveal] {
  transition-delay: 320ms;
}

.stats-grid {
  box-shadow:
    inset 0 1px 0 var(--white),
    var(--shadow-md);
}

html.has-motion .vision-band.is-glowing .vision-band__glow {
  animation: sfal-breathe 16s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes sfal-breathe {
  from {
    opacity: 0.7;
  }

  to {
    opacity: 1;
  }
}

.vision-band__watermark {
  position: absolute;
  z-index: 0;
  inset-block-end: -0.18em;
  inset-inline-end: 2%;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.14);
  font-size: clamp(6rem, 16vw, 12rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.certification-badges span {
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}

.footer-column::before {
  inline-size: 1px;
  block-size: 2.5rem;
  margin-block-end: calc(var(--space-3) * -1);
  background: linear-gradient(var(--accent), transparent);
  content: "";
}

.footer-column a:not(.button) {
  transition:
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-settle);
}

.footer-column a:not(.button):focus-visible {
  color: var(--white);
  transform: translateX(calc(4px * var(--dir)));
}

.footer-bottom {
  border-block-start: 0;
  background-image:
    linear-gradient(
      to var(--dir-side),
      transparent,
      rgb(255 255 255 / 0.14) 18%,
      rgb(255 255 255 / 0.14) 82%,
      transparent
    );
  background-repeat: no-repeat;
  background-position: var(--origin-start) 0;
  background-size: 100% 1px;
}

.button:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: var(--dur-press);
}

:is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(0 164 247 / 0.35);
}

.hero-slider :is(a, button):focus-visible,
.services-section :is(a, button):focus-visible,
.site-footer :is(a, button):focus-visible,
.vision-band :is(a, button):focus-visible,
.site-header:not(.is-scrolled) :is(a, button):focus-visible {
  outline-color: var(--accent);
  box-shadow:
    0 0 0 3px rgb(5 30 44 / 0.55),
    0 0 0 6px rgb(0 164 247 / 0.25);
}

.service-tile:focus-visible,
html.has-motion .service-tile[data-reveal].is-revealed:focus-visible {
  box-shadow:
    0 0 0 1px rgb(0 164 247 / 0.45),
    0 0 0 6px rgb(0 164 247 / 0.18),
    0 18px 40px rgb(0 0 0 / 0.32),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
}

@media (hover: hover) {
  :is(
    .text-link,
    .product-card__body > a,
    .facility-card__body > a,
    .news-card__body > a
  ):hover {
    background-size: 100% 1.5px;
    text-decoration: none;
  }

  .product-card__body > a:hover,
  .facility-card__body > a:hover,
  .text-link:hover {
    text-decoration: none;
  }

  .button:hover svg,
  .slider-arrow:hover svg {
    --arrow-travel: 4px;
  }

  a:hover .link-arrow,
  .service-tile:hover .link-arrow,
  .product-card:hover .link-arrow,
  .facility-card:hover .link-arrow,
  .news-card:hover .link-arrow {
    --arrow-travel: 4px;
  }

  .service-tile:hover,
  html.has-motion .service-tile[data-reveal].is-revealed:hover {
    border-color: rgb(0 164 247 / 0.62);
    box-shadow:
      0 0 0 1px rgb(0 164 247 / 0.45),
      0 18px 40px rgb(0 0 0 / 0.32),
      inset 0 1px 0 rgb(255 255 255 / 0.16);
    transform: translateY(-5px);
  }

  .service-tile:hover .service-tile__icon {
    transform: translateY(-3px);
  }

  .service-tile:hover .service-tile__link {
    background-size: 100% 1.5px;
  }

  .product-card:hover,
  html.has-motion .product-card[data-reveal].is-revealed:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-8px);
  }

  .product-card:hover .product-card__media::after {
    opacity: 0.7;
    transform: scale(1.1);
  }

  .facility-card:hover,
  .news-card:hover,
  html.has-motion .facility-card[data-reveal].is-revealed:hover,
  html.has-motion .news-card[data-reveal].is-revealed:hover {
    box-shadow: var(--shadow-lift);
  }

  html.has-motion .facility-card[data-reveal].is-revealed:hover {
    transform: translateY(-6px);
  }

  html.has-motion .news-card[data-reveal].is-revealed:hover {
    transform: translateY(-5px);
  }

  html.has-motion .facility-card[data-reveal].is-revealed:hover .facility-card__media img {
    transform: scale(1.045);
  }

  html.has-motion .news-card[data-reveal].is-revealed:hover .news-card__media img {
    transform: scale(1.035);
  }

  .news-card:hover time::before {
    box-shadow: 0 0 0 5px rgb(0 164 247 / 0.22);
  }

  .trust-chips span {
    transition:
      transform var(--dur-base) var(--ease-settle),
      border-color var(--dur-fast) ease,
      background-color var(--dur-fast) ease,
      box-shadow var(--dur-base) var(--ease-settle);
  }

  .trust-chips span:hover,
  html.has-motion .trust-chips span[data-reveal].is-revealed:hover {
    border-color: rgb(0 164 247 / 0.5);
    background: var(--white);
    box-shadow: 0 8px 20px rgb(4 74 110 / 0.1);
    transform: translateY(-2px);
  }

  .certification-badges span:hover {
    border-color: rgb(255 255 255 / 0.5);
  }

  .footer-column a:not(.button):hover {
    color: var(--white);
    transform: translateX(calc(4px * var(--dir)));
  }
}

.service-tile:active,
html.has-motion .service-tile[data-reveal].is-revealed:active {
  transform: translateY(-3px) scale(0.995);
  transition-duration: var(--dur-press);
}

.product-card:has(a:active),
html.has-motion .product-card[data-reveal].is-revealed:has(a:active) {
  transform: translateY(-3px) scale(0.995);
  transition-duration: var(--dur-press);
}

.facility-card:has(a:active),
.news-card:has(a:active),
html.has-motion .facility-card[data-reveal].is-revealed:has(a:active),
html.has-motion .news-card[data-reveal].is-revealed:has(a:active) {
  transform: translateY(-3px) scale(0.995);
  transition-duration: var(--dur-press);
}

/* Below ~1500px the edge arrows would sit on the headline, so group all
   three transport controls into one cluster on the content grid instead. */
@media (max-width: 1499px) {
  .slider-arrow {
    inset-block-start: auto;
    inset-block-end: 2rem;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    transform: none;
  }

  .slider-arrow:hover {
    transform: scale(1.05);
  }

  .slider-arrow--previous {
    inset-inline-start: max(1.5rem, calc((100vw - var(--container)) / 2));
  }

  .slider-arrow--next {
    inset-inline-start: calc(max(1.5rem, calc((100vw - var(--container)) / 2)) + 3.2rem);
    inset-inline-end: auto;
  }

  .slider-pause {
    inset-inline-start: calc(max(1.5rem, calc((100vw - var(--container)) / 2)) + 6.4rem);
  }

  .slider-arrow svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }
}

@media (max-width: 640px) {
  .hero-slider {
    block-size: max(650px, 100svh);
  }

  .hero-slide__content {
    padding-block-start: calc(3rem + var(--header-height));
  }
}

@media (max-width: 820px) {
  .slider-arrow,
  .slider-pause {
    inset-block-end: 1.4rem;
  }

  html.has-motion .process-step:not(:last-child)::after {
    transform: scaleY(var(--p-line));
    transform-origin: center 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .process-list {
    --lstk-progress: 1 !important;
  }

  .process-step:not(:last-child)::after,
  .process-step__node span,
  .process-step h3,
  .process-step p {
    opacity: 1 !important;
    transform: none !important;
  }

  .slider-pause {
    display: none;
  }

  .button,
  .product-card,
  .facility-card,
  .news-card,
  .service-tile,
  .trust-chips span,
  .product-card__media img,
  .facility-card__media img,
  .news-card__media img,
  .service-tile__icon,
  .footer-column a:not(.button) {
    transform: none !important;
    transition-property:
      color,
      background-color,
      border-color,
      box-shadow,
      outline-color !important;
  }

  .link-arrow {
    --arrow-travel: 0px !important;
  }

  .hero-slide {
    clip-path: none !important;
  }

  .hero-slide__image,
  .hero-slide:is(.is-active, .is-leaving) .hero-slide__image {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .hero-slides,
  .hero-slide__content,
  .hero-slide__grid {
    transform: none !important;
    will-change: auto !important;
  }

  .vision-band__glow {
    animation: none !important;
  }

  .slider-dot::after {
    display: none;
  }

  .services-light {
    display: none;
  }

  :is(.process-step__node svg, .service-tile__icon svg) :is(path, circle) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .process-step__node {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .site-header::after {
    transition: none;
  }
}