/* A clear maritime profile: imagery first, confident type, quiet movement. */
header {
  height: 130px;
  padding: 0 6%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 80px 50px;
  background: #fff;
  color: var(--ink);
  border: 0
}

header .brand {
  width: 235px
}

header .brand img {
  filter: none
}

.header-promise {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 2px;
  color: #627780
}

.header-promise i {
  font-style: normal;
  color: var(--red);
  margin: 0 12px
}

nav {
  grid-column: 1/-1;
  justify-content: center;
  gap: 0;
  height: 50px;
  background: #f1f5f7;
  margin: 0 -6.82%;
  padding: 0 6%;
  border-top: 1px solid #eaf0f2;
  border-bottom: 1px solid #e2e9ed
}

nav>a {
  height: 50px;
  padding: 16px 32px;
  transition: background .2s
}

nav>a:hover {
  background: #e3eaee;
  color: var(--ink)
}

nav>a:first-child {
  border-bottom: 2px solid var(--red)
}

nav .nav-contact {
  background: none;
  color: var(--ink);
  margin: 0;
  padding: 16px 32px
}

nav .nav-contact:hover {
  background: var(--red);
  color: #fff
}

html {
  scroll-padding-top: 130px
}

.hero {
  height: auto;
  aspect-ratio: 1.95;
  min-height: 0;
  max-height: 650px;
  background: #bad6e3;
  color: #fff
}

.hero-image {
  background-position: center;
  background-size: cover;
  transform: none;
  filter: none
}

.hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(transparent, #0c263455);
  font-size: 11px;
  letter-spacing: 1.7px
}

.hero-caption button {
  color: white;
  background: #142d3c75;
  border: 1px solid #ffffff55;
  border-radius: 2px;
  font-size: 11px;
  padding: 8px 12px;
  letter-spacing: .2px
}

.hero-caption button:hover {
  background: #142d3cc0
}

#ocean {
  transition: opacity .7s
}

.welcome {
  text-align: center;
  padding: 64px 6% 65px;
  background: #fff
}

.welcome .eyebrow {
  font-size: 11px;
  margin-bottom: 22px;
  letter-spacing: 2.5px
}

.welcome h1 {
  font-family: 'DM Sans', Arial, sans-serif;
  text-transform: none;
  font-size: clamp(34px, 3.7vw, 56px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -1.8px;
  margin: 0 0 24px
}

.welcome h1 em {
  color: var(--red)
}

.welcome>p:not(.eyebrow) {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 24px
}

.welcome-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  font-weight: 650;
  color: var(--red);
  padding: 12px 0;
  border-bottom: 1px solid #ed1c2e55
}

.welcome-link:hover {
  border-color: var(--red)
}

.intro {
  border-top: 1px solid #e6edf1
}

.intro h2 {
  font-size: clamp(38px, 4.1vw, 60px)
}

.section {
  padding-top: 85px;
  padding-bottom: 85px
}

.metrics {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 44px;
  padding-bottom: 44px
}

.metrics>div {
  border-color: var(--line)
}

.metrics strong {
  color: var(--red);
  font-size: clamp(50px, 5.2vw, 78px)
}

.metrics small {
  color: var(--muted)
}

.capacity-note {
  border-bottom: 1px solid var(--line)
}

.fleet-photo {
  min-height: 425px
}

.reliability {
  background: #143441
}

.reliability-title h2 em {
  color: #f65c67
}

.reliability .eyebrow {
  color: #ff7d87
}

.safety {
  background: #f3f8fa
}

.contact {
  background: #143441
}

.contact em {
  color: #ff7d87
}

.contact .white {
  background: var(--red);
  color: white
}

.contact .light {
  color: #ff9ca3
}

.contact-info>span {
  color: #c6d7df
}

.contact .assessment p {
  color: #c6d7df
}

.contact-info h3 {
  margin-top: 35px
}

footer {
  background: #fff
}

@media(min-width:1600px) {
  .hero {
    aspect-ratio: auto;
    height: 650px
  }

  .hero-image {
    background-size: cover
  }
}

@media(max-width:1000px) {

  nav>a,
  nav .nav-contact {
    padding-left: 22px;
    padding-right: 22px
  }

  .hero {
    aspect-ratio: 1.8;
    max-height: none
  }

  .welcome {
    padding-top: 50px;
    padding-bottom: 50px
  }
}

@media(max-width:760px) {
  header {
    height: 72px;
    display: flex;
    padding: 0 6%
  }

  .header-promise {
    display: none
  }

  header .brand {
    width: 180px
  }

  nav {
    display: none;
    margin: 0;
    padding: 20px 6%;
    height: auto;
    top: 72px;
    background: #fff;
    border: 0
  }

  nav.open {
    display: flex;
    gap: 0
  }

  nav>a,
  nav .nav-contact {
    height: auto;
    padding: 16px 0;
    margin: 0
  }

  nav>a:first-child {
    border: 0
  }

  nav .nav-contact {
    color: var(--red)
  }

  .hero {
    aspect-ratio: 1.18;
    min-height: 0;
    max-height: none
  }

  .hero-caption {
    padding: 14px 5%;
    font-size: 9px;
    letter-spacing: 1px
  }

  .hero-caption button {
    font-size: 10px;
    padding: 7px 9px
  }

  .welcome {
    padding: 38px 6% 44px
  }

  .welcome .eyebrow {
    font-size: 10px;
    margin-bottom: 17px;
    letter-spacing: 2px
  }

  .welcome h1 {
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 1.18
  }

  .welcome>p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.7
  }

  .welcome>p br {
    display: none
  }

  .section {
    padding-top: 60px;
    padding-bottom: 60px
  }

  .intro h2 {
    font-size: 42px
  }

  .metrics {
    padding-top: 30px;
    padding-bottom: 30px
  }

  .metrics>div {
    border-color: var(--line)
  }

  .metrics strong {
    font-size: 54px
  }

  .fleet-photo {
    min-height: 300px
  }

  html {
    scroll-padding-top: 72px
  }

  .contact h2 {
    font-size: 43px
  }
}

/* 2026 local direction: editorial scale, fewer boxes, sharper hierarchy. */
header {
  height: 92px;
  display: flex;
  grid-template: none;
  padding: 0 5%;
  background: #08161d;
  color: #fff;
  position: sticky;
  top: 0
}

header .brand img {
  filter: brightness(0) invert(1)
}

.header-promise {
  margin-left: auto;
  margin-right: 42px;
  color: #9db0b9
}

nav {
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none
}

.menu {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px
}

.menu span {
  font-size: 20px
}

nav.open {
  height: auto;
  opacity: 1;
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  color: var(--ink);
  margin: 0;
  padding: 0 5%;
  box-shadow: 0 18px 40px #0718202b
}

nav.open>a,
nav.open .nav-contact {
  display: flex;
  height: 74px;
  align-items: center;
  padding: 0 24px;
  border-left: 1px solid var(--line);
  margin: 0;
  background: #fff;
  color: var(--ink)
}

nav.open>a:hover {
  background: var(--red);
  color: #fff
}

html {
  scroll-padding-top: 92px
}

.hero {
  height: calc(100svh - 92px);
  min-height: 690px;
  max-height: 900px;
  aspect-ratio: auto;
  background: #08161d
}

.hero-image {
  filter: saturate(.72) contrast(1.12);
  background-position: 57% center
}

.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #071820eb 0%, #071820a8 42%, #0718201a 76%), linear-gradient(0deg, #071820d1 0%, transparent 45%);
  pointer-events: none
}

.hero-overlay {
  position: absolute;
  z-index: 2;
  left: 5%;
  top: 8%;
  bottom: 13%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff
}

.hero-kicker {
  font-size: 11px;
  letter-spacing: 2.3px;
  font-weight: 700;
  margin-bottom: 34px
}

.hero-kicker:before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--red);
  margin: 0 16px 4px 0
}

.hero h1 {
  font-size: clamp(86px, 10.8vw, 174px);
  line-height: .69;
  letter-spacing: -.055em;
  margin: 0
}

.hero h1 span,
.hero h1 em {
  display: block
}

.hero h1 span:nth-child(2) {
  margin-left: .26em;
  color: transparent;
  -webkit-text-stroke: 1.4px #fff
}

.hero h1 em {
  margin-left: .62em;
  color: var(--red)
}

.hero-copy {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 40px 0 0 39%;
  max-width: 540px
}

.hero-copy p {
  font-size: 16px;
  line-height: 1.55;
  border-left: 2px solid var(--red);
  padding-left: 18px;
  margin: 0
}

.hero-copy a {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
  white-space: nowrap
}

.hero-copy b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #ffffff75;
  border-radius: 50%;
  font-size: 20px;
  margin-top: 8px;
  transition: .25s
}

.hero-copy a:hover b {
  background: var(--red);
  border-color: var(--red);
  transform: rotate(45deg)
}

.hero-stat {
  position: absolute;
  z-index: 2;
  right: 5%;
  top: 8%;
  color: #fff;
  text-align: right
}

.hero-stat strong {
  display: block;
  font: 600 54px/.9 'Barlow Condensed', sans-serif
}

.hero-stat span {
  font-size: 9px;
  letter-spacing: 1.4px
}

.hero-caption {
  z-index: 2;
  border-top: 1px solid #ffffff38;
  background: none;
  padding: 22px 5%
}

.hero-caption>span:nth-child(2) {
  margin-left: auto;
  margin-right: 40px;
  color: #fff
}

.hero-caption button {
  background: transparent;
  border: 0
}

.intro {
  min-height: 78vh;
  padding-top: 130px;
  padding-bottom: 130px;
  background: #fff
}

.intro h2 {
  font: 600 clamp(70px, 8vw, 124px)/.8 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.045em
}

.intro h2 em {
  display: block;
  margin-left: 17%;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--red)
}

.intro-copy {
  margin: 65px 0 0 17%;
  max-width: 780px
}

.intro-copy p:first-child {
  font-size: 20px;
  color: var(--ink)
}

.metrics {
  background: #08161d;
  color: #fff;
  padding: 72px 6%;
  border: 0
}

.metrics>div {
  border-color: #ffffff26;
  padding-left: 5vw
}

.metrics>div:first-child {
  padding-left: 0
}

.metrics strong {
  font-size: clamp(76px, 8vw, 128px);
  color: #fff;
  letter-spacing: -.04em
}

.metrics>div:nth-child(2) strong {
  color: transparent;
  -webkit-text-stroke: 1px #fff
}

.metrics>div:last-child strong {
  color: var(--red)
}

.metrics small {
  color: #8ea2ab
}

.capacity-note {
  background: #08161d;
  color: #83969e;
  text-align: right;
  border: 0;
  padding-bottom: 28px
}

.fleet {
  padding-top: 130px;
  padding-bottom: 130px
}

.fleet .section-top h2 {
  font: 600 clamp(68px, 7vw, 110px)/.85 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.045em
}

.fleet-layout {
  grid-template-columns: 1.55fr .75fr;
  gap: 0;
  background: #08161d
}

.fleet-photo {
  min-height: 620px
}

.fleet-photo img {
  filter: saturate(.78) contrast(1.08)
}

.fleet-info {
  padding: 52px 42px;
  color: #fff
}

.fleet-info .tabs,
.fleet-info dl>div {
  border-color: #ffffff26
}

.fleet-info .tabs button,
.fleet-info p:not(.eyebrow),
.fleet-info dt {
  color: #9db0b9
}

.fleet-info .tabs button[aria-selected=true] {
  color: #fff
}

.fleet-info h3 {
  font: 600 48px/.95 'Barlow Condensed', sans-serif;
  text-transform: uppercase
}

.configurations {
  gap: 0;
  margin-top: 0;
  border-left: 1px solid var(--line)
}

.configurations>div {
  min-height: 100px;
  padding: 10px;
  border-top: 0;
  border-right: 1px solid var(--line);
  transition: .25s
}

.configurations>div:hover {
  background: var(--red);
  color: #fff
}

.configurations>div:hover p,
.configurations>div:hover span,
.configurations>div:hover b {
  color: #fff
}

.configurations h3 {
  font: 600 37px/1 'Barlow Condensed', sans-serif;
  text-transform: uppercase
}

.configurations p {
  margin-top: 25px
}

.reliability {
  background: var(--red);
  padding-top: 130px;
  padding-bottom: 130px;
  position: relative;
  overflow: hidden
}

.reliability:after {
  content: '68K';
  position: absolute;
  left: -.04em;
  bottom: -.2em;
  font: 600 33vw/.75 'Barlow Condensed', sans-serif;
  color: #00000010
}

.reliability>* {
  position: relative;
  z-index: 1
}

.reliability-title h2 {
  font: 600 clamp(68px, 7vw, 108px)/.82 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.045em
}

.reliability-title h2 em {
  color: #08161d
}

.reliability-title>p:not(.eyebrow),
.reliability .hours span,
.reliability details p {
  color: #fff
}

.reliability details,
.reliability .hours {
  border-color: #ffffff58
}

.reliability .eyebrow,
.reliability summary b {
  color: #fff
}

.reliability summary {
  font: 500 27px/1 'Barlow Condensed', sans-serif;
  text-transform: uppercase
}

.safety {
  padding-top: 130px;
  padding-bottom: 130px;
  background: #fff
}

.safety .section-top h2 {
  font: 600 clamp(68px, 7vw, 108px)/.82 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.045em
}

.promise-grid {
  gap: 0;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line)
}

.promise-grid article {
  min-height: 470px;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 36px;
  display: flex;
  flex-direction: column
}

.promise-grid article:nth-child(2) {
  background: #08161d;
  color: #fff
}

.promise-grid article:nth-child(2) p {
  color: #91a5ae
}

.promise-grid h3 {
  margin-top: auto;
  font: 600 43px/.96 'Barlow Condensed', sans-serif;
  text-transform: uppercase
}

.hse {
  margin-top: 0;
  border: 1px solid var(--line);
  padding: 0 30px
}

.outcomes {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.55fr);
  gap: 9vw;
  padding-top: 130px;
  padding-bottom: 130px;
  background: #eef4f6
}

.outcomes-lead {
  position: sticky;
  top: 130px;
  align-self: start
}

.outcomes h2 {
  font: 600 clamp(72px, 7vw, 110px)/.8 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.05em
}

.outcomes-lead>p:last-child {
  max-width: 390px;
  color: var(--muted);
  line-height: 1.75
}

.outcome-list {
  border-top: 1px solid #b9c8ce
}

.outcome-list article {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 112px;
  border-bottom: 1px solid #b9c8ce;
  transition: .25s
}

.outcome-list article:hover {
  padding: 0 20px;
  background: #08161d;
  color: #fff
}

.outcome-list span,
.outcome-list b {
  font-size: 11px;
  color: var(--red);
  letter-spacing: 1.2px
}

.outcome-list h3 {
  margin: 0;
  font: 500 clamp(27px, 3vw, 42px)/1 'Barlow Condensed', sans-serif;
  text-transform: uppercase
}

.contact {
  background: #08161d;
  padding-top: 130px;
  padding-bottom: 130px
}

.contact h2 {
  font: 600 clamp(72px, 8vw, 122px)/.8 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.045em
}

.contact em {
  color: var(--red)
}

.contact-info {
  border-left: 1px solid #ffffff2e;
  padding-left: 48px
}

.contact-info h3 {
  font: 600 46px/1 'Barlow Condensed', sans-serif;
  text-transform: uppercase
}

.contact-info>a:not(.profile-link) {
  color: var(--red)
}

footer {
  background: #08161d;
  color: #fff;
  border-top: 1px solid #ffffff20
}

footer .brand img {
  filter: brightness(0) invert(1)
}

footer p,
footer small {
  color: #83969e
}

@media(max-width:1000px) {
  .hero h1 {
    font-size: 12vw
  }

  .fleet-layout {
    grid-template-columns: 1fr
  }

  .fleet-photo {
    min-height: 520px
  }

  .promise-grid h3 {
    font-size: 35px
  }
}

@media(max-width:760px) {
  header {
    height: 72px;
    background: #08161d
  }

  header .brand img {
    filter: brightness(0) invert(1)
  }

  nav {
    top: 72px
  }

  nav.open {
    display: flex;
    flex-direction: column;
    padding: 16px 6%
  }

  nav.open>a,
  nav.open .nav-contact {
    height: auto;
    padding: 15px 0;
    border: 0
  }

  .hero {
    height: calc(100svh - 72px);
    min-height: 660px;
    aspect-ratio: auto
  }

  .hero-overlay {
    top: 3%;
    bottom: 14%
  }

  .hero h1 {
    font-size: 22vw;
    line-height: .71
  }

  .hero h1 span:nth-child(2),
  .hero h1 em {
    margin-left: .08em
  }

  .hero-kicker {
    font-size: 9px;
    letter-spacing: 1.5px
  }

  .hero-copy {
    margin: 34px 8% 0 10%;
    gap: 20px
  }

  .hero-copy p {
    font-size: 14px
  }

  .hero-copy b {
    width: 48px;
    height: 48px
  }

  .hero-stat {
    display: none
  }

  .hero-caption>span:nth-child(2) {
    display: none
  }

  .intro {
    min-height: 0;
    padding-top: 85px;
    padding-bottom: 85px
  }

  .intro h2 {
    font-size: 18vw
  }

  .intro h2 em {
    margin-left: 0
  }

  .intro-copy {
    margin: 45px 0 0
  }

  .metrics {
    padding-top: 48px;
    padding-bottom: 48px
  }

  .metrics strong {
    font-size: 72px
  }

  .capacity-note {
    text-align: left
  }

  .fleet {
    padding-top: 85px;
    padding-bottom: 85px
  }

  .fleet .section-top h2 {
    font-size: 18vw
  }

  .fleet-photo {
    min-height: 390px
  }

  .fleet-info {
    padding: 36px 24px
  }

  .configurations {
    border-top: 1px solid var(--line)
  }

  .configurations>div {
    min-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .configurations p {
    margin-top: 34px
  }

  .reliability,
  .safety,
  .contact {
    padding-top: 85px;
    padding-bottom: 85px
  }

  .reliability-title h2,
  .safety .section-top h2,
  .contact h2 {
    font-size: 18vw
  }

  .promise-grid {
    display: block
  }

  .promise-grid article {
    min-height: 360px;
    border-bottom: 1px solid var(--line);
    border-right: 0
  }

  .outcomes {
    display: block;
    padding-top: 85px;
    padding-bottom: 85px
  }

  .outcomes-lead {
    position: static
  }

  .outcomes h2 {
    font-size: 18vw
  }

  .outcome-list {
    margin-top: 50px
  }

  .outcome-list article {
    grid-template-columns: 34px 1fr
  }

  .outcome-list b {
    display: none
  }

  .contact-info {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #ffffff2e;
    padding-top: 36px
  }
}


/* Hero V2 — cinematic native video, no Three.js. */
.hero {
  --hero-progress: 0;
  --hero-media-x: 0px;
  --hero-media-y: 0px;
  --hero-media-scale: 1.035;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #08161d;
}

.hero-video {
  position: absolute;
  inset: -2.5%;
  width: 105%;
  height: 105%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: translate3d(var(--hero-media-x), var(--hero-media-y), 0) scale(var(--hero-media-scale));
  filter: saturate(.78) contrast(1.08) brightness(.50);
  transition:
    opacity .85s ease,
    filter 2.2s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, filter;
}

.hero.media-ready .hero-video {
  opacity: 1
}

.hero.is-entered .hero-video {
  filter: saturate(.9) contrast(1.06) brightness(.68);
}

.hero-media:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 30%, rgba(220, 242, 248, .20), transparent 23%),
    linear-gradient(105deg, rgba(255, 255, 255, .08), transparent 28% 70%, rgba(197, 236, 245, .05));
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-6%, 0, 0);
  transition:
    opacity 2s .2s ease,
    transform 2.8s .15s cubic-bezier(.16, 1, .3, 1);
}

.hero.is-entered .hero-media:before {
  opacity: .7;
  transform: translate3d(0, 0, 0);
}

.hero-media:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, #071820f2 0%, #071820b8 35%, #07182044 66%, #07182018 100%),
    linear-gradient(0deg, #071820e0 0%, #07182055 28%, transparent 58%);
}

