/*
 * SPJ Cargo additive shell for the retained freight-animation visual mirror.
 *
 * Protected boundary: this stylesheet does not change the size, position,
 * transform, scroll length, or animation timing of .home-service,
 * .home-service-mb, or .home-why. It only repairs their live text paint and
 * adds a video behind a failed desktop OceanScene canvas. Protected copy is
 * replaced before runtime by the deterministic build pipeline.
 */

:root {
  --spj-ink: #18265f;
  --spj-ink-2: #243985;
  --spj-blue: #2c438f;
  --spj-blue-bright: #4e9b42;
  --spj-sky: #cfe5c9;
  --spj-paper: #f5f6f1;
  --spj-paper-2: #e8ece5;
  --spj-white: #fff;
  --spj-line: rgba(24, 38, 95, 0.18);
  --spj-radius: 17.6px;
  --spj-gutter: clamp(16px, 4vw, 72px);
  --spj-type: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* The mirror scales the root font with viewport width. Reset only the owned
 * SPJ surfaces and use fixed pixel bounds inside them so UI text and controls
 * stay legible without changing any protected animation geometry. */
.spj-site-header,
.spj-hero-overlay,
.spj-after-sequence,
.spj-footer {
  font-size: 16px;
}

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

.spj-skip-link {
  position: fixed;
  top: 10.4px;
  left: 10.4px;
  z-index: 1000001;
  padding: 12.8px 16px;
  border-radius: 999px;
  color: var(--spj-white);
  background: var(--spj-ink);
  font: 700 13.12px/1 var(--spj-type);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.spj-skip-link:focus {
  transform: translateY(0);
}

/* Original commerce/navigation shell is superseded, not removed. */
.header,
.header-dropdown,
.w-commerce-commercecartwrapper,
.cursor-wrap,
.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper,
.cky-overlay,
iframe[src*="stripe.com"],
iframe[src*="mixpanel"] {
  display: none !important;
}

.spj-site-header {
  position: fixed;
  top: clamp(10.4px, 1.5vw, 20px);
  right: var(--spj-gutter);
  left: var(--spj-gutter);
  z-index: 1000000;
  pointer-events: none;
  font-family: var(--spj-type);
}

.spj-site-header__inner {
  min-height: 65.6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 1504px);
  margin: 0 auto;
  padding: 6.4px 7.2px 6.4px 10.4px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: var(--spj-ink);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 12.8px 40px rgba(4, 12, 39, 0.13);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
}

.spj-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 7.2px;
  color: var(--spj-ink);
  text-decoration: none;
  pointer-events: auto;
}

.spj-brand.w--current {
  pointer-events: auto;
}

.spj-brand img {
  display: block;
  width: 174px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}

.spj-site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 32px);
}

.spj-site-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 12.48px;
  font-weight: 700;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.spj-site-nav a:not(.spj-button):hover,
.spj-site-nav a:not(.spj-button):focus-visible {
  color: var(--spj-blue-bright);
}

.spj-menu-toggle,
.spj-mobile-menu {
  display: none;
}

.spj-menu-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 44.8px;
  height: 44.8px;
  padding: 0;
  border: 1px solid rgba(12, 23, 63, 0.2);
  border-radius: 50%;
  color: var(--spj-ink);
  background: rgba(12, 23, 63, 0.06);
  cursor: pointer;
}

.spj-menu-toggle > span,
.spj-menu-toggle > span::before {
  position: absolute;
  left: 50%;
  width: 17.6px;
  height: 1.6px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -4px);
  transition: transform 180ms ease;
  content: "";
}

.spj-menu-toggle > span {
  top: 50%;
}

.spj-menu-toggle > span::before {
  top: 0;
  transform: translate(-50%, 8px);
}

.spj-menu-toggle[aria-expanded="true"] > span {
  transform: translate(-50%, 0) rotate(45deg);
}

.spj-menu-toggle[aria-expanded="true"] > span::before {
  transform: translate(-50%, 0) rotate(-90deg);
}

.spj-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49.6px;
  padding: 13.6px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--spj-white) !important;
  background: var(--spj-ink);
  text-decoration: none;
  font-family: var(--spj-type);
  font-size: 12.16px;
  font-weight: 800;
  letter-spacing: 0.88px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.spj-button:hover,
