/* ===== Homepage (group design language, slate + saffron palette) ===== */
/* Split, split-media, badge-float and hero-features now live in main.css (shared). */

/* Hero: light, left-aligned, with feature list */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height-safe));
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(ellipse 50% 65% at 88% 12%, rgba(199, 154, 62, 0.09), transparent),
    linear-gradient(180deg, var(--bg-surface) 0%, #fff 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -110px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(199, 154, 62, 0.1), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 880px; }
.hero .badge { margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--accent); }
.hero .hero-sub {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  max-width: 660px;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }

/* Hero feature list: styles in main.css (.hero-features/.hero-feature-item) */

/* Homepage hero: a direct, region-specific introduction rather than a decorative banner. */
.hero {
  min-height: calc(100vh - var(--header-height-safe));
  padding-block: 0;
  background-image: url("/assets/images/photos/umm-qasr-port-aerial.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 27, 39, 0.94) 0%, rgba(14, 27, 39, 0.82) 45%, rgba(14, 27, 39, 0.38) 100%);
  pointer-events: none;
}
.hero::after { display: none; }
.hero-layout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: calc(100svh - var(--header-height-safe));
}
.hero-inner { position: relative; z-index: 1; max-width: 1050px; }
.hero h1 {
  color: #fff;
  max-width: 1050px;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.035em;
}
.hero-title-line { display: block; white-space: nowrap; }
.hero h1 .accent { color: var(--accent-light); }
.hero .hero-sub {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}
.hero .hero-features {
  flex-wrap: nowrap;
  gap: 0.75rem 1.5rem;
}
.hero .hero-feature-item { white-space: nowrap; }
.hero .hero-feature-item { color: rgba(255, 255, 255, 0.88); }
.hero .hero-feature-item i { color: var(--accent-light); }
.hero .btn-outline {
  border-color: var(--accent);
  background: transparent;
  color: #fff;
}
.hero .btn-outline:hover {
  border-color: var(--accent-light);
  color: #fff;
  background: rgba(199, 154, 62, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(224, 188, 110, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.78);
  transform: translateX(-50%);
  transition: color 180ms ease;
}
.hero-scroll-cue:hover { color: var(--accent-light); }
.scroll-mouse {
  width: 1.1rem;
  height: 1.7rem;
  border: 1.5px solid currentColor;
  border-radius: 0.7rem;
  position: relative;
}
.scroll-mouse::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 50%;
  width: 2px;
  height: 0.3rem;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.hero-scroll-cue i { font-size: 0.7rem; }
@media (max-width: 900px) {
  .hero-inner { max-width: 100%; }
  .hero-title-line { white-space: normal; }
}
@media (max-width: 600px) {
  .hero {
    min-height: calc(100svh - var(--header-height-safe));
    padding-block: 2rem 4.5rem;
  }
  .hero-layout {
    min-height: auto;
    align-items: flex-start;
  }
  .hero-title-line { white-space: normal; }
  .hero .hero-sub { margin-bottom: 1.5rem; }
  .hero-actions { margin-bottom: 1.75rem; }
  .hero-features { gap: 0.75rem 1.25rem; }
  .hero .hero-features { flex-wrap: wrap; }
  .hero-scroll-cue { bottom: 1rem; }
}

/* Stats band */
.stats-band {
  position: relative;
  background: var(--bg-deep);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  box-shadow: 0 12px 32px rgba(27, 42, 56, 0.22);
  margin-top: 2rem;
}
@media (max-width: 760px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.stat .stat-number {
  display: block;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--accent-light);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.stat .stat-label {
  display: block;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* About teaser split: layout styles in main.css (.split, .split-media, .badge-float) */

/* ===== Bento: services overview — grid + cells now in main.css (shared with services index) ===== */

/* ===== Workflow section (numbered steps) ===== */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
}
@media (max-width: 1000px) { .workflow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .workflow-steps { grid-template-columns: 1fr; } }
.workflow-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
}
.workflow-step .step-number {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.workflow-step h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.workflow-step p { font-size: 0.9063rem; }

/* ===== Fleet band (deep slate) ===== */
.fleet-band {
  background: var(--bg-deep);
  overflow: hidden;
  position: relative;
}
.fleet-band .section-label { color: var(--accent-light); }
.fleet-band h2,
.fleet-band h3 { color: #fff; }
.fleet-band .section-header .section-description { color: rgba(255, 255, 255, 0.72); }
.fleet-band .section-divider { opacity: 0.9; }
.fleet-band .achievements { margin-top: 2rem; }
.fleet-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .fleet-list { grid-template-columns: 1fr; } }
.fleet-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.fleet-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(199, 154, 62, 0.4); }
.fleet-card h3 {
  color: #fff;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}
.fleet-card h3 i { color: var(--accent); }
.fleet-card p { color: rgba(255, 255, 255, 0.65); font-size: 0.9063rem; }

/* Achievements strip */
.achievements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3.5rem;
  margin-top: 2.5rem;
}
.achievement-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  opacity: 0.85;
}
.achievement-item i { color: var(--accent); font-size: 1.125rem; }