.hero:after {
  z-index: 1;
  opacity: .72;
}

.hero-overlay,
.hero-stat,
.hero-caption {
  z-index: 3
}

.hero h1>span,
.hero h1>em {
  overflow: hidden;
  padding-bottom: .055em;
}

.hero h1>*>i {
  display: block;
  font: inherit;
  font-style: inherit;
  color: inherit;
  -webkit-text-stroke: inherit;
  opacity: 0;
  filter: blur(9px);
  transform: translate3d(0, 115%, 0) skewY(2.5deg);
  will-change: transform, opacity, filter;
}

.hero.is-entered h1>*>i {
  animation: heroLineIn 1.22s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero.is-entered h1>span:nth-child(1)>i {
  animation-delay: .12s
}

.hero.is-entered h1>span:nth-child(2)>i {
  animation-delay: .23s
}

.hero.is-entered h1>em>i {
  animation-delay: .34s
}

@keyframes heroLineIn {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(0, 115%, 0) skewY(2.5deg)
  }

  32% {
    opacity: 1
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) skewY(0)
  }
}

.hero-kicker,
.hero-copy,
.hero-stat,
.hero-caption {
  opacity: 0;
}

.hero.is-entered .hero-kicker {
  animation: heroFadeIn .9s .08s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero.is-entered .hero-copy {
  animation: heroFadeIn 1s .56s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero.is-entered .hero-stat {
  animation: heroFadeIn 1s .68s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero.is-entered .hero-caption {
  animation: heroFadeIn .9s .82s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 18px, 0)
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0)
  }
}

.hero-caption button {
  cursor: pointer;
}

@media(max-width:760px) {
  .hero-video {
    inset: -1.5%;
    width: 103%;
    height: 103%;
    object-position: 60% center;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-video {
    transform: none !important;
    transition: none;
    filter: saturate(.86) contrast(1.05) brightness(.65);
  }

  .hero-media:before {
    display: none
  }

  .hero h1>*>i,
  .hero-kicker,
  .hero-copy,
  .hero-stat,
  .hero-caption {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
}


/* Hero V3 — video-first composition, right-side editorial title, scroll-only motion. */
.hero {
  --hero-media-scale: 1.015;
}

.hero:after,
.hero-media:after {
  display: none !important;
}

.hero-video {
  inset: -1%;
  width: 102%;
  height: 102%;
  object-position: center center;
  transform: scale(var(--hero-media-scale));
  filter: saturate(.94) contrast(1.025) brightness(.92);
  transition: opacity .65s ease, filter 1.7s cubic-bezier(.16, 1, .3, 1);
}

.hero.is-entered .hero-video {
  filter: saturate(1) contrast(1.02) brightness(1);
}

.hero-media:before {
  background:
    radial-gradient(circle at 72% 28%, rgba(224, 246, 250, .14), transparent 25%),
    linear-gradient(110deg, rgba(255, 255, 255, .035), transparent 33% 77%, rgba(205, 238, 244, .035));
  opacity: 0;
}

.hero.is-entered .hero-media:before {
  opacity: .46
}

.hero-overlay {
  left: auto;
  right: 4.5%;
  top: 5%;
  bottom: 12%;
  width: min(80vw, 1220px);
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  padding: 4.5vh 0;
}

.hero-overlay:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 6%;
  right: -5vw;
  bottom: 2%;
  width: min(78vw, 1120px);
  background: linear-gradient(270deg, rgba(5, 20, 28, .58) 0%, rgba(5, 20, 28, .34) 44%, rgba(5, 20, 28, .12) 69%, rgba(5, 20, 28, 0) 100%);
  pointer-events: none;
}

.hero h1 {
  width: 100%;
  margin: 0;
  font-size: clamp(48px, 6.2vw, 104px);
  line-height: .82;
  letter-spacing: -.047em;
  text-align: right;
}

.hero h1>span,
.hero h1>em {
  width: 100%;
}

.hero h1 .hero-line-one {
  padding-right: 27%;
}

.hero h1 .hero-line-two {
  margin-left: 0;
  padding-right: 8%;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .92);
}

.hero h1 .hero-line-three {
  margin-left: 0;
  padding-right: 0;
  color: var(--red);
  font-size: .73em;
  letter-spacing: -.038em;
}

.hero-copy {
  align-self: flex-end;
  margin: 36px 1% 0 0;
  max-width: 520px;
  text-align: left;
}

.hero-copy p {
  background: rgba(5, 20, 28, .18);
}

.hero-kicker,
.hero-stat {
  display: none !important;
}

@media(max-width:1000px) {
  .hero-overlay {
    right: 4%;
    width: 88vw;
  }

  .hero h1 {
    font-size: clamp(46px, 8vw, 78px);
  }

  .hero h1 .hero-line-one {
    padding-right: 16%
  }

  .hero h1 .hero-line-two {
    padding-right: 4%
  }

  .hero h1 .hero-line-three {
    font-size: .69em
  }
}

@media(max-width:760px) {
  .hero-video {
    inset: -1%;
    width: 102%;
    height: 102%;
    object-position: 56% center;
  }

  .hero-overlay {
    left: 5%;
    right: 5%;
    width: auto;
    top: 4%;
    bottom: 14%;
    align-items: stretch;
    text-align: left;
  }

  .hero-overlay:before {
    top: 9%;
    right: -5vw;
    bottom: 6%;
    width: 94vw;
    background: linear-gradient(90deg, rgba(5, 20, 28, .55) 0%, rgba(5, 20, 28, .28) 52%, rgba(5, 20, 28, 0) 100%);
  }

  .hero h1 {
    font-size: clamp(44px, 13.2vw, 72px);
    line-height: .84;
    text-align: left;
  }

  .hero h1 .hero-line-one,
  .hero h1 .hero-line-two,
  .hero h1 .hero-line-three {
    padding-right: 0;
    margin-left: 0;
  }

  .hero h1 .hero-line-two {
    padding-left: 6%
  }

  .hero h1 .hero-line-three {
    padding-left: 1%;
    font-size: .67em;
    line-height: .93;
  }

  .hero-copy {
    align-self: flex-start;
    margin: 30px 7% 0 4%;
    max-width: 430px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-video {
    transform: none !important;
    filter: saturate(1) contrast(1.02) brightness(1);
  }
}


/* Hero V4 — restored headline, red brand, top-biased video crop, scroll zoom-out transition. */
header .brand img,
footer .brand img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(97%) saturate(4720%) hue-rotate(348deg) brightness(98%) contrast(91%) !important;
}

.hero {
  --zoom-mix: 0;
  --hero-media-scale: 1;
  height: 185svh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #08161d;
}

.hero-stage {
  position: sticky;
  top: 92px;
  height: calc(100svh - 92px);
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

.hero-media,
.hero-overlay,
.hero-caption {
  position: absolute;
}

.hero-media {
  inset: 0
}

.hero-video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 34% !important;
  transform: scale(var(--hero-media-scale)) !important;
  filter: saturate(.98) contrast(1.015) brightness(.98) !important;
  transition: opacity .35s linear, filter 1.1s ease !important;
}

.hero-video-primary {
  opacity: calc(1 - var(--zoom-mix)) !important;
}

.hero-video-zoom {
  opacity: var(--zoom-mix) !important;
  object-position: 50% 31% !important;
}

.hero:not(.zoom-ready) .hero-video-primary {
  opacity: 1 !important
}

.hero:not(.zoom-ready) .hero-video-zoom {
  opacity: 0 !important
}

.hero-media:before {
  opacity: .26 !important;
  background: radial-gradient(circle at 72% 25%, rgba(230, 248, 251, .13), transparent 23%) !important;
}

.hero-overlay {
  left: auto !important;
  right: 4.5% !important;
  top: 7% !important;
  bottom: 13% !important;
  width: min(78vw, 1120px) !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
  padding: 0 !important;
}

.hero-overlay:before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -4vw;
  top: 15%;
  bottom: 7%;
  width: min(60vw, 840px);
  background: linear-gradient(270deg, rgba(5, 20, 28, .46) 0%, rgba(5, 20, 28, .25) 46%, rgba(5, 20, 28, .07) 74%, rgba(5, 20, 28, 0) 100%);
  pointer-events: none;
}

.hero-kicker {
  display: block !important;
  width: 100%;
  margin: 0 0 22px;
  padding-right: 2%;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 2px;
  font-weight: 700;
  text-align: right;
}

.hero-kicker:before {
  display: none !important
}

.hero h1 {
  width: 100%;
  margin: 0 !important;
  font-size: clamp(58px, 7.3vw, 118px) !important;
  line-height: .74 !important;
  letter-spacing: -.052em !important;
  text-align: right !important;
}

.hero h1 .hero-line-one {
  margin-left: 0 !important;
  padding-right: 25% !important;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
}

.hero h1 .hero-line-two {
  margin-left: 0 !important;
  padding-right: 8% !important;
  color: transparent !important;
  -webkit-text-stroke: 1.3px rgba(255, 255, 255, .94) !important;
}

.hero h1 .hero-line-three {
  margin-left: 0 !important;
  padding-right: 0 !important;
  color: var(--red) !important;
  font-size: 1em !important;
  letter-spacing: -.052em !important;
}

.hero-copy {
  align-self: flex-end !important;
  margin: 34px 1% 0 0 !important;
  max-width: 510px !important;
  text-align: left !important;
}

.hero-copy p {
  background: rgba(5, 20, 28, .14) !important;
}

@media(max-width:1000px) {
  .hero-overlay {
    width: 88vw !important;
    right: 4% !important
  }

  .hero h1 {
    font-size: clamp(54px, 9vw, 86px) !important
  }

  .hero h1 .hero-line-one {
    padding-right: 15% !important
  }

  .hero h1 .hero-line-two {
    padding-right: 3% !important
  }
}

@media(max-width:760px) {
  .hero {
    height: 170svh !important
  }

  .hero-stage {
    top: 72px;
    height: calc(100svh - 72px);
    min-height: 600px;
  }

  .hero-video {
    object-position: 57% 30% !important;
  }

  .hero-video-zoom {
    object-position: 56% 28% !important;
  }

  .hero-overlay {
    left: 5% !important;
    right: 5% !important;
    width: auto !important;
    top: 7% !important;
    bottom: 15% !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  .hero-overlay:before {
    left: -5vw;
    right: auto;
    top: 12%;
    bottom: 8%;
    width: 88vw;
    background: linear-gradient(90deg, rgba(5, 20, 28, .45) 0%, rgba(5, 20, 28, .23) 52%, rgba(5, 20, 28, 0) 100%);
  }

  .hero-kicker {
    padding: 0 !important;
    text-align: left !important;
    font-size: 9px;
    letter-spacing: 1.45px;
    max-width: 80%;
    margin-bottom: 20px;
  }

  .hero h1 {
    font-size: clamp(50px, 15vw, 78px) !important;
    line-height: .77 !important;
    text-align: left !important;
  }

  .hero h1 .hero-line-one,
  .hero h1 .hero-line-two,
  .hero h1 .hero-line-three {
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

  .hero h1 .hero-line-two {
    padding-left: 5% !important
  }

  .hero h1 .hero-line-three {
    padding-left: 1% !important
  }

  .hero-copy {
    align-self: flex-start !important;
    margin: 30px 8% 0 4% !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero {
    height: auto !important
  }

  .hero-stage {
    position: relative;
    top: auto;
    height: calc(100svh - 92px)
  }

  .hero-video-primary {
    opacity: 1 !important
  }

  .hero-video-zoom {
    display: none !important
  }
}


/* Hero V5 — preserve the video top edge, crop only the lower edge, keep original red logo. */
header .brand img,
footer .brand img {
  filter: none !important;
}

.hero-video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
  transform: none !important;
}

.hero-video-primary {
  object-position: 50% 0% !important;
}

.hero-video-zoom {
  object-position: 50% 0% !important;
}

/* Keep the footage bright; only shade the typography zone. */
.hero-media:before {
  opacity: .18 !important;
}

.hero-overlay:before {
  background: linear-gradient(270deg,
      rgba(5, 20, 28, .38) 0%,
      rgba(5, 20, 28, .20) 45%,
      rgba(5, 20, 28, .06) 72%,
      rgba(5, 20, 28, 0) 100%) !important;
}

/* Explicit final headline/kicker composition. */
.hero-kicker {
  display: block !important;
  visibility: visible !important;
}

.hero h1 .hero-line-one i::after {
  content: ''
}

.hero h1 .hero-line-one,
.hero h1 .hero-line-two,
.hero h1 .hero-line-three {
  display: block !important;
}

@media(max-width:760px) {

  .hero-video,
  .hero-video-primary,
  .hero-video-zoom {
    object-position: 56% 0% !important;
  }
}


/* Hero V6 — header overlay, hover menu, scroll-scrubbed zoom-out into Company. */
header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  background: rgba(8, 22, 29, .90) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

header .brand img,
footer .brand img {
  filter: none !important;
}

.menu:hover,
.menu:focus-visible {
  color: var(--red);
}

nav {
  z-index: 1001
}

.hero-company-flow {
  --transition-opacity: 0;
  position: relative;
  background: #08161d;
  isolation: isolate;
}

.hero-transition-media {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #08161d;
}

.hero-transition-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  opacity: var(--transition-opacity);
  filter: saturate(.98) contrast(1.015) brightness(.98);
  will-change: opacity;
}

.hero {
  --primary-opacity: 1;
  position: relative;
  z-index: 1;
  height: 145svh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
}

.hero-stage {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.hero-media {
  inset: 0;
  background: transparent !important;
}

.hero-video-primary {
  opacity: var(--primary-opacity) !important;
  object-position: 50% 0% !important;
  transform: none !important;
}

.hero-media:before {
  opacity: .16 !important;
}

.hero-overlay {
  padding-top: 92px !important;
}

.hero-caption {
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

/* Company begins over the same zoom-out shot, then resolves into the white editorial section. */
.intro {
  position: relative;
  z-index: 2;
  min-height: 118vh !important;
  padding-top: clamp(340px, 42svh, 500px) !important;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 18svh,
      rgba(255, 255, 255, .18) 25svh,
      rgba(255, 255, 255, .82) 34svh,
      #fff 43svh,
      #fff 100%) !important;
}

.intro .section-label,
.intro>div:last-child {
  position: relative;
  z-index: 2;
}

@media(max-width:760px) {
  header {
    height: 72px !important;
  }

  .hero {
    height: 138svh !important;
  }

  .hero-stage {
    top: 0 !important;
    height: 100svh !important;
    min-height: 600px;
  }

  .hero-overlay {
    padding-top: 72px !important;
  }

  .hero-transition-media video,
  .hero-video-primary {
    object-position: 56% 0% !important;
  }

  .intro {
    min-height: 105vh !important;
    padding-top: clamp(250px, 34svh, 360px) !important;
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 14svh,
        rgba(255, 255, 255, .24) 21svh,
        rgba(255, 255, 255, .88) 29svh,
        #fff 37svh,
        #fff 100%) !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero {
    height: 100svh !important;
  }

  .hero-stage {
    position: relative !important;
    height: 100svh !important;
  }

  .hero-transition-media {
    display: none !important;
  }

  .hero-video-primary {
    opacity: 1 !important;
  }

  .intro {
    padding-top: 130px !important;
    background: #fff !important;
  }
}


/* Hero V7 — runtime fix companion: preserve source top below fixed header. */
.hero-stage {
  top: 0 !important;
  height: 100svh !important;
}

.hero-media {
  top: 92px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.hero-video-primary {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
  transform: none !important;
}

.hero-transition-media video {
  top: 92px !important;
  bottom: 0 !important;
  height: calc(100% - 92px) !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
}

@media(max-width:760px) {
  .hero-media {
    top: 72px !important;
  }

  .hero-video-primary {
    object-position: 56% 0% !important;
  }

  .hero-transition-media video {
    top: 72px !important;
    height: calc(100% - 72px) !important;
    object-position: 56% 0% !important;
  }
}


/* Hero V8 — faster replacement, smoother scroll scrub, glass caption. */
.hero-caption {
  background: rgba(8, 22, 29, .30) !important;
  border-top: 1px solid rgba(255, 255, 255, .20) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 -12px 34px rgba(4, 16, 22, .14);
}

.hero-caption button {
  background: rgba(8, 22, 29, .22) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-caption button:hover {
  background: rgba(8, 22, 29, .42) !important;
}

.hero-transition-media video {
  will-change: opacity;
}


/* Hero V9 — true same-layer video replacement and compact right-side glass caption. */
.hero-company-flow {
  background: #fff !important;
}

.hero-transition-media {
  display: none !important;
}

.hero-media {
  top: 92px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  background: #08161d !important;
}

.hero-video-primary,
.hero-video-zoom {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
  transform: none !important;
  filter: saturate(.98) contrast(1.015) brightness(.98) !important;
}

.hero-video-primary {
  z-index: 0 !important;
  opacity: var(--primary-opacity, 1) !important;
}

.hero-video-zoom {
  z-index: 1 !important;
  opacity: var(--zoom-opacity, 0) !important;
}

.hero-media:before {
  z-index: 2 !important;
}

/* Restore Company to a clean section now that zoom video replaces the hero in-place. */
.intro {
  min-height: 78vh !important;
  padding-top: 130px !important;
  padding-bottom: 130px !important;
  background: #fff !important;
}

/* Compact caption. Blur starts around the center and builds toward the right edge. */
.hero-caption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 10px 5% !important;
  min-height: 46px;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

.hero-caption::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 44%;
  background: linear-gradient(90deg, rgba(8, 22, 29, 0), rgba(8, 22, 29, .18) 35%, rgba(8, 22, 29, .40) 100%);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 32%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 32%, #000 68%);
  pointer-events: none;
}

.hero-caption>span,
.hero-caption>button {
  position: relative;
  z-index: 1;
}

.hero-caption button {
  padding: 6px 10px !important;
  background: rgba(8, 22, 29, .18) !important;
}

@media(max-width:760px) {
  .hero-media {
    top: 72px !important;
  }

  .hero-video-primary,
  .hero-video-zoom {
    object-position: 56% 0% !important;
  }

  .intro {
    min-height: 0 !important;
    padding-top: 85px !important;
    padding-bottom: 85px !important;
  }

  .hero-caption {
    padding: 8px 5% !important;
    min-height: 40px;
  }

  .hero-caption::before {
    left: 38%;
  }
}


/* Hero V10 — shared sticky video background from Hero into Company. */
.hero-company-flow {
  --primary-opacity: 1;
  --zoom-opacity: 0;
  position: relative !important;
  background: #08161d !important;
  isolation: isolate;
}

.hero-flow-media {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #08161d;
}

.hero-flow-media .hero-video {
  position: absolute !important;
  top: 92px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 92px) !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
  transform: none !important;
  filter: saturate(.98) contrast(1.015) brightness(.98) !important;
}

.hero-flow-media .hero-video-primary {
  z-index: 0 !important;
  opacity: var(--primary-opacity) !important;
}

.hero-flow-media .hero-video-zoom {
  z-index: 1 !important;
  opacity: var(--zoom-opacity) !important;
}

.hero-flow-media::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 92px 0 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 25%, rgba(230, 248, 251, .10), transparent 25%);
}

.hero {
  position: relative !important;
  z-index: 1 !important;
  height: 145svh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
}

.hero-stage {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: transparent !important;
}

.hero-media {
  display: none !important;
}

/* The zoom-out shot remains behind the beginning of Company, then dissolves into white. */
.intro {
  position: relative !important;
  z-index: 2 !important;
  min-height: 118vh !important;
  padding-top: clamp(340px, 42svh, 500px) !important;
  padding-bottom: 130px !important;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 17svh,
      rgba(255, 255, 255, .16) 24svh,
      rgba(255, 255, 255, .76) 34svh,
      #fff 44svh,
      #fff 100%) !important;
}

.intro .section-label,
.intro>div:last-child {
  position: relative;
  z-index: 2;
}

@media(max-width:760px) {
  .hero-flow-media .hero-video {
    top: 72px !important;
    height: calc(100% - 72px) !important;
    object-position: 56% 0% !important;
  }

  .hero-flow-media::after {
    inset: 72px 0 0;
  }

  .hero {
    height: 138svh !important;
  }

  .hero-stage {
    height: 100svh !important;
    min-height: 600px;
  }

  .intro {
    min-height: 105vh !important;
    padding-top: clamp(250px, 34svh, 360px) !important;
    padding-bottom: 85px !important;
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 13svh,
        rgba(255, 255, 255, .20) 20svh,
        rgba(255, 255, 255, .82) 29svh,
        #fff 38svh,
        #fff 100%) !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-flow-media .hero-video-primary {
    opacity: 1 !important;
  }

  .hero-flow-media .hero-video-zoom {
    display: none !important;
  }

  .hero {
    height: 100svh !important;
  }

  .intro {
    min-height: 0 !important;
    padding-top: 130px !important;
    background: #fff !important;
  }
}


/* Hero V11 — flush-right overlay and faster scroll-driven zoom scrub. */
.hero-overlay {
  right: 0 !important;
  width: min(82vw, 1180px) !important;
  padding-right: 4.5vw !important;
  box-sizing: border-box !important;
}

.hero-overlay:before {
  right: 0 !important;
  width: 100% !important;
}

@media(max-width:1000px) {
  .hero-overlay {
    right: 0 !important;
    width: 92vw !important;
    padding-right: 4vw !important;
  }
}

@media(max-width:760px) {
  .hero-overlay {
    left: 5% !important;
    right: 0 !important;
    width: auto !important;
    padding-right: 5% !important;
  }
}


/* Hero V12 — smoother decoded zoom playback and denser Company composition. */
.hero {
  height: 180svh !important;
}

.intro {
  min-height: 0 !important;
  padding-top: clamp(190px, 24svh, 270px) !important;
  padding-bottom: 92px !important;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 7svh,
      rgba(255, 255, 255, .42) 13svh,
      rgba(255, 255, 255, .90) 20svh,
      #fff 27svh,
      #fff 100%) !important;
}

.intro .section-label {
  padding-top: 6px;
}

.company-story {
  max-width: 1040px;
}

.company-promise {
  margin: 0 0 34px !important;
  max-width: 980px;
  color: var(--ink) !important;
  font: 600 clamp(28px, 3.25vw, 52px)/.98 'Barlow Condensed', sans-serif !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
}

.intro .intro-copy {
  margin: 0 !important;
  max-width: 920px !important;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

.intro .intro-copy p {
  margin: 0 !important;
  color: #445963;
  font-size: 17px;
  line-height: 1.72;
}

.intro .intro-copy .company-lead {
  color: var(--ink);
  font-size: clamp(20px, 1.7vw, 25px) !important;
  line-height: 1.45;
}

.intro .intro-copy .company-lead em {
  font-style: italic;
}

@media(max-width:1000px) {
  .hero {
    height: 172svh !important;
  }

  .intro .intro-copy {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media(max-width:760px) {
  .hero {
    height: 158svh !important;
  }

  .intro {
    padding-top: clamp(150px, 20svh, 210px) !important;
    padding-bottom: 72px !important;
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .12) 6svh,
        rgba(255, 255, 255, .78) 13svh,
        #fff 20svh,
        #fff 100%) !important;
  }

  .company-promise {
    margin-bottom: 24px !important;
    font-size: clamp(27px, 8vw, 40px) !important;
  }

  .intro .intro-copy .company-lead {
    font-size: 19px !important;
  }

  .intro .intro-copy p {
    font-size: 15px;
    line-height: 1.65;
  }
}


/* V13 — scroll-coupled zoom, tighter Company alignment, parallel fleet phases. */
.intro {
  display: grid !important;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1.62fr) !important;
  gap: clamp(38px, 6vw, 96px) !important;
  align-items: start !important;
  padding-top: clamp(145px, 18svh, 205px) !important;
  padding-bottom: 78px !important;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, .06) 4svh,
      rgba(255, 255, 255, .58) 10svh,
      rgba(255, 255, 255, .94) 17svh,
      #fff 22svh,
      #fff 100%) !important;
}

.intro .section-label {
  padding-top: 5px !important;
  align-self: start;
}

.company-story {
  width: 100%;
  max-width: none !important;
}

.company-promise {
  max-width: 1080px !important;
  margin-bottom: 30px !important;
}

.intro .intro-copy {
  max-width: 1080px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 4.4vw, 68px) !important;
}

