/* Hyfin — styles that sit outside Tailwind's utility set. */

html,
body {
  background-color: #F4F6F6;
  color: #0B2A33;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F4F6F6;
}
::-webkit-scrollbar-thumb {
  background: #C2CACA;
}
.text-balance {
  text-wrap: balance;
}
/* Scroll Reveal System */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Tab / Panel Crossfade animation */
.fade-panel-enter {
  animation: panelFadeSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes panelFadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Radar pulse ring */
@keyframes radarPing {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
/* Status beacons are the one shape that stays round under the
   zero-radius rule. */
.radar-beacon {
  position: relative;
  border-radius: 9999px;
}
.radar-beacon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: currentColor;
  animation: radarPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
/* Accessible motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Compact nav strip: scrollable without a visible scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Spotlight navigation
   The nav is a pill: a wash of ink follows the cursor across it, and a filled
   pill slides behind the page you are on, springing across to whichever item
   is hovered or focused. Both are painted from custom properties that
   assets/js/site.js drives (--spotlight-x, --rule-x/y/width/height). */
.spotlight-nav {
  position: relative;
  isolation: isolate;
}

.spotlight-nav__item {
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.spotlight-nav__item:focus-visible {
  outline: 2px solid #0E8C82;
  outline-offset: 2px;
}

.spotlight-nav__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    120px circle at var(--spotlight-x, 50%) 100%,
    rgba(11, 42, 51, 0.09) 0%,
    transparent 65%
  );
}

.spotlight-nav:hover .spotlight-nav__wash {
  opacity: 1;
}

/* The moving indicator: a soft teal pill sized and placed from the item it
   marks, so it reads as the old filled active pill, only animated. */
.spotlight-nav__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  width: var(--rule-width, 0);
  background: #0E8C82;
  pointer-events: none;
  transform: translateX(var(--rule-x, 0));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nothing springs or fades for readers who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .spotlight-nav__wash {
    display: none;
  }
  .spotlight-nav__indicator {
    transition: none;
  }
}



/* Tiles
   One surface treatment everywhere: white, square, a hairline, and a shadow
   soft enough to lift the tile off the canvas without rounding it. */
.tile {
  box-shadow: 0 1px 2px rgba(11, 42, 51, 0.04), 0 8px 24px -12px rgba(11, 42, 51, 0.12);
}

.tile--hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tile--hover:hover {
  box-shadow: 0 2px 4px rgba(11, 42, 51, 0.06), 0 16px 32px -14px rgba(11, 42, 51, 0.18);
  transform: translateY(-2px);
}

/* Horizontal rail
   The mechanism row scrolls sideways below xl. The fades sit over the cut
   edges so a partly visible column reads as "there is more", not as clipping.
   JS toggles is-visible as the rail scrolls; with no JS both stay off and the
   row simply scrolls. */
.rail-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.rail-fade.is-visible {
  opacity: 1;
}