/* CTA spacing on home */
.home-cta { padding-top: 0; }
/* Accessible photographic slideshow */
.hero{background:#142635;isolation:isolate}.hero-slides{position:absolute;inset:0;z-index:-2}.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(3%);transition:opacity 700ms ease,transform 1000ms ease}.hero-slide.is-active{opacity:1;transform:translateX(0)}.hero::before{z-index:-1}.hero-layout{padding-block:4rem 7rem}.hero-controls{position:absolute;bottom:1.5rem;left:max(1.5rem,calc((100vw - 1200px)/2));right:1.5rem;display:flex;align-items:center;gap:.6rem;z-index:2}.hero-controls button{min-width:44px;min-height:44px;border:1px solid #ffffff66;background:#152635b3;color:white;cursor:pointer;border-radius:4px}.hero-controls button:hover{background:#53606a}.hero-dots{display:flex;gap:2px}.hero-dots button{border:0;background:transparent;position:relative}.hero-dots button::after{content:"";position:absolute;left:12px;right:12px;height:3px;top:20px;background:#ffffff66}.hero-dots button[aria-pressed=true]::after{background:var(--accent-light)}.hero-controls [data-hero-pause]{padding-inline:1rem}.hero-caption{font-size:.8rem;margin-left:.7rem;color:#e2e7eb}.hero-scroll-cue{display:none}.hero-controls{display:none}.js .hero-controls{display:flex}@media(max-width:700px){.hero-caption{display:none}.hero-layout{padding-block:1rem 5rem}.hero-controls{left:1.5rem;bottom:1.5rem}.hero-dots button{min-width:32px}.hero .hero-features{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.hero-slide{transition:none;transform:none}}
@media(max-width:600px){.partner-distributor{flex-direction:column;align-items:stretch;white-space:normal;max-width:100%;overflow-wrap:break-word}.partner-distributor-logo{height:64px}}

/* Each image has its own concise, synchronized message. */
.hero-content-stack {
  display: grid;
  width: 100%;
  max-width: 800px;
}
.hero-content {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 500ms ease, visibility 500ms;
  pointer-events: none;
}
.hero-content.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.hero .hero-eyebrow {
  color: #e7d5aa;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  margin-bottom: 1.5rem;
}
.hero-content h1,
.hero-content h2 {
  color: #fff;
  font-size: clamp(2.65rem, 5.4vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 1.5rem;
}
.hero-content .accent { color: var(--accent-light); }
.hero-content .hero-sub { max-width: 540px; margin-bottom: 2rem; font-size: clamp(1rem, 1.4vw, 1.125rem); }
.hero-controls button { background: transparent; border-color: #ffffff30; }
.hero-controls .hero-dots button { border: 0; min-width: 44px; }
@media (max-width: 600px) {
  .hero { padding-block: 0; }
  .hero-layout { min-height: calc(100svh - var(--header-height-safe)); padding-block: 3.5rem 7rem; align-items: center; }
  .hero .hero-eyebrow { font-size: .65rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content { transition: none; transform: none; }
}

/* ===== Refined hero motion ===== */
/* Background: crossfade + slow Ken Burns push-in on the active image */
.hero-slide { opacity: 0; transform: scale(1.12); transition: opacity 1100ms ease; }
.hero-slide.is-active { opacity: 1; animation: heroKenBurns 7200ms ease-out both; }
@keyframes heroKenBurns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Text: each line of the active panel rises up and de-blurs, staggered */
.hero-content.is-active > * { animation: heroRise 760ms cubic-bezier(.22, .68, 0, 1) both; }
.hero-content.is-active > :nth-child(1) { animation-delay: 60ms; }
.hero-content.is-active > :nth-child(2) { animation-delay: 170ms; }
.hero-content.is-active > :nth-child(3) { animation-delay: 300ms; }
.hero-content.is-active > :nth-child(4) { animation-delay: 430ms; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); filter: blur(9px); }
  55%  { filter: blur(0); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Accent word: underline draws in after the headline settles */
.hero-content.is-active .accent { position: relative; display: inline-block; }
.hero-content.is-active .accent::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.08em;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-light), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: heroUnderline 620ms cubic-bezier(.22, .68, 0, 1) 560ms both;
}
@keyframes heroUnderline { to { transform: scaleX(1); } }

/* Auto-advance progress on the active dot, in sync with the timer */
.hero-dots button::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 20px; height: 3px;
  border-radius: 2px; background: var(--accent-light);
  transform: scaleX(0); transform-origin: left;
}
.hero-dots button[aria-pressed="true"]::after { background: rgba(255, 255, 255, 0.28); }
.hero-dots button[aria-pressed="true"]::before {
  animation: heroProgress var(--hero-interval, 3000ms) linear both;
}
.hero.is-paused .hero-dots button[aria-pressed="true"]::before { animation-play-state: paused; }
@keyframes heroProgress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active { animation: none; transform: none; }
  .hero-content.is-active > * { animation: none; }
  .hero-content.is-active .accent::after { animation: none; transform: scaleX(1); }
  .hero-dots button[aria-pressed="true"]::before { animation: none; transform: scaleX(1); }
}