.intro .intro-copy p {
  max-width: 520px;
}

.fleet {
  background: #fff;
}

.fleet-phase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 56px;
}

.fleet-phase-card {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: #08161d;
  color: #fff;
}

.fleet-phase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(5, 20, 28, .95) 0%, rgba(5, 20, 28, .75) 38%, rgba(5, 20, 28, .20) 72%, rgba(5, 20, 28, .05) 100%);
  pointer-events: none;
}

.fleet-phase-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: saturate(.88) contrast(1.04);
  transform: scale(1.01);
}

.fleet-phase-expansion {
  background: #eaf0f2;
}

.fleet-phase-expansion::after {
  background:
    linear-gradient(0deg, rgba(8, 22, 29, .97) 0%, rgba(8, 22, 29, .82) 42%, rgba(8, 22, 29, .38) 73%, rgba(8, 22, 29, .10) 100%);
}

.fleet-phase-drawing {
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) contrast(.70) brightness(1.13) blur(1.5px);
  opacity: .78;
  transform: scale(1.035);
}

.fleet-phase-content {
  position: relative;
  z-index: 2;
  min-height: 650px;
  padding: 34px 36px 30px;
  display: flex;
  flex-direction: column;
}

.fleet-phase-content .eyebrow {
  color: #fff !important;
  margin-bottom: auto;
}

.fleet-phase-content h3 {
  margin: 0 0 18px;
  max-width: 560px;
  font: 600 clamp(42px, 4.2vw, 64px)/.90 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.035em;
}

.fleet-phase-description {
  max-width: 590px;
  margin: 0 0 26px;
  color: #d5e0e4;
  line-height: 1.65;
}

.fleet-phase-content dl {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.fleet-phase-content dl>div {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.fleet-phase-content dt {
  color: #9fb1b9;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fleet-phase-content dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.fleet-phase-tag {
  margin-top: 22px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.fleet .configurations {
  margin-top: 18px !important;
}

@media(max-width:1000px) {
  .intro {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .intro .intro-copy {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .fleet-phase-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:760px) {
  .intro {
    padding-top: clamp(120px, 15svh, 165px) !important;
    padding-bottom: 60px !important;
  }

  .fleet-phase-grid {
    margin-top: 34px;
    gap: 12px;
  }

  .fleet-phase-card,
  .fleet-phase-content {
    min-height: 560px;
  }

  .fleet-phase-content {
    padding: 26px 22px 24px;
  }

  .fleet-phase-content h3 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .fleet-phase-content dl>div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .fleet-phase-content dd {
    text-align: left;
  }
}


/* V14 — reliable scroll playback and navy engineered-availability section. */
.reliability {
  background: #143441 !important;
  color: #fff !important;
}

.reliability:after {
  color: rgba(255, 255, 255, .035) !important;
}

.reliability .eyebrow {
  color: var(--red) !important;
}

.reliability-title h2 {
  color: #fff !important;
}

.reliability-title h2 em {
  color: var(--red) !important;
}

.reliability-title>p:not(.eyebrow),
.reliability .hours span,
.reliability details p {
  color: #c3d2d9 !important;
}

.reliability details,
.reliability .hours {
  border-color: rgba(255, 255, 255, .22) !important;
}

.reliability summary b {
  color: var(--red) !important;
}

.reliability summary span {
  color: #93aab5 !important;
}

/* Pure-vector concept background: intentionally soft and low-detail. */
.fleet-phase-drawing {
  object-position: center 43% !important;
  filter: grayscale(1) contrast(.78) brightness(1.10) blur(1.2px) !important;
  opacity: .78 !important;
  transform: scale(1.025) !important;
}


/* V15 — smoother native hero video playback + expandable Customer Outcomes. */
.outcome-list .outcome-card {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  transition: background .28s ease;
}

.outcome-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 18px;
  padding: 27px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.outcome-toggle span {
  font-size: 12px;
  color: var(--red);
  letter-spacing: .08em;
}

.outcome-toggle h3 {
  margin: 0 !important;
}

.outcome-toggle b {
  white-space: nowrap;
}

.outcome-toggle i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-style: normal;
  color: var(--red);
  transition: transform .28s ease, border-color .28s ease;
}

.outcome-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .34s cubic-bezier(.2, .75, .25, 1), opacity .24s ease;
}

.outcome-detail>p {
  overflow: hidden;
  margin: 0;
  padding: 0 86px 0 60px;
  max-width: 900px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

@media(hover:hover) {
  .outcome-card:hover {
    background: #f6f9fa;
  }

  .outcome-card:hover .outcome-detail {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .outcome-card:hover .outcome-detail>p {
    padding-bottom: 26px;
  }

  .outcome-card:hover .outcome-toggle i {
    transform: rotate(45deg);
    border-color: var(--red);
  }
}

.outcome-card.is-open .outcome-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

.outcome-card.is-open .outcome-detail>p {
  padding-bottom: 26px;
}

.outcome-card.is-open .outcome-toggle i {
  transform: rotate(45deg);
  border-color: var(--red);
}

@media(max-width:760px) {
  .outcome-toggle {
    grid-template-columns: 32px minmax(0, 1fr) 26px;
    gap: 12px;
    padding: 22px 0;
  }

  .outcome-toggle b {
    display: none;
  }

  .outcome-detail>p {
    padding-left: 44px;
    padding-right: 12px;
    font-size: 14px;
  }
}


/* V16 — quicker smooth zoom playback, Company edge fades, fleet header visibility, original outcome hover motion. */

/* Company: retain the video-to-white fade at the top and add a soft matching fade at the bottom edge. */
.intro {
  overflow: hidden;
}

.intro::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(241, 248, 251, .45) 46%,
      var(--paper) 100%);
}

.intro .section-label,
.intro .company-story {
  position: relative;
  z-index: 2;
}

/* Fleet section must sit above the completed hero/company media layer. */
.fleet {
  position: relative !important;
  z-index: 5 !important;
  background: #fff !important;
}

.fleet .section-top {
  position: relative !important;
  z-index: 6 !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.fleet .section-top .eyebrow,
.fleet .section-top h2,
.fleet .section-top>p {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Restore the original Customer Outcomes hover movement/dark inversion.
   Description simply expands underneath the same animated title row. */
.outcome-list .outcome-card {
  padding: 0 !important;
  transition: padding .25s ease, background .25s ease, color .25s ease !important;
}

.outcome-toggle {
  transition: padding .25s ease, color .25s ease !important;
}

.outcome-toggle h3 {
  transition: transform .25s ease, color .25s ease !important;
}

@media(hover:hover) {
  .outcome-list .outcome-card:hover {
    padding: 0 20px !important;
    background: #08161d !important;
    color: #fff !important;
  }

  .outcome-list .outcome-card:hover .outcome-toggle h3 {
    transform: translateX(4px);
    color: #fff !important;
  }

  .outcome-list .outcome-card:hover .outcome-detail>p {
    color: #c6d7df !important;
  }

  .outcome-list .outcome-card:hover .outcome-toggle i {
    border-color: var(--red) !important;
    color: var(--red) !important;
  }
}

.outcome-card.is-open {
  background: #08161d !important;
  color: #fff !important;
  padding: 0 20px !important;
}

.outcome-card.is-open .outcome-toggle h3 {
  color: #fff !important;
}

.outcome-card.is-open .outcome-detail>p {
  color: #c6d7df !important;
}

@media(max-width:760px) {
  .intro::after {
    height: 52px;
  }

  .outcome-card.is-open {
    padding: 0 12px !important;
  }
}


/* V17 — finish hero zoom at Company promise, symmetric Company fades, tighter Fleet spacing. */
.intro {
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Matching fade treatment on both edges of the Company panel. */
.intro::before,
.intro::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 104px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.intro::before {
  top: 0 !important;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .55) 48%,
      #fff 100%) !important;
}

.intro::after {
  bottom: 0 !important;
  background: linear-gradient(to bottom,
      #fff 0%,
      rgba(255, 255, 255, .55) 52%,
      rgba(255, 255, 255, 0) 100%) !important;
}

.intro .section-label,
.intro .company-story {
  position: relative !important;
  z-index: 2 !important;
}

/* Remove the excessive whitespace before and inside Fleet. */
.fleet {
  padding-top: 48px !important;
}

.fleet .section-top {
  margin-bottom: 30px !important;
}

.fleet-phase-grid {
  margin-top: 0 !important;
}

@media(max-width:760px) {

  .intro::before,
  .intro::after {
    height: 72px !important;
  }

  .fleet {
    padding-top: 38px !important;
  }

  .fleet .section-top {
    margin-bottom: 24px !important;
  }
}


/* V18 — trim zoom-video tail and restore true symmetric Company transparency. */
.intro {
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, .52) 52px,
      #fff 104px,
      #fff calc(100% - 104px),
      rgba(255, 255, 255, .52) calc(100% - 52px),
      rgba(255, 255, 255, 0) 100%) !important;
}

.intro::before,
.intro::after {
  content: none !important;
  display: none !important;
}

.intro .section-label,
.intro .company-story {
  position: relative !important;
  z-index: 2 !important;
}

@media(max-width:760px) {
  .intro {
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .52) 36px,
        #fff 72px,
        #fff calc(100% - 72px),
        rgba(255, 255, 255, .52) calc(100% - 36px),
        rgba(255, 255, 255, 0) 100%) !important;
  }
}


/* V19 — frame-aware bidirectional hero scrub + smooth engineered-availability accordion. */
.reliability-list {
  interpolate-size: allow-keywords;
}

.reliability-list details {
  overflow: hidden;
  transition: border-color .28s ease, background .28s ease;
}

.reliability-list summary {
  position: relative;
  transition: color .28s ease, background .28s ease;
}

.reliability-list summary b {
  transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), color .24s ease;
}

.reliability-list details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    block-size .42s cubic-bezier(.22, .8, .25, 1),
    opacity .24s ease,
    content-visibility .42s allow-discrete;
}

.reliability-list details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.reliability-list details p {
  margin: 0 !important;
  padding: 0 10px 24px 39px !important;
  transform: translateY(-7px);
  opacity: .86;
  transition: transform .34s cubic-bezier(.22, .8, .25, 1), opacity .24s ease;
}

.reliability-list details[open] p {
  transform: translateY(0);
  opacity: 1;
}

.reliability-list details[open] summary {
  color: #fff;
}

.reliability-list details[open] summary b {
  transform: rotate(45deg);
}

@media(prefers-reduced-motion:reduce) {

  .reliability-list details::details-content,
  .reliability-list details p,
  .reliability-list summary,
  .reliability-list summary b {
    transition: none !important;
  }
}


/* V20 — exact Company-center video endpoint + cleaner transparent Company edges. */
.intro {
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, .08) 34px,
      rgba(255, 255, 255, .34) 78px,
      rgba(255, 255, 255, .72) 126px,
      #fff 176px,
      #fff calc(100% - 176px),
      rgba(255, 255, 255, .72) calc(100% - 126px),
      rgba(255, 255, 255, .34) calc(100% - 78px),
      rgba(255, 255, 255, .08) calc(100% - 34px),
      rgba(255, 255, 255, 0) 100%) !important;
}

.intro::before,
.intro::after {
  content: none !important;
  display: none !important;
}

@media(max-width:760px) {
  .intro {
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .10) 24px,
        rgba(255, 255, 255, .38) 52px,
        rgba(255, 255, 255, .76) 84px,
        #fff 118px,
        #fff calc(100% - 118px),
        rgba(255, 255, 255, .76) calc(100% - 84px),
        rgba(255, 255, 255, .38) calc(100% - 52px),
        rgba(255, 255, 255, .10) calc(100% - 24px),
        rgba(255, 255, 255, 0) 100%) !important;
  }
}


/* V21 — stable bidirectional hero scrub + more Company white breathing room. */
.intro {
  min-height: 86svh !important;
  padding-top: clamp(220px, 27svh, 300px) !important;
  padding-bottom: clamp(150px, 18svh, 210px) !important;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, .10) 30px,
      rgba(255, 255, 255, .40) 70px,
      rgba(255, 255, 255, .78) 112px,
      #fff 150px,
      #fff calc(100% - 150px),
      rgba(255, 255, 255, .78) calc(100% - 112px),
      rgba(255, 255, 255, .40) calc(100% - 70px),
      rgba(255, 255, 255, .10) calc(100% - 30px),
      rgba(255, 255, 255, 0) 100%) !important;
}

@media(max-width:760px) {
  .intro {
    min-height: 0 !important;
    padding-top: clamp(170px, 22svh, 220px) !important;
    padding-bottom: 110px !important;
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .10) 22px,
        rgba(255, 255, 255, .42) 50px,
        rgba(255, 255, 255, .80) 78px,
        #fff 108px,
        #fff calc(100% - 108px),
        rgba(255, 255, 255, .80) calc(100% - 78px),
        rgba(255, 255, 255, .42) calc(100% - 50px),
        rgba(255, 255, 255, .10) calc(100% - 22px),
        rgba(255, 255, 255, 0) 100%) !important;
  }
}


/* V22 — true scroll scrub + compact footer. */
.intro {
  min-height: 94svh !important;
  padding-top: clamp(245px, 30svh, 335px) !important;
  padding-bottom: clamp(175px, 21svh, 235px) !important;
}

footer {
  min-height: 68px !important;
  padding: 14px 5% !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
}

footer .brand {
  width: 132px !important;
  height: 30px !important;
  flex: 0 0 132px !important;
}

footer .brand img {
  width: 150px !important;
  height: 75px !important;
  left: -9px !important;
  top: -23px !important;
}

footer p {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

footer>a:last-of-type {
  margin-left: auto !important;
  font-size: 11px !important;
  white-space: nowrap;
}

footer small {
  font-size: 10px !important;
  white-space: nowrap;
}

@media(max-width:760px) {
  .intro {
    padding-top: clamp(190px, 24svh, 245px) !important;
    padding-bottom: 125px !important;
  }

  footer {
    min-height: 0 !important;
    padding: 16px 6% !important;
    gap: 12px 18px !important;
    flex-wrap: wrap !important;
  }

  footer .brand {
    width: 118px !important;
    height: 28px !important;
    flex-basis: 118px !important;
  }

  footer .brand img {
    width: 136px !important;
    height: 68px !important;
    left: -8px !important;
    top: -21px !important;
  }

  footer p {
    order: 3;
    width: 100%;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  footer>a:last-of-type {
    margin-left: auto !important;
    font-size: 10px !important;
  }

  footer small {
    font-size: 9px !important;
  }
}


/* V23 — smoother direct video scrub: more scroll distance per decoded frame. */
.hero {
  height: 260svh !important;
}

@media(max-width:1000px) {
  .hero {
    height: 238svh !important;
  }
}

@media(max-width:760px) {
  .hero {
    height: 218svh !important;
  }
}


/* V24 — image-led SAFE / TRUSTED / SWIFT promise cards. */
.promise-grid {
  gap: 18px !important;
  border: 0 !important;
  align-items: stretch;
}

.promise-grid article,
.promise-grid article:nth-child(2) {
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  isolation: isolate;
}

.promise-visual {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background: #083f72;
}

.promise-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .75s cubic-bezier(.2, .7, .25, 1);
  will-change: transform;
}

.promise-grid article:hover .promise-visual img {
  transform: scale(1.045);
}

.promise-copy {
  position: relative;
  z-index: 2;
  margin-top: -58px;
  padding: 76px 30px 30px;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, .62) 32px,
      #fff 60px,
      #fff 100%);
}

