/* ---------- Our Services (#services): the light introduction and entry point to both services ----------
   One composition in two climates: Customs in a deep navy field that owns the lower left and thins towards the
   centre, Freight in pale, luminous sky, the two meeting through soft blue mist. A gold thread divides them and runs
   down into the wave, where the navy and the sky sweep into a pale-blue band and then white. The documents and the
   freight scene are existing artwork, kept secondary with opacity, blend modes and masks.
   With motion it is a view of the stage (css/stage.css): About dissolves into it in the same viewport
   (js/services-intro.js). All rules are scoped to .svx-*. */

.svx {
  --svx-navy: #071b33;
  --svx-navy-2: #0b2745;
  --svx-navy-3: #123452;
  --svx-sky: #dceeff;
  --svx-sky-2: #cbe5fa;
  --svx-pale: #eaf5ff;
  --svx-white: #f7fbff; /* the wave's white, where the Customs chapter begins */
  --svx-gold: #c79a2b;
  --svx-gold-2: #d4aa3a;
  --svx-mute: rgba(226, 235, 245, 0.8); /* supporting text on navy */
  --svx-ink: #3a5673; /* supporting text on sky */
  --svx-pad: clamp(24px, 5.5vw, 96px);
  position: relative;
  color: var(--svx-navy);
  background: var(--svx-white);
}
.svx-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- The sky: pale and luminous, with About's own clouds very faintly through it ---------- */
.svx-sky {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse 50% 34% at 50% 18%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, #f3f9ff 0%, var(--svx-pale) 30%, var(--svx-sky) 62%, var(--svx-sky-2) 100%);
}
.svx-sky__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0.42;
  filter: saturate(0.55) brightness(1.12);
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.8) 40%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.8) 40%, transparent 72%);
}

/* ---------- The navy field: deep in the lower left, thinning through blue mist towards the centre ---------- */
.svx-field { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.svx-field__deep {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 58% at 6% 82%, var(--svx-navy) 0, rgba(7, 27, 51, 0.85) 45%, rgba(7, 27, 51, 0) 80%),
    linear-gradient(204deg, rgba(18, 52, 82, 0) 36%, rgba(18, 52, 82, 0.5) 44%, rgba(14, 44, 74, 0.88) 49%, var(--svx-navy-2) 58%, var(--svx-navy) 82%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 30%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.35) 52%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0, #000 30%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.35) 52%, transparent 64%);
}
.svx-field__mist { /* the blue air where the two climates meet */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 22% 40% at 47% 62%, rgba(76, 122, 170, 0.34), rgba(76, 122, 170, 0) 72%),
    radial-gradient(ellipse 30% 26% at 44% 34%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%);
}