.spj-button:focus-visible {
  background: var(--spj-blue-bright);
}

.spj-button--light {
  border-color: rgba(255, 255, 255, 0.48);
  color: var(--spj-white) !important;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.spj-button--paper {
  color: var(--spj-ink) !important;
  background: var(--spj-white);
}

.spj-button:focus-visible,
.spj-site-nav a:focus-visible,
.spj-brand:focus-visible,
.spj-menu-toggle:focus-visible,
.spj-mobile-menu a:focus-visible,
.spj-faq__button:focus-visible,
.spj-brief input:focus-visible,
.spj-brief select:focus-visible,
.spj-brief textarea:focus-visible {
  outline: 3px solid var(--spj-sky);
  outline-offset: 3px;
}

/* SPJ hero copy is live HTML and stays readable if animation JS fails. */
.spj-overlay-ready .home-hero-text-wrap,
.spj-overlay-ready .home-hero-links {
  visibility: hidden !important;
  pointer-events: none !important;
}

.spj-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: grid;
  align-items: end;
  padding: clamp(128px, 16vh, 176px) var(--spj-gutter) clamp(36px, 7vh, 88px);
  color: var(--spj-white);
  background:
    linear-gradient(90deg, rgba(4, 10, 32, 0.86) 0%, rgba(4, 10, 32, 0.38) 48%, rgba(4, 10, 32, 0) 74%),
    linear-gradient(0deg, rgba(4, 10, 32, 0.76) 0%, rgba(4, 10, 32, 0) 52%);
  pointer-events: none;
  font-family: var(--spj-type);
}

.spj-hero-overlay__inner {
  width: min(100%, 1504px);
  margin: 0 auto;
}

/* The retained globe creates country names as CSS2D DOM labels. Suppress only
 * those legacy geography labels; the globe artwork stays intact and the owned
 * scope chips below describe this SPJ Cargo draft without inheriting the
 * reference site's geography claims. */
.spj-overlay-ready .home-hero .globe-label {
  visibility: hidden !important;
  pointer-events: none !important;
}

.spj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10.4px;
  margin: 0 0 18.4px;
  font-size: clamp(10.88px, 0.85vw, 13.12px);
  font-weight: 800;
  letter-spacing: 2.72px;
  line-height: 1.2;
  text-transform: uppercase;
}

.spj-eyebrow::before {
  width: 8.8px;
  height: 8.8px;
  border-radius: 50%;
  background: var(--spj-sky);
  box-shadow: 0 0 0 4.8px rgba(202, 216, 255, 0.2);
  content: "";
}

.spj-hero-overlay h1 {
  max-width: 10ch;
  margin: 0;
  color: inherit;
  font-size: clamp(51.2px, 8.4vw, 144px);
  font-weight: 760;
  letter-spacing: -1.152px;
  line-height: 0.84;
  text-wrap: balance;
}

.spj-hero-overlay__support {
  max-width: 608px;
  margin: clamp(21.6px, 2.4vw, 36.8px) 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(16px, 1.45vw, 21.44px);
  line-height: 1.5;
}

.spj-hero-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 27.2px;
  pointer-events: auto;
}

.spj-scope-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 7.2px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.spj-scope-list li {
  flex: 0 0 auto;
  width: auto !important;
  padding: 7.68px 11.52px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(8, 15, 45, 0.28);
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: 0.64px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

/* Loader branding and operating context. The retained motion is unchanged. */
.loader-logo-ic,
.loader-countries-list,
.loader-service-list {
  visibility: hidden !important;
}

.loader-logo::after,
.loader-page-logo::after {
  display: block;
  color: var(--spj-ink);
  font: 800 clamp(22.4px, 3vw, 48px) / 0.9 var(--spj-type);
  letter-spacing: -0.96px;
  content: "SPJ CARGO";
}

.loader-page-logo::after {
  font-size: clamp(16px, 2vw, 28px);
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.loader-service {
  position: relative;
}

.loader-service::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--_color---content--note);
  font: 700 12px/1.2 var(--spj-type);
  letter-spacing: 0.8px;
  white-space: nowrap;
  content: "FREIGHT · CUSTOMS · INLAND";
}

