/* KHA Marine — one-page navbar overlay for the ROM engine.
   Adds a fixed navbar (left links · centered logo · right links) + an EN/AR
   language badge, and turns the home page into a single scroll page.
   Injected OUTSIDE #__next so React re-renders never remove it. */

:root {
  --kha-blue: #4a9eff;
  --kha-nav-h: 96px;
}

/* Hide ROM's original top navbar (the hamburger bar). Footer logo untouched. */
[class*="navbar__Nav"] {
  display: none !important;
}
/* ...and ROM's own full-screen menu. Its trigger is the navbar above, so it can never
   open here, but it sat parked off-canvas to the right of the page. */
[class*="navbar__MenuOpened"] {
  display: none !important;
}

/* ---- Section order: Home → Who We Are → Manufacturing (boats) → 3D fleet → Values → content ----
   We CANNOT physically move these nodes past the React-owned boats section (it triggers
   an infinite reconcile loop that freezes the page). Instead we make their shared parent a
   flex column and reorder VISUALLY with `order` — zero DOM moves, so React never fights it.
   The wanted sections get negative orders; every other child (hidden ROM sections, footer)
   keeps the default 0 and falls after them, in place. */
[class*="_app__DivContainer"] {
  display: flex;
  flex-direction: column;
}
/* CRUCIAL: the pinned voyage sections are ~300vh tall to give their scroll
   animations room. As flex items the default flex-shrink:1 squashes them, which
   breaks the pin and leaves a big dark gap. Pin every child at its natural height. */
[class*="_app__DivContainer"] > * {
  flex-shrink: 0;
}
/* Home → Who We Are → 3D fleet → Maintenance → Values → content. (ROM's boats carousel
   keeps its slot in this list but is hidden — see the rule further down.) */
[class*="_app__DivContainer"] > [class*="BannerHome"] { order: -7; }
[class*="_app__DivContainer"] > .kha-venter          { order: -6; }
[class*="_app__DivContainer"] > .kha-vmsec           { order: -6; }   /* right after the egg (DOM order breaks the tie) */
[class*="_app__DivContainer"] > [class*="highlight__"],
[class*="_app__DivContainer"] > [class*="Highlight"]  { order: -5; }
[class*="_app__DivContainer"] > .kha-fleet3d         { order: -4; }
[class*="_app__DivContainer"] > .kha-maint-sec       { order: -3; }
[class*="_app__DivContainer"] > .kha-vval            { order: -2; }
/* .kha-content is also on the maint section, so target the NON-maint content only */
[class*="_app__DivContainer"] > .kha-content:not(.kha-maint-sec) { order: -1; }

/* ROM's boats carousel ("Endurance on Gulf waters" · Navigator / Falcon / Predator ·
   DRAG · 360° tour) is retired: the fleet explorer directly below already shows every
   hull as a live GLB, so it was a duplicate — and it cost one WebGL context per Swiper
   slide on desktop. React still renders it (it is the anchor the KHA sections are
   inserted before — see placeMidSections in kha-onepage.js), so hide, don't remove. */
[class*="section__Section"]:has([class*="highlight__"]),
[class*="_app__DivContainer"] > [class*="highlight__"],
[class*="_app__DivContainer"] > [class*="Highlight"] {
  display: none !important;
}

/* Fade ONLY the hero's video container bottom into dark → seamless merge with the next
   section (the text sits in a separate 'Content' layer and is left untouched). */
[class*="bannerHome__ReactPlayerContainer"] {
  position: relative;
}
[class*="bannerHome__ReactPlayerContainer"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 18, 0) 0%, #040a12 100%);
}

/* Hide ROM's hero scroll indicator (the small vertical gold squiggle). */
[class*="bannerHome__ScrollContainer"] {
  display: none !important;
}

/* Manufacturing fleet: the spinnable 3D boat is overlaid on the old flat boat render
   (boatModel → predator.png etc.). Drop that photo so only the 3D boat shows. */
[class*="boatModel"] {
  background-image: none !important;
}

/* Footer: remove leftover ROM/agency bits that aren't KHA's — the social icons
   (old WhatsApp/ROM links) and the "Lavva" agency "made by" logo (links to lavva.pt). */
[class*="footer__Lavva"] {
  display: none !important;
}
[class*="footer__"] a:has(i[class*="icon-icon-instagram"]),
[class*="footer__"] a:has(i[class*="icon-icon-facebook"]),
[class*="footer__"] a:has(i[class*="icon-icon-linkedin"]),
[class*="footer__"] a:has(i[class*="icon-icon-youtube"]),
[class*="footer__"] a:has(i[class*="icon-icon-twitter"]) {
  display: none !important;
}
/* Remove the entire top footer row (boat links, Explore links, App Store / Google
   Play badges, newsletter — all ROM leftovers). Keep only the © + Legal Notice bar. */
[class*="footer__FooterInnerContainer-"]:not([class*="Second"]) {
  display: none !important;
}

/* ---------------- Injected navbar ---------------- */
.kha-onenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  height: var(--kha-nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 56px);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.kha-onenav.solid {
  background: rgba(9, 20, 33, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(243, 247, 251, 0.14);
}
.kha-onenav__side {
  display: flex;
  gap: clamp(16px, 2.2vw, 38px);
  align-items: center;
}
.kha-onenav__side.right {
  justify-content: flex-end;
}

.kha-onenav a.kha-nl {
  color: #dbe6f2;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  padding: 6px 0;
  opacity: 0.82;
  cursor: pointer;
  text-decoration: none;
  transition:
    opacity 0.25s,
    color 0.25s;
}
.kha-onenav a.kha-nl:hover {
  opacity: 1;
}
.kha-onenav a.kha-nl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--kha-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.kha-onenav a.kha-nl.active {
  opacity: 1;
  color: #fff;
}
.kha-onenav a.kha-nl.active::after {
  transform: scaleX(1);
}

/* Centered logo — smaller than ROM's, absolute-centered feel via the grid */
.kha-onenav__logo {
  grid-column: 2;
  justify-self: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  line-height: 1;
  font-family: "Fraunces", "Times New Roman", Georgia, serif;
  color: #f3f7fb;
  white-space: nowrap;
  user-select: none;
}
.kha-onenav__logo .k {
  font-weight: 600;
  font-size: 2.35rem;
  letter-spacing: 0.05em;
}
.kha-onenav__logo .dot {
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--kha-blue);
  transform: translateY(-0.02em);
}
.kha-onenav__logo .m {
  font-style: italic;
  font-weight: 500;
  font-size: 2.35rem;
  color: #eaf2fb;
}

/* ---------------- Language badge (top of page) ---------------- */
.kha-lang {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 4100;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: rgba(9, 20, 33, 0.72);
  border: 1px solid rgba(243, 247, 251, 0.18);
  border-radius: 999px; /* floating pill in the bottom-right corner */
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: "Inter", system-ui, sans-serif;
}
html[dir="rtl"] .kha-lang {
  right: auto;
  left: 24px;
}
.kha-lang button {
  background: none;
  border: 0;
  color: #c6d4e4;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  transition:
    color 0.2s,
    background 0.2s;
}
.kha-lang button.on {
  background: var(--kha-blue);
  color: #06192e;
}
.kha-lang .sep {
  width: 1px;
  align-self: stretch;
  background: rgba(243, 247, 251, 0.16);
}

/* Smooth scroll + offset so anchored sections clear the fixed navbar */
html {
  scroll-behavior: smooth;
}
/* Kill horizontal overflow. Some ROM elements (the mobile nav drawer / modals) sit
   parked off-screen to the right; unclipped, they let phones scroll sideways into an
   empty strip. Clip the x-axis at every level. (100% not 100vw — 100vw includes the
   scrollbar width and can itself cause a thin overflow.) */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
main,
[class*="_app__DivContainer"],
[class*="layout__Content"] {
  overflow-x: clip;
  max-width: 100%;
}
[data-kha-sec],
.kha-band {
  /* every in-page link target clears the fixed navbar (the bands are link targets
     too: "See the full list", the footer columns, the capability cross-link) */
  scroll-margin-top: var(--kha-nav-h);
}

/* Nudge the hero "Welcome" + content a touch lower so it sits clearly below
   the centered logo (per request). Gentle, non-breaking. */
[class*="bannerHome__Center"],
[class*="bannerHome__Content"] {
  padding-top: min(6vh, 70px);
}

/* Tighten the 3D explorer's big dark bottom padding so it flows into the next
   section instead of leaving an empty dark band above it. */
.kha-bd {
  padding-bottom: clamp(28px, 4vw, 52px) !important;
}

/* Under the Craftsmanship / The Art blocks sat the leftover "Rom News" slider, which
   is empty in this offline mirror and rendered as an ~820px black band. Hide it so the
   section ends cleanly at the two blocks. */
[class*="wrapper__Element"]:has([class*="slideNewsHome__"]) {
  display: none !important;
}