.rail-fade--start {
  left: 0;
  background: linear-gradient(to right, #F4F6F6 10%, rgba(244, 246, 246, 0));
}

.rail-fade--end {
  right: 0;
  background: linear-gradient(to left, #F4F6F6 10%, rgba(244, 246, 246, 0));
}

@media (min-width: 1280px) {
  .rail-fade {
    display: none;
  }
}

/* Rail arrows
   The fade alone does not tell a first-time visitor that the row moves, so a
   square button sits over each fade whenever there is more in that direction.
   Square and flush, like everything else; teal on white, inverting to Ink on
   hover. Hidden with the fades once the row fits. */
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #FFFFFF;
  border: 1px solid #D7DDDD;
  color: #0A5E56;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.rail-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.rail-arrow:hover,
.rail-arrow:focus-visible {
  background: #0B2A33;
  border-color: #0B2A33;
  color: #FFFFFF;
}

.rail-arrow--start {
  left: 0;
}

.rail-arrow--end {
  right: 0;
}

@media (min-width: 1280px) {
  .rail-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-arrow {
    transition: none;
  }
}

/* Tile hover
   The whole tile darkens a shade and its edge firms up. Written as :hover on
   .tile so it outranks the Tailwind background utility regardless of the order
   the CDN injects its stylesheet. */
.tile {
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s ease;
}

.tile:hover {
  background-color: #EDF1F1;
  border-color: #C2CACA;
  box-shadow: 0 2px 4px rgba(11, 42, 51, 0.07), 0 14px 30px -14px rgba(11, 42, 51, 0.18);
}

/* Portraits read as one set in grey, and the one you point at comes forward
   in colour. */
.portrait img {
  filter: grayscale(1);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.tile:hover .portrait img,
.tile:focus-within .portrait img {
  filter: grayscale(0);
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .portrait img {
    transition: none;
  }
  .tile:hover .portrait img,
  .tile:focus-within .portrait img {
    transform: none;
  }
}


/* Vehicle cards
   A card carries only its name until it is pointed at or focused. The three
   grid rows go from [spacer | name | nothing] to [nothing | name | detail], so
   the name rises to the top of the card and the detail unfolds beneath it.
   Animating grid-template-rows is what lets the detail grow from nothing to its
   natural height without hard-coding one. */
.vehicle {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-height: 17.5rem;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vehicle:hover,
.vehicle:focus-visible,
.vehicle:focus-within {
  grid-template-rows: 0fr auto 1fr;
}

@media (min-width: 1024px) {
  .vehicle {
    min-height: 20rem;
  }
}

.vehicle:focus-visible {
  outline: 2px solid #0E8C82;
  outline-offset: 2px;
}

/* The index only belongs to the opened state, so it is collapsed out of the
   line rather than merely transparent. */
.vehicle__idx {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* Martian Mono sets a noticeably larger cap height than Outfit at the same
   font-size -- 19px against 17px at 24px -- so the number has to come down a
   notch to look the same size as the name beside it. */
.vehicle__num {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 0.88em;
  letter-spacing: -0.02em;
}

.vehicle__bar {
  display: inline-block;
  margin: 0 0.42em 0 0.34em;
  font-weight: 400;
  color: #6FBDB4;
}

.vehicle:hover .vehicle__idx,
.vehicle:focus-visible .vehicle__idx,
.vehicle:focus-within .vehicle__idx {
  max-width: 5rem;
  opacity: 1;
}

.vehicle__reveal {
  overflow: hidden;
  min-height: 0;
}

.vehicle__body {
  opacity: 0;
  padding-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  transition: opacity 0.3s ease 0.1s;
}

.vehicle:hover .vehicle__body,
.vehicle:focus-visible .vehicle__body,
.vehicle:focus-within .vehicle__body {
  opacity: 1;
}

/* No hover to give, so the cards simply stay open. */
@media (hover: none) {
  .vehicle {
    grid-template-rows: 0fr auto 1fr;
  }
  .vehicle__idx {
    max-width: 5rem;
    opacity: 1;
  }
  .vehicle__body {
    opacity: 1;
  }
}

/* Partner wall: the same grey-until-pointed-at treatment as the portraits. */
.logo-wall__item img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.logo-wall__item:hover img,
.logo-wall__item:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .vehicle,
  .vehicle__idx,
  .vehicle__body,
  .logo-wall__item img {
    transition: none;
  }
  .logo-wall__item:hover img,
  .logo-wall__item:focus-visible img {
    transform: none;
  }
}


/* Logo marquee
   One component behind both logo rows. The track holds the list twice and
   slides exactly half its width, so the second copy lands where the first
   started and the loop has no seam. Pointing at the row stops it; pointing at
   a single logo also brings that logo into colour. */
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logo-marquee var(--marquee-duration, 55s) linear infinite;
}

.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.5rem;
  height: 3.5rem;
  padding: 0 0.5rem;
}

.logo-marquee__item img {
  max-height: 2.25rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.logo-marquee__item:hover img,
.logo-marquee__item:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}

/* No animation to pause, so the row becomes a plain scrollable strip. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-marquee__track {
    animation: none;
  }
  .logo-marquee__item img {
    transition: none;
    transform: none;
  }
}

/* Panel
   The one tile treatment across the Overview points, the values and the
   contact audiences: white behind an ink hairline, statement, teal bar,
   supporting line. No eyebrow and no shadow. */
.panel {
  background: #FFFFFF;
  border: 1px solid #0B2A33;
  padding: 1.5rem 1.5rem 1.625rem;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease;
}

.panel:hover,
.panel:focus-within {
  background-color: #FAFBFB;
}

.panel__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0A5E56;
  margin: 0;
}

.panel__rule {
  width: 56px;
  height: 3px;
  background: #0E8C82;
  margin: 0.875rem 0;
  flex: none;
}

.panel__body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #4A5A5A;
  margin: 0;
}


/* Live panels
   Only the contact audiences use these. They are the first thing a visitor
   sees after the Partner with Us button, so they answer the pointer more than
   the panels on the other pages do: the tile lifts, the teal bar runs the full
   width in Signal, and the whole thing settles on a brighter surface. */
.panel--live {
  position: relative;
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color 0.3s ease, border-color 0.3s ease;
}

.panel--live:hover,
.panel--live:focus-visible,
.panel--live:focus-within {
  transform: translateY(-6px);
  background-color: #FFFFFF;
  border-color: #0E8C82;
  box-shadow: 0 2px 4px rgba(11, 42, 51, 0.06), 0 22px 44px -22px rgba(11, 42, 51, 0.4);
}

.panel--live:focus-visible {
  outline: 2px solid #0E8C82;
  outline-offset: 3px;
}

.panel--live .panel__rule {
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.3s ease;
}

.panel--live:hover .panel__rule,
.panel--live:focus-visible .panel__rule,
.panel--live:focus-within .panel__rule {
  width: 100%;
  background: #14CDB8;
}

.panel--live .panel__title,
.panel--live .panel__body {
  transition: color 0.3s ease;
}

.panel--live:hover .panel__title,
.panel--live:focus-visible .panel__title,
.panel--live:focus-within .panel__title {
  color: #0B2A33;
}

.panel--live:hover .panel__body,
.panel--live:focus-visible .panel__body,
.panel--live:focus-within .panel__body {
  color: #26424A;
}

@media (prefers-reduced-motion: reduce) {
  .panel--live,
  .panel--live .panel__rule,
  .panel--live .panel__title,
  .panel--live .panel__body {
    transition: none;
  }
  .panel--live:hover,
  .panel--live:focus-visible,
  .panel--live:focus-within {
    transform: none;
  }
}