/* ==========================================================================
   NOVATEK — MODERN STYLE LAYER
   Load AFTER nicepage.css + index.css. Adds color system, hover/motion
   design, and an image loading animation — without altering the builder's
   structural/positioning CSS underneath.
   ========================================================================== */

:root {
  --nv-navy:        #0f4deb;
  --nv-navy-2:      #0f4adf;
  --nv-blue:        #2b6cd4;
  --nv-blue-light:  #5b9bf0;
  --nv-orange:      #fb8516;
  --nv-orange-dark: #e0700a;
  --nv-orange-glow: rgba(251, 133, 22, 0.35);
  --nv-ink:         #161a23;
  --nv-grey-600:    #5d6675;
  --nv-grey-200:    #e6e9ef;
  --nv-grey-50:     #f6f8fb;
  --nv-white:       #ffffff;

  --nv-radius:      12px;
  --nv-radius-sm:   7px;
  --nv-ease:        cubic-bezier(.2,.8,.2,1);
  --nv-fast:        180ms var(--nv-ease);
  --nv-slow:        450ms var(--nv-ease);

  --nv-shadow-sm:   0 4px 14px rgba(18, 26, 46, 0.08);
  --nv-shadow-md:   0 14px 32px rgba(18, 26, 46, 0.14);
  --nv-shadow-glow: 0 8px 24px var(--nv-orange-glow);
}

/* ---------------------------------------------------------------------- */
/* TYPOGRAPHY                                                             */
/* ---------------------------------------------------------------------- */
body.u-body {
  font-family: 'Kumbh Sans', 'Montserrat', -apple-system, sans-serif;
  color: var(--nv-ink);
  -webkit-font-smoothing: antialiased;
}

.u-body h1, .u-body h2, .u-body h3, .u-body h4, .u-body h5 {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.01em;
}

.u-body h1 { font-weight: 800; }
.u-body h2, .u-body h3 { font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* NAVIGATION — animated underline + color shift on hover                */
/* ---------------------------------------------------------------------- */
header.u-header .u-nav-link {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--nv-fast), box-shadow var(--nv-fast);
  box-shadow: inset 0 -2px 0 0 transparent;
}

header.u-header .u-nav-1 > .u-nav-item > .u-nav-link:hover {
  box-shadow: inset 0 -2px 0 0 var(--nv-orange);
}

header.u-header .u-nav-link:hover {
  color: var(--nv-orange) !important;
}

/* Dropdown items: subtle slide-in highlight */
.u-nav-popup .u-nav-link {
  transition: background-color var(--nv-fast), padding-left var(--nv-fast), color var(--nv-fast);
}

.u-nav-popup .u-nav-link:hover {
  background-color: var(--nv-orange) !important;
  color: var(--nv-white) !important;
  padding-left: 22px !important;
}

header.u-header {
  box-shadow: var(--nv-shadow-sm);
  transition: box-shadow var(--nv-fast);
}

/* Logo: gentle scale on hover */
.u-logo-image {
  transition: transform var(--nv-slow);
}
a.u-logo:hover .u-logo-image {
  transform: scale(1.05) rotate(-1deg);
}

/* ---------------------------------------------------------------------- */
/* BUTTONS — lift, glow, ripple-ish shine                                */
/* ---------------------------------------------------------------------- */
.u-body .u-btn {
  position: relative;
  overflow: hidden;
  border-radius: var(--nv-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: transform var(--nv-fast), box-shadow var(--nv-fast), background-color var(--nv-fast), color var(--nv-fast) !important;
  z-index: 0;
}

.u-body .u-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-120%);
  transition: transform 600ms var(--nv-ease);
  pointer-events: none;
}

.u-body .u-btn:hover::before {
  transform: translateX(120%);
}

.u-body .u-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--nv-shadow-md);
}

.u-body .u-btn:active {
  transform: translateY(-1px);
}

.u-body .u-btn:focus-visible {
  outline: 2px solid var(--nv-orange);
  outline-offset: 2px;
}

.u-body .u-btn-1:not(.u-button-link),
.u-body .u-btn[class*="palette-1"]:not(.u-button-link) {
  background-color: var(--nv-orange) !important;
  border-color: var(--nv-orange) !important;
}