/* ============================================================
   HERO FINISHING
   The slideshow left a tall empty band under the CTA. A shared
   trust strip fills it, the bottom edge gets a deliberate seam,
   and the controls read as glass rather than plain boxes.
   ============================================================ */
.hero-layout {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.hero-trust {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.hero-trust-item i { color: var(--accent-light); font-size: 0.9375rem; }

/* Deliberate seam instead of a hard cut into the band below */
.hero::after {
  display: block;
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  width: 100%;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-light) 32%, rgba(224, 188, 110, 0) 78%);
  pointer-events: none;
  z-index: 2;
}

/* Controls: glass pills, and a wider hit area on the dots */
.hero-controls button {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(20, 33, 44, 0.42);
  backdrop-filter: blur(8px);
  transition: background-color 200ms var(--ease-quint), border-color 200ms var(--ease-quint), transform 200ms var(--ease-quint);
}
.hero-controls button:hover {
  background: rgba(199, 154, 62, 0.34);
  border-color: var(--accent-light);
  transform: translateY(-1px);
}
.hero-controls .hero-dots { background: transparent; }
.hero-controls .hero-dots button { background: transparent; backdrop-filter: none; border: 0; }
.hero-controls .hero-dots button:hover { background: transparent; transform: none; }
.hero-caption { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

@media (prefers-reduced-motion: no-preference) {
  .hero-trust { animation: heroRise 760ms var(--ease-soft) 560ms both; }
}
@media (max-width: 700px) {
  .hero-trust { gap: 0.6rem 1.5rem; padding-top: 1.125rem; }
  .hero-trust-item { font-size: 0.8125rem; white-space: normal; }
}
@media (max-width: 600px) {
  .hero-trust-item:nth-child(n + 4) { display: none; }
}

/* ============================================================
   HERO: NAMED CAPABILITY RAIL
   The old carousel had three anonymous dots and a CTA that
   changed under the visitor's cursor every few seconds. The rail
   below names each slide, so the hero doubles as a one-line
   summary of what the company does and can be driven rather than
   waited out. A persistent WhatsApp action sits above it, so
   there is always one target that does not move.
   ============================================================ */

/* Bring the controls into the content column and out of the corner */
.hero-controls {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  gap: 0.4rem;
  flex-shrink: 0;
}
.hero-caption { display: none; }

.hero-layout { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 6vw, 4rem); }
.hero-content-stack { max-width: 780px; }