/* The mirrored loader can stall indefinitely when its original preload
 * accounting misses a remote frame. Release it after the retained animation
 * has had time to finish so the live hero is never permanently obscured. */
.spj-loader-released .loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.loader-countries::after {
  display: block;
  max-width: 224px;
  color: var(--spj-ink);
  font: 750 11.52px/1.65 var(--spj-type);
  letter-spacing: 1.28px;
  white-space: pre-line;
  text-transform: uppercase;
  content: "NEW DELHI\A INDIA IMPORT & EXPORT";
}

/*
 * Fail-open text normalisation.
 * The reference reveal paints text via a transparent gradient. Keeping the
 * timeline's opacity/transforms while removing only that transparent paint
 * avoids permanently invisible and half-painted words.
 */
.spj-overlay-ready .home-intro .split-line-p,
.spj-overlay-ready .home-intro .split-line-p span,
.spj-overlay-ready .home-service .split-line-p,
.spj-overlay-ready .home-service .split-line-p span,
.spj-overlay-ready .home-service-mb .split-line-p,
.spj-overlay-ready .home-service-mb .split-line-p span,
.spj-overlay-ready .home-why .split-line-p,
.spj-overlay-ready .home-why .split-line-p span,
.spj-overlay-ready .home-intro .split-line,
.spj-overlay-ready .home-service .split-line,
.spj-overlay-ready .home-service-mb .split-line,
.spj-overlay-ready .home-why .split-line {
  --bg-progress: 100 !important;
  color: inherit !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

.spj-overlay-ready .home-intro-title,
.spj-overlay-ready .home-intro-desc,
.spj-overlay-ready .home-intro-label,
.spj-overlay-ready .home-intro-stats-item-val,
.spj-overlay-ready .home-intro-stats-item-desc {
  color: var(--spj-ink) !important;
}

.spj-overlay-ready .home-service-main .home-service-label,
.spj-overlay-ready .home-service-main .home-service-title,
.spj-overlay-ready .home-service-main .home-service-desc,
.spj-overlay-ready .home-service-main .home-service-item-title,
.spj-overlay-ready .home-service-main .home-service-item-desc,
.spj-overlay-ready .home-service-sub,
.spj-overlay-ready .home-service-mb-label,
.spj-overlay-ready .home-service-mb-title,
.spj-overlay-ready .home-service-mb-desc {
  color: var(--spj-white) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}

.spj-overlay-ready .home-service-main .home-service-item-desc,
.spj-overlay-ready .home-service-mb-desc {
  color: rgba(255, 255, 255, 0.82) !important;
}

.spj-overlay-ready .home-why-label,
.spj-overlay-ready .home-why-title,
.spj-overlay-ready .home-why-main-item-title,
.spj-overlay-ready .home-why-main-item-desc {
  color: var(--spj-white) !important;
  text-shadow: 0 2px 22px rgba(0, 7, 30, 0.6);
}

/* Desktop water fallback: it sits behind the custom element and does not move
 * or resize the existing ship, wake, scene, or sticky container. */
.spj-overlay-ready .home-why-ocean {
  isolation: isolate;
}

.spj-ocean-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

@media (min-width: 768px) {
  .spj-ocean-fallback {
    display: block;
  }

  .home-why-ocean.spj-ocean-fallback-active .spj-ocean-fallback {
    opacity: 1;
  }
}

/* Retire only content after the protected ship/water sequence. Keep each
 * wrapper measurable for its original ScrollTriggers: `display:none` makes a
 * containerAnimation lose its `scrollTrigger.end` and freezes the crane/truck
 * controller during GSAP refresh. Absolute off-canvas placement removes the
 * sections from flow and view while preserving valid measurement geometry. */
.home-testi-wrap,
.home-partners-wrap,
.home-ins-wrap,
.home-faq-wrap,
.home-cta-wrap,
.footer-wrap {
  position: absolute !important;
  left: -200vw !important;
  width: 100vw !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.spj-after-sequence {
  position: relative;
  z-index: 8;
  color: var(--spj-ink);
  background: var(--spj-paper);
  font-family: var(--spj-type);
  overflow: clip;
}

.spj-section {
  position: relative;
  padding: clamp(84px, 10vw, 160px) var(--spj-gutter);
  scroll-margin-top: 96px;
}

.spj-shell {
  width: min(100%, 1504px);
  margin: 0 auto;
}

.spj-section__head {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(288px, 1.3fr);
  gap: clamp(32px, 7vw, 128px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 96px);
}

.spj-kicker {
  margin: 0;
  color: var(--spj-blue);
  font-size: 11.52px;
  font-weight: 800;
  letter-spacing: 2.56px;
  line-height: 1.2;
  text-transform: uppercase;
}

.spj-section h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(43.2px, 6vw, 105.6px);
  font-weight: 760;
  letter-spacing: -1.024px;
  line-height: 0.92;
  text-wrap: balance;
}

.spj-section__intro {
  max-width: 736px;
  margin: 24px 0 0;
  color: rgba(12, 23, 63, 0.72);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
}

.spj-principles {
  border-top: 1px solid var(--spj-line);
}

.spj-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--spj-line);
  border-bottom: 1px solid var(--spj-line);
}