.u-body .u-btn-1:hover:not(.u-button-link),
.u-body .u-btn[class*="palette-1"]:hover:not(.u-button-link) {
  background-color: var(--nv-orange-dark) !important;
  box-shadow: var(--nv-shadow-glow);
}

/* Text-style "button-link" elements (no fill) get a clear blue color
   instead, so they stay readable against any background and don't
   inherit the solid orange treatment meant for real buttons. */
.u-body .u-btn-1.u-button-link,
.u-body .u-btn.u-button-link[class*="palette-1"] {
  background-color: transparent !important;
  color: var(--nv-blue) !important;
  font-weight: 700 !important;
}

.u-body .u-btn-1.u-button-link:hover,
.u-body .u-btn.u-button-link[class*="palette-1"]:hover {
  color: var(--nv-orange) !important;
}

.u-body .u-btn[class*="palette-2"] {
  background-color: var(--nv-blue) !important;
  border-color: var(--nv-blue) !important;
}

.u-body .u-btn[class*="palette-2"]:hover {
  background-color: var(--nv-navy-2) !important;
}

/* Text/link-style buttons (no fill) still get a hover color sweep */
.u-body .u-button-link:hover {
  color: var(--nv-orange) !important;
}

/* ---------------------------------------------------------------------- */
/* CARDS / CONTAINERS — hover float + shadow                             */
/* ---------------------------------------------------------------------- */
.u-body .u-list-item.u-container-style,
.u-body .u-repeater-item.u-container-style {
  transition: transform var(--nv-fast), box-shadow var(--nv-fast);
  border-radius: var(--nv-radius);
}

.u-body .u-list-item.u-container-style:hover,
.u-body .u-repeater-item.u-container-style:hover {
  transform: translateY(-6px);
  box-shadow: var(--nv-shadow-md);
}

/* Icon pop on card hover */
.u-body .u-icon {
  transition: transform var(--nv-slow), color var(--nv-fast);
}

.u-body .u-list-item:hover .u-icon,
.u-body .u-repeater-item:hover .u-icon {
  transform: scale(1.15) rotate(6deg);
  color: var(--nv-orange) !important;
}

/* ---------------------------------------------------------------------- */
/* HERO STAT COUNTERS                                                    */
/* ---------------------------------------------------------------------- */
.u-section-1-1 .u-text-2,
.u-section-1-1 .u-text-4,
.u-section-1-1 .u-text-6,
.u-section-1-1 .u-text-8 {
  color: var(--nv-white) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4) !important;
}

/* ---------------------------------------------------------------------- */
/* IMAGES — loading shimmer + smooth fade-in on load                     */
/* ---------------------------------------------------------------------- */
.u-gallery-item, .u-back-slide {
  background-color: var(--nv-grey-50);
}

/* Shimmer placeholder shown while an image hasn't finished loading.
   JS toggles .nv-loaded on <img> once 'load' fires. */
img:not(.nv-loaded) {
  background: linear-gradient(
    100deg,
    var(--nv-grey-200) 30%,
    #f0f2f6 50%,
    var(--nv-grey-200) 70%
  );
  background-size: 200% 100%;
  animation: nv-shimmer 1.4s ease-in-out infinite;
}

img.nv-loaded {
  animation: none;
  background: none;
  opacity: 0;
  animation: nv-fade-in 600ms var(--nv-ease) forwards;
}

@keyframes nv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes nv-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* Image hover zoom (gallery, product shots) */
.u-image img,
.u-back-image,
.u-gallery-item img {
  transition: transform 500ms var(--nv-ease), filter var(--nv-fast);
}

.u-gallery-item:hover .u-back-image,
.u-image:hover img {
  transform: scale(1.06);
}

/* Gallery overlay tint on hover for a richer feel */
.u-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--nv-radius-sm);
}

.u-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,26,46,0.55) 100%);
  opacity: 0;
  transition: opacity var(--nv-fast);
  pointer-events: none;
}