.promise-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.promise-copy p,
.promise-grid article:nth-child(2) .promise-copy p {
  margin: 0 !important;
  color: #52666f !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

@media(max-width:1000px) {
  .promise-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .promise-visual {
    aspect-ratio: 16 / 9;
  }
}

@media(max-width:760px) {
  .promise-grid {
    display: grid !important;
    margin-top: 32px !important;
  }

  .promise-grid article {
    min-height: 0 !important;
  }

  .promise-copy {
    margin-top: -44px;
    padding: 60px 22px 24px;
    min-height: 150px;
  }

  .promise-copy p,
  .promise-grid article:nth-child(2) .promise-copy p {
    font-size: 14px !important;
  }
}


/* V25 — generated blueprint imagery + restored large promise h3 titles. */
.promise-visual {
  aspect-ratio: 1374 / 1145 !important;
}

.promise-copy {
  display: block !important;
  align-items: initial !important;
  margin-top: -64px !important;
  padding: 82px 30px 30px !important;
  min-height: 250px !important;
}

.promise-copy h3 {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
  color: var(--ink) !important;
  font: 600 clamp(34px, 3.1vw, 46px)/.96 'Barlow Condensed', sans-serif !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
}

.promise-copy p,
.promise-grid article:nth-child(2) .promise-copy p {
  max-width: 34rem;
}

@media(max-width:1000px) {
  .promise-visual {
    aspect-ratio: 1374 / 1145 !important;
  }

  .promise-copy {
    min-height: 220px !important;
  }
}

@media(max-width:760px) {
  .promise-copy {
    margin-top: -46px !important;
    padding: 64px 22px 24px !important;
    min-height: 0 !important;
  }

  .promise-copy h3 {
    font-size: 34px !important;
    margin-bottom: 14px !important;
  }
}


/* V26 — keep the updated Planned Expansion artwork clear; shade only the lower copy area. */
.fleet-phase-expansion {
  background: #08161d !important;
}

.fleet-phase-expansion .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-drawing {
  object-fit: cover !important;
  object-position: center 43% !important;
  filter: saturate(.88) contrast(1.04) blur(.45px) !important;
  opacity: 1 !important;
  transform: scale(1.01) !important;
}

.fleet-phase-expansion::after {
  background:
    linear-gradient(to top,
      rgba(5, 20, 28, .94) 0%,
      rgba(5, 20, 28, .76) 20%,
      rgba(5, 20, 28, .38) 38%,
      rgba(5, 20, 28, .12) 52%,
      rgba(5, 20, 28, 0) 66%,
      rgba(5, 20, 28, 0) 100%) !important;
}


/* V27 — mobile composition pass: calmer type, clearer imagery, denser rhythm. */
@media(max-width:760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  header {
    padding-left: 20px !important;
    padding-right: 16px !important;
  }

  header .brand {
    width: 154px !important;
    height: 40px !important;
  }

  header .brand img {
    width: 178px !important;
    height: 89px !important;
    left: -11px !important;
    top: -26px !important;
  }

  .menu {
    gap: 10px !important;
    padding: 10px 0 10px 12px !important;
    font-size: 12px !important;
  }

  nav.open {
    max-height: calc(100svh - 72px);
    overflow: auto;
    padding: 10px 20px 18px !important;
    box-shadow: 0 18px 44px rgba(5, 20, 28, .18) !important;
  }

  nav.open>a,
  nav.open .nav-contact {
    padding: 14px 4px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  nav.open .nav-contact {
    border-bottom: 0 !important;
  }

  /* Keep the scroll scrub intact, but make the sticky stage read cleanly on a phone. */
  .hero-stage {
    min-height: 0 !important;
  }

  .hero-flow-media .hero-video {
    object-position: 54% 0% !important;
  }

  .hero-flow-media::after {
    background:
      linear-gradient(180deg, rgba(5, 20, 28, .12), transparent 28%),
      radial-gradient(circle at 72% 26%, rgba(230, 248, 251, .08), transparent 28%) !important;
  }

  .hero-overlay {
    top: 72px !important;
    bottom: 72px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    padding: clamp(48px, 7svh, 76px) 0 76px !important;
    justify-content: center !important;
  }

  .hero-kicker {
    max-width: 285px !important;
    margin-bottom: 22px !important;
    font-size: 9px !important;
    line-height: 1.55 !important;
    letter-spacing: 1.35px !important;
  }

  .hero h1 {
    font-size: clamp(58px, 18vw, 76px) !important;
    line-height: .78 !important;
    letter-spacing: -.045em !important;
  }

  .hero h1 span:nth-child(2) {
    margin-left: .05em !important;
    -webkit-text-stroke: 1px #fff !important;
  }

  .hero h1 em {
    margin-left: .08em !important;
  }

  .hero-copy {
    width: min(100%, 310px) !important;
    margin: 28px 0 0 9% !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .hero-copy p {
    padding-left: 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .hero-copy a {
    font-size: 10px !important;
  }

  .hero-copy b {
    width: 42px !important;
    height: 42px !important;
    margin-top: 5px !important;
  }

  .hero-caption {
    left: 20px !important;
    right: 20px !important;
    padding: 14px 0 !important;
    font-size: 8px !important;
    letter-spacing: .8px !important;
  }

  .hero-caption button {
    margin-left: auto !important;
    padding: 7px 0 !important;
    font-size: 9px !important;
  }

  /* Company: retain the video fade while avoiding an oversized empty gap on small screens. */
  .intro {
    padding-top: clamp(155px, 20svh, 190px) !important;
    padding-bottom: 92px !important;
  }

  .company-promise {
    max-width: 300px;
    margin-bottom: 28px !important;
  }

  .intro-copy {
    margin-top: 0 !important;
    gap: 18px !important;
  }

  .intro-copy p {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  .company-lead {
    font-size: 17px !important;
    line-height: 1.62 !important;
  }

  /* Fleet programme figures: easier to scan without huge numerals. */
  .metrics {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    gap: 0 !important;
  }

  .metrics>div,
  .metrics>div:first-child {
    padding: 18px 0 !important;
  }

  .metrics>div:first-child {
    padding-top: 0 !important;
  }

  .metrics>div:last-child {
    padding-bottom: 0 !important;
  }

  .metrics strong {
    width: auto !important;
    float: none !important;
    font-size: clamp(50px, 15vw, 62px) !important;
    line-height: .92 !important;
  }

  .metrics>div>span {
    margin: 10px 0 5px !important;
  }

  .capacity-note {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    line-height: 1.55 !important;
  }

  /* Section rhythm and headline scale. */
  .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .fleet,
  .reliability,
  .safety,
  .outcomes,
  .contact {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .fleet .section-top,
  .safety .section-top {
    margin-bottom: 28px !important;
  }

  .fleet .section-top h2,
  .reliability-title h2,
  .safety .section-top h2,
  .outcomes h2,
  .contact h2 {
    font-size: clamp(48px, 14vw, 58px) !important;
    line-height: .86 !important;
    letter-spacing: -.04em !important;
  }

  .section-top>p {
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Fleet cards become image + copy panels on mobile instead of text over the whole photo. */
  .fleet-phase-grid {
    margin-top: 28px !important;
    gap: 18px !important;
  }

  .fleet-phase-card {
    min-height: 0 !important;
    overflow: hidden !important;
    background: #08161d !important;
  }

  .fleet-phase-card::after {
    content: none !important;
    display: none !important;
  }

  .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-drawing {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.005) !important;
  }

  .fleet-phase-expansion .fleet-phase-drawing {
    object-position: center 43% !important;
    filter: saturate(.9) contrast(1.03) blur(.35px) !important;
  }

  .fleet-phase-content {
    min-height: 0 !important;
    padding: 26px 22px 24px !important;
    background: #08161d !important;
  }

  .fleet-phase-content .eyebrow {
    margin-bottom: 28px !important;
  }

  .fleet-phase-content h3 {
    margin-bottom: 16px !important;
    font-size: clamp(40px, 11.5vw, 48px) !important;
    line-height: .92 !important;
  }

  .fleet-phase-description {
    margin-bottom: 22px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .fleet-phase-content dl>div {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 12px !important;
    padding: 11px 0 !important;
  }

  .fleet-phase-content dd {
    text-align: right !important;
    font-size: 12px !important;
  }

  .fleet-phase-tag {
    margin-top: 18px !important;
  }

  .configurations {
    margin-top: 18px !important;
    gap: 0 !important;
  }

  .configurations>div {
    min-height: 0 !important;
    padding: 24px 0 26px !important;
  }

  .configurations p {
    margin-top: 18px !important;
  }

  /* Reliability: compact but comfortably tappable. */
  .reliability {
    gap: 28px !important;
  }

  .hours {
    margin-top: 28px !important;
    padding-top: 22px !important;
  }

  .hours strong {
    font-size: 44px !important;
  }

  .reliability-list {
    padding-top: 0 !important;
  }

  .reliability-list summary {
    padding: 20px 0 !important;
    gap: 14px !important;
    font-size: 17px !important;
  }

  .reliability-list details p {
    padding: 0 0 22px 30px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Promise cards: preserve the generated artwork and let copy breathe. */
  .promise-grid {
    gap: 20px !important;
  }

  .promise-visual {
    aspect-ratio: 1374 / 1145 !important;
  }

  .promise-copy {
    margin-top: -38px !important;
    padding: 54px 20px 22px !important;
  }

  .promise-copy h3 {
    font-size: clamp(32px, 9.5vw, 38px) !important;
    line-height: .98 !important;
  }

  .promise-copy p,
  .promise-grid article:nth-child(2) .promise-copy p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  @media(hover:none) {
    .promise-grid article:hover .promise-visual img {
      transform: scale(1.001) !important;
    }
  }

  .hse {
    padding: 0 18px !important;
  }

  .hse summary {
    padding: 20px 0 !important;
    line-height: 1.4 !important;
  }

  /* Outcomes: cleaner rows and less oversized typography. */
  .outcome-list {
    margin-top: 34px !important;
  }

  .outcome-toggle {
    grid-template-columns: 26px minmax(0, 1fr) 28px !important;
    gap: 10px !important;
    padding: 20px 0 !important;
  }

  .outcome-toggle h3 {
    font-size: clamp(23px, 7vw, 29px) !important;
    line-height: 1.02 !important;
  }

  .outcome-detail>p {
    padding-left: 36px !important;
    padding-right: 6px !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  .outcome-card.is-open {
    padding: 0 12px !important;
  }

  /* Contact + footer: compact final screen and fewer awkward wraps. */
  .contact {
    gap: 34px !important;
  }

  .contact>div>p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .contact-info {
    padding-top: 28px !important;
  }

  .contact-info h3 {
    margin-top: 22px !important;
    font-size: 36px !important;
  }

  .contact-info>a:not(.profile-link) {
    font-size: 19px !important;
    overflow-wrap: anywhere;
  }

  .assessment {
    margin-top: 28px !important;
  }

  .button.white {
    width: 100%;
    justify-content: space-between;
  }

  footer {
    padding: 14px 20px !important;
    gap: 10px 16px !important;
  }

  footer p {
    order: 4 !important;
    margin-top: 2px !important;
  }
}

@media(max-width:390px) {
  .hero h1 {
    font-size: clamp(54px, 17.2vw, 68px) !important;
  }

  .hero-copy {
    margin-left: 5% !important;
  }

  .fleet-phase-content dl>div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .fleet-phase-content dd {
    text-align: left !important;
  }
}


.fleet-capacity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 20px;
  padding: 18px 0 17px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.fleet-capacity strong {
  font: 600 clamp(50px, 5vw, 72px)/.82 'Barlow Condensed', sans-serif;
  letter-spacing: -.04em;
  color: #fff;
}

.fleet-capacity span {
  padding-bottom: 4px;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 1.25px;
  font-weight: 700;
  color: #ff7d87;
}

.fleet-total {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 50px;
  margin-top: 18px;
  padding: 34px 36px;
  background: #08161d;
  color: #fff;
}

.fleet-total>div {
  display: grid;
}

.fleet-total span {
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: #ff7d87;
}

.fleet-total strong {
  font: 600 clamp(56px, 6.2vw, 92px)/.82 'Barlow Condensed', sans-serif;
  letter-spacing: -.045em;
}

.fleet-total b {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 1.6px;
}

.fleet-total p {
  max-width: 680px;
  margin: 0;
  color: #aebfc6;
  font-size: 12px;
  line-height: 1.7;
}

.execution-visual {
  position: relative;
  margin: 0 0 22px;
  min-height: 520px;
  overflow: hidden;
  background: #08161d;
}

.execution-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  filter: saturate(.9) contrast(1.03);
  transform: scale(1.005);
}

.execution-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(5, 20, 28, .94) 0%,
      rgba(5, 20, 28, .70) 22%,
      rgba(5, 20, 28, .22) 44%,
      rgba(5, 20, 28, 0) 68%);
}

.execution-visual figcaption {
  position: absolute;
  z-index: 2;
  left: 30px;
  right: 30px;
  bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  color: #fff;
}

.execution-visual figcaption span {
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: #ff7d87;
}

.execution-visual figcaption p {
  max-width: 520px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #d7e2e6;
}

.safety .promise-grid {
  margin-top: 0 !important;
}

@media(max-width:1000px) {
  .fleet-total {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .execution-visual {
    min-height: 430px;
  }

  .execution-visual figcaption {
    display: block;
  }

  .execution-visual figcaption p {
    margin-top: 10px;
  }
}

@media(max-width:760px) {
  .fleet-capacity {
    margin-bottom: 18px;
    padding: 15px 0;
  }

  .fleet-capacity strong {
    font-size: 50px;
  }

  .fleet-total {
    margin-top: 16px;
    padding: 26px 22px;
  }

  .fleet-total strong {
    font-size: 58px;
  }

  .fleet-total p {
    font-size: 11px;
    line-height: 1.6;
  }

  .execution-visual {
    min-height: 300px;
    margin-bottom: 18px;
  }

  .execution-visual img {
    object-position: center 50%;
  }

  .execution-visual figcaption {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }

  .execution-visual figcaption p {
    font-size: 12px;
    line-height: 1.5;
  }
}


/* REV1 fleet image tuning — Initial Delivery shifted right + matched subtle blur. */
.fleet-phase-initial .fleet-phase-bg {
  object-position: 62% center !important;
  filter: saturate(.9) contrast(1.03) blur(.35px) !important;
  transform: scale(1.01) !important;
}

.fleet-phase-expansion .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-drawing{
  object-position:center 43%!important;
  filter:saturate(.9) contrast(1.03) blur(.35px)!important;
  transform:scale(1.01)!important;
}


/* REV1.3 — problem-to-solution Company narrative + clearer fleet blur + compact specifications. */
.company-narrative{
  width:100%;
  max-width:1080px;
}
.company-problem{
  max-width:1040px;
  margin:0!important;
  color:var(--ink)!important;
  font:500 clamp(25px,2.3vw,36px)/1.28 'Barlow Condensed',sans-serif!important;
  letter-spacing:-.018em;
}
.company-problem em{
  font-style:italic;
}
.company-solution{
  display:grid;
  grid-template-columns:minmax(150px,.34fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,46px);
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid var(--line);
  align-items:start;
}
.company-solution>span{
  color:var(--red);
  font-size:10px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:1.5px;
}
.company-solution p{
  max-width:430px;
  margin:0!important;
  color:#445963;
  font-size:16px;
  line-height:1.7;
}

/* Apply visible, controlled blur directly to both fleet artwork layers. */
.fleet-phase-initial .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-drawing{
  filter:saturate(.9) contrast(1.03) blur(.8px)!important;
  transform:scale(1.015)!important;
}
.fleet-phase-initial .fleet-phase-bg{
  object-position:62% center!important;
}
.fleet-phase-expansion .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-drawing{
  object-position:center 43%!important;
}

/* Compact the specification/configuration area inside both fleet cards. */
.fleet-phase-content{
  min-height:610px!important;
  padding:30px 32px 24px!important;
}
.fleet-phase-content .eyebrow{
  margin-bottom:auto!important;
}
.fleet-phase-content h3{
  margin-bottom:14px!important;
}
.fleet-capacity{
  margin-bottom:14px!important;
  padding:13px 0 12px!important;
  gap:12px!important;
}
.fleet-phase-description{
  margin-bottom:16px!important;
  line-height:1.55!important;
}
.fleet-phase-content dl>div{
  gap:12px!important;
  padding:8px 0!important;
}
.fleet-phase-tag{
  margin-top:14px!important;
}

@media(max-width:1000px){
  .company-solution{
    grid-template-columns:1fr 1fr;
    gap:18px 28px;
  }
  .company-solution>span{
    grid-column:1 / -1;
  }
}

@media(max-width:760px){
  .company-problem{
    font-size:clamp(24px,7.2vw,31px)!important;
    line-height:1.28!important;
  }
  .company-solution{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:26px;
    padding-top:20px;
  }
  .company-solution>span{
    grid-column:auto;
  }
  .company-solution p{
    max-width:none;
    font-size:14.5px;
    line-height:1.65;
  }
  .fleet-phase-content{
    min-height:0!important;
    padding:22px 20px 20px!important;
  }
  .fleet-phase-content .eyebrow{
    margin-bottom:20px!important;
  }
  .fleet-phase-content h3{
    margin-bottom:12px!important;
  }
  .fleet-capacity{
    margin-bottom:12px!important;
    padding:12px 0 10px!important;
  }
  .fleet-phase-description{
    margin-bottom:14px!important;
  }
  .fleet-phase-content dl>div{
    padding:7px 0!important;
  }
  .fleet-phase-tag{
    margin-top:12px!important;
  }
  .fleet-phase-initial .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-drawing{
    filter:saturate(.9) contrast(1.03) blur(.7px)!important;
    transform:scale(1.012)!important;
  }
}


/* REV1.4 — elegant problem/answer flow, hover availability accordion, equipment marquee, fixed-open HSE. */

/* Company: solution reads as the answer, without another label competing with the problem. */
.company-solution{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  gap:clamp(30px,4vw,64px)!important;
  margin-top:38px!important;
  padding:28px 0 0 34px!important;
  border-top:1px solid var(--line)!important;
  align-items:start!important;
}
.company-solution::before{
  content:''!important;
  position:absolute;
  left:0;
  top:28px;
  width:3px;
  height:46px;
  background:var(--red);
}
.company-solution>span{
  display:none!important;
}
.company-solution p{
  max-width:none!important;
  margin:0!important;
}
.company-solution p:first-child{
  color:var(--ink)!important;
  font:500 clamp(21px,1.85vw,28px)/1.43 'Barlow Condensed',sans-serif!important;
  letter-spacing:-.012em;
}
.company-solution p:last-child{
  max-width:440px!important;
  padding-top:3px;
  color:#52666f!important;
  font-size:15px!important;
  line-height:1.72!important;
}

/* Engineered Availability: hover remains a real accordion interaction on fine pointers. */
.reliability-list details{
  cursor:pointer;
}

/* Equipment marquee occupies space only while Proven Equipment is active/hovered. */
.equipment-marquee{
  position:relative;
  height:0;
  max-height:0;
  margin-top:0;
  opacity:0;
  overflow:hidden;
  background:#f7fafb;
  border-top:0 solid rgba(255,255,255,.16);
  transition:
    height .42s cubic-bezier(.2,.75,.25,1),
    max-height .42s cubic-bezier(.2,.75,.25,1),
    margin-top .42s cubic-bezier(.2,.75,.25,1),
    opacity .24s ease,
    border-width .24s ease;
}
.reliability-list.show-equipment-marquee .equipment-marquee{
  height:102px;
  max-height:102px;
  margin-top:24px;
  opacity:1;
  border-top-width:1px;
}
.equipment-marquee::before,
.equipment-marquee::after{
  content:'';
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:52px;
  pointer-events:none;
}
.equipment-marquee::before{
  left:0;
  background:linear-gradient(90deg,#f7fafb,rgba(247,250,251,0));
}
.equipment-marquee::after{
  right:0;
  background:linear-gradient(270deg,#f7fafb,rgba(247,250,251,0));
}
.equipment-marquee-track{
  display:flex;
  width:max-content;
  height:100%;
  align-items:center;
  will-change:transform;
  animation:equipment-marquee-run 28s linear infinite;
}
.equipment-marquee:hover .equipment-marquee-track{
  animation-play-state:paused;
}
.equipment-logo-set{
  display:flex;
  flex:none;
  align-items:center;
  gap:clamp(34px,4vw,68px);
  padding:0 clamp(34px,4vw,68px) 0 34px;
}
.equipment-logo{
  width:clamp(112px,9vw,148px);
  height:68px;
  display:grid;
  place-items:center;
  flex:none;
  opacity:.84;
  transition:opacity .22s ease,transform .22s ease;
}
.equipment-logo img{
  display:block;
  max-width:100%;
  max-height:42px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.equipment-logo span{
  display:none;
  color:#143441;
  font:600 18px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.equipment-logo.is-fallback img{
  display:none;
}
.equipment-logo.is-fallback span{
  display:block;
}
.equipment-logo:hover{
  opacity:1;
  transform:translateY(-2px);
}
@keyframes equipment-marquee-run{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* HSE framework remains expanded in this revision. */
.hse-static[open] summary span{
  transform:rotate(45deg);
}
.hse-static summary{
  cursor:default!important;
}

@media(max-width:760px){
  .company-solution{
    grid-template-columns:1fr!important;
    gap:14px!important;
    margin-top:27px!important;
    padding:21px 0 0 20px!important;
  }
  .company-solution::before{
    top:21px;
    height:38px;
  }
  .company-solution p:first-child{
    font-size:20px!important;
    line-height:1.45!important;
  }
  .company-solution p:last-child{
    max-width:none!important;
    font-size:14px!important;
  }
  .reliability-list.show-equipment-marquee .equipment-marquee{
    height:88px;
    max-height:88px;
    margin-top:18px;
  }
  .equipment-logo-set{
    gap:28px;
    padding-left:24px;
    padding-right:28px;
  }
  .equipment-logo{
    width:108px;
    height:58px;
  }
  .equipment-logo img{
    max-height:36px;
  }
  .equipment-marquee::before,
  .equipment-marquee::after{
    width:28px;
  }
}

@media(prefers-reduced-motion:reduce){
  .equipment-marquee-track{
    animation:none!important;
  }
}


/* REV1.5 — one-column Company answer, stronger fleet readability, persistent equipment marquee, reliability media. */

/* 01 / COMPANY — answer stays in a single elegant column. */
.company-solution{
  display:block!important;
  max-width:860px!important;
  padding-left:34px!important;
}
.company-solution p{
  max-width:760px!important;
}
.company-solution p:first-child,
.company-solution p:last-child{
  color:var(--ink)!important;
  font:500 clamp(21px,1.85vw,28px)/1.5 'Barlow Condensed',sans-serif!important;
  letter-spacing:-.012em!important;
  padding-top:0!important;
}

/* 02 / FLEET — strengthen image readability without losing the photography. */
.fleet-phase-card::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      to bottom,
      rgba(5,20,28,.08) 0%,
      rgba(5,20,28,.10) 24%,
      rgba(5,20,28,.30) 48%,
      rgba(5,20,28,.72) 70%,
      rgba(5,20,28,.96) 100%
    )!important;
}
.fleet-phase-content{
  position:relative!important;
  z-index:2!important;
}
.fleet-phase-content>.eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  align-self:flex-start!important;
  width:auto!important;
  margin:-4px 0 auto!important;
  padding:8px 11px 7px!important;
  background:rgba(8,22,29,.82)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  color:#fff!important;
  line-height:1.25!important;
}
.fleet-phase-content h3,
.fleet-phase-description,
.fleet-phase-content dl,
.fleet-phase-tag,
.fleet-capacity{
  text-shadow:0 1px 14px rgba(0,0,0,.34);
}

/* 03 / ENGINEERED — marquee is a permanent supporting strip below item 05. */
.reliability-list.marquee-persistent .equipment-marquee{
  height:102px!important;
  max-height:102px!important;
  margin-top:24px!important;
  opacity:1!important;
  border-top-width:1px!important;
}
.reliability-list.marquee-persistent:not(.show-equipment-marquee) .equipment-marquee{
  height:102px!important;
  max-height:102px!important;
  margin-top:24px!important;
  opacity:1!important;
}
.equipment-logo img[src*="E-Crane-Beyaz-Kale.jpg"]{
  max-height:46px!important;
  padding:4px 8px;
  background:#fff;
  border-radius:3px;
}
.equipment-logo img[src*="nemag.png"]{
  max-height:40px!important;
}

/* Reliability imagery for Critical spares + Technical response. */
.reliability-detail-media{
  margin:4px 10px 24px 39px;
  height:0;
  opacity:0;
  overflow:hidden;
  border-radius:2px;
  background:#0b2935;
  transition:
    height .42s cubic-bezier(.22,.8,.25,1),
    opacity .28s ease,
    margin .42s cubic-bezier(.22,.8,.25,1);
}
.reliability-list details[open] .reliability-detail-media{
  height:190px;
  opacity:1;
}
.reliability-detail-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.88) contrast(1.04);
  transition:transform .7s cubic-bezier(.2,.7,.25,1);
}
@media(hover:hover){
  .reliability-detail-media:hover img{
    transform:scale(1.025);
  }
}

@media(max-width:760px){
  .company-solution{
    max-width:none!important;
    padding-left:20px!important;
  }
  .company-solution p{
    max-width:none!important;
  }
  .company-solution p:first-child,
  .company-solution p:last-child{
    font-size:20px!important;
    line-height:1.48!important;
  }

  /* Mobile fleet remains image + panel; retain a localized dark fade for title/copy. */
  .fleet-phase-card::after{
    background:
      linear-gradient(
        to bottom,
        rgba(5,20,28,.04) 0%,
        rgba(5,20,28,.08) 28%,
        rgba(5,20,28,.28) 48%,
        rgba(5,20,28,.80) 68%,
        rgba(5,20,28,.98) 100%
      )!important;
  }
  .fleet-phase-content>.eyebrow{
    margin:0 0 20px!important;
    padding:7px 9px 6px!important;
    font-size:9px!important;
  }

  .reliability-list.marquee-persistent .equipment-marquee,
  .reliability-list.marquee-persistent:not(.show-equipment-marquee) .equipment-marquee{
    height:88px!important;
    max-height:88px!important;
    margin-top:18px!important;
  }
  .reliability-detail-media{
    margin:2px 0 20px 30px;
  }
  .reliability-list details[open] .reliability-detail-media{
    height:156px;
  }
}

@media(prefers-reduced-motion:reduce){
  .reliability-detail-media,
  .reliability-detail-media img{
    transition:none!important;
  }
}


/* REV1.6 — full-width Company answer + restored accordion copy + shared bottom showcase. */

/* 01 / COMPANY — let the answer use the full available narrative width. */
.company-narrative,
.company-solution,
.company-solution p{
  width:100%!important;
  max-width:none!important;
}
.company-solution{
  display:block!important;
  box-sizing:border-box!important;
  padding-right:0!important;
}
.company-solution p:first-child,
.company-solution p:last-child{
  max-width:none!important;
}

/* 03 / ENGINEERED — accordion copy restored to the clean text-only treatment. */
.reliability-list details p{
  margin:0!important;
  padding:0 10px 24px 39px!important;
  max-width:760px!important;
  color:#c6d7df!important;
  font-size:15px!important;
  line-height:1.68!important;
}

/* One fixed showcase area below item 05. */
.reliability-showcase{
  position:relative;
  min-height:118px;
  margin-top:24px;
  overflow:hidden;
  background:#f7fafb;
  border-top:1px solid rgba(255,255,255,.16);
}
.reliability-showcase-panel{
  display:none;
  margin:0;
}
.reliability-showcase-panel.is-active{
  display:block;
}

/* Equipment marquee is the default panel. */
.reliability-showcase .equipment-marquee{
  height:118px!important;
  max-height:none!important;
  margin:0!important;
  opacity:1!important;
  border-top:0!important;
}
.reliability-showcase .equipment-marquee-track{
  height:118px!important;
}
.equipment-logo{
  height:74px!important;
}
.equipment-logo.ecrane-logo{
  width:156px!important;
}
.equipment-logo.ecrane-logo img{
  display:block!important;
  width:138px!important;
  height:52px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  padding:5px 9px!important;
  box-sizing:border-box!important;
  background:#fff!important;
  border-radius:3px!important;
}
.equipment-logo img[src*="nemag.png"]{
  max-height:42px!important;
}

/* Critical spares / Technical response replace the marquee in exactly the same area. */
.reliability-photo-panel{
  position:relative;
  height:260px;
  overflow:hidden;
  background:#0a2733;
}
.reliability-photo-panel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.88) contrast(1.04);
}
.reliability-photo-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,20,28,.88),rgba(5,20,28,.24) 48%,rgba(5,20,28,0) 72%);
  pointer-events:none;
}
.reliability-photo-panel figcaption{
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
  bottom:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  color:#fff;
}
.reliability-photo-panel figcaption span{
  color:#ff7d87;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
}
.reliability-photo-panel figcaption p{
  max-width:520px!important;
  margin:0!important;
  padding:0!important;
  color:#e0e9ec!important;
  font-size:13px!important;
  line-height:1.55!important;
}

/* Neutralize REV1.5's inline-detail media rules now that imagery lives below item 05. */
.reliability-detail-media{
  display:none!important;
}

@media(max-width:760px){
  .company-solution{
    padding-right:0!important;
  }
  .reliability-list details p{
    max-width:none!important;
    padding:0 0 22px 30px!important;
    font-size:14px!important;
    line-height:1.65!important;
  }
  .reliability-showcase{
    min-height:96px;
    margin-top:18px;
  }
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track{
    height:96px!important;
  }
  .reliability-photo-panel{
    height:210px;
  }
  .reliability-photo-panel figcaption{
    left:16px;
    right:16px;
    bottom:14px;
    display:block;
  }
  .reliability-photo-panel figcaption p{
    margin-top:6px!important;
    font-size:12px!important;
  }
}


/* REV1.7 — consistent Engineered showcase + softened marquee edges + new Planned imagery. */

/* Keep one stable footprint below item 05, regardless of whether it shows logos or photography. */
.reliability-showcase{
  height:210px!important;
  min-height:210px!important;
  max-height:210px!important;
  overflow:hidden!important;
}
.reliability-showcase-panel{
  width:100%!important;
  height:210px!important;
  min-height:210px!important;
  max-height:210px!important;
  overflow:hidden!important;
}
.reliability-showcase-panel.is-active{
  display:block!important;
}
.reliability-showcase .equipment-marquee,
.reliability-showcase .equipment-marquee-track,
.reliability-showcase .equipment-logo-set{
  height:210px!important;
  min-height:210px!important;
  max-height:210px!important;
}
.reliability-photo-panel{
  height:210px!important;
  min-height:210px!important;
  max-height:210px!important;
}

/* Blend the logo strip into the navy section instead of exposing a hard vertical edge. */
.reliability-showcase .equipment-marquee::before{
  left:0!important;
  width:112px!important;
  background:linear-gradient(
    90deg,
    #143441 0%,
    rgba(20,52,65,.84) 18%,
    rgba(247,250,251,.54) 62%,
    rgba(247,250,251,0) 100%
  )!important;
}
.reliability-showcase .equipment-marquee::after{
  right:0!important;
  width:76px!important;
  background:linear-gradient(
    270deg,
    #f7fafb 0%,
    rgba(247,250,251,.88) 34%,
    rgba(247,250,251,0) 100%
  )!important;
}

/* 02 / PLANNED EXPANSION — use the new operational image while preserving text readability. */
.fleet-phase-expansion .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-drawing{
  object-position:center 48%!important;
  filter:saturate(.90) contrast(1.03) blur(.65px)!important;
  transform:scale(1.012)!important;
}

@media(max-width:760px){
  .reliability-showcase,
  .reliability-showcase-panel,
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    height:176px!important;
    min-height:176px!important;
    max-height:176px!important;
  }
  .reliability-showcase .equipment-marquee::before{
    width:72px!important;
  }
  .reliability-showcase .equipment-marquee::after{
    width:46px!important;
  }
  .fleet-phase-expansion .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-drawing{
    object-position:center 50%!important;
    filter:saturate(.90) contrast(1.03) blur(.55px)!important;
  }
}


/* REV1.8 — compact navy marquee + JPEG planned-expansion asset. */
.reliability-showcase{
  height:136px!important;
  min-height:136px!important;
  max-height:136px!important;
  margin-top:18px!important;
  background:transparent!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
}
.reliability-showcase-panel{
  width:100%!important;
  height:136px!important;
  min-height:136px!important;
  max-height:136px!important;
  margin:0!important;
}
.reliability-showcase .equipment-marquee{
  width:100%!important;
  height:136px!important;
  min-height:136px!important;
  max-height:136px!important;
  margin:0!important;
  background:transparent!important;
}
.reliability-showcase .equipment-marquee-track,
.reliability-showcase .equipment-logo-set{
  height:136px!important;
  min-height:136px!important;
  max-height:136px!important;
}
.reliability-photo-panel{
  width:100%!important;
  height:136px!important;
  min-height:136px!important;
  max-height:136px!important;
  margin:0!important;
  background:#0a2733!important;
}
.reliability-showcase .equipment-marquee::before{
  width:84px!important;
  background:linear-gradient(
    90deg,
    #143441 0%,
    rgba(20,52,65,.86) 28%,
    rgba(20,52,65,0) 100%
  )!important;
}
.reliability-showcase .equipment-marquee::after{
  width:64px!important;
  background:linear-gradient(
    270deg,
    #143441 0%,
    rgba(20,52,65,.72) 30%,
    rgba(20,52,65,0) 100%
  )!important;
}
.equipment-logo{
  height:62px!important;
}
.equipment-logo img{
  max-height:36px!important;
}
.equipment-logo.ecrane-logo img{
  width:126px!important;
  height:44px!important;
  padding:3px 6px!important;
}
.reliability-photo-panel figcaption{
  bottom:12px!important;
}

/* JPEG card image — no browser-specific WebP dependency. */
.fleet-phase-expansion .fleet-phase-bg,
.fleet-phase-expansion .fleet-phase-drawing{
  object-position:center 48%!important;
  filter:saturate(.90) contrast(1.03) blur(.55px)!important;
  transform:scale(1.01)!important;
}

@media(max-width:760px){
  .reliability-showcase,
  .reliability-showcase-panel,
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
  }
  .reliability-showcase{
    margin-top:14px!important;
  }
  .reliability-showcase .equipment-marquee::before{
    width:54px!important;
  }
  .reliability-showcase .equipment-marquee::after{
    width:40px!important;
  }
  .equipment-logo{
    height:52px!important;
  }
  .equipment-logo img{
    max-height:31px!important;
  }
}