.spj-principle {
  min-height: 352px;
  padding: clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--spj-line);
}

.spj-principle:last-child {
  border-right: 0;
}

.spj-principle__number {
  color: var(--spj-blue);
  font-size: 11.52px;
  font-weight: 800;
  letter-spacing: 2.24px;
}

.spj-principle h3 {
  max-width: 10ch;
  margin: 96px 0 19.2px;
  font-size: clamp(27.2px, 2.5vw, 43.2px);
  font-weight: 720;
  letter-spacing: -0.72px;
  line-height: 1;
}

.spj-principle p,
.spj-service-card p,
.spj-cargo-card p,
.spj-project-card > p:last-child,
.spj-proof-card > p:last-child {
  margin: 0;
  color: rgba(12, 23, 63, 0.68);
  font-size: 15.68px;
  line-height: 1.55;
}

.spj-services {
  color: var(--spj-white);
  background: var(--spj-ink);
}

.spj-services .spj-kicker,
.spj-cta .spj-kicker {
  color: var(--spj-sky);
}

.spj-services .spj-section__intro,
.spj-cta .spj-section__intro {
  color: rgba(255, 255, 255, 0.7);
}

.spj-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.15);
}

.spj-service-card {
  min-height: 304px;
  padding: clamp(24px, 3vw, 44px);
  color: var(--spj-white);
  background: var(--spj-ink);
}

.spj-service-card__index {
  color: var(--spj-sky);
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 2.24px;
}

.spj-service-card h3 {
  max-width: 12ch;
  margin: 70.4px 0 16px;
  font-size: clamp(23.2px, 2.2vw, 37.6px);
  font-weight: 700;
  letter-spacing: -0.64px;
  line-height: 1;
}

.spj-service-card p {
  color: rgba(255, 255, 255, 0.68);
}

.spj-cargo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.spj-cargo-card {
  min-height: 224px;
  padding: 25.6px;
  border: 1px solid var(--spj-line);
  border-radius: var(--spj-radius);
  background: rgba(255, 255, 255, 0.32);
}

.spj-cargo-card h3 {
  max-width: 14ch;
  margin: 67.2px 0 12px;
  font-size: 21.6px;
  font-weight: 720;
  letter-spacing: -0.56px;
  line-height: 1.05;
}

.spj-projects {
  background: var(--spj-paper-2);
}

.spj-projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.spj-project-card {
  min-height: 400px;
  padding: clamp(27.2px, 4vw, 56px);
  border: 1px solid var(--spj-line);
  border-radius: var(--spj-radius);
  background: rgba(255, 255, 255, 0.42);
}

.spj-project-card__index,
.spj-project-card__label {
  color: var(--spj-blue);
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 1.92px;
  line-height: 1.35;
  text-transform: uppercase;
}

.spj-project-card__label {
  margin: 64px 0 0;
}

.spj-project-card h3 {
  max-width: 16ch;
  margin: 16px 0 24px;
  font-size: clamp(30.4px, 3vw, 49.6px);
  font-weight: 720;
  letter-spacing: -0.72px;
  line-height: 0.98;
}

.spj-about {
  color: var(--spj-white);
  background:
    radial-gradient(circle at 78% 12%, rgba(53, 84, 203, 0.48), transparent 480px),
    var(--spj-ink);
}