/* "We aim to exceed…" section now uses the bright Burj-Al-Arab photo — darken this
   section's overlay on the left so the white text stays readable. */
[class*="section__Section"]:has([class*="middleHome__"]) [class*="overlay__"] {
  background: rgba(0, 0, 0, 0.72) !important;
}
/* Make this section EXACTLY the photo's shape (16:9 = 56.25vw tall). Then the image
   fills it edge-to-edge with NO crop and NO bars, on every screen width. */
[class*="section__Section"]:has([class*="middleHome__"]),
[class*="section__Section"]:has([class*="middleHome__"]) .MiddleHome,
[class*="section__Section"]:has([class*="middleHome__"])
  [class*="middleHome__"] {
  height: 56.25vw !important;
  min-height: 56.25vw !important;
  max-height: none !important;
}
.MiddleHome {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b1a2b !important;
}
[class*="middleHome__Title"],
[class*="middleHome__Left"] [class*="text__Text"] {
  text-shadow: 0 2px 18px rgba(0, 6, 15, 0.55);
}

/* CTA image hero — big frosted headline on the right, small paragraph + Contact
   button on the bottom-left (styled after the reference layout). */
.kha-mid-host {
  position: relative !important;
}
.kha-mid-hide {
  visibility: hidden !important;
}
.kha-mid-hero {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}
/* Big right-aligned headline */
.kha-mid-hero__title {
  position: absolute;
  top: 68%;
  left: clamp(32px, 3.4vw, 72px);
  transform: translate(0, calc(-50% + 40px));
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.9s cubic-bezier(0.16, 0.7, 0.2, 1),
    opacity 0.8s ease;
  margin: 0;
  max-width: min(52%, 640px);
  text-align: left;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6.2vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 6px 40px rgba(0, 10, 24, 0.55);
}
.kha-mid-hero.is-in .kha-mid-hero__title {
  transform: translate(0, -50%) !important;
  opacity: 1;
}
/* Bottom-left paragraph + Contact button */
.kha-mid-hero__lead {
  position: absolute;
  right: clamp(24px, 5vw, 84px);
  bottom: clamp(18px, 3vw, 40px);
  max-width: min(88%, 420px);
  transform: translateX(64px);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.9s cubic-bezier(0.16, 0.7, 0.2, 1) 0.12s,
    opacity 0.8s ease 0.12s;
}
.kha-mid-hero.is-in .kha-mid-hero__lead {
  transform: translateX(0);
  opacity: 1;
}
.kha-mid-hero__p {
  margin: 0 0 22px;
  color: #eef4fb;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.4;
  text-shadow: 0 2px 18px rgba(0, 6, 15, 0.6);
}
.kha-mid-hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.kha-mid-hero__btn {
  pointer-events: auto;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 34px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}
.kha-mid-hero__btn:hover {
  background: #fff;
  color: #0b1a2b;
  border-color: #fff;
}
/* Contact us = primary (solid pill); Visit us = outline pill */
.kha-mid-hero__btn--solid {
  background: #fff;
  color: #0b1a2b;
  border-color: #fff;
}
.kha-mid-hero__btn--solid:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.85);
  color: #0b1a2b;
}

/* ---------------- Contact section: the contacts page design, merged in ---------------- */
.kha-contact {
  display: block;
  background: #0b1a2b;
  color: #eaf2fb;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}

/* Full-bleed interactive map with the contact details overlaid (the /en/contacts design) */
.kha-contact__map {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(96px, 15vh, 190px) clamp(24px, 6vw, 88px)
    clamp(56px, 9vh, 120px);
  color: #eaf2fb;
}
.kha-contact__gmap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.kha-contact__gmap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* location picker — only shown when the page is opened with #set-location */
.kha-contact__editbar[hidden] {
  display: none !important;
}
.kha-contact__editbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 4;
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.kha-contact__editbar input {
  flex: 1 1 280px;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: #14202b;
  font-family: inherit;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.kha-contact__editbar button {
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--kha-blue);
  color: #06192e;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.kha-contact__editbar span {
  color: #14202b;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 5px 12px;
  border-radius: 8px;
}
/* dark scrim keeps the light overlay text readable on the navy map; drag passes through */
.kha-contact__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(11, 26, 43, 0.85) 0%,
    rgba(11, 26, 43, 0.38) 30%,
    rgba(11, 26, 43, 0) 58%
  );
}
/* overlay text is click-through so the map stays draggable; only links catch clicks */
.kha-contact__info,
.kha-contact__title,
.kha-contact__dir {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.kha-contact__map a {
  pointer-events: auto;
}
.kha-contact__info {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 7vw, 130px);
}
.kha-contact__info .lbl {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #5b6b78;
  margin-bottom: 14px;
}
.kha-contact__info .val {
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 500;
  color: #14202b;
}
.kha-contact__info a {
  color: #14202b;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 32, 43, 0.4);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.kha-contact__info a:hover {
  color: #2b6fd0;
  border-color: #2b6fd0;
}
.kha-contact__title {
  margin-top: auto;
  padding-top: clamp(44px, 9vh, 110px);
  font-family: "Fraunces", "Times New Roman", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 15ch;
  color: #f3f7fb;
}
.kha-contact__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 26px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kha-blue);
  text-decoration: none;
  transition:
    gap 0.2s,
    color 0.2s;
}
.kha-contact__dir:hover {
  gap: 0.9em;
  color: #f3f7fb;
}
/* Message form (dark) */
.kha-contact__form {
  background: #0b1a2b;
  color: #eaf2fb;
  padding: clamp(64px, 10vh, 130px) clamp(24px, 6vw, 72px);
}
.kha-contact__form-in {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.kha-contact__form .k {
  color: var(--kha-blue);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 600;
}
.kha-contact__form h3 {
  font-family: "Fraunces", "Times New Roman", Georgia, serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 14px 0 12px;
  line-height: 1.25;
}
.kha-contact__form-in > p {
  color: #9fb3c7;
  margin-bottom: 32px;
  font-weight: 300;
}
.kha-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}
.kha-contact__grid .full {
  grid-column: 1 / -1;
}
.kha-contact__form input,
.kha-contact__form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(243, 247, 251, 0.16);
  border-radius: 10px;
  padding: 15px 18px;
  color: #fff;
  font-family: inherit;
  font-size: 0.98rem;
}
.kha-contact__form input::placeholder,
.kha-contact__form textarea::placeholder {
  color: #7f96ac;
}
.kha-contact__form input:focus,
.kha-contact__form textarea:focus {
  outline: none;
  border-color: var(--kha-blue);
}
.kha-contact__form textarea {
  min-height: 140px;
  resize: vertical;
}
.kha-contact__submit {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  background: var(--kha-blue);
  color: #06192e;
  border: 0;
  border-radius: 999px;
  padding: 15px 36px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: inherit;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.kha-contact__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(74, 158, 255, 0.3);
}
.kha-contact__submit:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
/* Honeypot: off-screen rather than display:none, because some bots skip fields that
   are not rendered at all. aria-hidden + tabindex="-1" keep it away from real users. */