/* Persistent action: the one thing in the hero that never changes */
.hero-persist {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: -0.75rem;
}
.hero-persist-note {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- The rail ---- */
.hero-nav {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.hero-rail {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.hero-rail-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.24);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: rgba(255, 255, 255, 0.6);
  min-height: 3.4em;
  transition: color 220ms var(--ease-quint), border-color 220ms var(--ease-quint);
}
.hero-rail-item::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-rail-item[aria-pressed="true"] { color: #fff; }
.hero-rail-item[aria-pressed="true"]::after {
  animation: heroRailFill var(--hero-interval, 6500ms) linear both;
}
.hero.is-paused .hero-rail-item[aria-pressed="true"]::after { animation-play-state: paused; }
@keyframes heroRailFill { to { transform: scaleX(1); } }

.hero-rail-item:not([aria-pressed="true"]):hover,
.hero-rail-item:not([aria-pressed="true"]):focus-visible { color: #fff; }
.hero-rail-item:not([aria-pressed="true"]):hover::after,
.hero-rail-item:not([aria-pressed="true"]):focus-visible::after {
  background: rgba(255, 255, 255, 0.55);
  transform: scaleX(1);
  transition: transform 240ms var(--ease-quint);
}
.hero-rail-item:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }

/* Trust strip sits between the copy and the rail */
.hero-trust { border-top-color: rgba(255, 255, 255, 0.14); max-width: 820px; }

/* Swipe affordance: only shown where a touch pointer is the primary input */
.hero-swipe-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hero-swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
  }
  .hero-swipe-hint i { font-size: 0.6875rem; }
}
.hero-slides { touch-action: pan-y; }

@media (max-width: 760px) {
  .hero-nav { flex-direction: column; align-items: stretch; gap: 1rem; }
  .hero-controls { justify-content: flex-start; }
  .hero-rail-item { font-size: 0.75rem; min-height: 3.6em; }
}
@media (max-width: 600px) {
  .hero-layout { padding-block: 2rem 2.5rem; }
  .hero-persist { margin-top: 0; }
  .hero-persist-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rail-item[aria-pressed="true"]::after { animation: none; transform: scaleX(1); }
  .hero-rail-item:not([aria-pressed="true"]):hover::after { transition: none; }
}

/* ============================================================
   HERO ACCESSIBILITY FIXES
   ============================================================ */

/* The slide headlines are paragraphs now, so they need the display type that
   the h1/h2 rules were giving them. */
.hero-content .hero-headline {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.9rem, 8.5vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin: 0 0 1.5rem;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .hero-content .hero-headline { font-size: clamp(2.65rem, 5.4vw, 4.75rem); }
}
/* At 320px the hard <br> plus a 42px floor pushed the headline past the
   viewport, and body overflow-x:hidden silently clipped it. */
@media (max-width: 420px) {
  .hero-content .hero-headline br { display: none; }
}

/* The scrim only varied horizontally, so on a phone — where the copy runs the
   full width — its alpha fell to about 0.43 at the right edge and body text
   dropped to roughly 2.4:1. A base layer sets a floor, and below 900px the
   gradient runs vertically instead, since that is where the layout goes
   full-width. */