.u-gallery-item:hover::after {
  opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* LINKS                                                                  */
/* ---------------------------------------------------------------------- */
.u-body a {
  transition: color var(--nv-fast);
}

.u-body a:hover {
  color: var(--nv-orange);
}

/* ---------------------------------------------------------------------- */
/* FORMS — modern focus states                                           */
/* ---------------------------------------------------------------------- */
.u-body .u-form input,
.u-body .u-form textarea,
.u-body .u-form select {
  border-radius: var(--nv-radius-sm) !important;
  border: 1px solid var(--nv-grey-200) !important;
  transition: border-color var(--nv-fast), box-shadow var(--nv-fast);
}

.u-body .u-form input:focus,
.u-body .u-form textarea:focus,
.u-body .u-form select:focus {
  border-color: var(--nv-blue) !important;
  box-shadow: 0 0 0 3px rgba(43,108,212,0.18) !important;
  outline: none;
}

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                 */
/* ---------------------------------------------------------------------- */
footer.u-footer {
  background-color: var(--nv-navy) !important;
}

footer.u-footer a {
  transition: color var(--nv-fast), padding-left var(--nv-fast);
}

footer.u-footer a:hover {
  color: var(--nv-orange) !important;
}

/* ---------------------------------------------------------------------- */
/* CAROUSEL INDICATORS — clear active vs inactive state                  */
/* ---------------------------------------------------------------------- */
.u-carousel-indicators li {
  background-color: rgba(255,255,255,0.4) !important;
  transition: background-color var(--nv-fast), transform var(--nv-fast);
  cursor: pointer;
}

.u-carousel-indicators li:hover {
  background-color: rgba(255,255,255,0.7) !important;
}

.u-carousel-indicators li.u-active {
  background-color: var(--nv-orange) !important;
  transform: scaleX(1.4);
}

/* ---------------------------------------------------------------------- */
/* OUR CLIENTS — logo grid with white cards, staggered, hover lift       */
/* ---------------------------------------------------------------------- */
.nv-clients-subtitle {
  color: var(--nv-grey-600);
  font-size: 0.95rem;
  margin-top: 8px;
  margin-bottom: 40px;
}

.nv-clients-section {
  background-color: var(--nv-grey-50);
  padding: 30px 24px 60px;
}

.nv-clients-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.nv-client-card {
  width: 150px;
  height: 90px;
  background-color: var(--nv-white);
  border-radius: var(--nv-radius);
  box-shadow: var(--nv-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: transform var(--nv-fast), box-shadow var(--nv-fast);
}

.nv-client-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--nv-shadow-md);
}

.nv-client-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(15%);
  transition: filter var(--nv-fast), transform var(--nv-fast);
}

.nv-client-card:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* gentle vertical stagger like the reference layout, desktop only */
@media (min-width: 768px) {
  .nv-client-card:nth-child(3n+2) { transform: translateY(-14px); }
  .nv-client-card:nth-child(3n+2):hover { transform: translateY(-20px); }
}

@media (max-width: 575px) {
  .nv-client-card { width: 120px; height: 76px; padding: 12px; }
}

/* ---------------------------------------------------------------------- */
/* COVERFLOW CAROUSEL — center-focused slider with auto + manual nav     */
/* ---------------------------------------------------------------------- */
.nv-coverflow {
  position: relative;
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 40px 10px 90px;
}

.nv-coverflow-track {
  position: relative;
  height: 340px;
}

.nv-coverflow-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 300px;
  border-radius: var(--nv-radius);
  background-size: cover;
  background-position: center;
  box-shadow: var(--nv-shadow-lg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  transition: transform 550ms var(--nv-ease), opacity 550ms var(--nv-ease), z-index 0ms;
  will-change: transform, opacity;
}

.nv-coverflow-caption {
  color: var(--nv-white);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding: 14px 12px;
  width: 100%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.65));
  border-radius: 0 0 var(--nv-radius) var(--nv-radius);
  opacity: 0;
  transition: opacity var(--nv-fast);
}

/* Position states set by JS via data-pos attribute */
.nv-coverflow-item[data-pos="center"] {
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
  opacity: 1;
}
.nv-coverflow-item[data-pos="center"] .nv-coverflow-caption {
  opacity: 1;
}