.kha-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
/* Empty until the form has something to report, so it takes no space at rest. */
.kha-contact__status {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 0;
  color: rgba(220, 230, 242, 0.82);
}
.kha-contact__status:empty {
  margin: 0;
}
.kha-contact__status.is-good {
  color: #7ee0a8;
}
.kha-contact__status.is-bad {
  color: #ff9b9b;
}
.kha-contact__status.is-busy {
  color: var(--kha-blue);
}
@media (max-width: 760px) {
  .kha-contact__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Mobile ---------------- */
.kha-onenav__burger {
  display: none;
}
/* Burger + full-screen menu up to 1180px. The six desktop links plus the centred logo
   need about that much room: at 1024px (iPad landscape, small laptops) "Clients" ran
   into the logo. */
@media (max-width: 1180px) {
  .kha-onenav {
    grid-template-columns: auto 1fr auto;
  }
  .kha-onenav__logo {
    grid-column: 1;
    justify-self: start;
  }
  .kha-onenav__side {
    display: none !important;
  }
  .kha-onenav__burger {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
  }
  .kha-onenav__burger span {
    width: 24px;
    height: 2px;
    background: #fff;
    display: block;
    transition:
      transform 0.28s cubic-bezier(0.16, 0.72, 0.24, 1),
      opacity 0.2s ease;
  }
  html.kha-menu-open .kha-onenav__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  html.kha-menu-open .kha-onenav__burger span:nth-child(2) {
    opacity: 0;
  }
  html.kha-menu-open .kha-onenav__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  html .kha-onenav__menu {
    display: flex;   /* html prefix: outranks the display:none base rule further down */
  }
  /* the nav stays see-through over the hero; over the open menu it reads as one surface */
  html.kha-menu-open .kha-onenav {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* The menu itself: all six links in reading order, big and thumb-friendly. It sits
   under the nav (z 3990 < 4000), so the logo and the burger-turned-X stay on top, and
   the EN/ع pill (4100) stays reachable inside it. */
.kha-onenav__menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3990;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--kha-nav-h) + 12px) clamp(24px, 8vw, 96px)
    calc(28px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 80% at 50% 0%, #10263b 0%, #07111d 72%);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0s linear 0.28s;
}
html.kha-menu-open .kha-onenav__menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}
html.kha-menu-open,
html.kha-menu-open body {
  overflow: hidden;
}
.kha-onenav__menu a.kha-nl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2.4vh, 22px) 0;
  border-bottom: 1px solid rgba(243, 247, 251, 0.1);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 6.4vw, 2.4rem);
  line-height: 1.15;
  color: #f3f7fb;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 0.72, 0.24, 1),
    color 0.2s ease;
}
.kha-onenav__menu a.kha-nl::after {
  content: "→";
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.5em;
  color: var(--kha-blue);
}
html[dir="rtl"] .kha-onenav__menu a.kha-nl::after {
  content: "←";
}
.kha-onenav__menu a.kha-nl.active,
.kha-onenav__menu a.kha-nl:hover {
  color: var(--kha-blue);
}
html.kha-menu-open .kha-onenav__menu a.kha-nl {
  opacity: 1;
  transform: none;
}
html.kha-menu-open .kha-onenav__menu a.kha-nl:nth-child(2) { transition-delay: 0.03s; }
html.kha-menu-open .kha-onenav__menu a.kha-nl:nth-child(3) { transition-delay: 0.06s; }
html.kha-menu-open .kha-onenav__menu a.kha-nl:nth-child(4) { transition-delay: 0.09s; }
html.kha-menu-open .kha-onenav__menu a.kha-nl:nth-child(5) { transition-delay: 0.12s; }
html.kha-menu-open .kha-onenav__menu a.kha-nl:nth-child(6) { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .kha-onenav__menu,
  .kha-onenav__menu a.kha-nl {
    transition: none;
  }
}

/* ---------------- New sections: Who We Are + Our Values ---------------- */
.kha-eyebrow {
  display: inline-block;
  color: var(--kha-blue);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.kha-h2 {
  margin: 0.5em 0 0;
  font-family: "Canela", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  color: #f3f7fb;
  letter-spacing: 0.005em;
}
.kha-lede {
  margin: 1.4rem 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(198, 212, 228, 0.76);
  max-width: 46ch;
}

/* ===== Scroll voyage (cinematic) — shared ===== */
.kha-voyage {
  position: relative;
  z-index: 2;
  background: #04080f;
}
.kha-venter {
  height: 230vh;
  background: #04080f;
}
.kha-vval {
  height: 300vh;
}
/* On phones 230vh/300vh means scrolling through 2-3 screens of near-empty water
   before content appears. Shorten the scroll-scrubbed animations so they stay
   snappy and there's no huge empty gap. */
@media (max-width: 760px) {
  .kha-vval {
    height: 185vh;
  }
}

/* --- Who We Are (venter) on phones ---
   Phones run the SAME choreography as desktop: the circle rises out of the hero, the boat
   inside it zooms in, and Who We Are crossfades over it at full zoom. This block only
   re-tunes the desktop numbers for a ~400px-wide screen. No `!important` here: the scroll
   JS drives the clip-path, the dome, the boat and the panel with inline styles. */
@media (max-width: 760px) {
  /* Desktop's 230vh is three thumb-swipes of scrubbing on a phone. 175vh opens and
     closes the circle in about two, without making the zoom feel rushed. */
  .kha-venter {
    height: 175vh;
  }
  /* the panel is a centered grid; its default `auto` column sizes to the widest
     unwrapped line and overflows a phone (text gets clipped). Pin the column to
     the container width so the text wraps. */
  .kha-venter__panel {
    grid-template-columns: minmax(0, 1fr);
    padding: calc(var(--kha-nav-h) + 16px) 22px 32px;
  }
  /* the watermark sits at 76% of the height, which is clear of the hull on a wide
     screen but lands right on it once the boat is framed for a narrow one. */
  .kha-venter__wm {
    display: none;
  }
  /* the glow is a soft ellipse BEHIND the boat rather than a screen-tall vignette.
     (.kha-venter__sea prefix: the base rules for these two come later in the file and
     would otherwise win on source order.) */
  .kha-venter__sea .kha-venter__dome {
    top: 46%;
    width: 150vw;
    height: 58vh;
  }
  /* the ground shadow sits right under the hull (boat centred at 46%, ~27vh tall) */
  .kha-venter__sea .kha-venter__water {
    left: 12%;
    right: 12%;
    bottom: 34%;
    height: 6%;
  }
}
.kha-voyage__pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Who We Are content (dark text on the white ball) */
.kha-venter__vm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 40px);
}
.kha-venter__reveal-in {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  width: 100%;
}
.kha-venter__panel .kha-h2 {
  color: #0b1c2e;
}
.kha-venter__panel .kha-lede {
  color: rgba(24, 46, 68, 0.8);
}
.kha-venter__panel .kha-vm {
  background: linear-gradient(180deg, #f2f7fc, #e6eef8);
  border-color: rgba(11, 28, 46, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kha-venter__panel .kha-vm__text {
  color: #243d55;
}
@media (max-width: 900px) {
  .kha-venter__vm {
    grid-template-columns: 1fr;
  }
}

/* ocean video behind the ball — visual continuation of the hero */
.kha-venter__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(-1, -1); /* flip vertically + horizontally */
}
.kha-venter__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* solid dark at the very top → hides the seam with the hero video, then eases to the base overlay */
  background: linear-gradient(
    180deg,
    #040a12 0%,
    rgba(4, 11, 20, 0.86) 6%,
    rgba(4, 11, 20, 0.56) 24%,
    rgba(4, 11, 20, 0.56) 100%
  );
}
/* --- The ball: a PERFECT CIRCLE (clip-path) rises out of the hero and grows to fill --- */
.kha-venter__ball {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: circle(34vh at 50% 100%);
  -webkit-clip-path: circle(34vh at 50% 100%);
  will-change: clip-path;
  background: radial-gradient(
    130% 130% at 50% 14%,
    #ffffff 0%,
    #e8f1fa 50%,
    #d3e5f4 100%
  );
}
.kha-venter__sea {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  background: transparent;
}
/* soft blue glow behind the boat for depth on the light ball */
.kha-venter__dome {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 120vw;
  height: 120vh;
  border-radius: 50%;
  opacity: 0;
  will-change: opacity, transform;
  background: radial-gradient(
    closest-side,
    rgba(120, 180, 245, 0.85) 0%,
    rgba(88, 150, 220, 0.55) 40%,
    rgba(60, 120, 195, 0.28) 64%,
    transparent 84%
  );
}
.kha-venter__mv {
  position: absolute;
  inset: 0;
  z-index: 2; /* fill the whole ball → no rectangular "box" edge */
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  /* kill every chrome the element paints on its own — the poster, the loading
     bar and the AR button all render as hard rectangles over the soft dome. */
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  transform-origin: 50% 58%; /* rock around the waterline, not screen centre */
  animation: kha-boat-rock 6.5s ease-in-out infinite;
}
/* Phones: the pre-rendered boat (transparent WebP of the same GLB, same camera). The
   wrapper carries the scroll-driven zoom (inline transform from driveEnter); the image
   carries the rock animation, so the two transforms never fight. At scale 1 the hull
   spans the circle; the driver starts it at 0.62 and grows it as you scroll. */
.kha-venter__boatwrap {
  position: absolute;
  left: 50%;
  top: 46%;               /* a touch above centre: the water shadow and glow sit beneath */
  z-index: 2;
  width: 100vw;           /* the image is cropped to the hull, so this IS the hull width */
  max-width: 760px;
  transform: translate(-50%, -50%) scale(0.55);
  will-change: transform, opacity;
  pointer-events: none;
}
.kha-venter__boat {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 58%;
  animation: kha-boat-rock 6.5s ease-in-out infinite;
}
/* gentle tilt, like the hull settling on calm water */
@keyframes kha-boat-rock {
  0%,
  100% {
    transform: rotate(-1.15deg) translateY(0);
  }
  50% {
    transform: rotate(1.15deg) translateY(-0.5%);
  }
}
/* soft ground shadow under the boat */
.kha-venter__water {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 20%;
  height: 5%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(30, 70, 115, 0.3),
    transparent 74%
  );
  filter: blur(9px);
}
.kha-venter__wm {
  position: absolute;
  top: 76%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: baseline;
  gap: 0.36em;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  will-change: transform, opacity;
  text-shadow: 0 2px 14px rgba(180, 210, 240, 0.6);
}
.kha-venter__wm .k {
  color: #0b2036;
  font-weight: 600;
}
.kha-venter__wm .dot {
  width: 0.26em;
  height: 0.26em;
  border-radius: 50%;
  background: var(--kha-blue);
  align-self: center;
}
.kha-venter__wm .m {
  color: var(--kha-blue);
  font-style: italic;
}
/* Who We Are — crossfades over the boat once it has zoomed to the max */
.kha-venter__panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: calc(var(--kha-nav-h) + 24px) clamp(24px, 5vw, 72px) 48px;
  opacity: 0;
  will-change: opacity, transform;
  background: radial-gradient(
    120% 120% at 50% 12%,
    #ffffff 0%,
    #eef4fb 55%,
    #e2ecf6 100%
  );
}
.kha-venter__reveal-in {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  width: 100%;
}
/* dark text on the white ball */
.kha-venter__panel .kha-h2 {
  color: #0b1c2e;
}
.kha-venter__panel .kha-lede {
  color: rgba(24, 46, 68, 0.8);
}
.kha-venter__panel .kha-vm {
  background: linear-gradient(180deg, #f2f7fc, #e6eef8);
  border-color: rgba(11, 28, 46, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kha-venter__panel .kha-vm__text {
  color: #243d55;
}
.kha-venter__vm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 40px);
}

/* Phones: Vision + Mission live in their own section right after the egg. Inside the
   100vh pinned panel they ran off the bottom of any phone under ~800px tall. The section
   continues the panel's light ground, so it reads as the same card. */
.kha-vmsec {
  display: none;
}
@media (max-width: 760px) {
  html.kha-lite .kha-venter__panel .kha-venter__vm {
    display: none;
  }
  html.kha-lite .kha-vmsec {
    display: block;
    position: relative;
    z-index: 2;
    padding: 0 16px 56px;
    background: linear-gradient(180deg, #e2ecf6 0%, #eef4fb 100%);
  }
  html.kha-lite .kha-vmsec .kha-venter__vm {
    margin-top: 0;
  }
}
.kha-vmsec .kha-vm {
  background: linear-gradient(180deg, #f2f7fc, #e6eef8);
  border-color: rgba(11, 28, 46, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kha-vmsec .kha-vm__text {
  color: #243d55;
}
html[dir="rtl"] .kha-vmsec {
  text-align: right;
}
/* Our values: the card stacks are centred in the pinned stage, but on 1024x768 and
   1280x800 (and in Arabic, whose heading and cards run taller) they rose into the heading
   while it was still fading out. The scroll driver measures the overlap and pushes the
   stacks down just enough (fitValues in kha-onepage.js). */
@media (min-width: 761px) {
  .kha-vval .kha-vval__side {
    top: calc(50% + var(--kha-vval-shift, 0px));
  }
}

/* Vision / Mission cards (shared look) */
.kha-vm {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(20, 30, 44, 0.66),
    rgba(6, 10, 16, 0.62)
  );
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: clamp(20px, 2.2vw, 28px);
}
.kha-vm__ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--kha-blue);
  background: rgba(74, 158, 255, 0.12);
  border: 1px solid rgba(74, 158, 255, 0.28);
}
.kha-vm__ico svg {
  width: 22px;
  height: 22px;
}
.kha-vm__tag {
  display: block;
  color: var(--kha-blue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.kha-vm__text {
  font-size: 1.02rem;
  line-height: 1.56;
  color: #dce6f2;
  margin: 0;
}

/* --- Stage 2: values voyage — open dusk sea, drawn entirely in CSS --- */
/* Deep dusk bed the photo dissolves into. Deliberately even — an earlier version
   had a pale band at the 40-56% mark for the sea horizon, but with a photo on top
   that band showed past the feathered edges as a light streak across the section. */
.kha-vval__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    #1b2836 0%,
    #22303f 30%,
    #243546 52%,
    #182533 74%,
    #0d151d 100%
  );
}
/* The sea: a soft mist band sitting on the horizon, glassy water falling away
   below it. --kha-sea-deep is nudged by the scroll driver so the water darkens
   as the section plays through. */
.kha-vval__sea {
  --kha-sea-deep: 0.42;
  --kha-photo-scale: 0.8;   /* lower = smaller boat. 1 = fills the frame edge to edge */
  position: absolute;
  inset: -8vh 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
/* KHA's own dusk photo, sized DOWN off --kha-photo-scale so the hull sits smaller
   in frame. The radial mask feathers its rectangle away into the sky gradient
   behind it, so shrinking it doesn't leave a visible photo edge.
   Swap the url here to change the backdrop. */
.kha-vval__sea::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/kha/img/gallery/showcase-evening-bow.jpg") center 38% / cover no-repeat;
  transform: scale(var(--kha-photo-scale));
  transform-origin: 50% 46%;
  -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 46%, #000 42%, transparent 82%);
  mask-image: radial-gradient(ellipse 64% 60% at 50% 46%, #000 42%, transparent 82%);
}
/* darkening wash over the photo, so the heading and cards stay readable.
   (A pale horizon-mist band used to sit here too — it belonged to the open-sea
   backdrop and read as a light streak across the hull once this photo went in.) */
.kha-vval__sea::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10, 18, 27, 0.58) 0%,
      rgba(10, 18, 27, 0.42) 38%,
      rgba(21, 34, 46, 0.5) 62%,
      rgba(14, 25, 35, 0.72) 78%,
      rgba(6, 12, 19, calc(0.62 + var(--kha-sea-deep) * 0.38)) 100%
    );
}
/* legibility scrim: darkens top (heading) + far sides slightly */
.kha-vval__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(6, 12, 20, 0.42) 0%,
      rgba(6, 12, 20, 0) 24%,
      rgba(6, 12, 20, 0) 72%,
      rgba(4, 9, 15, 0.5) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 9, 15, 0.34) 0%,
      rgba(4, 9, 15, 0) 22%,
      rgba(4, 9, 15, 0) 78%,
      rgba(4, 9, 15, 0.34) 100%
    );
}
/* Full-width centered so the scroll fade (translateY) never knocks it off-centre.
   Sits a little higher now. */