/* ---------- Documents: surfacing in the navy, between the text and the divider ---------- */
.svx-docs { position: absolute; z-index: -2; left: 29%; top: 41%; width: 21%; height: 54%; pointer-events: none; }
.svx-doc {
  position: absolute;
  width: 60%;
  max-width: none;
  height: auto;
  mix-blend-mode: screen; /* paper glows out of the navy, tinted by it */
  filter: grayscale(0.35) contrast(0.9);
  -webkit-mask-image: linear-gradient(100deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(180deg, #000 45%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(100deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(180deg, #000 45%, transparent 96%);
  mask-composite: intersect;
  animation: svx-float 12s ease-in-out infinite alternate;
}
.svx-doc--coc { left: 44%; top: -6%; width: 50%; opacity: 0.16; transform: rotate(7deg); animation-duration: 15s; }
.svx-doc--bol { left: 18%; top: 0; opacity: 0.38; transform: rotate(-9deg); animation-delay: -3s; }
.svx-doc--invoice { left: 46%; top: 16%; width: 54%; opacity: 0.32; transform: rotate(-6deg); animation-delay: -7s; animation-duration: 14s; }
.svx-doc--packing { left: 2%; top: 36%; width: 56%; opacity: 0.3; transform: rotate(-12deg); animation-delay: -5s; animation-duration: 13s; }
@keyframes svx-float {
  from { translate: 0 -3px; }
  to { translate: 0 4px; }
}

/* ---------- Freight: a container lowered onto a truck at the port, softened into the sky ----------
   services/freights/intro/port-truck.webp, already softened (its blur is in the file, so nothing blurs it as the view
   changes). The truck and its container stand low on the right, above the wave; the port behind them thins away into
   the sky towards the words, and the picture's own foot fades out before the wave. */
.svx-freight { position: absolute; z-index: -2; right: 0; top: 28%; width: 44%; bottom: 7%; pointer-events: none; }
/* Its width, and its place: the truck's wheels (15.45% of the picture's height above its foot, so 0.0783 of its width)
   stand a little above the wave's pale band at the right (0.94 of the wave's height, .svx-curve below) on any shape
   of screen; the box's own foot is 7% of the stage above the stage's, 10.77% of the box's height. */
.svx-freight__scene {
  --scene-w: 70.4vw;
  position: absolute;
  right: 0;
  bottom: calc(0.94 * clamp(120px, 21vh, 210px) + 24px - 10.77% - 0.0783 * var(--scene-w));
  width: var(--scene-w);
  height: auto;
  max-width: none;
  opacity: 0.46;
  filter: saturate(0.45) brightness(1.1) contrast(0.85);
  /* No edge anywhere: whole about the truck and container, it thins away from them along an eased curve (no straight
     line where a fade begins or ends) to nothing before the words and the top; the picture's own foot eases out just
     above the wave. */
  -webkit-mask-image:
    radial-gradient(ellipse 50% 60% at 82% 62%, #000 30%, rgba(0, 0, 0, 0.93) 42%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.56) 66%, rgba(0, 0, 0, 0.34) 77%, rgba(0, 0, 0, 0.16) 87%, rgba(0, 0, 0, 0.05) 94%, transparent 100%),
    linear-gradient(180deg, #000 83%, rgba(0, 0, 0, 0.88) 85.5%, rgba(0, 0, 0, 0.62) 88%, rgba(0, 0, 0, 0.34) 90.5%, rgba(0, 0, 0, 0.12) 93%, transparent 95.5%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 50% 60% at 82% 62%, #000 30%, rgba(0, 0, 0, 0.93) 42%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.56) 66%, rgba(0, 0, 0, 0.34) 77%, rgba(0, 0, 0, 0.16) 87%, rgba(0, 0, 0, 0.05) 94%, transparent 100%),
    linear-gradient(180deg, #000 83%, rgba(0, 0, 0, 0.88) 85.5%, rgba(0, 0, 0, 0.62) 88%, rgba(0, 0, 0, 0.34) 90.5%, rgba(0, 0, 0, 0.12) 93%, transparent 95.5%);
  mask-composite: intersect;
}
.svx-freight::after { /* the air between the viewer and the port */
  content: "";
  position: absolute;
  inset: -10% 0 0 -10%;
  opacity: var(--haze, 1);
  background: linear-gradient(90deg, rgba(228, 241, 253, 0) 0, rgba(228, 241, 253, 0.8) 16%, rgba(228, 241, 253, 0.4) 36%, rgba(228, 241, 253, 0) 62%);
  /* Feathered in from its top and its left, and eased out where it ends, so the air has no edge of its own. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) 5%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.72) 15%, rgba(0, 0, 0, 0.92) 20%, #000 25%),
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 2%, rgba(0, 0, 0, 0.7) 4%, rgba(0, 0, 0, 0.92) 6%, #000 8%, #000 40%, rgba(0, 0, 0, 0.85) 47%, rgba(0, 0, 0, 0.55) 53%, rgba(0, 0, 0, 0.25) 57.5%, rgba(0, 0, 0, 0.06) 60.5%, transparent 62.5%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) 5%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.72) 15%, rgba(0, 0, 0, 0.92) 20%, #000 25%),
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 2%, rgba(0, 0, 0, 0.7) 4%, rgba(0, 0, 0, 0.92) 6%, #000 8%, #000 40%, rgba(0, 0, 0, 0.85) 47%, rgba(0, 0, 0, 0.55) 53%, rgba(0, 0, 0, 0.25) 57.5%, rgba(0, 0, 0, 0.06) 60.5%, transparent 62.5%);
  mask-composite: intersect;
}

/* ---------- Content ---------- */
.svx-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(124px, 15vh, 150px) var(--svx-pad) 0;
}
/* The label and headline sit a little below the nav, together; moved without moving anything laid out after them. */
.svx-head { position: relative; top: 28px; text-align: center; }
.svx-label {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-nav);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--svx-navy-2);
}
.svx-label::before,
.svx-label::after { content: ""; width: 54px; height: 1px; background: var(--svx-gold); }
.svx-title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--svx-navy);
}

.svx-cols {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: repeat(4, auto); /* number, heading, description, button: shared by both services */
  column-gap: clamp(36px, 5vw, 90px);
  flex: 1;
  align-content: center;
  padding-bottom: clamp(90px, 15vh, 160px); /* the wave */
}
.svx-col {
  position: relative;
  display: grid;
  grid-row: 1 / span 4;
  grid-template-rows: subgrid; /* so the numbers, headings, descriptions and buttons line up across the two */
  align-items: start;
  max-width: 440px;
}
.svx-divider { grid-column: 2; grid-row: 1 / -1; }
@supports not (grid-template-rows: subgrid) {
  .svx-col { display: flex; flex-direction: column; align-items: flex-start; }
  .svx-col .svx-btn { margin-top: auto; }
  .svx-col .svx-text { margin-bottom: 24px; }
}
.svx-col--customs { grid-column: 1; color: #fff; }
.svx-col--freight { grid-column: 3; color: var(--svx-navy); }
.svx-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.svx-num::before { content: ""; width: 34px; height: 1px; background: var(--svx-gold); }
.svx-name {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 2.75vw, 2.9rem);
  line-height: 1.12;
}
.svx-sub {
  margin-top: 18px;
  font-family: var(--font-nav);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.svx-text {
  max-width: 380px;
  margin-top: 16px;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--svx-ink);
}
.svx-col--customs .svx-text { color: var(--svx-mute); }
.svx-col--freight .svx-text { color: var(--svx-navy); }

/* The pills: Customs drawn in gold on the navy, Freight solid navy on the sky; the arrow sits in its own ring. */
.svx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  justify-self: start;
  gap: 30px;
  min-width: 15rem; /* both pills the same size */
  margin-top: 24px;
  padding: 3px 3px 3px 26px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.svx-btn--line { border: 1px solid rgba(212, 170, 58, 0.75); background: rgba(7, 27, 51, 0.15); }
.svx-btn--solid { border: 1px solid rgba(212, 170, 58, 0.75); background: var(--svx-navy); } /* the same gold edge as Customs' */
.svx-btn__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--svx-gold-2);
  border-radius: 50%;
}
.svx-btn__arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s ease; }
@media (hover: hover) {
  .svx-btn--line:hover { background: rgba(7, 27, 51, 0.45); border-color: var(--svx-gold-2); }
  .svx-btn--solid:hover { background: var(--svx-navy-2); }
  .svx-btn:hover .svx-btn__arrow svg { transform: translateX(2px); }
}
.svx-btn:focus-visible { outline: 2px solid var(--svx-gold-2); outline-offset: 4px; }