.nv-coverflow-item[data-pos="left1"] {
  transform: translate(-145%, -50%) scale(0.82);
  z-index: 4;
  opacity: 0.85;
}
.nv-coverflow-item[data-pos="right1"] {
  transform: translate(45%, -50%) scale(0.82);
  z-index: 4;
  opacity: 0.85;
}
.nv-coverflow-item[data-pos="left2"] {
  transform: translate(-215%, -50%) scale(0.66);
  z-index: 3;
  opacity: 0.55;
}
.nv-coverflow-item[data-pos="right2"] {
  transform: translate(115%, -50%) scale(0.66);
  z-index: 3;
  opacity: 0.55;
}
.nv-coverflow-item[data-pos="hidden"] {
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.nv-coverflow-item:hover[data-pos="center"] {
  transform: translate(-50%, -50%) scale(1.03);
}

.nv-coverflow-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
}

.nv-coverflow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--nv-grey-200);
  background: var(--nv-white);
  color: var(--nv-navy);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--nv-fast), color var(--nv-fast), transform var(--nv-fast), box-shadow var(--nv-fast);
}

.nv-coverflow-btn:hover {
  background-color: var(--nv-orange);
  color: var(--nv-white);
  box-shadow: var(--nv-shadow-md);
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .nv-coverflow-track { height: 280px; }
  .nv-coverflow-item { width: 200px; height: 260px; }
  .nv-coverflow-item[data-pos="left1"] { transform: translate(-125%, -50%) scale(0.78); }
  .nv-coverflow-item[data-pos="right1"] { transform: translate(25%, -50%) scale(0.78); }
  .nv-coverflow-item[data-pos="left2"],
  .nv-coverflow-item[data-pos="right2"] { opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------------------- */
/* ADVANCED TEST RIGS SECTION — modern background + 2-up auto-scroll    */
/* ---------------------------------------------------------------------- */
#sec-633b.u-section-3 {
  background-image: none !important;
  background-color: var(--nv-navy) !important;
  background: linear-gradient(135deg, var(--nv-navy) 0%, var(--nv-navy-2) 100%) !important;
}

#sec-633b .u-repeater-1 {
  grid-auto-columns: calc(50% - 5px) !important;
  grid-template-columns: repeat(2, calc(50% - 5px)) !important;
}

@media (max-width: 767px) {
  #sec-633b .u-repeater-1 {
    grid-auto-columns: 100% !important;
    grid-template-columns: repeat(1, 100%) !important;
  }
}

/* ---------------------------------------------------------------------- */
/* INDUSTRIAL AUTOMATION SECTION — 3-up auto-scroll, same as Aerospace,   */
/* but keeps its own background color (no blue gradient override here)   */
/* ---------------------------------------------------------------------- */
#sec-71d2 .u-repeater-1 {
  grid-auto-columns: calc(33.3333% - 6.66667px) !important;
  grid-template-columns: repeat(3, calc(33.3333% - 6.66667px)) !important;
  gap: 10px !important;
  min-height: unset !important;
}

#sec-71d2 .u-repeater-item {
  height: 260px !important;
  border-radius: var(--nv-radius);
  overflow: hidden;
}

@media (max-width: 991px) {
  #sec-71d2 .u-repeater-1 {
    grid-auto-columns: calc(50% - 5px) !important;
    grid-template-columns: repeat(2, calc(50% - 5px)) !important;
  }
  #sec-71d2 .u-repeater-item {
    height: 220px !important;
  }
}

@media (max-width: 575px) {
  #sec-71d2 .u-repeater-1 {
    grid-auto-columns: 100% !important;
    grid-template-columns: repeat(1, 100%) !important;
  }
  #sec-71d2 .u-repeater-item {
    height: 200px !important;
  }
}

/* ---------------------------------------------------------------------- */
/* HERO CAROUSEL — modern gradient replacing the blue background          */
/* ---------------------------------------------------------------------- */
.u-section-1-1, .u-section-1-2, .u-section-1-3, .u-section-1-4,
.u-section-1-5, .u-section-1-6, .u-section-1-7, .u-section-1-8 {
  background-image: linear-gradient(115deg, var(--nv-navy) 0%, var(--nv-navy-2) 55%, var(--nv-blue) 100%) !important;
}

/* ---------------------------------------------------------------------- */
/* SCROLLBAR — modern styling instead of default blue                    */
/* ---------------------------------------------------------------------- */
html {
  scrollbar-color: var(--nv-orange) var(--nv-grey-200);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--nv-grey-200);
}