.kha-vval__head {
  position: absolute;
  top: calc(var(--kha-nav-h) + clamp(2px, 1vh, 14px));
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  will-change: opacity, transform;
  padding: 0 24px;
}
/* Brighter + a dark halo so it reads on the light, hazy part of the water. */
.kha-vval__head .kha-eyebrow {
  color: #eaf2fc;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-shadow:
    0 1px 3px rgba(2, 8, 18, 0.55),
    0 2px 16px rgba(2, 8, 18, 0.5);
}
.kha-vval__head .kha-h2 {
  font-family:
    "Hurme",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 600;
  font-size: clamp(3.2rem, 8.5vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin-top: 0.2em;
  color: #f4f8fc;
  text-shadow: 0 2px 30px rgba(4, 10, 20, 0.4);
}
/* two value stacks that split out to the left / right as you scroll */
.kha-vval__side {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: min(30vw, 340px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 20px);
  transform: translateY(-50%);
  will-change: transform;
}
.kha-vval__side--l {
  left: clamp(16px, 4vw, 72px);
}
.kha-vval__side--r {
  right: clamp(16px, 4vw, 72px);
}
.kha-vbox {
  opacity: 0;
  will-change: transform, opacity;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  /* No backdrop-filter here: the scroll driver moves and fades all six cards every
     frame, and a backdrop blur has to re-blur whatever sits behind it on each of those
     frames — the single most expensive thing on the page while this section is pinned.
     A slightly denser fill keeps the copy just as readable over the photo. */
  background: linear-gradient(
    180deg,
    rgba(10, 20, 32, 0.86),
    rgba(5, 10, 18, 0.8)
  );
  padding: clamp(15px, 1.4vw, 20px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.kha-vval__side--r .kha-vbox {
  text-align: right;
}
/* --- Our values on phones: six identical cards in ONE grid ---
   Desktop has two independent stacks, each `position:absolute; top:50%`, so each is
   centred on ITS OWN height. The left copy runs to three lines and the right to two,
   which makes the stacks different heights — centring them separately is what starts
   the right column lower than the left, and every card sizing to its own text is what
   makes no two the same. `display:contents` drops both stack boxes so all six cards
   become items of a single 3-row grid: one shared start line, one shared row height,
   one text alignment. It also means the sideways slide the scroll JS writes on the
   stacks lands on an element with no box, so it is a no-op here instead of needing
   !important — the per-card fade-in it drives still runs untouched. (Arabic keeps its
   right-align: the html[dir="rtl"] rule below outranks the alignment reset here.) */
/* The wrapper is invisible on desktop: no box, so the two stacks stay direct
   absolutely-positioned children of the pin and nothing about the wide layout moves. */
.kha-vval__cards {
  display: contents;
}
@media (max-width: 760px) {
  /* It has to be this wrapper and NOT .kha-voyage__pin. The pin carries an explicit
     height:100vh, so padding on it lands OUTSIDE that height — the rows then size off
     the full 932px and the grid overflows down past the "Our values" heading. An
     absolutely-positioned inset:0 box always resolves its padding inward instead. */
  .kha-vval__cards {
    position: absolute;
    inset: 0;
    z-index: 5;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column; /* 01-02-03 down column 1, then 04-05-06 down column 2 */
    gap: 12px;
    padding: calc(var(--kha-nav-h) + 13vh) 14px 5vh; /* clear the "Our values" head */
  }
  .kha-vval__side {
    display: contents;
    position: static; /* belt and braces: no box means no absolute positioning */
  }
  .kha-vval__side--r .kha-vbox {
    text-align: left;
  }
  /* rows are equal, so centre each card's copy in its row rather than letting the
     two-line cards float at the top of a box sized for the three-line ones. */
  .kha-vbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    /* the desktop fill is deliberately sheer, which works over a wide, mostly-dark
       backdrop. At phone size the cards sit right on the bright part of the boat
       photo and the copy washes out, so darken the fill enough to hold contrast. */
    background: linear-gradient(180deg, rgba(8, 17, 29, 0.9), rgba(4, 9, 16, 0.86));
  }
}
.kha-vbox__no {
  font-family: "Canela", "Fraunces", serif;
  font-size: 1rem;
  color: var(--kha-blue);
}
.kha-vbox__name {
  margin: 8px 0 8px;
  font-family: "Canela", "Fraunces", serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: #fff;
}
.kha-vbox__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(220, 230, 242, 0.82);
}

@media (max-width: 900px) {
  .kha-venter__vm {
    grid-template-columns: 1fr;
  }
  .kha-vval__side {
    width: min(44vw, 260px);
  }
  .kha-vval__side--l {
    left: clamp(10px, 3vw, 20px);
  }
  .kha-vval__side--r {
    right: clamp(10px, 3vw, 20px);
  }
  .kha-vbox {
    padding: 12px;
  }
  .kha-vbox__name {
    font-size: 1.1rem;
  }
  .kha-vbox__text {
    font-size: 0.8rem;
  }
}
/* ===== Lite mode — phones / low-power devices (html.kha-lite, set by kha-onepage.js) =====
   • Who We Are (the egg) keeps its full scroll choreography on phones; the only change is
     the boat inside: a pre-rendered transparent image (.kha-venter__boat) instead of the
     35MB live model — see .kha-venter__boatwrap below and LITE in kha-onepage.js.
   • Values becomes an ordinary static section: heading + the six cards, all visible,
     flowing at their natural height. The driver never touches it in lite mode. */
html.kha-lite .kha-vval {
  height: auto;
}
/* Values: the pin is a normal block that the sky / photo / scrim still fill. On phones
   the cards grid flows at its natural height (no 1fr rows squeezed into 100vh), so no
   card is ever clipped on a short screen. */
html.kha-lite .kha-vval .kha-voyage__pin {
  position: relative;
  height: auto;
  min-height: 100vh;
}
html.kha-lite .kha-vbox {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (max-width: 760px) {
  /* heading in the flow too, so it can never sit on top of the first row of cards */
  html.kha-lite .kha-vval__head {
    position: relative;
    top: auto;
    padding-top: calc(var(--kha-nav-h) + 6vh);
  }
  html.kha-lite .kha-vval__cards {
    position: relative;
    inset: auto;
    grid-template-rows: repeat(3, auto);
    padding: 3vh 14px 8vh;
  }
}
/* Fixed elements with a backdrop blur re-blur the page beneath them on every scrolled
   frame; on a phone that is a steady drain on the GPU. Go (nearly) opaque instead. */
html.kha-lite .kha-onenav.solid {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #091421;   /* fully opaque: without the blur, any alpha lets text ghost through */
}
html.kha-lite .kha-lang {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(9, 20, 33, 0.92);
}
/* Whenever the burger shows, the language pill lives in the nav bar beside it instead
   of floating bottom-right, where it sat on top of the values cards and the contact
   form's message box. Offset = the nav's side padding + the 40px burger + a 10px gap. */
@media (max-width: 1180px) {
  .kha-lang {
    top: calc((var(--kha-nav-h) - 30px) / 2);
    bottom: auto;
    right: calc(clamp(20px, 4vw, 56px) + 50px);
    box-shadow: none;
  }
  html[dir="rtl"] .kha-lang {
    right: auto;
    left: calc(clamp(20px, 4vw, 56px) + 50px);
  }
  .kha-lang button {
    padding: 6px 11px;
  }
}
/* make room for it: the wordmark scales with the screen instead of a fixed 2.35rem */
html.kha-lite .kha-onenav__logo .k,
html.kha-lite .kha-onenav__logo .m {
  font-size: clamp(1.5rem, 8vw, 1.95rem);
}
/* the narrowest phones (320-360px): compact pill, smaller wordmark, so all three fit */
@media (max-width: 360px) {
  html.kha-lite .kha-lang button {
    padding: 5px 9px;
    font-size: 0.66rem;
  }
  html.kha-lite .kha-onenav__logo .k,
  html.kha-lite .kha-onenav__logo .m {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kha-venter,
  .kha-vval {
    height: auto;
  }
  .kha-voyage__pin {
    position: relative;
    height: auto;
    min-height: 100vh;
  }
  .kha-venter__sea,
  .kha-venter__wm {
    display: none;
  }
  .kha-venter__ball {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .kha-venter__panel {
    opacity: 1 !important;
  }
  .kha-vbox {
    opacity: 1 !important;
    transform: none !important;
  }
  .kha-venter__hint {
    animation: none;
  }
  .kha-venter__mv,
  .kha-venter__boat {
    animation: none;
  }
}

/* ===================================================================
   KHA content module (khamarine.ae copy) — stats, manufacturing,
   services, fleet, capability, final CTA. Seaseats-style reveals.
   =================================================================== */
.kha-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(
    180deg,
    #050d16 0%,
    #071726 30%,
    #081826 70%,
    #050d16 100%
  );
  font-family: "Inter", system-ui, sans-serif;
  color: #e6eef7;
  padding: 0 0 clamp(40px, 6vw, 90px);
}
/* Scroll reveal */
/* Reveal-on-scroll. The hidden state is gated behind html.kha-rv-on, which the
   script adds ONLY once the IntersectionObserver is actually wired up. Without
   that gate this fails invisible: if the observer never fires — React re-renders
   the DOM out from under us, JS errors, observer unsupported — every .kha-rv
   element stays at opacity:0 and whole sections silently vanish. Now the worst
   case is content that appears without animating. */
html.kha-rv-on .kha-rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.kha-rv-on .kha-rv.in {
  opacity: 1;
  transform: none;
}

/* shared band + buttons */
.kha-band {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 110px) clamp(22px, 5vw, 64px);
}
.kha-band__head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 54px);
  text-align: center;
}
.kha-band__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: clamp(28px, 4vw, 48px);
  gap: 14px;
}
.kha-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(20px, 2.4vw, 30px);
}
.kha-final .kha-btns {
  justify-content: center;
}
.kha-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #dbe7f4;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.2s;
}
.kha-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
}
.kha-btn--solid {
  background: var(--kha-blue, #4a9eff);
  border-color: var(--kha-blue, #4a9eff);
  color: #04121f;
}
.kha-btn--solid:hover {
  background: #68b0ff;
  border-color: #68b0ff;
}

/* Stats strip */
/* ---------------- Maintenance: steel vessel programmes ---------------- */
.kha-maint__list {
  display: grid;
  gap: clamp(20px, 2.6vw, 36px);
}
/* copy left, photo right — the photo bleeds to the card's top/bottom edges */
.kha-mt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.kha-mt__body {
  padding: clamp(24px, 3vw, 44px);
  text-align: left;
}
.kha-mt__no {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kha-blue);
}
.kha-mt__name {
  margin: 0.55rem 0 0;
  font-family: "Canela", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  color: #f3f7fb;
}
.kha-mt__lede {
  margin: 0.4rem 0 clamp(16px, 2vw, 24px);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(198, 212, 228, 0.74);
}
/* label column stays narrow so the three values line up on one left edge */
.kha-mt__spec {
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(10px, 1.2vw, 14px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.kha-mt__k {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kha-blue);
  padding-top: 0.15em;
}
.kha-mt__v {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(214, 226, 240, 0.88);
}
.kha-mt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 24px);
}
.kha-mt__tag {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(198, 212, 228, 0.78);
}
.kha-mt__media {
  position: relative;
  min-height: 240px;
}
.kha-mt__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* stack on narrow screens — two columns would crush both */
@media (max-width: 860px) {
  .kha-mt {
    grid-template-columns: minmax(0, 1fr);
  }
  .kha-mt__media {
    order: -1;
    min-height: 200px;
  }
  .kha-mt__spec {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
html[dir="rtl"] .kha-mt__body {
  text-align: right;
}

/* Manufacturing band hidden per client request — kept in the build so it can be
   restored by deleting this rule. Its 3D cards are loading="lazy", so while hidden
   they never enter the viewport and no GLBs are fetched. */
.kha-mfg {
  display: none !important;
}

/* ---------------- Global Yards & Facilities ---------------- */
/* Left-aligned head (matches the design), then two region columns. The two yard
   renders live in a tile at the foot of the right column with a caption overlay. */
.kha-facility__head {
  text-align: left;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.kha-facility__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  max-width: 1080px;
  margin: clamp(24px, 3vw, 44px) auto 0;
  text-align: left;
}
.kha-facility__region {
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kha-blue);
}
.kha-facility__item {
  padding: clamp(12px, 1.6vw, 18px) 0;
}
.kha-facility__item + .kha-facility__item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.kha-facility__name {
  margin: 0 0 6px;
  font-family: "Canela", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  color: #f3f7fb;
}
.kha-facility__tag {
  margin-left: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kha-blue);
}
.kha-facility__desc {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(198, 212, 228, 0.74);
}
.kha-facility__tile {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.kha-facility__tile-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.kha-facility__tile-imgs img {
  display: block;
  width: 100%;
  /* height comes from width × aspect-ratio. Do NOT add height:100% here — with an
     auto-height grid cell that's a circular height dependency that can lock up the
     layout engine and freeze the whole page. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.kha-facility__tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 34px) clamp(14px, 2vw, 20px) clamp(10px, 1.4vw, 14px);
  background: linear-gradient(180deg, transparent, rgba(4, 10, 18, 0.82));
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: #fff;
}
html[dir="rtl"] .kha-facility__head,
html[dir="rtl"] .kha-facility__cols,
html[dir="rtl"] .kha-facility__region {
  text-align: right;
}
html[dir="rtl"] .kha-facility__tag {
  margin-left: 0;
  margin-right: 8px;
}
/* stack the two regions on phones */
@media (max-width: 760px) {
  .kha-facility__cols {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
  }
}

/* ---------------- Client ribbon ---------------- */
/* Full-bleed: the marquee has to run edge to edge, so this band opts out of the
   1200px cap .kha-band applies and puts the inset back on the label only. */
/* Sizing below is lifted verbatim from khamarine.ae's own .ribbon rules, with its
   design tokens resolved: --sp-7 = 60px, --sp-4 = 18px, --fs-sm as written. */
.kha-clients {
  max-width: none;
  padding-inline: 0;
  padding-block: clamp(96px, 12vw, 160px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kha-clients__head {
  padding-inline: clamp(22px, 5vw, 64px);
  margin-bottom: 60px;
  text-align: center;
}
/* the live ribbon label runs looser and larger than our standard eyebrow */
.kha-clients__head .kha-eyebrow {
  font-size: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  letter-spacing: 0.32em;
}
.kha-clients__marquee {
  overflow: hidden;
}
.kha-clients__track {
  display: flex;
  width: max-content;
  align-items: center;
  padding-block: 18px;
  animation: kha-ribbon 55s linear infinite;
  will-change: transform;
}
/* let people stop it to read a logo */
.kha-clients__marquee:hover .kha-clients__track {
  animation-play-state: paused;
}
.kha-clients__logo {
  flex-shrink: 0;
  /* the live ribbon's gap value, but applied as margin-right rather than track
     `gap` — gap adds one extra stride between the two runs, which would push
     -50% off the seam and make the loop visibly jump. */
  margin-right: clamp(72px, 8vw, 140px);
  height: clamp(110px, 12vw, 180px);
  width: auto;
  max-width: 340px;
  object-fit: contain;
  /* --logo-filter from the live dark theme; the source artwork is black */
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}
.kha-clients__logo:hover {
  opacity: 1;
  transform: scale(1.06);
}
/* the run is rendered twice, so -50% is exactly one full run = seamless */
@keyframes kha-ribbon {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* --- the ribbon on phones ---
   Both sizing clamps bottom out on a narrow screen: height lands on its 110px floor
   and max-width caps at 340px, so a single logo covers ~79% of a 430px viewport. With
   only one logo visible at a time and a loop duration fixed at 55s regardless of
   width, you end up staring at one mark for about eight seconds and the band reads as
   stalled rather than moving. Smaller marks put two or three on screen at once, and a
   shorter loop gives the ribbon a visible travel speed. */
@media (max-width: 760px) {
  .kha-clients__logo {
    height: 82px;
    max-width: 240px;
    margin-right: 52px;
  }
  .kha-clients__track {
    animation-duration: 22s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kha-clients__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: clamp(24px, 3vw, 40px);
  }
}

.kha-stats {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) clamp(22px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kha-stat {
  text-align: center;
}
.kha-stat__n {
  display: block;
  font-family: "Canela", "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: #fff;
}
.kha-stat__l {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(198, 212, 228, 0.72);
}

/* Manufacturing band */
.kha-mfg {
  text-align: center;
}
.kha-mfg .kha-band__in {
  max-width: 820px;
  margin: 0 auto;
}
.kha-mfg .kha-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
}
.kha-mfg .kha-btns {
  justify-content: center;
}

/* Services grid */
.kha-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.kha-svc {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: clamp(22px, 2vw, 30px);
  background: linear-gradient(
    180deg,
    rgba(12, 26, 42, 0.6),
    rgba(6, 12, 20, 0.5)
  );
  transition:
    border-color 0.3s,
    transform 0.3s,
    background 0.3s;
}
.kha-svc:hover {
  border-color: rgba(74, 158, 255, 0.5);
  transform: translateY(-4px);
  background: linear-gradient(
    180deg,
    rgba(16, 34, 54, 0.7),
    rgba(8, 16, 26, 0.6)
  );
}
.kha-svc__no {
  font-family: "Canela", "Fraunces", serif;
  font-size: 1rem;
  color: var(--kha-blue, #4a9eff);
}
.kha-svc__name {
  margin: 10px 0 10px;
  font-family: "Canela", "Fraunces", serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
}
.kha-svc__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(214, 226, 240, 0.8);
}

/* Services card #07 spans the whole row and bridges to the Metal works band below:
   number · name · blurb · "see the full list" in one line on desktop. */
.kha-svc--wide {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(20px, 3vw, 40px);
}
.kha-svc--wide .kha-svc__no {
  flex: 0 0 auto;
}
.kha-svc--wide .kha-svc__name {
  margin: 0;
  flex: 1 1 240px;
}
.kha-svc--wide .kha-svc__text {
  flex: 2 1 320px;
  font-size: 1rem;
}
.kha-svc__more,
.kha-div__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 14px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kha-blue, #4a9eff);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: gap 0.2s, color 0.2s;
}
.kha-svc__more:hover,
.kha-div__more:hover {
  gap: 0.7em;
  color: #fff;
}
.kha-svc--wide .kha-svc__more {
  margin-top: 0;
  flex: 0 0 auto;
}

/* ---------------- Metal works: stainless + mild steel fabrication ----------------
   Two feature rows, same language as the Maintenance rows: one large photo bleeding to
   the card edges on one side, the copy on the other. Row 2 flips sides. Type runs a
   size up from the rest of the module — this is a list people actually read. */
.kha-metal {
  max-width: 1320px;
}
.kha-metal__rows {
  display: grid;
  gap: clamp(22px, 3vw, 44px);
}
.kha-metal__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(12, 26, 42, 0.62),
    rgba(6, 12, 20, 0.55)
  );
}
.kha-metal__row--flip .kha-metal__media {
  order: 2;
}
.kha-metal__media {
  position: relative;
  min-height: clamp(360px, 34vw, 520px);
  background: #0a1c2e;
}
.kha-metal__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the trailer shot: keep the trailer and wheels (bottom of the frame) in view at every
   slot ratio; crop sky, never the subject */
.kha-metal__row--flip .kha-metal__media img {
  object-position: 50% 85%;
}
/* photo caption: what is stainless / mild steel in the shot */
.kha-metal__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(40px, 5vw, 64px) clamp(18px, 2vw, 28px) clamp(16px, 1.6vw, 22px);
  background: linear-gradient(180deg, transparent, rgba(4, 10, 18, 0.86));
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eaf2fb;
}
.kha-metal__body {
  padding: clamp(28px, 3.4vw, 56px) clamp(26px, 3.2vw, 52px);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kha-metal__grade {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kha-blue);
}
.kha-metal__name {
  margin: 0.55rem 0 0;
  font-family: "Canela", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
  line-height: 1.1;
  color: #f3f7fb;
}
.kha-metal__lede {
  margin: 0.8rem 0 clamp(22px, 2.4vw, 30px);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.6;
  color: rgba(198, 212, 228, 0.8);
  max-width: 52ch;
}
.kha-metal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px clamp(14px, 1.8vw, 24px);
}
/* the short mild-steel list (7 items) runs in one column so the copy fills its row */
.kha-metal__row--flip .kha-metal__list {
  grid-template-columns: minmax(0, 1fr);
}
/* items are tickable: tap to add to the quote request */
.kha-metal__list li {
  position: relative;
  padding: 6px 10px 6px 38px;
  border-radius: 9px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  line-height: 1.5;
  color: #e6eef7;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.kha-metal__list li:hover {
  background: rgba(255, 255, 255, 0.05);
}
.kha-metal__list li:focus-visible {
  outline: 2px solid var(--kha-blue);
  outline-offset: 2px;
}
/* blue check mark, filled in once ticked */
.kha-metal__list li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(0.3em + 6px);
  width: 7px;
  height: 13px;
  border-right: 2px solid var(--kha-blue);
  border-bottom: 2px solid var(--kha-blue);
  transform: rotate(45deg);
  opacity: 0.75;
  transition: opacity 0.2s, border-color 0.2s;
}
.kha-metal__list li.is-on {
  background: rgba(74, 158, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(74, 158, 255, 0.5);
  color: #fff;
}
.kha-metal__list li.is-on::before {
  opacity: 1;
  border-color: #fff;
}
.kha-metal__finish {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  padding: 12px 0 12px 18px;
  border-left: 2px solid var(--kha-blue);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.55;
  color: rgba(214, 226, 240, 0.9);
}
.kha-metal__finish b {
  color: #fff;
  font-weight: 600;
}
/* quote CTA per row: button + one-line hint */
.kha-metal__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(24px, 2.6vw, 34px);
}
.kha-metal__quote {
  gap: 10px;
}
.kha-metal__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #04121f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
}
.kha-metal__count:empty {
  display: none;
}
.kha-metal__hint {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(198, 212, 228, 0.72);
  max-width: 42ch;
}
/* the contact form flashes its pre-filled fields when a quote request lands on it */
.kha-contact form.is-prefilled input[name="subject"],
.kha-contact form.is-prefilled textarea[name="message"] {
  border-color: var(--kha-blue);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.22);
}
.kha-contact__form input,
.kha-contact__form textarea {
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* stack: photo on top, copy below */
@media (max-width: 900px) {
  .kha-metal__row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* An explicit height, not aspect-ratio: the photo box has only an absolutely
     positioned <img> inside, and iOS Safari collapsed an aspect-ratio grid item with no
     in-flow content to 0px — the photos simply vanished on phones while every other
     browser drew them. A height every engine agrees on cannot do that. */
  .kha-metal__media,
  .kha-metal__row--flip .kha-metal__media {
    order: -1;
    align-self: start;
    height: clamp(210px, 62vw, 340px);
    min-height: 0;
  }
  .kha-metal__list {
    gap: 4px 18px;
  }
}
@media (max-width: 560px) {
  .kha-metal__list {
    grid-template-columns: 1fr;
  }
  .kha-metal__body {
    padding: 26px 22px 30px;
  }
}
html[dir="rtl"] .kha-metal__body {
  text-align: right;
}
html[dir="rtl"] .kha-metal__list li {
  padding: 6px 38px 6px 10px;
}
html[dir="rtl"] .kha-metal__list li::before {
  left: auto;
  right: 15px;
}
html[dir="rtl"] .kha-metal__finish {
  padding: 12px 18px 12px 0;
  border-left: 0;
  border-right: 2px solid var(--kha-blue);
}

/* Manufacturing band — Commercial + Leisure ranges (condensed from the old
   /commercial and /leisure inner pages, now on the landing page). */
.kha-mfg__group {
  max-width: 1200px;
  margin: 0 auto;
}
.kha-mfg__group + .kha-mfg__group {
  margin-top: clamp(40px, 5vw, 72px);
}
.kha-mfg__sub {
  margin: 0;
  font-family: "Canela", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: #f3f7fb;
}
.kha-mfg__lede {
  /* auto side margins: .kha-mfg centres the text, but the 60ch cap below would
     otherwise pin the box to the left edge of the group and read as off-centre. */
  margin: 0.5rem auto clamp(20px, 2.4vw, 32px);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(198, 212, 228, 0.74);
  max-width: 60ch;
}

/* Manufacturing boxes with a live 3D boat inside each card. */
.kha-mcard {
  padding-top: 0;
  overflow: hidden;
}
.kha-mcard__stage {
  position: relative;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 110% at 50% 4%, rgba(74, 158, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(10, 22, 36, 0.55), rgba(5, 11, 18, 0.45));
}
.kha-mcard__mv {
  width: 100%;
  height: clamp(180px, 20vw, 230px);
  display: block;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--kha-blue, #4a9eff);
}
.kha-mcard .kha-svc__no {
  position: absolute;
  top: 12px;
  left: 14px;
  pointer-events: none;
}

/* Fleet showcase */
.kha-fleet {
  position: relative;
}
.kha-fl-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.kha-fl {
  min-height: clamp(260px, 30vw, 380px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  isolation: isolate;
  background-color: #0a1c2e;
  background-size: cover;
  background-position: center;
  transition:
    transform 0.35s,
    border-color 0.35s;
}
/* legibility gradient over the photo */
.kha-fl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 10, 18, 0) 30%,
    rgba(4, 10, 18, 0.5) 62%,
    rgba(3, 8, 14, 0.92) 100%
  );
}
.kha-fl__cap {
  position: relative;
  z-index: 1;
}
.kha-fl:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 158, 255, 0.45);
}
.kha-fl__name {
  margin: 0 0 6px;
  font-family: "Canela", "Fraunces", serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.kha-fl__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(224, 234, 246, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.kha-fl.kha-rv {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Gallery — masonry columns */
.kha-ggrid {
  columns: 4 240px;
  column-gap: clamp(10px, 1.2vw, 16px);
}
.kha-gtile {
  break-inside: avoid;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a1c2e;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.kha-gtile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kha-gtile:hover img {
  transform: scale(1.06);
}
.kha-gtile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: #eaf2fb;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(3, 8, 14, 0.9));
  transform: translateY(6px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.kha-gtile:hover figcaption {
  opacity: 1;
  transform: none;
}

/* Capability divisions */
.kha-div-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.kha-div {
  border-top: 2px solid var(--kha-blue, #4a9eff);
  padding: clamp(22px, 2vw, 32px) clamp(6px, 1vw, 14px) 0;
}
.kha-div__no {
  font-family: "Canela", "Fraunces", serif;
  font-size: 2rem;
  color: var(--kha-blue, #4a9eff);
}
.kha-div__name {
  margin: 10px 0 12px;
  font-family: "Canela", "Fraunces", serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: #fff;
}
.kha-div__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(214, 226, 240, 0.82);
}

/* Final CTA */
.kha-final {
  max-width: 820px;
  text-align: center;
}
.kha-final .kha-lede {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1000px) {
  .kha-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kha-div-grid {
    grid-template-columns: 1fr;
  }
  .kha-fl-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .kha-ggrid {
    columns: 3 200px;
  }
}
@media (max-width: 640px) {
  .kha-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .kha-svc-grid {
    grid-template-columns: 1fr;
  }
  .kha-fl-row {
    grid-template-columns: 1fr;
  }
  .kha-ggrid {
    columns: 2 140px;
  }
  .kha-btns {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kha-rv {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===================== Arabic / RTL ===================== */
/* Brand lockups are Latin: never flip or reorder them in RTL. (The footer mark read
   "Marine · KHA" in Arabic because nothing isolated it.) */
.kha-onenav__logo,
.kha-footer__mark,
.kha-wm,
.kha-fleet3d__wm,
.kha-venter__wm {
  direction: ltr !important;
  unicode-bidi: isolate;
}

/* Arabic typography. Letter-spacing pulls Arabic letters apart (they must join), and
   the Latin faces carry no Arabic glyphs, so in Arabic every text element gets an Arabic
   stack and zero tracking. The exclusions sit inside :where() so they add no specificity
   and the heading rule below can still choose its serif. Excluded: brand lockups, the
   EN/ع pill, icon fonts, SVG, and the Latin number chips / boat names. */
:root {
  --kha-ar-sans: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --kha-ar-serif: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Geeza Pro", "Times New Roman", serif;
}
html.kha-ar body,
html.kha-ar body *:not(:where(.kha-onenav__logo, .kha-onenav__logo *, .kha-wm, .kha-wm *, .kha-footer__mark, .kha-footer__mark *, .kha-fleet3d__wm, .kha-venter__wm, .kha-venter__wm *, .kha-lang, .kha-lang *, [class^="icon-"], [class*=" icon-"], svg, svg *, model-viewer, .kha-stat__n, .kha-vbox__no, .kha-svc__no, .kha-div__no, .kha-fleet3d__tabs button, .kha-fleet3d__spec-name, .kha-metal__count)) {
  font-family: var(--kha-ar-sans) !important;
  letter-spacing: 0 !important;
}
/* Headings: Naskh, the Arabic answer to the Latin serif headings, with the extra leading
   Arabic ascenders, descenders and vowel marks need (Latin display leading of ~1.0
   made lines touch and clipped marks). */
html.kha-ar :is(h1, h2, h3, h4, .kha-h2, .kha-mt__name, .kha-metal__name, .kha-svc__name, .kha-div__name, .kha-vbox__name, .kha-facility__name, .kha-contact__title, .kha-bd__title, .kha-bd__title *, .kha-footer__tag, .kha-onenav__menu a, [class*="bannerHome__Title"], [class*="bannerHome__Title"] *):not(:where(.kha-fleet3d__spec-name, .kha-onenav__logo *, .kha-wm *)) {
  font-family: var(--kha-ar-serif) !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}
html.kha-ar :is(p, li, .kha-lede, .kha-mt__v, .kha-metal__lede, .kha-facility__desc, .kha-vbox__text, .kha-svc__text, .kha-div__text, .kha-vm__text, .kha-fleet3d__spec-row, [class*="bannerHome__Description"], [class*="cookies__Text"]) {
  line-height: 1.8;
}
/* Arabic has no capitals, so the small tracked caps labels shrink to unreadable. Size
   them up and drop the uppercase transform. */
html.kha-ar :is(.kha-eyebrow, .kha-onenav .kha-nl, .kha-vm__tag, .kha-stat__l, .kha-svc__more, .kha-div__more, .kha-metal__grade, .kha-metal__cap, .kha-mt__no, .kha-mt__k, .kha-facility__region, .kha-bd__eyebrow, .kha-fleet3d__spec-eyebrow, .kha-contact__dir, .kha-contact__form .k, .kha-footer__label, [class*="bannerHome__SmallTitle"]) {
  font-size: 0.95rem;
  text-transform: none;
}
html.kha-ar :is(.kha-btn, .kha-contact__submit, .kha-fleet3d__load, [class*="buttonClick__Text"]) {
  font-size: 1rem;
  text-transform: none;
}
html.kha-ar :is(.kha-mt__tag, .kha-facility__tag, .kha-bd__badge, .kha-footer__bar) {
  font-size: 0.85rem;
  text-transform: none;
}
html.kha-ar .kha-vval__head .kha-eyebrow {
  font-size: 1rem;
}
html.kha-ar [class*="bannerHome__Description"] {
  font-size: 1.05rem;
}
html.kha-ar [class*="bannerHome__Person"] {
  font-size: 0.9rem;
}

/* Right-align the copy blocks in Arabic. */
html[dir="rtl"] .kha-svc,
html[dir="rtl"] .kha-div,
html[dir="rtl"] .kha-vbox,
html[dir="rtl"] .kha-venter__reveal-in,
html[dir="rtl"] .kha-vval__side--r .kha-vbox {
  text-align: right;
}
html[dir="rtl"] .kha-vval__head {
  text-align: center;
}
/* number chips stay LTR so "01", "24/7", "20+" read correctly */
html[dir="rtl"] .kha-vbox__no,
html[dir="rtl"] .kha-svc__no,
html[dir="rtl"] .kha-div__no,
html[dir="rtl"] .kha-stat__n {
  direction: ltr;
  display: inline-block;
}
/* Our values: Arabic reads 01-03 first, so that stack moves to the right-hand side (the
   scroll driver flips its slide-in direction to match). */
html[dir="rtl"] .kha-vval__side--l {
  left: auto;
  right: clamp(16px, 4vw, 72px);
}
html[dir="rtl"] .kha-vval__side--r {
  right: auto;
  left: clamp(16px, 4vw, 72px);
}
@media (max-width: 900px) {
  html[dir="rtl"] .kha-vval__side--l {
    right: clamp(10px, 3vw, 20px);
  }
  html[dir="rtl"] .kha-vval__side--r {
    left: clamp(10px, 3vw, 20px);
  }
}
/* The client ribbon is a strip that loops by -50%. Laid out right-to-left it starts from
   the wrong edge and slides off into empty space. It is a picture strip, not text. */
.kha-clients__marquee {
  direction: ltr;
}
/* Off-screen honeypot: in RTL the LEFT overflow is the scrollable side, so park it right. */
html[dir="rtl"] .kha-hp {
  left: auto !important;
  right: -9999px !important;
}
/* Contact form: Arabic fields align right; email and phone keep left-to-right digits
   but still line up with the rest of the form. */
html[dir="rtl"] .kha-contact__grid {
  text-align: right;
}
html[dir="rtl"] .kha-contact__form input[type="email"],
html[dir="rtl"] .kha-contact__form input[type="tel"] {
  direction: ltr;
  text-align: right;
}
/* the ع glyph is a single letter: tracking only pushes it off-centre in the pill */
.kha-lang button[data-lang="ar"] {
  letter-spacing: 0;
}
/* ROM's cookie button arrow points forward, which is left in Arabic. */
html[dir="rtl"] [class*="buttonClick__"] i,
html[dir="rtl"] [class*="buttonClick__"] svg {
  display: inline-block;
  transform: scaleX(-1);
}

/* ============================================================================
   Home-page ROM-section tailoring (size + layout tweaks per review)
   ============================================================================ */

/* Craftsmanship / The Art cards — REMOVED from the page (ROM leftover the client
   didn't want). Hide the entire two-block section. */
[class*="section__Section"]:has([class*="twoBlocks__"]) {
  display: none !important;
}
[class*="twoBlocks__Flex"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(22px, 2.8vw, 52px) !important;
}
/* EXPLICIT equal height on both cards (not aspect-ratio — content could override
   it and made Craftsmanship taller than The Art). Same value → guaranteed equal.
   margin:0 kills ROM's 56px stagger on the right card so both top-align exactly. */
[class*="twoBlocks__Desktop"] [class*="twoBlocks__LeftBlock"],
[class*="twoBlocks__Desktop"] [class*="twoBlocks__RightBlock"] {
  flex: 1 1 0 !important;
  width: auto !important;
  position: relative !important;
  height: clamp(440px, 44vw, 680px) !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: flex-start !important;
  margin: 0 !important;
  transition-delay: 0s !important; /* reveal both together, no stagger */
  cursor: pointer;
}
/* Every inner layer fills the card and is out of flow, so nothing drives height. */
[class*="twoBlocks__Desktop"] [class*="twoBlocks__LeftBlock"] > *,
[class*="twoBlocks__Desktop"] [class*="twoBlocks__RightBlock"] > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
[class*="twoBlocks__Desktop"] [class*="twoBlocks__InnerBlock"] {
  background-size: cover !important;
  background-position: center !important;
}
/* Center ALL content (title + copy + DISCOVER) both axes, with real box-model padding. */
[class*="twoBlocks__Desktop"] [class*="twoBlocks__ContentContainer"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(28px, 3.4vw, 56px) !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
}
/* Pull the DISCOVER label out of absolute-bottom into the centered stack so the
   whole group is dead-centered vertically & horizontally. */
[class*="twoBlocks__Desktop"] [class*="twoBlocks__ButtonContainer"] {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: clamp(6px, 1vw, 14px) auto 0 !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* "Our DNA" — REMOVED from the page (ROM leftover the client didn't want). Its
   layout was built around a decorative title hanging out of an absolutely
   positioned container, which never accommodated our content. Hidden wholesale,
   same as the twoBlocks section above. */
[class*="section__Section"]:has([class*="ourDNAHome__"]) {
  display: none !important;
}

/* ---------------- Site footer (replaces ROM's reveal footer) ---------------- */
.kha-footer {
  position: relative;
  z-index: 5;
  background: var(
    --kha-ftr-bg,
    linear-gradient(180deg, #0a1420 0%, #081019 100%)
  );
  border-top: 1px solid rgba(243, 247, 251, 0.08);
  font-family: "Inter", system-ui, sans-serif;
}
.kha-footer__in {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 72px) 0;
}
.kha-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.kha-footer__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.kha-footer__mark .k {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: #f3f7fb;
}
.kha-footer__mark .dot {
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--kha-blue);
  align-self: center;
}
.kha-footer__mark .m {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--kha-blue);
}
.kha-footer__tag {
  margin: 22px 0 0;
  max-width: 30ch;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.5;
  color: rgba(198, 212, 228, 0.72);
}
.kha-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kha-footer__label {
  color: var(--kha-blue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kha-footer__col a {
  color: #dce6f2;
  text-decoration: none;
  font-size: 1rem;
  width: fit-content;
  transition:
    color 0.2s,
    transform 0.2s;
}
.kha-footer__col a:hover {
  color: var(--kha-blue);
  transform: translateX(3px);
}
html[dir="rtl"] .kha-footer__col a:hover {
  transform: translateX(-3px);
}
/* on desktop the EN/ع pill floats over the bar's far end — keep that text clear of it */
@media (min-width: 1181px) {
  .kha-footer .kha-footer__bar {
    padding-inline-end: 150px;
  }
}
.kha-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 0 34px;
  border-top: 1px solid rgba(243, 247, 251, 0.08);
  color: rgba(160, 178, 198, 0.7);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .kha-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
  .kha-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .kha-footer__cols {
    grid-template-columns: 1fr;
  }
  .kha-footer__bar {
    flex-direction: column;
    gap: 10px;
  }
}