/* REV1.9 — lock Engineered showcase geometry and remove the top white rule. */
@media(min-width:761px){
  /* Tighten the bottom of section 03 now that the showcase is deliberately compact. */
  .reliability{
    padding-bottom:96px!important;
  }

  /* One fixed canvas below item 05. Every state occupies this exact box. */
  .reliability-showcase{
    position:relative!important;
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    margin:16px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    background:transparent!important;
    border-top:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
  }

  .reliability-showcase-panel{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:hidden!important;
    transition:opacity .24s ease, visibility .24s ease!important;
  }

  .reliability-showcase-panel.is-active{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Marquee and image panels now share identical geometry. */
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  .reliability-showcase .equipment-marquee{
    background:transparent!important;
    border:0!important;
  }

  /* Fade into the same navy background on both sides. */
  .reliability-showcase .equipment-marquee::before{
    left:0!important;
    width:82px!important;
    background:linear-gradient(
      90deg,
      #143441 0%,
      rgba(20,52,65,.88) 28%,
      rgba(20,52,65,0) 100%
    )!important;
  }

  .reliability-showcase .equipment-marquee::after{
    right:0!important;
    width:58px!important;
    background:linear-gradient(
      270deg,
      #143441 0%,
      rgba(20,52,65,.76) 30%,
      rgba(20,52,65,0) 100%
    )!important;
  }

  .equipment-logo{
    height:58px!important;
  }

  .equipment-logo img{
    max-height:34px!important;
  }

  .equipment-logo.ecrane-logo img{
    width:122px!important;
    height:42px!important;
    max-height:42px!important;
  }

  /* Hover-swapped imagery stays inside the exact marquee footprint. */
  .reliability-photo-panel{
    background:#0a2733!important;
  }

  .reliability-photo-panel img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  .reliability-photo-panel figcaption{
    left:18px!important;
    right:18px!important;
    bottom:10px!important;
  }

  .reliability-photo-panel figcaption p{
    max-width:440px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
}


/* REV1.10 — white equipment marquee; photo-only maintenance/support states. */
@media(min-width:761px){
  /* Keep the current compact showcase footprint, but return only the marquee to white. */
  .reliability-showcase .equipment-marquee{
    background:#fff!important;
  }

  .reliability-showcase .equipment-marquee::before{
    width:72px!important;
    background:linear-gradient(
      90deg,
      #fff 0%,
      rgba(255,255,255,.92) 34%,
      rgba(255,255,255,0) 100%
    )!important;
  }

  .reliability-showcase .equipment-marquee::after{
    width:58px!important;
    background:linear-gradient(
      270deg,
      #fff 0%,
      rgba(255,255,255,.88) 34%,
      rgba(255,255,255,0) 100%
    )!important;
  }

  /* Maintenance, Critical Spares and Technical Response are image-only states. */
  .reliability-photo-panel::after{
    content:none!important;
    display:none!important;
  }

  .reliability-photo-panel figcaption{
    display:none!important;
  }

  .reliability-photo-panel img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:saturate(.92) contrast(1.03)!important;
  }

  .reliability-showcase-panel[data-showcase-panel="maintenance"] img{
    object-position:center 48%!important;
  }
}


/* REV1.11 — faster logo marquee, tighter white strip, fleet-total image gradient. */
@media(min-width:761px){
  /* Keep every listed brand visible and make the loop feel more active. */
  .reliability-showcase{
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
  }

  .reliability-showcase-panel,
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
  }

  .reliability-showcase .equipment-marquee{
    background:#fff!important;
  }

  .equipment-marquee-track{
    animation-duration:16s!important;
  }

  .equipment-logo-set{
    gap:clamp(28px,3vw,48px)!important;
    padding-left:28px!important;
    padding-right:48px!important;
  }

  .equipment-logo{
    width:clamp(118px,9.5vw,150px)!important;
    height:54px!important;
  }

  .equipment-logo img{
    max-height:40px!important;
    max-width:100%!important;
  }

  .equipment-logo.ecrane-logo{
    width:150px!important;
  }

  .equipment-logo.ecrane-logo img{
    width:136px!important;
    height:46px!important;
    max-height:46px!important;
  }

  /* Keep a readable brand name fallback so no listed vendor disappears if a remote logo fails. */
  .equipment-logo span{
    display:block!important;
    margin-top:5px!important;
    color:#143441!important;
    font:600 10px/1 'DM Sans',sans-serif!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    opacity:.72!important;
  }

  .equipment-logo.is-fallback img{
    display:none!important;
  }

  .equipment-logo.is-fallback span{
    margin-top:0!important;
    font:600 16px/1 'Barlow Condensed',sans-serif!important;
    opacity:1!important;
  }

  /* Fleet total: black on the left, fading into the supplied fleet image on the right. */
  .fleet-total{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:#08161d!important;
  }

  .fleet-total::before{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    inset:0 0 0 38%!important;
    background:
      linear-gradient(
        90deg,
        #08161d 0%,
        rgba(8,22,29,.96) 18%,
        rgba(8,22,29,.80) 36%,
        rgba(8,22,29,.46) 58%,
        rgba(8,22,29,.16) 78%,
        rgba(8,22,29,.08) 100%
      ),
      url('https://kraanwerks.com/wp-content/uploads/2025/03/89a1262d-d9a3-4cb9-80c4-5614fbedf6b7.jpg') center 54% / cover no-repeat!important;
    pointer-events:none!important;
  }

  .fleet-total::after{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(8,22,29,.06),rgba(8,22,29,.30))!important;
    pointer-events:none!important;
  }

  .fleet-total>div,
  .fleet-total>p{
    position:relative!important;
    z-index:1!important;
  }

  .fleet-total>p{
    max-width:600px!important;
    padding:16px 18px!important;
    background:rgba(8,22,29,.40)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    text-shadow:0 1px 8px rgba(0,0,0,.55)!important;
  }
}