::-webkit-scrollbar-thumb {
  background-color: var(--nv-orange);
  border-radius: 8px;
  border: 2px solid var(--nv-grey-200);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--nv-orange-dark);
}

/* ---------------------------------------------------------------------- */
/* AEROSPACE SECTION — modern background, 3-up auto-scroll               */
/* ---------------------------------------------------------------------- */
#sec-9e8d.u-section-5 {
  background-image: linear-gradient(135deg, var(--nv-navy) 0%, var(--nv-blue) 100%) !important;
}

/* ---------------------------------------------------------------------- */
/* ACCESSIBILITY — touch target sizing (mailto links, gallery nav icons) */
/* ---------------------------------------------------------------------- */
a[href^="mailto:"],
a[href^="tel:"] {
  display: inline-block;
  padding: 6px 4px;
  min-height: 24px;
}

.u-gallery-nav.u-icon-circle {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
}

/* ---------------------------------------------------------------------- */
/* SECTION HEADINGS — keep on one line instead of wrapping to two         */
/* ---------------------------------------------------------------------- */
#block-6 .u-text-1,
#sec-633b .u-text-1,
#sec-71d2 .u-text-1 {
  white-space: nowrap;
}

@media (max-width: 767px) {
  #block-6 .u-text-1,
  #sec-633b .u-text-1,
  #sec-71d2 .u-text-1 {
    white-space: normal;
    font-size: 1.5rem !important;
  }
}

/* ---------------------------------------------------------------------- */
/* OUR PROCESS — diamond step icons, two rows of 5, connectors, no orange */
/* ---------------------------------------------------------------------- */
#sec-86f0 .u-sheet-1 {
  min-height: unset !important;
  padding-bottom: 60px;
}

.nv-process {
  max-width: 1140px;
  margin: 30px auto 0;
  padding: 0 16px;
}

.nv-process-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px 16px;
  margin-bottom: 56px;
  position: relative;
}

.nv-process-row:last-child {
  margin-bottom: 0;
}

.nv-process-step {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* connecting arrow between steps, desktop only */
@media (min-width: 992px) {
  .nv-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 33px;
    left: calc(100% - 6px);
    width: calc(100% - 60px);
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--nv-grey-200) 0,
      var(--nv-grey-200) 6px,
      transparent 6px,
      transparent 12px
    );
    z-index: 0;
  }
}

.nv-process-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  transform: rotate(45deg);
  background-color: var(--nv-white);
  border: 3px solid var(--step-color, var(--nv-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nv-shadow-sm);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  transition: transform var(--nv-fast), box-shadow var(--nv-fast);
}

.nv-process-svg {
  transform: rotate(-45deg);
  width: 30px;
  height: 30px;
  color: var(--step-color, var(--nv-blue));
}

.nv-process-num {
  transform: rotate(-45deg);
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--step-color, var(--nv-blue));
  color: var(--nv-white);
  font-size: 0.7rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nv-shadow-sm);
}

.nv-process-step:hover .nv-process-icon {
  transform: rotate(45deg) scale(1.1);
  box-shadow: var(--nv-shadow-md);
}

.nv-process-step h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--nv-ink);
  max-width: 150px;
  line-height: 1.35;
}