/* The divider: a thread of gold from the services down into the wave, fading at both ends, with a gold point. */
.svx-divider {
  position: relative;
  width: 1px;
  margin-bottom: calc(-1 * clamp(110px, 19vh, 190px));
  background: linear-gradient(180deg, rgba(199, 154, 43, 0), rgba(199, 154, 43, 0.75) 18%, rgba(199, 154, 43, 0.75) 82%, rgba(199, 154, 43, 0));
}
.svx-divider__dot {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--svx-gold-2);
  box-shadow: 0 0 0 4px rgba(212, 170, 58, 0.14);
}

/* ---------- The wave ---------- */
.svx-curve {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(120px, 21vh, 210px);
  pointer-events: none;
}
/* Its gold, as on the hero's and About's curves (css/styles.css, .wave-accent): the hairlines, the divider's thread
   running on through the wave, and the point where it crosses the pale band. Strokes keep their width however the
   wave is stretched; a zero-length stroke with round caps is the point, a true circle at any stretch. */
.svx-curve__gold {
  fill: none;
  stroke: url(#waveGold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}
.svx-curve__gold--low { opacity: 0.26; }
.svx-curve__thread { fill: none; stroke: url(#svxThreadOut); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svx-curve__thread--in { stroke: url(#svxThreadIn); }
.svx-curve__dot { fill: none; stroke: #d4aa3a; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.svx-curve__dot--halo { stroke: rgba(212, 170, 58, 0.14); stroke-width: 13; }

/* ---------- Shorter screens: the lists and paragraphs give way before the composition does ---------- */
@media (min-width: 860px) and (max-height: 900px) {
  .svx-content { padding-top: 124px; }
  .svx-title { font-size: clamp(1.5rem, 2.2vw, 2.25rem); margin-top: 14px; }
  .svx-name { font-size: clamp(1.7rem, 2.4vw, 2.5rem); }
  .svx-sub { margin-top: 12px; }
  .svx-text { margin-top: 10px; font-size: 0.92rem; line-height: 1.55; }
  .svx-btn { margin-top: 16px; }
}
@media (min-width: 860px) and (max-height: 800px) {
  .svx-text { display: none; }
}

/* Tablets in landscape: a little narrower */
@media (min-width: 860px) and (max-width: 1150px) {
  .svx-docs { left: 26%; width: 22%; }
  .svx-freight { width: 40%; }
}

/* ---------- Tablets in portrait and phones: Customs above in the navy, Freight below in the sky ---------- */
@media (max-width: 859px) {
  .svx-content { padding: 104px 22px clamp(90px, 13vh, 130px); align-items: center; }
  .svx-label { gap: 14px; font-size: 0.64rem; }
  .svx-label::before,
  .svx-label::after { width: 30px; }
  .svx-title { margin-top: 12px; font-size: clamp(1.3rem, 4.6vw, 1.95rem); text-wrap: balance; }
  .svx-title br { display: none; }
  .svx-cols { flex: 1; align-content: center; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; justify-items: center; margin-top: clamp(18px, 3vh, 40px); padding-bottom: 0; width: 100%; }
  .svx-col,
  .svx-divider { grid-column: auto; grid-row: auto; }
  .svx-col { display: block; text-align: center; max-width: 460px; }
  .svx-num { justify-content: center; }
  .svx-num::before { width: 22px; }
  .svx-name { margin-top: 8px; font-size: clamp(1.55rem, 6vw, 2.2rem); }
  .svx-sub { margin-top: 10px; font-size: 0.6rem; }
  .svx-text { display: none; }
  .svx-btn { margin-top: 16px; gap: 20px; min-width: 13rem; font-size: 0.62rem; padding-left: 20px; }
  .svx-btn__arrow { width: 34px; height: 34px; }
  .svx-divider { width: 60px; height: 1px; margin: clamp(26px, 5vh, 44px) 0; background: linear-gradient(90deg, rgba(199, 154, 43, 0), var(--svx-gold) 30%, var(--svx-gold) 70%, rgba(199, 154, 43, 0)); }
  .svx-divider__dot { left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  /* The navy belongs to the Customs block itself here, so it always sits behind it and never behind Freight. */
  .svx-field__deep { display: none; }
  .svx-col--customs::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60vw;
    right: -60vw;
    top: -46%;
    bottom: -40%;
    background: radial-gradient(ellipse 62% 50% at 50% 50%, rgba(7, 27, 51, 0.97) 0, rgba(11, 39, 69, 0.9) 42%, rgba(18, 52, 82, 0.45) 70%, rgba(18, 52, 82, 0) 92%);
    opacity: var(--svx-navy-in, 1); /* follows the air, not the text, as the view changes (js/services-intro.js) */
    pointer-events: none;
  }
  .svx-field__mist { display: none; }
  .svx-docs { z-index: -1; left: 52%; top: 30%; width: 64%; height: 30%; opacity: 0.5; }
  .svx-freight { left: 18%; width: auto; top: 62%; bottom: 8%; }
  /* Low on the right beneath Freight, fading upwards behind its words; the box's foot is 26.67% of its height up. */
  .svx-freight__scene {
    --scene-w: clamp(560px, 150vw, 900px);
    right: -6vw;
    bottom: calc(0.94 * clamp(80px, 12vh, 120px) + 14px - 26.67% - 0.0783 * var(--scene-w));
    opacity: 0.4;
    -webkit-mask-image:
      radial-gradient(ellipse 46% 56% at 82% 66%, #000 30%, rgba(0, 0, 0, 0.93) 42%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.56) 66%, rgba(0, 0, 0, 0.34) 77%, rgba(0, 0, 0, 0.16) 87%, rgba(0, 0, 0, 0.05) 94%, transparent 100%),
      linear-gradient(180deg, #000 83%, rgba(0, 0, 0, 0.88) 85.5%, rgba(0, 0, 0, 0.62) 88%, rgba(0, 0, 0, 0.34) 90.5%, rgba(0, 0, 0, 0.12) 93%, transparent 95.5%);
    mask-image:
      radial-gradient(ellipse 46% 56% at 82% 66%, #000 30%, rgba(0, 0, 0, 0.93) 42%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.56) 66%, rgba(0, 0, 0, 0.34) 77%, rgba(0, 0, 0, 0.16) 87%, rgba(0, 0, 0, 0.05) 94%, transparent 100%),
      linear-gradient(180deg, #000 83%, rgba(0, 0, 0, 0.88) 85.5%, rgba(0, 0, 0, 0.62) 88%, rgba(0, 0, 0, 0.34) 90.5%, rgba(0, 0, 0, 0.12) 93%, transparent 95.5%);
  }
  .svx-curve { height: clamp(80px, 12vh, 120px); }
  .svx-curve__thread--in { display: none; } /* the divider lies across here: no thread comes down into the wave */
}

@media (min-width: 600px) and (max-width: 859px) {
  .svx-content { padding-top: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .svx-doc { animation: none; }
}