.spj-about .spj-kicker {
  color: var(--spj-sky);
}

.spj-about .spj-section__intro {
  color: rgba(255, 255, 255, 0.72);
}

.spj-about__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.17);
}

.spj-proof-card {
  min-height: 336px;
  padding: clamp(24px, 3vw, 44px);
  background: var(--spj-ink);
  scroll-margin-top: 96px;
}

.spj-proof-card__value {
  margin: 0;
  color: var(--spj-sky);
  font-size: clamp(36.8px, 4.4vw, 72px);
  font-weight: 760;
  letter-spacing: -1.12px;
  line-height: 0.9;
}

.spj-proof-card h3 {
  max-width: 16ch;
  margin: 72px 0 16px;
  font-size: clamp(21.6px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.48px;
  line-height: 1.05;
}

.spj-proof-card > p:last-child {
  color: rgba(255, 255, 255, 0.68);
}

.spj-faq {
  background: var(--spj-paper-2);
}

.spj-faq__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--spj-line);
  list-style: none;
}

.spj-faq__item {
  border-bottom: 1px solid var(--spj-line);
}

.spj-faq__button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 25.6px 0;
  border: 0;
  color: var(--spj-ink);
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.spj-faq__number {
  color: var(--spj-blue);
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 1.92px;
}

.spj-faq__question {
  font-size: clamp(17.6px, 1.7vw, 23.2px);
  font-weight: 690;
  letter-spacing: -0.4px;
}

.spj-faq__icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  justify-self: end;
}

.spj-faq__icon::before,
.spj-faq__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  content: "";
}

.spj-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 180ms ease;
}

.spj-faq__button[aria-expanded="true"] .spj-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.spj-faq__answer {
  max-width: 880px;
  padding: 0 48px 28px 64px;
  color: rgba(12, 23, 63, 0.72);
  font-size: 16px;
  line-height: 1.65;
}

.spj-faq__answer[hidden] {
  display: none;
}

.spj-cta {
  color: var(--spj-white);
  background:
    radial-gradient(circle at 78% 10%, rgba(69, 102, 222, 0.5), transparent 480px),
    var(--spj-ink);
}

.spj-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(352px, 1.15fr);
  gap: clamp(48px, 8vw, 144px);
  align-items: start;
}

.spj-cta h2 {
  max-width: 8ch;
}

.spj-brief {
  padding: clamp(20px, 3vw, 36.8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--spj-radius) * 1.25);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
}

.spj-brief__notice {
  margin: 0 0 24px;
  padding: 13.6px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12.48px;
  line-height: 1.45;
}

.spj-brief__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.spj-field {
  display: grid;
  gap: 8px;
}

.spj-field--wide {
  grid-column: 1 / -1;
}

.spj-field label {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 1.6px;
  line-height: 1.2;
  text-transform: uppercase;
}

.spj-brief input,
.spj-brief select,
.spj-brief textarea {
  width: 100%;
  min-height: 52.8px;
  padding: 13.6px 15.2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11.2px;
  color: var(--spj-white);
  background: rgba(4, 10, 32, 0.58);
  font: 500 16px/1.4 var(--spj-type);
}

.spj-brief textarea {
  min-height: 112px;
  resize: vertical;
}

.spj-brief select {
  color-scheme: dark;
}

.spj-brief__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 19.2px;
}

.spj-brief__status {
  flex: 1 1 224px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.12px;
  line-height: 1.4;
}

.spj-generated-brief {
  margin-top: 16px;
}

.spj-footer {
  padding: 32px var(--spj-gutter);
  color: rgba(255, 255, 255, 0.68);
  background: #070e28;
  font-family: var(--spj-type);
}

.spj-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1504px);
  margin: 0 auto;
}

.spj-footer p {
  margin: 0;
  font-size: 12.48px;
  line-height: 1.5;
}

.spj-footer a {
  color: var(--spj-white);
}