/* Distinct color per step position, deliberately no orange */
.nv-process-row .nv-process-step:nth-child(1) { --step-color: #2b6cd4; }
.nv-process-row .nv-process-step:nth-child(2) { --step-color: #7c5cd6; }
.nv-process-row .nv-process-step:nth-child(3) { --step-color: #1fae8a; }
.nv-process-row .nv-process-step:nth-child(4) { --step-color: #d6457e; }
.nv-process-row .nv-process-step:nth-child(5) { --step-color: #1b2640; }

@media (max-width: 991px) {
  .nv-process-row {
    justify-content: center;
    gap: 36px 20px;
  }
  .nv-process-step {
    flex: 0 1 150px;
  }
}

@media (max-width: 575px) {
  .nv-process-row {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .nv-process-step {
    flex: 1 1 auto;
    width: 100%;
    max-width: 220px;
  }
}

/* ---------------------------------------------------------------------- */
/* WHY CHOOSE US — centered heading, icon features either side of image  */
/* ---------------------------------------------------------------------- */
.nv-why-section {
  background-color: var(--nv-white);
  padding: 80px 20px 90px;
}

.nv-why-wrap {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.nv-why-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
  color: var(--nv-ink);
}

.nv-why-title em {
  font-style: italic;
  color: var(--nv-orange);
}

.nv-why-subtitle {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--nv-grey-600);
  font-size: 1rem;
  line-height: 1.6;
}

.nv-why-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr 0.85fr;
  align-items: flex-start;
  gap: 30px;
  margin-top: 56px;
}

.nv-why-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.nv-why-col-left {
  text-align: right;
  align-items: flex-end;
}

.nv-why-col-right {
  text-align: left;
  align-items: flex-start;
}

.nv-why-item {
  max-width: 280px;
}

.nv-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  color: var(--nv-orange);
}

.nv-why-icon svg {
  width: 30px;
  height: 30px;
}

.nv-why-item h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nv-ink);
  font-family: 'Montserrat', sans-serif;
}

.nv-why-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--nv-grey-600);
}

.nv-why-image {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nv-why-image img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: 440px !important;
  height: 230px !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: var(--nv-radius);
  box-shadow: var(--nv-shadow-md);
}

.nv-why-blob {
  position: absolute;
  top: 14px;
  right: 10%;
  width: 82%;
  max-width: 380px;
  height: 230px;
  aspect-ratio: auto;
  background-color: var(--nv-orange-glow);
  border-radius: var(--nv-radius);
  z-index: 0;
}

.nv-why-btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 62px;
  padding: 15px 38px;
  background-color: var(--nv-orange);
  color: var(--nv-white);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--nv-radius-sm);
  text-decoration: none;
  box-shadow: var(--nv-shadow-glow);
  transition: background-color var(--nv-fast), box-shadow var(--nv-fast), transform var(--nv-fast);
}

.nv-why-btn:hover {
  background-color: var(--nv-orange-dark);
  box-shadow: var(--nv-shadow-md);
  transform: translateY(-2px);
  color: var(--nv-white);
}

@media (max-width: 991px) {
  .nv-why-title {
    font-size: 2.25rem;
  }

  .nv-why-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .nv-why-col,
  .nv-why-col-left,
  .nv-why-col-right {
    text-align: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }

  .nv-why-image {
    order: -1;
  }

  .nv-why-item {
    max-width: 260px;
  }
}

@media (max-width: 575px) {
  .nv-why-section {
    padding: 60px 16px 70px;
  }

  .nv-why-title {
    font-size: 1.875rem;
  }

  .nv-why-col,
  .nv-why-col-left,
  .nv-why-col-right {
    flex-direction: column;
    gap: 36px;
  }
}

/* ---------------------------------------------------------------------- */
/* RAILWAY.HTML — fix oversized leftover min-heights on card grids        */
/* These grids (TEST RIGS, AEROSPACE, etc.) were sized for many more      */
/* items than currently exist, leaving large empty space below cards.    */
/* Scoped to Railway.html's specific section IDs (the u-section-N classes */
/* are reused across other pages with different intended sizing).        */
/* ---------------------------------------------------------------------- */
#sec-5dde .u-repeater-1,
#sec-2c97 .u-repeater-1,
#sec-cc05 .u-repeater-1,
#sec-974a .u-repeater-1 {
  min-height: unset !important;
}

#sec-5dde .u-repeater-item,
#sec-2c97 .u-repeater-item,
#sec-cc05 .u-repeater-item,
#sec-974a .u-repeater-item {
  height: auto !important;
  align-self: start;
}

#sec-5dde .u-sheet-1,
#sec-2c97 .u-sheet-1,
#sec-cc05 .u-sheet-1,
#sec-974a .u-sheet-1 {
  min-height: unset !important;
  padding-bottom: 40px;
}

/* "Read More" buttons on Railway.html card grids: plain blue text link,
   no filled background/border box */
.u-btn.u-btn-rectangle {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  color: var(--nv-blue) !important;
  font-weight: 700 !important;
  padding-left: 0 !important;
}