.hero::before {
  background:
    linear-gradient(90deg, rgba(14, 27, 39, 0.82) 0%, rgba(14, 27, 39, 0.62) 45%, rgba(14, 27, 39, 0.14) 100%),
    rgba(14, 27, 39, 0.22);
}
@media (max-width: 900px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(14, 27, 39, 0.68) 0%, rgba(14, 27, 39, 0.78) 45%, rgba(14, 27, 39, 0.88) 100%);
  }
}
/* No alpha discount on copy sitting over photography */
.hero .hero-sub { color: #fff; }
.hero-trust-item { color: #fff; }
.hero-persist-note { color: rgba(255, 255, 255, 0.78); }

/* Pause stopped the rail progress but not the Ken Burns zoom, so a
   viewport-sized image kept moving for seven seconds after the visitor asked
   it to stop. Also brought inside the 6500ms interval so it completes. */
.hero-slide.is-active { animation: heroKenBurns 6500ms ease-out both; }
.hero.is-paused .hero-slide.is-active,
.hero.is-paused .hero-content.is-active > *,
.hero.is-paused .hero-content.is-active .accent::after {
  animation-play-state: paused;
}

/* Controls: one authoritative declaration. The border was about 2.4:1 against
   the glass, and the focus ring was gold over unpredictable photography. */
.hero-controls button {
  background: rgba(20, 33, 44, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.hero-controls button:hover {
  background: rgba(20, 33, 44, 0.86);
  border-color: var(--accent-light);
  transform: translateY(-1px);
}
.hero-controls button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 33, 44, 0.85);
}
.hero-controls button:active { transform: translateY(0); background: var(--accent-dark); }
[data-hero-pause] { min-width: 44px; }

/* The rail is the only direct navigation, so its focus ring needs two tones to
   survive any photo behind it. */
.hero-rail-item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(20, 33, 44, 0.8);
}

/* .hero-controls spanned the hero as an absolutely positioned box that
   swallowed pointer events; it is in the flow now, but keep the guard. */
.hero-controls { pointer-events: none; }
.hero-controls > * { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .hero-controls button:hover, .hero-controls button:active { transform: none; }
  .hero-slide.is-active { animation: none; transform: none; }
}

/* ============================================================
   HERO DEFECT FIXES
   ============================================================ */

/* The entrance animation ran filter: blur(9px) on every child, including the
   primary CTA. With a 300ms stagger that turned the main action into an
   unreadable gold blob for the first half-second of every rotation — every
   6.5 seconds. The rise alone carries the entrance; the blur only cost
   legibility (and forced a GPU layer on a full-bleed element). */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* Buttons never animate in: the main action must be readable immediately. */
.hero-content.is-active > .btn,
.hero-content.is-active > .hero-actions { animation: none; opacity: 1; transform: none; }

/* On a tall window the hero stretched to the full viewport and left a wide
   empty band under the rail. Cap it so the composition stays deliberate. */
.hero { min-height: min(calc(100svh - var(--header-height-safe)), 840px); }
.hero-layout { min-height: min(calc(100svh - var(--header-height-safe)), 840px); }

/* Dead code: the scroll cue has been display:none since it was written, and
   the old absolutely-positioned control bar is superseded by .hero-nav. */
.hero-scroll-cue { display: none !important; }

@media (max-width: 600px) {
  .hero, .hero-layout { min-height: calc(100svh - var(--header-height-safe)); }
}

/* ============================================================
   HERO — PAUSE SCOPE AND RECOMPOSITION
   ============================================================ */

/* The pause state must freeze only continuous motion. It was also freezing the
   one-shot entrance, so a pointer resting on the hero locked the copy — and
   the CTA — at its first frame. The Ken Burns loop and the rail progress are
   the only things that should stop. */
.hero.is-paused .hero-content.is-active > *,
.hero.is-paused .hero-content.is-active .accent::after {
  animation-play-state: running;
}
.hero.is-paused .hero-slide.is-active { animation-play-state: paused; }

/* ---- Two columns: rotating copy on the left, a fixed anchor on the right ---- */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  column-gap: clamp(2.5rem, 4.5vw, 5.5rem);
  align-content: center;
  align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.hero-copy-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* The single uniform 48px gap gave four different relationships one spacing
   value. These three groups now read as three objects, not five siblings. */
.hero-content-stack { max-width: 40rem; }
.hero-persist { margin-top: clamp(1.5rem, 3vw, 2rem); }
.hero-nav { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 40rem; }

/* ---- Proof panel: names the clients, and fills the empty right third ---- */
.hero-proof {
  align-self: center;
  padding: 1.25rem 1.375rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(20, 33, 44, 0.5);
  backdrop-filter: blur(6px);
}
.hero-proof-label {
  display: block;
  margin-bottom: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.hero-proof ul { list-style: none; margin: 0; padding: 0; }
.hero-proof li {
  padding-block: 0.5625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-proof li:first-child { border-top: 0; padding-top: 0; }
.hero-proof-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-light);
}
.hero-proof-more:hover { color: #fff; }

/* ---- Fact rail welded to the bottom edge ----
   Replaces the hero trust strip and the capability strip below it, which
   between them said the same three facts twice, about 100px apart. */
.hero {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0;
}
.hero-facts {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(20, 33, 44, 0.3), rgba(20, 33, 44, 0.66));
  backdrop-filter: blur(2px);
}
.fact-strip-flush {
  margin-top: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
}
.fact-strip-flush > div {
  position: relative;
  background: transparent;
  padding: clamp(1rem, 2vw, 1.375rem) 0;
}
.fact-strip-flush > div + div::before {
  content: "";
  position: absolute;
  left: calc(clamp(1rem, 2.5vw, 2rem) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.25rem;
  background: rgba(255, 255, 255, 0.16);
}

/* ---- Retire the two dissolving gold flourishes ---- */
.hero::after { display: none; }
.hero-content.is-active .accent::after { display: none; }

/* ---- Dead markup, permanently hidden since it was written ---- */
.hero-swipe-hint, .hero-scroll-cue { display: none !important; }

@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.5rem, 3.5vw, 2.25rem); }
  .hero-proof {
    padding: 1.125rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    backdrop-filter: none;
    max-width: 34rem;
  }
  .hero-proof ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; }
  .hero-proof li { border-top: 0; padding: 0; }
  .hero-proof li + li::before { content: "\00b7"; margin-right: 0.5rem; color: rgba(255, 255, 255, 0.45); }
  .hero-proof-more { border-top: 0; margin-top: 0.625rem; padding-top: 0; min-height: 32px; }
}
@media (max-width: 900px) {
  .fact-strip-flush { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip-flush > div { padding-block: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .fact-strip-flush > div:nth-child(-n + 2) { border-top: 0; }
  .fact-strip-flush > div + div::before { display: none; }
  .fact-strip-flush > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .fact-strip-flush > div:last-child dd { margin-top: 0; }
}
@media (max-width: 600px) {
  .hero-layout { padding-block: 2rem 1.75rem; }
}

/* .hero is a grid of [copy row 1fr] + [fact rail auto]; the copy row must not
   also carry the full min-height, or the two stack. */
.hero-layout { min-height: 0; }
.hero { min-height: min(calc(100svh - var(--header-height-safe)), 47.5rem); }
@media (max-width: 600px) { .hero { min-height: auto; } }

/* ============================================================
   HOMEPAGE PHONE PASS
   Three things the desktop layout was hiding. The stats band
   drew a vertical rule to the left of every stat after the
   first, which is correct in one row of four and wrong the
   moment it wraps to two columns — the third stat then drew a
   rule down the left edge of the band. The card paddings here
   are the 28px desktop value. And the proof panel's "see all"
   link was reduced to a 32px target when the panel flattened
   below 1080px, which is the width where it stops being a
   pointer target and starts being a thumb target.
   ============================================================ */

@media (max-width: 760px) {
  .stat:nth-child(odd)::before { display: none; }
  .stats-band { padding: 1.5rem 1.25rem; gap: 1.25rem; }
}

@media (max-width: 600px) {
  .workflow-step, .fleet-card { padding: 1.25rem; }
  .workflow-steps, .fleet-list { gap: 1rem; }
  .workflow-step .step-number { margin-bottom: 0.625rem; }
  .achievements { gap: 1.25rem 2rem; margin-top: 1.75rem; }
  .stats-band { margin-top: 1.5rem; }

  /* Back to a thumb-sized target once the panel is a row of names. */
  .hero-proof-more { min-height: 44px; }

  /* Three rail labels share roughly 256px at 320px, so they wrap to two or
     three lines. The 3.6em floor is a fixed multiple of a 12px font and can
     land under 44px; a real pixel floor plus room for the extra line is what
     the thumb needs. */
  .hero-rail { gap: 0.375rem; }
  .hero-rail-item { min-height: 44px; padding-bottom: 0.25rem; }

  /* The persistent WhatsApp action is the one fixed target in a rotating
     hero, so it takes the full gutter-to-gutter run. */
  .hero-persist { gap: 0.625rem; }
  .hero-persist .btn { width: 100%; }
}