/* REV1.12 — cleaner logo-only marquee, faster loop, fleet image framing, mobile hero simplification. */

/* Logo-only marquee: isolate every brand so wide marks never visually merge. */
.equipment-logo span{
  display:none!important;
}
.equipment-logo.is-fallback span{
  display:none!important;
}
.equipment-marquee-track{
  animation-duration:12s!important;
}
.equipment-logo-set{
  gap:38px!important;
  padding-left:30px!important;
  padding-right:46px!important;
}
.equipment-logo{
  flex:0 0 146px!important;
  width:146px!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.equipment-logo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:122px!important;
  max-height:38px!important;
  object-fit:contain!important;
}
.equipment-logo img[alt="MacGregor"]{
  max-width:116px!important;
  max-height:32px!important;
}
.equipment-logo img[alt="Yanmar"]{
  max-width:112px!important;
  max-height:32px!important;
}
.equipment-logo.ecrane-logo{
  flex-basis:154px!important;
  width:154px!important;
}
.equipment-logo.ecrane-logo img{
  width:136px!important;
  height:46px!important;
  max-width:136px!important;
  max-height:46px!important;
}

/* Move the right-side fleet image upward to keep its useful subject detail centered. */
.fleet-total::before{
  background-position:center center, center 36%!important;
}

/* Mobile V1 — keep the loop hero, remove the scroll-scrub movie, and simplify the page rhythm. */
@media(max-width:760px){
  .hero-company-flow{
    --primary-opacity:1!important;
    --zoom-opacity:0!important;
    background:#08161d!important;
  }

  .hero-flow-media{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:100svh!important;
    margin-bottom:0!important;
    z-index:0!important;
  }

  .hero-flow-media .hero-video-primary{
    display:block!important;
    opacity:1!important;
  }

  .hero-flow-media .hero-video-zoom{
    display:none!important;
    opacity:0!important;
  }

  .hero-flow-media .hero-video{
    top:72px!important;
    height:calc(100svh - 72px)!important;
    object-position:55% 0%!important;
  }

  .hero-flow-media::after{
    inset:72px 0 0!important;
    background:
      linear-gradient(180deg,rgba(5,20,28,.12) 0%,rgba(5,20,28,.02) 30%,rgba(5,20,28,.24) 100%),
      linear-gradient(90deg,rgba(5,20,28,.42) 0%,rgba(5,20,28,.12) 62%,rgba(5,20,28,.04) 100%)!important;
  }

  .hero{
    height:100svh!important;
    min-height:680px!important;
    max-height:none!important;
  }

  .hero-stage{
    position:relative!important;
    top:auto!important;
    height:100svh!important;
    min-height:680px!important;
  }

  .hero-overlay{
    top:72px!important;
    bottom:66px!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    padding:clamp(46px,7svh,72px) 0 58px!important;
    justify-content:center!important;
  }

  .hero-kicker{
    max-width:270px!important;
    margin-bottom:20px!important;
    font-size:9px!important;
    line-height:1.5!important;
    letter-spacing:1.25px!important;
  }

  .hero h1{
    max-width:100%!important;
    font-size:clamp(54px,16.8vw,72px)!important;
    line-height:.80!important;
    letter-spacing:-.04em!important;
  }

  .hero h1 .hero-line-one,
  .hero h1 .hero-line-two,
  .hero h1 .hero-line-three{
    transform:none!important;
    margin-left:0!important;
  }

  .hero h1 .hero-line-two{
    margin-left:.04em!important;
  }

  .hero-copy{
    width:min(100%,300px)!important;
    margin:26px 0 0!important;
    gap:12px!important;
  }

  .hero-copy p{
    padding-left:12px!important;
    font-size:12.5px!important;
    line-height:1.55!important;
  }

  .hero-caption{
    left:20px!important;
    right:20px!important;
    bottom:14px!important;
    padding:12px 0!important;
    gap:10px!important;
  }

  .hero-caption>span:nth-child(2){
    display:none!important;
  }

  .hero-caption button{
    margin-left:auto!important;
  }

  /* Company now begins as a clean editorial section, not as another video-scroll stage. */
  .intro{
    min-height:0!important;
    padding-top:74px!important;
    padding-bottom:74px!important;
    background:#fff!important;
  }

  .company-story{
    max-width:none!important;
  }

  .company-promise{
    max-width:100%!important;
    margin-bottom:24px!important;
    font-size:clamp(31px,9.5vw,42px)!important;
    line-height:.96!important;
  }

  .company-problem{
    font-size:clamp(24px,7.4vw,31px)!important;
    line-height:1.30!important;
  }

  .company-solution{
    margin-top:24px!important;
    padding:20px 0 0 18px!important;
  }

  .company-solution p:first-child,
  .company-solution p:last-child{
    font-size:18px!important;
    line-height:1.52!important;
  }

  /* Cleaner vertical rhythm for the remaining mobile sections. */
  .fleet,
  .reliability,
  .safety,
  .outcomes,
  .contact{
    padding-top:58px!important;
    padding-bottom:58px!important;
  }

  .section{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .fleet .section-top h2,
  .reliability-title h2,
  .safety .section-top h2,
  .outcomes h2,
  .contact h2{
    font-size:clamp(45px,13vw,56px)!important;
    line-height:.88!important;
  }

  .fleet-phase-grid{
    gap:16px!important;
  }

  .fleet-total{
    padding:24px 20px!important;
  }

  .fleet-total strong{
    font-size:54px!important;
  }

  /* Keep the mobile Engineered showcase compact and readable. */
  .reliability-showcase,
  .reliability-showcase-panel,
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
  }

  .reliability-showcase .equipment-marquee{
    background:#fff!important;
  }

  .equipment-logo-set{
    gap:26px!important;
    padding-left:22px!important;
    padding-right:36px!important;
  }

  .equipment-logo{
    flex-basis:116px!important;
    width:116px!important;
    height:48px!important;
  }

  .equipment-logo img{
    max-width:100px!important;
    max-height:30px!important;
  }

  .equipment-logo.ecrane-logo{
    flex-basis:126px!important;
    width:126px!important;
  }

  .equipment-logo.ecrane-logo img{
    width:112px!important;
    height:38px!important;
    max-width:112px!important;
    max-height:38px!important;
  }
}


/* REV1.13 — faster desktop marquee + new fleet-total image + Performance Control visual. */
@media(min-width:761px){
  /* Desktop needs a higher visual travel speed than mobile because the track is wider. */
  .equipment-marquee-track{
    animation-duration:7.5s!important;
  }

  /* Fit more brands on screen and keep each mark visually separated. */
  .equipment-logo-set{
    gap:24px!important;
    padding-left:22px!important;
    padding-right:30px!important;
  }

  .equipment-logo{
    flex:0 0 120px!important;
    width:120px!important;
    height:52px!important;
  }

  .equipment-logo img{
    max-width:108px!important;
    max-height:36px!important;
  }

  .equipment-logo img[alt="MacGregor"]{
    max-width:102px!important;
    max-height:30px!important;
  }

  .equipment-logo img[alt="Yanmar"]{
    max-width:100px!important;
    max-height:30px!important;
  }

  .equipment-logo.ecrane-logo{
    flex-basis:128px!important;
    width:128px!important;
  }

  .equipment-logo.ecrane-logo img{
    width:116px!important;
    height:40px!important;
    max-width:116px!important;
    max-height:40px!important;
  }

  /* Swap fleet-total artwork and bias framing upward for useful deck/crane detail. */
  .fleet-total::before{
    background:
      linear-gradient(
        90deg,
        #08161d 0%,
        rgba(8,22,29,.96) 18%,
        rgba(8,22,29,.80) 36%,
        rgba(8,22,29,.46) 58%,
        rgba(8,22,29,.16) 78%,
        rgba(8,22,29,.08) 100%
      ),
      url('https://kraanwerks.com/wp-content/uploads/2024/04/IMG-20230309-WA0010.jpg') center 32% / cover no-repeat!important;
  }

  .reliability-showcase-panel[data-showcase-panel="performance"] img{
    object-position:center 48%!important;
  }
}


/* REV1.14 — exact-distance desktop marquee loop + swap fleet/performance imagery back. */
@media(min-width:761px){
  /* Move by the measured width of exactly one logo set.
     This prevents the duplicated MacGregor from catching the preceding SEM at loop reset. */
  .equipment-marquee-track{
    --marquee-distance:1180px;
    animation-name:equipment-marquee-run-exact!important;
    animation-duration:7.5s!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
  }

  .equipment-logo-set{
    flex:none!important;
    width:max-content!important;
  }

  @keyframes equipment-marquee-run-exact{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-1 * var(--marquee-distance)),0,0);}
  }

  /* Restore the previous fleet-total artwork. */
  .fleet-total::before{
    background:
      linear-gradient(
        90deg,
        #08161d 0%,
        rgba(8,22,29,.96) 18%,
        rgba(8,22,29,.80) 36%,
        rgba(8,22,29,.46) 58%,
        rgba(8,22,29,.16) 78%,
        rgba(8,22,29,.08) 100%
      ),
      url('https://kraanwerks.com/wp-content/uploads/2025/03/89a1262d-d9a3-4cb9-80c4-5614fbedf6b7.jpg') center 36% / cover no-repeat!important;
  }
}


/* REV1.15 — desktop marquee uses one logo set only; no duplicate overlap. */
@media(min-width:761px){
  .equipment-marquee{
    overflow:hidden!important;
  }

  /* Keep the duplicated set for mobile, but never render it on laptop/desktop. */
  .equipment-marquee .equipment-logo-set[aria-hidden="true"]{
    display:none!important;
  }

  .equipment-marquee-track{
    --marquee-container-width:600px;
    --marquee-set-width:1180px;
    width:max-content!important;
    min-width:0!important;
    animation-name:equipment-marquee-desktop-single!important;
    animation-duration:8s!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
    animation-delay:-1.5s!important;
  }

  @keyframes equipment-marquee-desktop-single{
    from{
      transform:translate3d(var(--marquee-container-width),0,0);
    }
    to{
      transform:translate3d(calc(-1 * var(--marquee-set-width)),0,0);
    }
  }
}


/* REV1.15 — balanced desktop marquee speed and seamless set spacing. */
@media(min-width:761px){
  .equipment-marquee-track{
    column-gap:24px!important;
    animation-duration:9.5s!important;
  }

  .equipment-logo-set{
    gap:24px!important;
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
  }
}


/* REV1.16 — seamless two-set desktop marquee with balanced speed. */
@media(min-width:761px){
  /* Restore the duplicated logo set on desktop so the loop never has an empty pass. */
  .equipment-marquee .equipment-logo-set[aria-hidden="true"]{
    display:flex!important;
  }

  /* Two identical sets sit directly beside each other.
     The first set carries the inter-loop spacing in its own right padding. */
  .equipment-marquee-track{
    display:flex!important;
    column-gap:0!important;
    gap:0!important;
    width:max-content!important;
    min-width:0!important;
    animation-name:equipment-marquee-desktop-seamless!important;
    animation-duration:13.5s!important;
    animation-delay:0s!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
  }

  .equipment-logo-set{
    display:flex!important;
    flex:none!important;
    width:max-content!important;
    gap:24px!important;
    padding-left:0!important;
    padding-right:24px!important;
    margin:0!important;
  }

  @keyframes equipment-marquee-desktop-seamless{
    from{
      transform:translate3d(0,0,0);
    }
    to{
      transform:translate3d(calc(-1 * var(--marquee-distance)),0,0);
    }
  }
}


/* REV1.17 — one logo set only; smooth single-row back-and-forth marquee. */
.equipment-marquee-track{
  display:flex!important;
  width:max-content!important;
  min-width:0!important;
  column-gap:0!important;
  gap:0!important;
  animation-name:equipment-marquee-single-set!important;
  animation-duration:var(--single-marquee-duration,7s)!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-direction:alternate!important;
  animation-delay:0s!important;
}

.equipment-marquee-track.is-static{
  animation:none!important;
  transform:none!important;
}

.equipment-logo-set{
  display:flex!important;
  flex:none!important;
  width:max-content!important;
  margin:0!important;
  padding-left:22px!important;
  padding-right:22px!important;
}

@keyframes equipment-marquee-single-set{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(calc(-1 * var(--single-marquee-distance,0px)),0,0);}
}


/* REV1.18 — single-set marquee loops forward instead of reversing. */
.equipment-marquee-track{
  animation-direction:normal!important;
}


/* REV1.19 — true seamless desktop marquee: exact duplicate boundary, no blank gap, no reverse. */
@media(min-width:761px){
  .equipment-marquee{
    overflow:hidden!important;
  }

  .equipment-marquee-track{
    display:flex!important;
    width:max-content!important;
    min-width:0!important;
    gap:0!important;
    column-gap:0!important;
    animation-name:equipment-marquee-loop-seamless!important;
    animation-duration:var(--marquee-loop-duration,13s)!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
    animation-direction:normal!important;
    animation-delay:0s!important;
  }

  /* Each set is identical. Only 24px separates Weihua from the next MacGregor. */
  .equipment-marquee .equipment-logo-set,
  .equipment-marquee .equipment-logo-set[aria-hidden="true"]{
    display:flex!important;
    flex:none!important;
    width:max-content!important;
    gap:24px!important;
    margin:0!important;
    padding:0 24px 0 0!important;
  }

  @keyframes equipment-marquee-loop-seamless{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-1 * var(--marquee-loop-distance,1152px)),0,0);}
  }
}


/* REV1.20 — mobile-only composition pass. */
@media(max-width:760px){
  /* HERO — one full-screen looping video. No scroll-scrub layer on phones. */
  .hero-company-flow{
    --primary-opacity:1!important;
    --zoom-opacity:0!important;
    background:#08161d!important;
  }

  .hero-flow-media{
    position:absolute!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:100svh!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .hero-flow-media .hero-video-primary{
    display:block!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    height:100svh!important;
    object-fit:cover!important;
    object-position:54% center!important;
    opacity:1!important;
    transform:none!important;
  }

  .hero-flow-media .hero-video-zoom{
    display:none!important;
    opacity:0!important;
  }

  .hero-flow-media::after{
    inset:0!important;
    background:
      linear-gradient(180deg,rgba(5,20,28,.34) 0%,rgba(5,20,28,.08) 23%,rgba(5,20,28,.08) 55%,rgba(5,20,28,.70) 100%),
      linear-gradient(90deg,rgba(5,20,28,.30) 0%,rgba(5,20,28,.06) 74%,rgba(5,20,28,.02) 100%)!important;
  }

  .hero{
    height:100svh!important;
    min-height:640px!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  .hero-stage{
    position:relative!important;
    top:0!important;
    height:100svh!important;
    min-height:640px!important;
    overflow:hidden!important;
  }

  .hero-overlay{
    top:72px!important;
    bottom:76px!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    padding:clamp(38px,6svh,62px) 0 36px!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
  }

  .hero-overlay::before{
    background:linear-gradient(
      90deg,
      rgba(8,22,29,.58) 0%,
      rgba(8,22,29,.30) 58%,
      rgba(8,22,29,0) 100%
    )!important;
    filter:none!important;
  }

  .hero-kicker{
    max-width:255px!important;
    margin:0 0 16px!important;
    font-size:8.5px!important;
    line-height:1.5!important;
    letter-spacing:1.25px!important;
  }

  .hero h1{
    width:100%!important;
    max-width:335px!important;
    margin:0!important;
    font-size:clamp(52px,16vw,68px)!important;
    line-height:.84!important;
    letter-spacing:-.042em!important;
  }

  .hero h1 .hero-line-one,
  .hero h1 .hero-line-two,
  .hero h1 .hero-line-three{
    display:block!important;
    margin-left:0!important;
    transform:none!important;
  }

  .hero h1 .hero-line-two{
    margin-left:.03em!important;
  }

  .hero h1 .hero-line-three{
    margin-top:.03em!important;
  }

  .hero-copy{
    width:min(100%,305px)!important;
    margin:22px 0 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:14px!important;
    align-items:end!important;
  }

  .hero-copy p{
    margin:0!important;
    padding:0 0 0 12px!important;
    border-left:2px solid var(--red)!important;
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  .hero-copy a{
    align-self:end!important;
    font-size:9px!important;
  }

  .hero-copy b{
    width:38px!important;
    height:38px!important;
    margin-top:4px!important;
  }

  .hero-caption{
    left:20px!important;
    right:20px!important;
    bottom:10px!important;
    padding:10px 0!important;
    font-size:7.5px!important;
    letter-spacing:.72px!important;
  }

  .hero-caption>span:nth-child(2){
    display:none!important;
  }

  .hero-caption button{
    margin-left:auto!important;
    font-size:8px!important;
  }

  /* COMPANY — clean editorial entry immediately after the full-screen hero. */
  .intro{
    min-height:0!important;
    padding-top:64px!important;
    padding-bottom:68px!important;
    background:#fff!important;
  }

  .company-promise{
    max-width:none!important;
    margin-bottom:22px!important;
    font-size:clamp(30px,9vw,39px)!important;
    line-height:.98!important;
  }

  .company-problem{
    max-width:none!important;
    font-size:clamp(23px,6.8vw,29px)!important;
    line-height:1.31!important;
  }

  .company-solution{
    margin-top:22px!important;
    padding:18px 0 0 16px!important;
  }

  .company-solution::before{
    top:18px!important;
    height:34px!important;
  }

  .company-solution p:first-child,
  .company-solution p:last-child{
    font-size:17px!important;
    line-height:1.55!important;
  }

  /* SECTION 02 — swipeable fleet cards instead of a long vertical stack. */
  .fleet{
    overflow:hidden!important;
  }

  .fleet .section-top{
    margin-bottom:26px!important;
  }

  .fleet .section-top h2{
    font-size:clamp(44px,12vw,54px)!important;
    line-height:.9!important;
  }

  .fleet .section-top>p{
    margin-top:14px!important;
    max-width:310px!important;
    font-size:13px!important;
    line-height:1.55!important;
  }

  .fleet-phase-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    width:auto!important;
    margin:0 -20px!important;
    padding:0 20px 10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:20px!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .fleet-phase-grid::-webkit-scrollbar{
    display:none;
  }

  .fleet-phase-card{
    flex:0 0 calc(100vw - 54px)!important;
    width:calc(100vw - 54px)!important;
    max-width:390px!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    min-height:0!important;
    border:1px solid rgba(255,255,255,.10)!important;
  }

  .fleet-phase-card::after{
    content:none!important;
    display:none!important;
  }

  .fleet-phase-bg,
  .fleet-phase-initial .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-drawing{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16 / 10!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:none!important;
    opacity:1!important;
    transform:none!important;
  }

  .fleet-phase-expansion .fleet-phase-drawing{
    object-position:center 43%!important;
  }

  .fleet-phase-content{
    min-height:0!important;
    padding:20px 18px 18px!important;
    background:#08161d!important;
  }

  .fleet-phase-content>.eyebrow{
    margin:0 0 18px!important;
    padding:6px 8px 5px!important;
    font-size:8px!important;
    letter-spacing:1px!important;
  }

  .fleet-phase-content h3{
    margin-bottom:12px!important;
    font-size:clamp(35px,10vw,43px)!important;
    line-height:.92!important;
  }

  .fleet-capacity{
    margin-bottom:12px!important;
    padding:10px 0!important;
  }

  .fleet-capacity strong{
    font-size:42px!important;
  }

  .fleet-capacity span{
    font-size:9px!important;
  }

  .fleet-phase-description{
    margin-bottom:12px!important;
    font-size:13px!important;
    line-height:1.55!important;
  }

  .fleet-phase-content dl{
    margin:12px 0!important;
  }

  .fleet-phase-content dl>div{
    padding:7px 0!important;
    gap:10px!important;
  }

  .fleet-phase-content dt,
  .fleet-phase-content dd{
    font-size:10.5px!important;
  }

  .fleet-phase-tag{
    margin-top:10px!important;
    font-size:8px!important;
  }

  /* 01 FC / 02 FSC / 03 FLF become compact reference tiles. */
  .configurations,
  .fleet .configurations{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:24px!important;
  }

  .configurations>div{
    min-height:88px!important;
    padding:12px 9px!important;
    border:1px solid var(--line)!important;
    background:#f7fafb!important;
  }

  .configurations>div:hover{
    background:#f7fafb!important;
    color:inherit!important;
  }

  .configurations span{
    font-size:8px!important;
    letter-spacing:1px!important;
  }

  .configurations h3{
    margin:7px 0 0!important;
    font:600 10px/1.18 'Barlow Condensed',sans-serif!important;
    letter-spacing:.01em!important;
  }

  .configurations h4{
    margin:5px 0 0!important;
    font:600 20px/1 'Barlow Condensed',sans-serif!important;
    color:var(--red)!important;
  }

  .configurations p{
    display:none!important;
  }

  /* SECTION 03 — stronger title hierarchy and a working mobile marquee. */
  .reliability{
    display:block!important;
    padding-top:58px!important;
    padding-bottom:58px!important;
  }

  .reliability-title,
  .reliability-title.reveal{
    width:100%!important;
    max-width:none!important;
    opacity:1!important;
    transform:none!important;
  }

  .reliability-title .eyebrow{
    margin-bottom:16px!important;
  }

  .reliability-title h2{
    width:100%!important;
    max-width:none!important;
    margin-bottom:20px!important;
    color:#fff!important;
    font-size:clamp(43px,12vw,54px)!important;
    line-height:.90!important;
    letter-spacing:-.035em!important;
    overflow:visible!important;
  }

  .reliability-title h2 br{
    display:none!important;
  }

  .reliability-title h2 em{
    display:block!important;
    margin-top:5px!important;
    color:var(--red)!important;
  }

  .reliability-title>p:not(.eyebrow){
    max-width:330px!important;
    font-size:13.5px!important;
    line-height:1.65!important;
  }

  .hours{
    margin-top:24px!important;
    padding-top:18px!important;
  }

  .hours strong{
    font-size:40px!important;
  }

  .hours span{
    margin-top:6px!important;
    font-size:10.5px!important;
    line-height:1.55!important;
  }

  .reliability-list{
    margin-top:24px!important;
    padding-top:0!important;
  }

  .reliability-list summary{
    padding:17px 0!important;
    gap:11px!important;
    font-size:16px!important;
    line-height:1.12!important;
  }

  .reliability-list details p{
    padding:0 0 18px 27px!important;
    font-size:13px!important;
    line-height:1.58!important;
  }

  .reliability-showcase{
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
    margin-top:12px!important;
    border-top:0!important;
  }

  .reliability-showcase-panel,
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
  }

  .reliability-showcase .equipment-marquee{
    overflow:hidden!important;
    background:#fff!important;
  }

  .reliability-showcase .equipment-marquee-track{
    display:flex!important;
    width:max-content!important;
    gap:0!important;
    animation-name:equipment-marquee-mobile-seamless!important;
    animation-duration:var(--mobile-marquee-duration,16s)!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
    animation-direction:normal!important;
    animation-delay:0s!important;
  }

  .reliability-showcase .equipment-logo-set{
    display:flex!important;
    flex:none!important;
    width:max-content!important;
    gap:22px!important;
    margin:0!important;
    padding:0 22px 0 0!important;
  }

  .equipment-logo{
    flex:0 0 105px!important;
    width:105px!important;
    height:46px!important;
  }

  .equipment-logo img{
    max-width:92px!important;
    max-height:28px!important;
  }

  .equipment-logo.ecrane-logo{
    flex-basis:116px!important;
    width:116px!important;
  }

  .equipment-logo.ecrane-logo img{
    width:104px!important;
    height:35px!important;
    max-width:104px!important;
    max-height:35px!important;
  }

  @keyframes equipment-marquee-mobile-seamless{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-1 * var(--mobile-marquee-distance,900px)),0,0);}
  }

  /* SECTION 04 — cards swipe horizontally to keep the page compact. */
  .safety{
    overflow:hidden!important;
  }

  .safety .section-top{
    margin-bottom:24px!important;
  }

  .safety .section-top h2{
    font-size:clamp(43px,12vw,54px)!important;
    line-height:.9!important;
  }

  .execution-visual{
    margin-bottom:28px!important;
  }

  .promise-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    width:auto!important;
    margin:28px -20px 0!important;
    padding:0 20px 10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:20px!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .promise-grid::-webkit-scrollbar{
    display:none;
  }

  .promise-grid article,
  .promise-grid article:nth-child(2){
    flex:0 0 calc(100vw - 58px)!important;
    width:calc(100vw - 58px)!important;
    max-width:350px!important;
    min-height:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  .promise-visual{
    aspect-ratio:4 / 3!important;
  }

  .promise-copy{
    margin-top:-38px!important;
    padding:54px 18px 20px!important;
    min-height:0!important;
  }

  .promise-copy h3{
    margin-bottom:12px!important;
    font-size:30px!important;
    line-height:.98!important;
  }

  .promise-copy p,
  .promise-grid article:nth-child(2) .promise-copy p{
    font-size:13px!important;
    line-height:1.58!important;
  }

  .hse{
    margin-top:30px!important;
  }
}