.u-btn.u-btn-rectangle:hover {
  color: var(--nv-orange-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}

.u-btn.u-btn-rectangle::before {
  display: none !important;
}

/* ---------------------------------------------------------------------- */
/* SCROLL REVEAL (complements your existing sr-section/sr-visible JS)    */
/* ---------------------------------------------------------------------- */
.sr-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--nv-ease), transform 0.8s var(--nv-ease);
  will-change: opacity, transform;
}

.sr-section.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cascading reveal for repeated items inside a section (cards, list items,
   gallery tiles, columns, process steps) — gives the same staggered,
   "piece by piece" feel as the About page's animations, driven by the
   same sr-section/sr-visible scroll JS already on this page. */
.sr-section .u-list-item,
.sr-section .u-gallery-item,
.sr-section .u-layout-cell,
.sr-section .nv-process-step,
.sr-section .nv-why-item,
.sr-section .nv-why-image {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--nv-ease), transform 0.6s var(--nv-ease);
  transition-delay: 0ms;
}

.sr-section.sr-visible .u-list-item,
.sr-section.sr-visible .u-gallery-item,
.sr-section.sr-visible .u-layout-cell,
.sr-section.sr-visible .nv-process-step,
.sr-section.sr-visible .nv-why-item,
.sr-section.sr-visible .nv-why-image {
  opacity: 1;
  transform: translateY(0);
}

.sr-section.sr-visible .u-list-item:nth-child(1),
.sr-section.sr-visible .u-gallery-item:nth-child(1),
.sr-section.sr-visible .u-layout-cell:nth-child(1),
.sr-section.sr-visible .nv-process-step:nth-child(1) { transition-delay: 0ms; }

.sr-section.sr-visible .u-list-item:nth-child(2),
.sr-section.sr-visible .u-gallery-item:nth-child(2),
.sr-section.sr-visible .u-layout-cell:nth-child(2),
.sr-section.sr-visible .nv-process-step:nth-child(2) { transition-delay: 90ms; }

.sr-section.sr-visible .u-list-item:nth-child(3),
.sr-section.sr-visible .u-gallery-item:nth-child(3),
.sr-section.sr-visible .u-layout-cell:nth-child(3),
.sr-section.sr-visible .nv-process-step:nth-child(3) { transition-delay: 180ms; }

.sr-section.sr-visible .u-list-item:nth-child(4),
.sr-section.sr-visible .u-gallery-item:nth-child(4),
.sr-section.sr-visible .u-layout-cell:nth-child(4),
.sr-section.sr-visible .nv-process-step:nth-child(4) { transition-delay: 270ms; }

.sr-section.sr-visible .u-list-item:nth-child(5),
.sr-section.sr-visible .u-gallery-item:nth-child(5),
.sr-section.sr-visible .nv-process-step:nth-child(5) { transition-delay: 360ms; }

.sr-section.sr-visible .u-list-item:nth-child(6),
.sr-section.sr-visible .u-gallery-item:nth-child(6) { transition-delay: 450ms; }

.sr-section.sr-visible .u-list-item:nth-child(7),
.sr-section.sr-visible .u-gallery-item:nth-child(7) { transition-delay: 540ms; }

.sr-section.sr-visible .u-list-item:nth-child(8),
.sr-section.sr-visible .u-gallery-item:nth-child(8) { transition-delay: 630ms; }

.sr-section.sr-visible .u-list-item:nth-child(9),
.sr-section.sr-visible .u-gallery-item:nth-child(9) { transition-delay: 720ms; }

/* nv-why section: left/right items already stack inside their own column,
   keep the second item in each column slightly behind the first */
.sr-section.sr-visible .nv-why-col .nv-why-item:nth-child(2) {
  transition-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .sr-section, .sr-section .u-list-item, .sr-section .u-gallery-item,
  .sr-section .u-layout-cell, .sr-section .nv-process-step,
  .sr-section .nv-why-item, .sr-section .nv-why-image,
  img, .u-btn, .u-gallery-item, .u-back-image {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* ACCESSIBILITY                                                          */
/* ---------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--nv-orange);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* RESPONSIVE TYPE TIGHTENING                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 575px) {
  .u-body h1 { font-size: 1.85rem !important; }
  .u-body h2 { font-size: 1.5rem !important; }
}