@media (max-width: 991px) {
  .spj-site-nav a:not(.spj-button) {
    display: none;
  }

  .spj-menu-toggle {
    display: block;
  }

  .spj-mobile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 20px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 18px 48px rgba(4, 12, 39, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
  }

  .spj-mobile-menu:not([hidden]) {
    display: grid;
  }

  .spj-mobile-menu a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 13px;
    color: var(--spj-ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .spj-mobile-menu a:hover,
  .spj-mobile-menu a:focus-visible {
    color: var(--spj-blue-bright);
    background: rgba(12, 23, 63, 0.06);
  }

  .spj-section__head,
  .spj-cta__layout {
    grid-template-columns: 1fr;
  }

  .spj-principles__grid,
  .spj-services__grid,
  .spj-cargo__grid,
  .spj-about__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spj-proof-card:last-child {
    grid-column: 1 / -1;
  }

  .spj-principle:nth-child(2) {
    border-right: 0;
  }

  .spj-principle:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--spj-line);
  }
}

@media (max-width: 767px) {
  :root {
    --spj-gutter: 16px;
  }

  .spj-overlay-ready .body-inner {
    scrollbar-width: none;
  }

  .spj-overlay-ready .body-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .spj-site-header {
    top: 10.4px;
  }

  .spj-site-header__inner {
    min-height: 57.6px;
    padding: 4.8px 4.8px 4.8px 8px;
  }

  .spj-brand img {
    width: 136px;
    height: 40.8px;
  }

  .spj-site-nav .spj-button {
    min-height: 44.8px;
    padding: 12px 15.2px;
    font-size: 10.72px;
  }

  .spj-site-nav {
    gap: 6px;
  }

  .spj-site-nav a:not(.spj-button) {
    display: none;
  }

  .spj-hero-overlay {
    align-items: end;
    padding-top: 112px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    background:
      linear-gradient(0deg, rgba(4, 10, 32, 0.9) 0%, rgba(4, 10, 32, 0.24) 72%),
      linear-gradient(90deg, rgba(4, 10, 32, 0.52), rgba(4, 10, 32, 0));
  }

  .spj-hero-overlay h1 {
    max-width: 9ch;
    font-size: clamp(49.6px, 15.5vw, 89.6px);
    line-height: 0.88;
  }

  .spj-hero-overlay__support {
    max-width: 480px;
    margin-top: 16px;
    font-size: 15.36px;
    line-height: 1.45;
  }

  .spj-hero-overlay__actions {
    margin-top: 17.6px;
  }

  .spj-scope-list {
    gap: 5.6px;
    margin-top: 16px;
  }

  .spj-scope-list li {
    padding: 6.4px 8.8px;
    font-size: 9.92px;
  }

  .spj-section {
    padding-block: 76px;
  }

  .spj-section h2 {
    font-size: clamp(41.6px, 13vw, 75.2px);
  }

  .spj-principles__grid,
  .spj-services__grid,
  .spj-cargo__grid,
  .spj-projects__grid,
  .spj-about__grid,
  .spj-brief__grid {
    grid-template-columns: 1fr;
  }

  .spj-principle,
  .spj-service-card,
  .spj-cargo-card,
  .spj-project-card,
  .spj-proof-card {
    min-height: auto;
  }

  .spj-principle {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--spj-line);
  }

  .spj-principle:last-child {
    grid-column: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .spj-principle h3,
  .spj-service-card h3,
  .spj-cargo-card h3,
  .spj-proof-card h3 {
    margin-top: 48px;
  }

  .spj-project-card__label {
    margin-top: 48px;
  }

  .spj-proof-card:last-child {
    grid-column: auto;
  }

  .spj-service-card {
    padding: 24px;
  }

  .spj-cargo-card {
    min-height: 192px;
  }

  .spj-faq__button {
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    gap: 10.4px;
    padding: 21.6px 0;
  }

  .spj-faq__answer {
    padding: 0 0 22.4px 42.4px;
  }

  .spj-field--wide {
    grid-column: auto;
  }

  .spj-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spj-skip-link,
  .spj-button,
  .spj-menu-toggle > span,
  .spj-menu-toggle > span::before,
  .spj-faq__icon::after,
  .spj-ocean-fallback {
    transition: none !important;
  }

  .spj-overlay-ready .home-why-ocean {
    background: #648fb4 url("../assets/bd1b0b73c1_6a44eec1ed1af2c4c403e981_a44825c5ffe02b6cfe7c994f6b46794b_ocean_%281%29.jpg") center / cover no-repeat;
  }
}