/* REV1.21 — mobile static hero + compact configuration copy + edge-to-edge showcase. */
@media(max-width:760px){
  /* MOBILE HERO — use the supplied SUPERFAST tug image; video stays desktop-only. */
  .hero-flow-media{
    background:
      linear-gradient(180deg,rgba(5,20,28,.28) 0%,rgba(5,20,28,.08) 34%,rgba(5,20,28,.14) 62%,rgba(5,20,28,.72) 100%),
      linear-gradient(90deg,rgba(5,20,28,.36) 0%,rgba(5,20,28,.10) 72%,rgba(5,20,28,.02) 100%),
      url('assets/mobile-hero-superfast.png') 52% center / cover no-repeat!important;
  }

  .hero-flow-media .hero-video-primary,
  .hero-flow-media .hero-video-zoom{
    display:none!important;
    opacity:0!important;
  }

  .hero-flow-media::after{
    background:none!important;
  }

  .hero-overlay{
    top:72px!important;
    bottom:62px!important;
    padding:clamp(68px,10svh,96px) 0 36px!important;
    justify-content:flex-start!important;
  }

  .hero-overlay::before{
    background:linear-gradient(
      90deg,
      rgba(8,22,29,.44) 0%,
      rgba(8,22,29,.20) 58%,
      rgba(8,22,29,0) 100%
    )!important;
  }

  .hero h1{
    max-width:330px!important;
    font-size:clamp(50px,15.5vw,66px)!important;
    line-height:.85!important;
  }

  .hero-copy{
    max-width:292px!important;
    margin-top:20px!important;
  }

  .hero-caption button{
    display:none!important;
  }

  /* 01 FC / 02 FSC / 03 FLF — compact rows with descriptions visible. */
  .configurations,
  .fleet .configurations{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:22px!important;
  }

  .configurations>div{
    display:grid!important;
    grid-template-columns:26px 44px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:10px!important;
    min-height:66px!important;
    padding:10px 12px!important;
  }

  .configurations span{
    grid-column:1!important;
    font-size:8px!important;
    align-self:start!important;
    padding-top:3px!important;
  }

  .configurations h3{
    display:none!important;
  }

  .configurations h4{
    grid-column:2!important;
    margin:0!important;
    color:var(--red)!important;
    font:600 19px/1 'Barlow Condensed',sans-serif!important;
  }

  .configurations p{
    display:block!important;
    grid-column:3!important;
    margin:0!important;
    max-width:none!important;
    color:#52666f!important;
    font-size:10.5px!important;
    line-height:1.38!important;
  }

  /* Fleet-total gets its own mobile image treatment. */
  .fleet-total{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:24px 20px!important;
    background:#08161d!important;
  }

  .fleet-total::before{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    background:
      linear-gradient(180deg,rgba(8,22,29,.72) 0%,rgba(8,22,29,.48) 40%,rgba(8,22,29,.82) 100%),
      url('https://kraanwerks.com/wp-content/uploads/2025/03/89a1262d-d9a3-4cb9-80c4-5614fbedf6b7.jpg') center 38% / cover no-repeat!important;
  }

  .fleet-total::after{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    background:linear-gradient(90deg,rgba(8,22,29,.56),rgba(8,22,29,.12))!important;
  }

  .fleet-total>div,
  .fleet-total>p{
    position:relative!important;
    z-index:1!important;
  }

  .fleet-total>p{
    padding:12px 0 0!important;
    background:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    color:#d8e2e6!important;
  }

  /* Engineered showcase / marquee runs edge-to-edge on the phone. */
  .reliability-showcase{
    width:calc(100% + 40px)!important;
    max-width:none!important;
    margin-left:-20px!important;
    margin-right:-20px!important;
    border-left:0!important;
    border-right:0!important;
  }

  .reliability-showcase .equipment-marquee::before,
  .reliability-showcase .equipment-marquee::after{
    display:none!important;
    content:none!important;
  }

  .reliability-showcase .equipment-logo-set{
    gap:18px!important;
    padding-left:0!important;
    padding-right:18px!important;
  }

  .reliability-showcase .equipment-marquee-track{
    padding:0!important;
  }

  /* Safety cards keep their horizontal swipe behavior with a clean edge peek. */
  .promise-grid{
    margin-left:-20px!important;
    margin-right:-20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}


/* REV1.22 — final mobile composition polish using the supplied SUPERFAST tug image. */
@media(max-width:760px){
  /* Full-screen static hero: no mobile video/scrub workload. */
  .hero-flow-media{
    background:
      linear-gradient(180deg,rgba(5,20,28,.24) 0%,rgba(5,20,28,.04) 32%,rgba(5,20,28,.10) 58%,rgba(5,20,28,.76) 100%),
      linear-gradient(90deg,rgba(5,20,28,.34) 0%,rgba(5,20,28,.10) 66%,rgba(5,20,28,.02) 100%),
      url('assets/mobile-hero-superfast.png') 58% center / cover no-repeat!important;
  }

  .hero-flow-media .hero-video-primary,
  .hero-flow-media .hero-video-zoom{
    display:none!important;
  }

  .hero-overlay{
    padding-top:clamp(62px,9svh,88px)!important;
    padding-bottom:34px!important;
  }

  .hero-kicker{
    max-width:250px!important;
  }

  .hero h1{
    max-width:320px!important;
    font-size:clamp(49px,15vw,64px)!important;
    line-height:.86!important;
  }

  .hero-copy{
    max-width:286px!important;
    margin-top:18px!important;
  }

  .hero-copy p{
    font-size:12px!important;
    line-height:1.52!important;
  }

  /* Fleet cards: compact swipe carousel with a visible next-card peek. */
  .fleet-phase-grid{
    gap:12px!important;
    padding-bottom:8px!important;
  }

  .fleet-phase-card{
    flex-basis:calc(100vw - 62px)!important;
    width:calc(100vw - 62px)!important;
    max-width:372px!important;
  }

  .fleet-phase-bg,
  .fleet-phase-initial .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-drawing{
    filter:none!important;
    transform:none!important;
  }

  /* Keep FC / FSC / FLF descriptive but compact. */
  .configurations>div{
    grid-template-columns:24px 42px minmax(0,1fr)!important;
    min-height:62px!important;
    padding:9px 11px!important;
  }

  .configurations p{
    font-size:10px!important;
    line-height:1.36!important;
  }

  /* Engineered Availability: make the title fit naturally on narrow screens. */
  .reliability-title h2{
    max-width:340px!important;
    font-size:clamp(39px,11vw,49px)!important;
    line-height:.93!important;
    letter-spacing:-.03em!important;
  }

  .reliability-title h2 em{
    margin-top:3px!important;
  }

  .reliability-title>p:not(.eyebrow){
    max-width:315px!important;
  }

  /* Edge-to-edge active showcase; logo animation remains seamless through JS clone. */
  .reliability-showcase{
    margin-top:10px!important;
  }

  .reliability-showcase .equipment-marquee{
    width:100%!important;
    overflow:hidden!important;
  }

  .reliability-showcase .equipment-marquee-track{
    min-width:max-content!important;
    will-change:transform!important;
  }

  /* Safety cards use the same horizontal carousel language as the fleet. */
  .promise-grid{
    gap:12px!important;
    padding-bottom:8px!important;
  }

  .promise-grid article,
  .promise-grid article:nth-child(2){
    flex-basis:calc(100vw - 64px)!important;
    width:calc(100vw - 64px)!important;
    max-width:340px!important;
  }

  .promise-copy{
    padding:52px 18px 18px!important;
  }

  .promise-copy h3{
    font-size:28px!important;
  }
}


/* REV1.23 — mobile-only composition refinement. Desktop remains unchanged. */
@media(max-width:760px){
  /* HERO — static supplied SUPERFAST image, full viewport, no scrub/video layer. */
  .hero-company-flow{
    position:relative!important;
    min-height:auto!important;
    background:#08161d!important;
    --primary-opacity:1!important;
    --zoom-opacity:0!important;
  }

  .hero-flow-media{
    position:absolute!important;
    inset:0 0 auto 0!important;
    top:0!important;
    width:100%!important;
    height:100svh!important;
    min-height:640px!important;
    margin:0!important;
    background:
      linear-gradient(180deg,rgba(5,20,28,.20) 0%,rgba(5,20,28,.04) 31%,rgba(5,20,28,.10) 58%,rgba(5,20,28,.74) 100%),
      linear-gradient(90deg,rgba(5,20,28,.34) 0%,rgba(5,20,28,.08) 66%,rgba(5,20,28,.01) 100%),
      url('assets/mobile-hero-superfast.png') 57% center / cover no-repeat!important;
  }

  .hero-flow-media .hero-video-primary,
  .hero-flow-media .hero-video-zoom{
    display:none!important;
    opacity:0!important;
  }

  .hero-flow-media::after{
    display:none!important;
    content:none!important;
  }

  .hero{
    position:relative!important;
    height:100svh!important;
    min-height:640px!important;
    max-height:none!important;
  }

  .hero-stage{
    position:relative!important;
    top:auto!important;
    height:100svh!important;
    min-height:640px!important;
    overflow:hidden!important;
  }

  .hero-overlay{
    top:72px!important;
    bottom:58px!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    padding:clamp(58px,8.5svh,82px) 0 34px!important;
    justify-content:flex-start!important;
  }

  .hero-overlay::before{
    left:-20px!important;
    right:-20px!important;
    width:auto!important;
    background:linear-gradient(
      90deg,
      rgba(8,22,29,.38) 0%,
      rgba(8,22,29,.17) 48%,
      rgba(8,22,29,0) 88%
    )!important;
  }

  .hero-kicker{
    max-width:245px!important;
    margin-bottom:18px!important;
    font-size:8.5px!important;
    line-height:1.5!important;
    letter-spacing:1.15px!important;
  }

  .hero h1{
    width:100%!important;
    max-width:315px!important;
    margin-bottom:0!important;
    font-size:clamp(48px,14.8vw,64px)!important;
    line-height:.86!important;
    letter-spacing:-.038em!important;
  }

  .hero h1 .hero-line-one,
  .hero h1 .hero-line-two,
  .hero h1 .hero-line-three{
    margin-left:0!important;
    transform:none!important;
  }

  .hero h1 .hero-line-two{
    margin-left:.03em!important;
  }

  .hero-copy{
    width:min(100%,282px)!important;
    max-width:282px!important;
    margin:18px 0 0!important;
    gap:10px!important;
    align-items:center!important;
  }

  .hero-copy p{
    padding-left:11px!important;
    font-size:11.5px!important;
    line-height:1.52!important;
  }

  .hero-copy a{
    font-size:9px!important;
  }

  .hero-copy b{
    width:38px!important;
    height:38px!important;
  }

  .hero-caption{
    left:20px!important;
    right:20px!important;
    bottom:12px!important;
    padding:10px 0!important;
    font-size:7.5px!important;
    letter-spacing:.7px!important;
  }

  .hero-caption>span:nth-child(2),
  .hero-caption button{
    display:none!important;
  }

  /* Company starts cleanly after the static hero. */
  .intro{
    min-height:0!important;
    padding-top:66px!important;
    padding-bottom:66px!important;
    background:#fff!important;
  }

  .company-promise{
    max-width:100%!important;
    margin-bottom:22px!important;
    font-size:clamp(30px,9vw,40px)!important;
    line-height:.98!important;
  }

  .company-problem{
    font-size:clamp(23px,6.8vw,29px)!important;
    line-height:1.31!important;
  }

  .company-solution{
    margin-top:22px!important;
    padding:18px 0 0 16px!important;
  }

  .company-solution p:first-child,
  .company-solution p:last-child{
    font-size:16.5px!important;
    line-height:1.54!important;
  }

  /* SECTION 02 — compact horizontal fleet cards with an intentional next-card peek. */
  .fleet{
    overflow:hidden!important;
    padding-top:56px!important;
    padding-bottom:56px!important;
  }

  .fleet .section-top{
    margin-bottom:24px!important;
  }

  .fleet .section-top h2{
    font-size:clamp(42px,12vw,52px)!important;
    line-height:.91!important;
  }

  .fleet .section-top>p{
    margin-top:12px!important;
    max-width:295px!important;
    font-size:12.5px!important;
    line-height:1.55!important;
  }

  .fleet-phase-grid{
    display:flex!important;
    width:auto!important;
    margin:0 -20px!important;
    padding:0 20px 10px!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:20px!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .fleet-phase-grid::-webkit-scrollbar{
    display:none!important;
  }

  .fleet-phase-card{
    flex:0 0 min(84vw,356px)!important;
    width:min(84vw,356px)!important;
    max-width:none!important;
    min-height:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  .fleet-phase-bg,
  .fleet-phase-initial .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-bg,
  .fleet-phase-expansion .fleet-phase-drawing{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16 / 10!important;
    object-fit:cover!important;
    filter:none!important;
    transform:none!important;
    opacity:1!important;
  }

  .fleet-phase-content{
    min-height:0!important;
    padding:18px 16px 17px!important;
  }

  .fleet-phase-content>.eyebrow{
    margin:0 0 15px!important;
    padding:6px 8px 5px!important;
    font-size:7.5px!important;
    line-height:1.25!important;
  }

  .fleet-phase-content h3{
    margin-bottom:10px!important;
    font-size:clamp(33px,9.5vw,40px)!important;
    line-height:.94!important;
  }

  .fleet-capacity{
    margin-bottom:10px!important;
    padding:9px 0!important;
  }

  .fleet-capacity strong{
    font-size:39px!important;
  }

  .fleet-phase-description{
    margin-bottom:10px!important;
    font-size:12px!important;
    line-height:1.52!important;
  }

  .fleet-phase-content dl{
    margin:10px 0!important;
  }

  .fleet-phase-content dl>div{
    padding:6px 0!important;
  }

  .fleet-phase-content dt,
  .fleet-phase-content dd{
    font-size:10px!important;
  }

  /* FC / FSC / FLF — small reference rows, descriptions always visible. */
  .configurations,
  .fleet .configurations{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:20px!important;
  }

  .configurations>div{
    display:grid!important;
    grid-template-columns:22px 38px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:9px!important;
    min-height:58px!important;
    padding:8px 10px!important;
    background:#f7fafb!important;
    border:1px solid var(--line)!important;
  }

  .configurations span{
    grid-column:1!important;
    align-self:start!important;
    padding-top:2px!important;
    font-size:7.5px!important;
  }

  .configurations h3{
    display:none!important;
  }

  .configurations h4{
    display:block!important;
    grid-column:2!important;
    margin:0!important;
    color:var(--red)!important;
    font:600 18px/1 'Barlow Condensed',sans-serif!important;
  }

  .configurations p{
    display:block!important;
    grid-column:3!important;
    margin:0!important;
    max-width:none!important;
    color:#52666f!important;
    font-size:10.5px!important;
    line-height:1.38!important;
  }

  /* Fleet-total gets a proper image-backed mobile panel. */
  .fleet-total{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:22px 18px!important;
    background:#08161d!important;
  }

  .fleet-total::before{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    background:
      linear-gradient(180deg,rgba(8,22,29,.76) 0%,rgba(8,22,29,.44) 38%,rgba(8,22,29,.84) 100%),
      url('https://kraanwerks.com/wp-content/uploads/2025/03/89a1262d-d9a3-4cb9-80c4-5614fbedf6b7.jpg') center 38% / cover no-repeat!important;
  }

  .fleet-total::after{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    background:linear-gradient(90deg,rgba(8,22,29,.54),rgba(8,22,29,.10))!important;
  }

  .fleet-total>div,
  .fleet-total>p{
    position:relative!important;
    z-index:1!important;
  }

  .fleet-total strong{
    font-size:50px!important;
  }

  .fleet-total>p{
    padding:10px 0 0!important;
    background:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* SECTION 03 — readable headline + compact accordion/showcase. */
  .reliability{
    display:block!important;
    overflow:hidden!important;
    padding-top:56px!important;
    padding-bottom:56px!important;
  }

  .reliability-title,
  .reliability-title.reveal{
    width:100%!important;
    max-width:none!important;
    opacity:1!important;
    transform:none!important;
  }

  .reliability-title h2{
    width:100%!important;
    max-width:100%!important;
    margin-bottom:18px!important;
    color:#fff!important;
    font-size:clamp(38px,10.7vw,47px)!important;
    line-height:.94!important;
    letter-spacing:-.028em!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance;
  }

  .reliability-title h2 br{
    display:none!important;
  }

  .reliability-title h2 em{
    display:block!important;
    margin-top:4px!important;
    color:var(--red)!important;
  }

  .reliability-title>p:not(.eyebrow){
    max-width:305px!important;
    font-size:12.5px!important;
    line-height:1.6!important;
  }

  .hours{
    margin-top:22px!important;
    padding-top:17px!important;
  }

  .hours strong{
    font-size:38px!important;
  }

  .reliability-list{
    margin-top:22px!important;
    padding-top:0!important;
  }

  .reliability-list summary{
    padding:16px 0!important;
    gap:10px!important;
    font-size:15.5px!important;
    line-height:1.12!important;
  }

  .reliability-list details p{
    padding:0 0 17px 26px!important;
    font-size:12.5px!important;
    line-height:1.56!important;
  }

  /* Active showcase/marquee runs fully edge-to-edge on mobile. */
  .reliability-showcase{
    width:calc(100% + 40px)!important;
    max-width:none!important;
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
    margin:10px -20px 0!important;
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
  }

  .reliability-showcase-panel,
  .reliability-showcase .equipment-marquee,
  .reliability-showcase .equipment-marquee-track,
  .reliability-showcase .equipment-logo-set,
  .reliability-photo-panel{
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
  }

  .reliability-showcase .equipment-marquee{
    width:100%!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  .reliability-showcase .equipment-marquee::before,
  .reliability-showcase .equipment-marquee::after{
    display:none!important;
    content:none!important;
  }

  .reliability-showcase .equipment-marquee-track{
    min-width:max-content!important;
    padding:0!important;
    animation-play-state:running!important;
    will-change:transform!important;
  }

  .reliability-showcase .equipment-logo-set{
    gap:18px!important;
    margin:0!important;
    padding:0 18px 0 0!important;
  }

  /* SECTION 04 — horizontal cards instead of a long vertical stack. */
  .safety{
    overflow:hidden!important;
    padding-top:56px!important;
    padding-bottom:56px!important;
  }

  .safety .section-top{
    margin-bottom:22px!important;
  }

  .safety .section-top h2{
    font-size:clamp(41px,11.5vw,51px)!important;
    line-height:.91!important;
  }

  .execution-visual{
    margin-bottom:24px!important;
  }

  .promise-grid{
    display:flex!important;
    width:auto!important;
    margin:26px -20px 0!important;
    padding:0 20px 10px!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:20px!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .promise-grid::-webkit-scrollbar{
    display:none!important;
  }

  .promise-grid article,
  .promise-grid article:nth-child(2){
    flex:0 0 min(84vw,336px)!important;
    width:min(84vw,336px)!important;
    max-width:none!important;
    min-height:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  .promise-visual{
    aspect-ratio:4 / 3!important;
  }

  .promise-copy{
    margin-top:-36px!important;
    padding:50px 17px 18px!important;
    min-height:0!important;
  }

  .promise-copy h3{
    margin-bottom:11px!important;
    font-size:27px!important;
    line-height:.99!important;
  }

  .promise-copy p,
  .promise-grid article:nth-child(2) .promise-copy p{
    font-size:12.5px!important;
    line-height:1.56!important;
  }

  .hse{
    margin-top:28px!important;
  }
}


/* REV1.24 — desktop Engineered Availability showcase containment.
   Keep every swapped panel inside the fixed showcase canvas so photography
   replaces the equipment marquee instead of overlaying the accordion list. */
@media(min-width:761px){
  .reliability-list{
    position:relative!important;
  }

  .reliability-showcase{
    position:relative!important;
    isolation:isolate!important;
    display:grid!important;
    grid-template-areas:"showcase"!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .reliability-showcase-panel{
    grid-area:showcase!important;
    position:relative!important;
    inset:auto!important;
    z-index:0!important;
    display:none!important;
    width:100%!important;
    margin:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .reliability-showcase-panel.is-active{
    z-index:1!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .reliability-photo-panel{
    position:relative!important;
    inset:auto!important;
    overflow:hidden!important;
  }

  .reliability-photo-panel img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}


/* REV1.25 — rebalance the longer three-line hero statement. */
@media(min-width:1001px){
  .hero-overlay{
    left:auto!important;
    right:0!important;
    top:4%!important;
    bottom:15%!important;
    width:min(88vw,1320px)!important;
    padding:0 5vw 0 2vw!important;
    align-items:flex-end!important;
    justify-content:center!important;
    text-align:right!important;
  }

  .hero-overlay::before{
    right:0!important;
    top:12%!important;
    bottom:5%!important;
    width:74%!important;
  }

  .hero h1{
    width:100%!important;
    max-width:none!important;
    font-size:clamp(72px,6.7vw,110px)!important;
    line-height:.76!important;
    letter-spacing:-.048em!important;
  }

  .hero h1 .hero-line-one{
    padding-right:22%!important;
  }

  .hero h1 .hero-line-two{
    padding-right:5%!important;
  }

  .hero h1 .hero-line-three{
    padding-right:0!important;
    font-size:.96em!important;
  }

  .hero-copy{
    margin:30px .5% 0 0!important;
    max-width:560px!important;
  }
}

@media(min-width:761px) and (max-width:1000px){
  .hero-overlay{
    top:5%!important;
    bottom:14%!important;
    width:94vw!important;
    padding-right:4vw!important;
  }

  .hero h1{
    font-size:clamp(58px,8.4vw,82px)!important;
    line-height:.78!important;
    letter-spacing:-.045em!important;
  }

  .hero h1 .hero-line-one{
    padding-right:15%!important;
  }

  .hero h1 .hero-line-two{
    padding-right:2%!important;
  }

  .hero h1 .hero-line-three{
    font-size:.94em!important;
  }
}

@media(max-width:760px){
  .hero-overlay{
    top:72px!important;
    bottom:58px!important;
    left:20px!important;
    right:20px!important;
    padding:clamp(48px,7svh,68px) 0 32px!important;
  }

  .hero h1{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(43px,13.1vw,56px)!important;
    line-height:.88!important;
    letter-spacing:-.035em!important;
  }

  .hero h1 .hero-line-one,
  .hero h1 .hero-line-two,
  .hero h1 .hero-line-three{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .hero h1 .hero-line-two{
    margin-left:.02em!important;
  }

  .hero h1 .hero-line-three{
    margin-top:.04em!important;
    font-size:.94em!important;
  }

  .hero-copy{
    width:min(100%,296px)!important;
    max-width:296px!important;
    margin:16px 0 0!important;
  }
}

@media(max-width:390px){
  .hero h1{
    font-size:clamp(41px,12.6vw,50px)!important;
  }

  .hero-copy{
    max-width:276px!important;
  }
}


/* REV1.26 — refine hero scale and spacing after longer title review. */
@media(min-width:1001px){
  .hero-overlay{
    top:2.5%!important;
    bottom:16%!important;
    width:min(90vw,1360px)!important;
    padding:0 5.2vw 0 2.5vw!important;
  }

  .hero h1{
    font-size:clamp(64px,6vw,98px)!important;
    line-height:.78!important;
    letter-spacing:-.046em!important;
  }

  .hero h1 .hero-line-one{
    padding-right:24%!important;
  }

  .hero h1 .hero-line-two{
    padding-right:7%!important;
  }

  .hero h1 .hero-line-three{
    padding-right:0!important;
    font-size:.93em!important;
  }

  .hero-copy{
    margin:38px .6% 0 0!important;
    max-width:540px!important;
  }
}

@media(min-width:761px) and (max-width:1000px){
  .hero h1{
    font-size:clamp(54px,7.6vw,76px)!important;
    line-height:.80!important;
  }

  .hero h1 .hero-line-three{
    font-size:.92em!important;
  }

  .hero-copy{
    margin-top:30px!important;
  }
}

@media(max-width:760px){
  .hero h1{
    font-size:clamp(40px,12.2vw,52px)!important;
    line-height:.89!important;
  }

  .hero h1 .hero-line-three{
    font-size:.92em!important;
  }

  .hero-copy{
    margin-top:18px!important;
  }
}

@media(max-width:390px){
  .hero h1{
    font-size:clamp(38px,11.8vw,47px)!important;
  }
}


/* REV1.27 — optical hero lockup + compact mobile HSE disclosure. */
@media(min-width:1001px){
  /* Keep the editorial stagger, but bring the three lines closer to one visual measure. */
  .hero h1{
    max-width:980px!important;
    margin-left:auto!important;
  }

  .hero h1 .hero-line-one{
    padding-right:19%!important;
    font-size:1.08em!important;
    letter-spacing:-.05em!important;
  }

  .hero h1 .hero-line-two{
    padding-right:4%!important;
    font-size:1em!important;
    letter-spacing:-.044em!important;
  }

  .hero h1 .hero-line-three{
    padding-right:0!important;
    font-size:.89em!important;
    letter-spacing:-.042em!important;
  }

  /* Make the supporting statement feel like a caption, not a second banner. */
  .hero-copy{
    width:min(100%,525px)!important;
    max-width:525px!important;
    margin-top:32px!important;
    gap:26px!important;
  }

  .hero-copy p{
    padding:10px 14px 10px 17px!important;
    background:linear-gradient(90deg,rgba(5,20,28,.20),rgba(5,20,28,.08))!important;
    font-size:15px!important;
    line-height:1.52!important;
  }
}

@media(min-width:761px) and (max-width:1000px){
  .hero h1 .hero-line-one{
    font-size:1.06em!important;
    padding-right:13%!important;
  }

  .hero h1 .hero-line-two{
    padding-right:2%!important;
  }

  .hero h1 .hero-line-three{
    font-size:.90em!important;
  }
}

@media(max-width:760px){
  /* Keep the mobile title strong without letting the longest red line dominate. */
  .hero h1 .hero-line-one{
    font-size:1.04em!important;
    letter-spacing:-.04em!important;
  }

  .hero h1 .hero-line-two{
    font-size:.98em!important;
    letter-spacing:-.032em!important;
  }

  .hero h1 .hero-line-three{
    font-size:.88em!important;
    letter-spacing:-.025em!important;
  }

  .hero-copy{
    margin-top:16px!important;
  }

  /* HSE becomes a compact, collapsed disclosure on phones. */
  .hse.hse-static{
    margin-top:24px!important;
    padding:0 14px!important;
    border:1px solid rgba(18,38,48,.16)!important;
  }

  .hse.hse-static summary{
    min-height:48px!important;
    padding:12px 0!important;
    gap:12px!important;
    font-size:12px!important;
    line-height:1.35!important;
    letter-spacing:.01em!important;
  }

  .hse.hse-static summary span{
    margin-left:auto!important;
    font-size:18px!important;
    line-height:1!important;
    transform-origin:center!important;
    transition:transform .24s ease!important;
  }

  .hse.hse-static[open] summary span{
    transform:rotate(45deg)!important;
  }

  .hse.hse-static>div{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:0 0 14px!important;
  }

  .hse.hse-static p{
    margin:0!important;
    padding:0!important;
    font-size:11.5px!important;
    line-height:1.58!important;
  }
}


/* Root navigation — active section state + mobile-friendly current item. */
nav>a:first-child{
  border-bottom-color:transparent!important;
}

nav>a.is-active,
nav>a[aria-current="page"]{
  color:var(--red)!important;
}

nav.open>a.is-active,
nav.open>a[aria-current="page"]{
  color:var(--red)!important;
  background:rgba(237,28,46,.055)!important;
  box-shadow:inset 0 -2px 0 var(--red);
}

nav.open .nav-contact.is-active,
nav.open .nav-contact[aria-current="page"]{
  color:#fff!important;
  background:var(--red)!important;
  box-shadow:none;
}

@media(max-width:760px){
  nav.open>a.is-active,
  nav.open>a[aria-current="page"]{
    padding-left:12px!important;
    background:rgba(237,28,46,.045)!important;
    box-shadow:inset 3px 0 0 var(--red);
  }

  nav.open .nav-contact.is-active,
  nav.open .nav-contact[aria-current="page"]{
    padding-left:12px!important;
    color:var(--red)!important;
    background:rgba(237,28,46,.045)!important;
    box-shadow:inset 3px 0 0 var(--red);
  }
}


/* Navigation refinement — reliable section landing + restrained mobile active state. */
main section[id]{
  scroll-margin-top:100px;
}

@media(max-width:760px){
  main section[id]{
    scroll-margin-top:80px;
  }

  nav.open>a.is-active,
  nav.open>a[aria-current="page"],
  nav.open .nav-contact.is-active,
  nav.open .nav-contact[aria-current="page"]{
    padding-left:4px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--red)!important;
    font-weight:inherit!important;
  }
}


/* HSE controls + operational performance transparency. */
.hse.hse-static>div{
  display:block!important;
}

.hse-control-list{
  list-style:none;
  margin:0;
  padding:4px 0 22px;
}

.hse-control-list li{
  position:relative;
  margin:0;
  padding:16px 0 16px 26px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

.hse-control-list li:first-child{
  border-top:0;
}

.hse-control-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:25px;
  width:7px;
  height:7px;
  background:var(--red);
}

.performance-transparency{
  display:grid;
  grid-template-columns:minmax(240px,.78fr) minmax(0,1.35fr);
  gap:clamp(44px,7vw,110px);
  margin-top:52px;
  padding-top:38px;
  border-top:1px solid var(--line);
}

.performance-transparency-head .eyebrow{
  margin-bottom:15px;
}

.performance-transparency-head h3{
  margin:0;
  font:600 clamp(34px,3.4vw,52px)/.98 'Barlow Condensed','Arial Narrow',sans-serif;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--ink);
}

.performance-transparency-body>p:first-child{
  max-width:820px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.performance-principle{
  margin:28px 0 0!important;
  padding:22px 0 0;
  border-top:1px solid var(--line);
  color:var(--ink)!important;
  font-size:15px!important;
  line-height:1.7!important;
  font-weight:600;
}

.performance-principle span{
  display:block;
  margin-bottom:8px;
  color:var(--red);
  font-size:10px;
  line-height:1.3;
  letter-spacing:1.8px;
  font-weight:700;
}

@media(max-width:760px){
  .hse.hse-static>div{
    padding:0 0 8px!important;
  }

  .hse-control-list{
    padding:0 0 6px;
  }

  .hse-control-list li{
    padding:13px 0 13px 20px;
    font-size:11.5px;
    line-height:1.58;
  }

  .hse-control-list li::before{
    left:1px;
    top:20px;
    width:6px;
    height:6px;
  }

  .performance-transparency{
    display:block;
    margin-top:34px;
    padding-top:28px;
  }

  .performance-transparency-head .eyebrow{
    margin-bottom:11px;
  }

  .performance-transparency-head h3{
    max-width:300px;
    margin-bottom:22px;
    font-size:32px;
    line-height:.98;
  }

  .performance-transparency-body>p:first-child{
    font-size:12.5px;
    line-height:1.68;
  }

  .performance-principle{
    margin-top:22px!important;
    padding-top:18px;
    font-size:12.5px!important;
    line-height:1.62!important;
  }

  .performance-principle span{
    margin-bottom:7px;
    font-size:9px;
    letter-spacing:1.5px;
  }
}


/* HSE disclosure — closed by default, native click-to-expand/collapse. */
.hse.hse-static summary span{
  transform:none;
  transform-origin:center;
  transition:transform .24s ease;
}

.hse.hse-static[open] summary span{
  transform:rotate(45deg);
}


/* HSE V2 — headline scale matches promise cards; expanded controls stay compact. */
.hse.hse-static{
  margin-top:34px!important;
}

.hse.hse-static summary{
  min-height:0!important;
  padding:18px 0!important;
  gap:18px!important;
  font:600 clamp(34px,3.1vw,46px)/.96 'Barlow Condensed',sans-serif!important;
  letter-spacing:-.025em!important;
  color:var(--ink)!important;
}

.hse.hse-static summary span{
  flex:0 0 auto;
  margin-left:auto!important;
  font:400 26px/1 'DM Sans',sans-serif!important;
  letter-spacing:0!important;
}

.hse.hse-static>div{
  padding:0 0 8px!important;
}

.hse-control-list{
  margin:0!important;
  padding:0 0 4px!important;
}

.hse-control-list li{
  padding:9px 0 9px 22px!important;
  font-size:13px!important;
  line-height:1.5!important;
}

.hse-control-list li::before{
  left:2px!important;
  top:16px!important;
  width:5px!important;
  height:5px!important;
}

@media(max-width:760px){
  .hse.hse-static{
    margin-top:24px!important;
    padding:0!important;
  }

  .hse.hse-static summary{
    min-height:0!important;
    padding:12px 0!important;
    gap:12px!important;
    font-size:27px!important;
    line-height:.99!important;
    letter-spacing:-.02em!important;
  }

  .hse.hse-static summary span{
    font-size:20px!important;
  }

  .hse.hse-static>div{
    padding:0 0 4px!important;
  }

  .hse-control-list{
    padding:0!important;
  }

  .hse-control-list li{
    padding:8px 0 8px 18px!important;
    font-size:11.5px!important;
    line-height:1.48!important;
  }

  .hse-control-list li::before{
    left:1px!important;
    top:14px!important;
    width:4px!important;
    height:4px!important;
  }
}


/* Performance principle — mirror the Company closing statement typography. */
.performance-principle{
  color:var(--ink)!important;
  font-weight:400!important;
}

.performance-principle em{
  display:block;
  max-width:760px;
  color:var(--ink)!important;
  font:500 clamp(21px,1.85vw,28px)/1.5 'Barlow Condensed',sans-serif!important;
  letter-spacing:-.012em!important;
  font-style:italic;
}

@media(max-width:760px){
  .performance-principle em{
    max-width:none;
    font-size:16.5px!important;
    line-height:1.54!important;
  }
}


/* HSE V3 — mobile alignment and spacing refinement. */
@media(max-width:760px){
  .hse.hse-static{
    width:100%!important;
    box-sizing:border-box!important;
    margin:22px 0 0!important;
    padding:0 12px!important;
  }

  .hse.hse-static summary{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 24px!important;
    align-items:center!important;
    column-gap:12px!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:14px 0 13px!important;
    text-align:left!important;
    cursor:pointer!important;
  }

  .hse.hse-static summary span{
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    line-height:1!important;
  }

  .hse.hse-static>div{
    width:100%!important;
    box-sizing:border-box!important;
    padding:0 0 6px!important;
  }

  .hse-control-list{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .hse-control-list li{
    box-sizing:border-box!important;
    width:100%!important;
    margin:0!important;
    padding:9px 0 9px 17px!important;
    text-align:left!important;
  }

  .hse-control-list li::before{
    left:1px!important;
    top:15px!important;
  }
}