/* =====================================================================
   About page — sections 03 to 07.

   Ported from the previous Veltrix build (Industries / Engineering Stack
   / Work With Us) and re-skinned to the current rules: Oswald headings,
   Montserrat body, emerald #109e75 with #14E185 as the bright accent,
   no third family and no colour outside the brand set. The old sheets
   leaned on --v-* custom properties and Inter, none of which exist here,
   so every value is stated outright.

   Sections alternate dark / light so the page keeps a rhythm:
     03 Problem    dark
     04 Philosophy light
     05 Industries dark
     06 Stack      light
     07 Work       dark
   ===================================================================== */

.v-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); position: relative; z-index: 1; }
.v-wrap--wide { max-width: 1560px; }

/* Dark-section heading colours; the light ones inherit site.css as-is. */
.v-prb .v-sec__eyebrow,
.v-ind .v-sec__eyebrow,
.v-eng .v-sec__eyebrow { color: #14E185; }
.v-prb .v-sec__title,
.v-ind .v-sec__title,
.v-eng .v-sec__title { color: #ffffff; }
.v-prb .v-sec__title .em,
.v-ind .v-sec__title .em,
.v-eng .v-sec__title .em { color: #14E185; }
.v-prb .v-sec__lead,
.v-ind .v-sec__lead,
.v-eng .v-sec__lead { color: rgba(255,255,255,0.74); }

.v-phi .v-sec__eyebrow,
.v-tech .v-sec__eyebrow { color: #0b7a58; }
.v-phi .v-sec__title,
.v-tech .v-sec__title { color: #0e1f19; }
.v-phi .v-sec__title .em,
.v-tech .v-sec__title .em { color: #109e75; }
.v-phi .v-sec__lead,
.v-tech .v-sec__lead { color: #46584f; }

/* The drifting grid, shared by four of the five sections. */
@keyframes v-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 72px 72px, 72px 72px; }
}


/* =====================================================================
   03 · THE PROBLEM WE SAW
   Dark. Three "so they bought another tool" cards drift on their own
   loop, then the mess that produces runs past as a marquee of chips.
   ===================================================================== */
.v-prb {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #031510 0%, #06231a 52%, #031510 100%);
  color: #ffffff;
  padding: clamp(5rem, 9vw, 8rem) 0;

  /* One rhythm for the whole section. The blocks used to step down on
     four slightly different arbitrary clamps (2.4/2.6/2.8/3rem), which
     read as drift rather than intent. Three steps, reused. */
  --prb-s: clamp(2rem, 3.2vw, 2.8rem);
  --prb-m: clamp(2.8rem, 4.5vw, 4rem);
  --prb-l: clamp(3.4rem, 5.5vw, 5rem);
  /* one measure for every centred paragraph, instead of 700 vs 780 */
  --prb-measure: 720px;
}
.v-prb::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(125,168,152,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,168,152,0.055) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 85%);
  animation: v-grid-drift 40s linear infinite;
}
.v-prb::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 40% at 85% 10%, rgba(16,158,117,0.14) 0%, transparent 70%),
    radial-gradient(50% 40% at 8% 92%, rgba(15,110,86,0.12) 0%, transparent 70%);
}

.v-prb__lead {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 1.35vw, 1.32rem); line-height: 1.62;
  color: rgba(255,255,255,0.86);
  max-width: var(--prb-measure); margin: var(--prb-s) auto 0; text-align: center;
}
.v-prb__lead strong { color: #14E185; font-weight: 600; }

/* --- the backwards buying loop --- */
.v-prb__loop {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: var(--prb-m);
  align-items: stretch;
}
/* Each card is a column so the payoff line can be pinned to the bottom.
   The three "so they bought…" lines run to different lengths (one line,
   two, two), so without this they ended at three different heights and
   the row read as ragged.

   The float animation is also gone. It ran at 7s with a per-card delay of
   0/1.4/2.8s, so the three cards were permanently out of phase and their
   top edges never lined up — that was the misalignment, not the padding. */
.v-prb__step {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px) clamp(24px, 2.4vw, 32px) clamp(28px, 2.8vw, 36px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,42,31,0.72) 0%, rgba(4,22,16,0.86) 100%);
  border: 1px solid rgba(16,158,117,0.22);
  transition: border-color 300ms ease, transform 300ms ease;
}
.v-prb__step:hover { transform: translateY(-4px); }
.v-prb__step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #14E185, transparent);
  transform: scaleX(0); transition: transform 550ms cubic-bezier(.2,.8,.2,1);
}
.v-prb__step:hover { border-color: rgba(20,225,133,0.45); }
.v-prb__step:hover::after { transform: scaleX(1); }
.v-prb__step__ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; flex: none;
  color: #14E185;
  background: rgba(16,158,117,0.14);
  border: 1px solid rgba(16,158,117,0.34);
  margin-bottom: 20px;
}
.v-prb__step__ico svg { width: 24px; height: 24px; }
.v-prb__step__a {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600;
  font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
}
/* The rule sits directly under the setup line, at the same height in all
   three cards.

   It used to take margin-top:auto to pin the payoff to the bottom of the
   card. That aligned the payoff baselines, but the payoffs run to one, two
   and two lines, so the slack collected ABOVE the rule instead — the rules
   ended up at three different heights and the shortest card had a hole in
   its middle. Aligning from the top instead reads far better: icon, setup,
   rule and payoff all start on the same line across the row. */
.v-prb__step__arrow {
  display: block; width: 22px; height: 1px; flex: none;
  background: rgba(20,225,133,0.5);
  margin: 0 0 16px;
}
/* Reserving two lines means the one-line payoff occupies the same box as the
   two-line ones, so the three content blocks are identical in height and the
   row has no ragged bottom edge either. */
.v-prb__step__b {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem); line-height: 1.15; letter-spacing: -0.01em;
  color: #14E185; margin: 0;
  /* calc() is the fallback for browsers without lh; both compute the same
     here. Note this reserves two LINE-HEIGHTS, and Oswald's rendered line
     box runs a little taller than its line-height, so a genuinely two-line
     payoff ends ~3px below a reserved one. That is invisible and the cards
     are equal height regardless; it is not worth a magic ratio tied to one
     font's metrics. */
  min-height: calc(2 * 1.15em);
  min-height: 2lh;
}

/* --- what the stack turned into --- */
.v-prb__result {
  margin-top: var(--prb-l);
  padding-top: var(--prb-s);
  border-top: 1px solid rgba(125,168,152,0.16);
}
.v-prb__result__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: var(--prb-measure); margin: 0 auto; text-align: center;
}
/* The marquee used to break out to the full viewport (100vw with a
   negative margin) while every other block sat inside the 1240px wrap, so
   chips ran off both screen edges mid-word and the section lost its left
   and right alignment. Kept inside the wrap now, with the fade sitting on
   the column edge where the eye expects the column to end. */
.v-prb__chips {
  margin-top: var(--prb-s);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* the trailing line needs the same breathing room the chips got above */
.v-prb__chips + .v-prb__result__p { margin-top: var(--prb-s); }
.v-prb__chips__track {
  display: flex; gap: 14px; width: max-content;
  will-change: transform; transform: translateZ(0);
  animation: v-prb-chips 36s linear infinite;
}
.v-prb__chips:hover .v-prb__chips__track { animation-play-state: paused; }
@keyframes v-prb-chips {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.v-prb__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; white-space: nowrap;
  background: rgba(6,26,19,0.75); border: 1px solid rgba(125,168,152,0.22);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 500;
  font-size: 0.88rem; color: rgba(255,255,255,0.8);
}
.v-prb__chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #109e75; box-shadow: 0 0 10px rgba(16,158,117,0.7);
}

/* --- closing --- */
.v-prb__close {
  margin-top: var(--prb-l);
  padding-top: var(--prb-s);
  border-top: 1px solid rgba(125,168,152,0.16);
  text-align: center;
}
.v-prb__close__a {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(0.98rem, 1.1vw, 1.1rem); line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: var(--prb-measure); margin: 0 auto clamp(12px, 1.6vw, 18px);
}
.v-prb__close__b {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -0.015em;
  color: #ffffff; margin: 0;
}
.v-prb__close__b .em { color: #14E185; }

@media (max-width: 900px) { .v-prb__loop { grid-template-columns: 1fr; } }


/* =====================================================================
   04 · OUR PHILOSOPHY
   Light. The four friction questions carry the section; each is a
   numbered card whose rule grows and fills emerald on hover.
   ===================================================================== */
.v-phi {
  position: relative; overflow: hidden; isolation: isolate;
  background: #ffffff; color: #46584f;
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.v-phi::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, rgba(16,158,117,0.16) 1.5px, transparent 1.6px),
    linear-gradient(90deg, rgba(20,96,75,0.06) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
  animation: v-grid-drift 40s linear infinite;
}
.v-phi__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.72;
  color: #46584f; max-width: 780px; margin: clamp(1.6rem, 2.6vw, 2.2rem) auto 0; text-align: center;
}
.v-phi__p strong { color: #0e1f19; font-weight: 600; }

.v-phi__kicker {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #0b7a58; text-align: center;
  margin: clamp(2.8rem, 5vw, 4rem) 0 clamp(1.6rem, 2.6vw, 2.2rem);
}
.v-phi__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.v-phi__q {
  position: relative; overflow: hidden;
  padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.2vw, 28px);
  border-radius: 20px; background: #ffffff;
  border: 1px solid rgba(14,31,25,0.10);
  box-shadow: 0 10px 30px rgba(14,31,25,0.05);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms ease, border-color 300ms ease;
}
.v-phi__q:hover {
  transform: translateY(-6px);
  border-color: rgba(16,158,117,0.45);
  box-shadow: 0 24px 50px rgba(14,31,25,0.10);
}
.v-phi__q__n {
  display: block;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: 2.2rem; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(16,158,117,0.55);
  margin-bottom: 6px;
  transition: color 360ms ease, -webkit-text-stroke-color 360ms ease;
}
.v-phi__q:hover .v-phi__q__n { color: #109e75; -webkit-text-stroke-color: transparent; }
.v-phi__q__rule {
  display: block; height: 2px; width: 26px; border-radius: 2px;
  background: rgba(16,158,117,0.28); margin-bottom: 18px;
  transition: width 520ms cubic-bezier(.2,.8,.2,1), background 360ms ease;
}
.v-phi__q:hover .v-phi__q__rule { width: 64px; background: #109e75; }
.v-phi__q__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.2; letter-spacing: -0.01em;
  color: #0e1f19; margin: 0 0 10px;
}
.v-phi__q__d {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: 0.88rem; line-height: 1.6; color: #5d7068; margin: 0;
}
.v-phi__answer {
  margin: clamp(3rem, 5vw, 4.5rem) auto 0; max-width: 900px; text-align: center;
  padding-top: clamp(2.2rem, 3.6vw, 3.2rem);
  border-top: 1px solid rgba(14,31,25,0.10);
}
.v-phi__answer__b {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -0.015em;
  color: #0e1f19; margin: 0 0 clamp(22px, 3vw, 32px);
}
.v-phi__answer__b .em { color: #109e75; }
.v-phi__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 1024px) { .v-phi__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .v-phi__grid { grid-template-columns: 1fr; } }


/* =====================================================================
   05 · INDUSTRIES
   Dark. Auto-scrolling marquee of tiles; hovering pauses the track and
   slides a detail drawer up over the image.
   ===================================================================== */
.v-ind {
  position: relative; overflow: hidden; isolation: isolate;
  background: #04120c; color: #ffffff;
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.v-ind::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("/public/assets/images/backgrounds/bg-industries.webp") center/cover no-repeat;
  opacity: 0.10;
}
.v-ind::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 40% at 85% 15%, rgba(16,158,117,0.13) 0%, transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(15,110,86,0.11) 0%, transparent 70%),
    linear-gradient(180deg, #04120c 0%, transparent 16%, transparent 84%, #04120c 100%);
}

.v-ind__viewport {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(2.4rem, 4vw, 3.4rem) 0 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.v-ind__track {
  display: flex; gap: 20px; width: max-content;
  animation: v-ind-scroll 90s linear infinite; will-change: transform;
}
.v-ind__viewport:hover .v-ind__track { animation-play-state: paused; }
@keyframes v-ind-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.v-ind-tile {
  flex: 0 0 auto; position: relative;
  width: 340px; height: 410px; padding: 32px 30px;
  background: #061a13; border: 1px solid rgba(125,168,152,0.16);
  border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease, box-shadow 500ms ease;
}
.v-ind-tile__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(0.85) saturate(1.05);
  transition: opacity 500ms ease, transform 1.2s cubic-bezier(.2,.8,.2,1), filter 500ms ease;
}
.v-ind-tile__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,18,12,0) 40%, rgba(4,18,12,0.86) 100%),
    linear-gradient(120deg, rgba(16,158,117,0.20) 0%, rgba(16,158,117,0) 70%);
  transition: background 500ms ease;
}
.v-ind-tile:hover {
  transform: translateY(-8px);
  border-color: rgba(16,158,117,0.55);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(16,158,117,0.18);
}
.v-ind-tile:hover .v-ind-tile__img { opacity: 0.22; transform: scale(1.05); filter: brightness(0.7); }
.v-ind-tile:hover .v-ind-tile__overlay {
  background:
    linear-gradient(180deg, rgba(4,18,12,0.55) 0%, rgba(4,18,12,0.95) 100%),
    linear-gradient(120deg, rgba(16,158,117,0.42) 0%, rgba(16,158,117,0) 70%);
}

.v-ind-tile__ico {
  position: absolute; top: 28px; left: 30px; z-index: 3;
  width: 54px; height: 54px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #14E185; background: rgba(4,18,12,0.72);
  border: 1px solid rgba(225,245,238,0.26);
  transition: color 400ms, background 400ms, border-color 400ms, transform 500ms;
}
.v-ind-tile__ico svg { width: 27px; height: 27px; }
.v-ind-tile:hover .v-ind-tile__ico {
  color: #04120c; background: #109e75; border-color: #109e75;
  transform: rotate(-6deg) scale(1.05);
}
.v-ind-tile__num {
  position: absolute; top: 24px; right: 28px; z-index: 2;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: 2.9rem; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(225,245,238,0.4);
  transition: -webkit-text-stroke-color 300ms ease;
}
.v-ind-tile:hover .v-ind-tile__num { -webkit-text-stroke-color: rgba(20,225,133,0.7); }

.v-ind-tile__name {
  position: relative; z-index: 3;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1.14; letter-spacing: -0.015em;
  color: #ffffff; margin: 0 0 10px; text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  transition: opacity 300ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}
.v-ind-tile__tagline {
  position: relative; z-index: 3;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: 0.92rem; line-height: 1.55; color: rgba(255,255,255,0.88);
  margin: 0; max-width: 280px; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: opacity 300ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}
.v-ind-tile:hover .v-ind-tile__name    { opacity: 0; transform: translateY(-8px); }
.v-ind-tile:hover .v-ind-tile__tagline { opacity: 0; transform: translateY(18px); }

.v-ind-tile__drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 24px 30px 28px;
  background: linear-gradient(180deg, rgba(4,18,12,0) 0%, rgba(4,18,12,0.88) 20%, #04120c 100%);
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform 550ms cubic-bezier(.2,.8,.2,1), opacity 350ms ease 50ms;
}
.v-ind-tile:hover .v-ind-tile__drawer { transform: translateY(0); opacity: 1; pointer-events: auto; }
.v-ind-tile__drawer__name {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1.14; letter-spacing: -0.015em;
  color: #ffffff; margin: 0 0 12px;
}
.v-ind-tile__drawer p {
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.86rem; line-height: 1.55;
  color: rgba(255,255,255,0.82); margin: 0 0 14px;
}
.v-ind-tile__drawer ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.v-ind-tile__drawer li {
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.82rem;
  color: #14E185; display: flex; align-items: center; gap: 10px;
}
.v-ind-tile__drawer li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: #109e75; box-shadow: 0 0 8px rgba(16,158,117,0.6);
}
.v-ind-tile__cta {
  font-family: "Montserrat", Arial, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #14E185; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid rgba(125,168,152,0.28);
  transition: color 300ms, gap 300ms;
}
.v-ind-tile__cta:hover { color: #9dffd0; gap: 16px; }
.v-ind-tile__cta svg { width: 12px; height: 12px; }

.v-ind-tile--more {
  background: linear-gradient(180deg, rgba(16,158,117,0.20) 0%, rgba(15,110,86,0.06) 100%);
  border-color: rgba(16,158,117,0.4);
}
.v-ind-tile--more .v-ind-tile__ico {
  color: #14E185; background: rgba(225,245,238,0.10); border-color: rgba(225,245,238,0.3);
}
.v-ind-tile--more .v-ind-tile__name { color: #14E185; }

@media (max-width: 640px) { .v-ind-tile { width: 290px; height: 380px; padding: 26px; } }


/* =====================================================================
   06 · ENGINEERING STACK
   Light — it is a catalogue, and catalogues read better on white than
   the old dark treatment did. Floating logo pile, filter bar with live
   search, and a card grid that re-animates when the filter changes.
   ===================================================================== */
.v-tech {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8f6 50%, #ffffff 100%);
  color: #46584f;
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.v-tech::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,96,75,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,96,75,0.055) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
  animation: v-grid-drift 45s linear infinite;
}

/* --- the pile --- */
.v-tech__pile {
  position: relative; height: 280px;
  margin: clamp(2.6rem, 5vw, 4rem) auto;
  display: grid; place-items: center; perspective: 1000px;
}
.v-tech__pile::before {
  content: ""; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  width: 720px; max-width: 90%; height: 90px;
  background: radial-gradient(closest-side, rgba(16,158,117,0.28), transparent);
  filter: blur(20px);
}
.v-tech__pile__scene {
  position: relative; width: 1240px; max-width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: v-tech-drift 22s ease-in-out infinite;
}
@keyframes v-tech-drift {
  0%, 100% { transform: translateX(0) rotateX(0); }
  25%      { transform: translateX(-14px) rotateX(1deg); }
  50%      { transform: translateX(0) rotateX(-1deg); }
  75%      { transform: translateX(14px) rotateX(1deg); }
}
.v-tech__tile {
  position: absolute; left: 50%; top: 50%;
  width: 84px; height: 84px; padding: 14px; border-radius: 20px;
  display: grid; place-items: center;
  background: #ffffff; border: 1px solid rgba(14,31,25,0.09);
  box-shadow: 0 14px 28px rgba(14,31,25,0.10);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  animation: v-tech-tile-float 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes v-tech-tile-float {
  0%, 100% { transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
  50%      { transform: translate(-50%, -50%) translate(var(--x, 0), calc(var(--y, 0) - 10px)) rotate(calc(var(--r, 0deg) + 3deg)); }
}
.v-tech__tile img { width: 100%; height: 100%; object-fit: contain; }
.v-tech__tile::after {
  content: ""; position: absolute; top: calc(100% + 8px); left: 0; right: 0; height: 76px;
  background: inherit; border-radius: 18px;
  transform: scaleY(-1); opacity: 0.3; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
}

/* --- filter bar --- */
.v-tech__bar {
  display: flex; align-items: center; gap: 12px; padding: 8px;
  background: #ffffff; border: 1px solid rgba(14,31,25,0.10);
  border-radius: 999px; box-shadow: 0 10px 30px rgba(14,31,25,0.05);
  margin: 0 auto clamp(2rem, 3.4vw, 2.8rem);
}
.v-tech__filters {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  flex: 1 1 auto; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}
.v-tech__filters::-webkit-scrollbar { display: none; }
.v-tech__filter {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
  font-family: "Montserrat", Arial, sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #5d7068;
  transition: color 250ms ease, background 250ms ease;
}
.v-tech__filter:hover { color: #0e1f19; background: rgba(16,158,117,0.07); }
.v-tech__filter.is-active {
  /* white on #109e75 is 3.40:1; this darker step is 6.50 */
  color: #ffffff; background: #109e75; font-weight: 700;
  box-shadow: 0 6px 18px rgba(16,158,117,0.28);
  animation: v-tech-pop 400ms cubic-bezier(.2,.8,.2,1);
}
@keyframes v-tech-pop {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.v-tech__search {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  width: 340px; max-width: 100%; padding: 10px 20px 10px 18px;
  background: #f4f8f6; border: 1px solid rgba(14,31,25,0.09); border-radius: 999px;
  transition: border-color 250ms ease, background 250ms ease;
}
.v-tech__search:focus-within { border-color: rgba(16,158,117,0.55); background: #ffffff; }
.v-tech__search svg { width: 14px; height: 14px; color: #5d7068; flex: none; }
.v-tech__search input {
  appearance: none; border: 0; outline: none; background: transparent; width: 100%;
  font-family: "Montserrat", Arial, sans-serif; font-size: 13px; color: #0e1f19;
}
.v-tech__search input::placeholder { color: #5a6d64; }

/* --- card grid --- */
.v-tech__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
  /* 100 cards; do not lay them out or paint them until they are close.
     The intrinsic size keeps the scroll height stable either way. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1600px;
}
.v-tech__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  padding: 22px 22px 20px; border-radius: 18px;
  background: #ffffff; border: 1px solid rgba(14,31,25,0.09);
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease, box-shadow 350ms ease;
  animation: v-tech-card-in 550ms cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes v-tech-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.v-tech__card:nth-child(5n+1) { animation-delay: 0ms; }
.v-tech__card:nth-child(5n+2) { animation-delay: 40ms; }
.v-tech__card:nth-child(5n+3) { animation-delay: 80ms; }
.v-tech__card:nth-child(5n+4) { animation-delay: 120ms; }
.v-tech__card:nth-child(5n+5) { animation-delay: 160ms; }
.v-tech__card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #109e75, transparent);
  transform: scaleX(0); transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.v-tech__card:hover {
  transform: translateY(-4px); border-color: rgba(16,158,117,0.45);
  box-shadow: 0 20px 40px rgba(14,31,25,0.09);
}
.v-tech__card:hover::before { transform: scaleX(1); }
.v-tech__card:hover .v-tech__card__ico { transform: scale(1.08) rotate(-4deg); }
.v-tech__card.is-hidden { display: none; }
.v-tech__card.is-fresh { animation: v-tech-card-in 500ms cubic-bezier(.2,.8,.2,1); }

.v-tech__card__ico {
  width: 48px; height: 48px; padding: 8px; border-radius: 12px; align-self: start;
  background: #f4f8f6; border: 1px solid rgba(14,31,25,0.07);
  display: grid; place-items: center;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
}
.v-tech__card__ico img { width: 100%; height: 100%; object-fit: contain; }
.v-tech__card__ico--nolo {
  padding: 0; color: #0b7a58;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(16,158,117,0.16), #f4f8f6);
  border-color: rgba(16,158,117,0.3);
}
.v-tech__card__name {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.02rem; line-height: 1.15; letter-spacing: -0.01em;
  color: #0e1f19; margin: 0 0 6px;
}
.v-tech__card__desc {
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.82rem; line-height: 1.45;
  color: #5d7068; margin: 0;
}
.v-tech__empty {
  display: none; padding: 40px; text-align: center;
  font-family: "Montserrat", Arial, sans-serif; color: #5d7068;
}
.v-tech__grid.is-empty + .v-tech__empty { display: block; }

.v-tech__seo {
  margin-top: clamp(2.8rem, 5vw, 4rem); padding: clamp(24px, 2.6vw, 32px);
  background: #ffffff; border: 1px solid rgba(14,31,25,0.09); border-radius: 18px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.88rem; line-height: 1.75;
  color: #5d7068;
}
.v-tech__seo strong { color: #0e1f19; font-weight: 600; }

@media (max-width: 1280px) { .v-tech__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .v-tech__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .v-tech__bar { flex-direction: column; border-radius: 24px; padding: 10px; gap: 10px; }
  .v-tech__filters { width: 100%; padding: 4px; }
  .v-tech__search { width: 100%; }
}
@media (max-width: 768px) {
  .v-tech__pile { height: 240px; }
  .v-tech__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .v-tech__grid { grid-template-columns: 1fr; } }


/* =====================================================================
   07 · WORK WITH US
   Dark. Three engagement models on one stage, swapped by hidden radios
   through :has() — no JavaScript. The old build ran a muted showreel
   behind each screen; that footage is off-brand, so the right column
   carries a still from the work library instead.
   ===================================================================== */
.v-eng {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 40% at 100% 0%, rgba(16,158,117,0.10) 0%, transparent 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(15,110,86,0.10) 0%, transparent 70%),
    linear-gradient(180deg, #031510 0%, #06231a 50%, #031510 100%);
  color: #ffffff;
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.v-eng::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(125,168,152,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,168,152,0.05) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, #000 30%, transparent 85%);
  animation: v-grid-drift 45s linear infinite;
}

.v-eng__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(16,158,117,0.09); border: 1px solid rgba(16,158,117,0.3);
  color: #14E185;
  font-family: "Montserrat", Arial, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
}
.v-eng__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #109e75; box-shadow: 0 0 10px rgba(16,158,117,0.7);
  animation: v-eng-pulse 2s ease-in-out infinite;
}
@keyframes v-eng-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}

.v-eng__stage {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(2.6rem, 4.5vw, 4rem);
  border-radius: 28px;
  background: linear-gradient(180deg, #0a1910 0%, #06120d 100%);
  border: 1px solid rgba(16,158,117,0.28);
}
.v-eng__screens { position: relative; min-height: 660px; }
.v-eng-screen {
  position: absolute; inset: 0;
  padding: clamp(38px, 4vw, 58px) clamp(30px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(30px, 4vw, 56px); align-items: center; isolation: isolate;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition:
    opacity 550ms cubic-bezier(.2,.8,.2,1),
    transform 650ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 550ms;
}
.v-eng__stage:has(#v-eng-pick-1:checked) .v-eng-screen[data-model="1"],
.v-eng__stage:has(#v-eng-pick-2:checked) .v-eng-screen[data-model="2"],
.v-eng__stage:has(#v-eng-pick-3:checked) .v-eng-screen[data-model="3"] {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition:
    opacity 550ms cubic-bezier(.2,.8,.2,1) 50ms,
    transform 650ms cubic-bezier(.2,.8,.2,1) 50ms,
    visibility 0s linear 0s;
}
.v-eng-screen__scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.v-eng-screen[data-model="1"] .v-eng-screen__scrim {
  background: radial-gradient(45% 70% at 100% 30%, rgba(16,158,117,0.18) 0%, transparent 70%);
}
.v-eng-screen[data-model="2"] .v-eng-screen__scrim {
  background:
    radial-gradient(50% 75% at 100% 20%, rgba(20,225,133,0.16) 0%, transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(15,110,86,0.16) 0%, transparent 70%);
}
.v-eng-screen[data-model="3"] .v-eng-screen__scrim {
  background: radial-gradient(50% 70% at 100% 80%, rgba(16,158,117,0.16) 0%, transparent 70%);
}
.v-eng-screen__ghost {
  position: absolute; top: 30px; left: clamp(28px, 4vw, 58px); z-index: -1;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: clamp(180px, 22vw, 300px); line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(125,168,152,0.13);
  pointer-events: none; user-select: none;
}
.v-eng-screen__body { position: relative; z-index: 2; max-width: 620px; }
.v-eng-screen__slug {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(16,158,117,0.12); border: 1px solid rgba(16,158,117,0.35);
  color: #14E185;
  font-family: "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 24px;
}
.v-eng-screen__name {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -0.015em;
  color: #ffffff; margin: 0 0 12px;
}
.v-eng-screen__tagline {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600;
  font-size: clamp(0.98rem, 1.3vw, 1.15rem); line-height: 1.35;
  color: #14E185; margin: 0 0 18px;
}
.v-eng-screen__desc {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: 0.98rem; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 24px;
}
.v-eng-screen__list {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px;
}
.v-eng-screen__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.88rem; line-height: 1.45;
  color: rgba(255,255,255,0.88);
}
.v-eng-screen__list svg { width: 18px; height: 18px; color: #109e75; flex: none; margin-top: 2px; }

.v-eng-screen__slot {
  position: relative; height: 100%; min-height: 320px;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(16,158,117,0.22);
}
.v-eng-screen__slot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.75) saturate(1.05);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.v-eng-screen__slot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,18,12,0.25) 0%, rgba(4,18,12,0.72) 100%);
}
.v-eng-screen__slot:hover img { transform: scale(1.05); }

/* --- rail --- */
.v-eng__rail {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(16,158,117,0.28); background: rgba(6,18,13,0.7);
}
.v-eng-rail__opt {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 24px 28px; cursor: pointer; overflow: hidden;
  border-right: 1px solid rgba(125,168,152,0.12);
  transition: background 350ms ease;
}
.v-eng-rail__opt:last-child { border-right: none; }
.v-eng-rail__opt:hover { background: rgba(16,158,117,0.05); }
.v-eng-rail__opt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 100% at 50% 100%, rgba(16,158,117,0.18) 0%, transparent 70%);
  transition: opacity 450ms ease;
}
.v-eng-rail__opt::after {
  content: ""; position: absolute; bottom: 0; left: 50%; height: 3px; width: 0;
  background: linear-gradient(90deg, #109e75, #14E185);
  box-shadow: 0 0 18px rgba(20,225,133,0.55); pointer-events: none;
  transition: width 500ms cubic-bezier(.2,.8,.2,1), left 500ms cubic-bezier(.2,.8,.2,1);
}
.v-eng__stage:has(#v-eng-pick-1:checked) .v-eng-rail__opt[data-model="1"]::before,
.v-eng__stage:has(#v-eng-pick-2:checked) .v-eng-rail__opt[data-model="2"]::before,
.v-eng__stage:has(#v-eng-pick-3:checked) .v-eng-rail__opt[data-model="3"]::before { opacity: 1; }
.v-eng__stage:has(#v-eng-pick-1:checked) .v-eng-rail__opt[data-model="1"]::after,
.v-eng__stage:has(#v-eng-pick-2:checked) .v-eng-rail__opt[data-model="2"]::after,
.v-eng__stage:has(#v-eng-pick-3:checked) .v-eng-rail__opt[data-model="3"]::after { width: 100%; left: 0; }

.v-eng-rail__num {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: 2.5rem; line-height: 1; letter-spacing: -0.045em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(125,168,152,0.5);
  transition: color 350ms, -webkit-text-stroke-color 350ms;
}
.v-eng__stage:has(#v-eng-pick-1:checked) .v-eng-rail__opt[data-model="1"] .v-eng-rail__num,
.v-eng__stage:has(#v-eng-pick-2:checked) .v-eng-rail__opt[data-model="2"] .v-eng-rail__num,
.v-eng__stage:has(#v-eng-pick-3:checked) .v-eng-rail__opt[data-model="3"] .v-eng-rail__num {
  color: #14E185; -webkit-text-stroke-color: transparent;
}
.v-eng-rail__meta {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.v-eng-rail__tag {
  font-family: "Montserrat", Arial, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(125,168,152,0.85);
}
.v-eng-rail__name {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; line-height: 1.15; letter-spacing: -0.01em; color: #ffffff;
}
.v-eng-rail__price {
  font-family: "Montserrat", Arial, sans-serif; font-size: 12px; color: rgba(255,255,255,0.62);
}
.v-eng-rail__price strong { color: #14E185; font-weight: 700; margin-left: 4px; }
.v-eng-rail__badge {
  position: absolute; top: 12px; right: 18px; z-index: 1;
  padding: 4px 10px; border-radius: 999px;
  background: #109e75; color: #04120c;
  font-family: "Montserrat", Arial, sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(16,158,117,0.4);
}
/* The badge sits over the tag row, so the tag has to stop short of it. */
.v-eng-rail__opt:has(.v-eng-rail__badge) .v-eng-rail__tag { padding-right: 92px; }
.v-eng-rail__dot {
  position: relative; z-index: 1; flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(125,168,152,0.45);
  transition: border-color 350ms;
}
.v-eng-rail__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: #109e75; transform: scale(0);
  box-shadow: 0 0 12px rgba(20,225,133,0.7);
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
}
.v-eng__stage:has(#v-eng-pick-1:checked) .v-eng-rail__opt[data-model="1"] .v-eng-rail__dot,
.v-eng__stage:has(#v-eng-pick-2:checked) .v-eng-rail__opt[data-model="2"] .v-eng-rail__dot,
.v-eng__stage:has(#v-eng-pick-3:checked) .v-eng-rail__opt[data-model="3"] .v-eng-rail__dot { border-color: #109e75; }
.v-eng__stage:has(#v-eng-pick-1:checked) .v-eng-rail__opt[data-model="1"] .v-eng-rail__dot::after,
.v-eng__stage:has(#v-eng-pick-2:checked) .v-eng-rail__opt[data-model="2"] .v-eng-rail__dot::after,
.v-eng__stage:has(#v-eng-pick-3:checked) .v-eng-rail__opt[data-model="3"] .v-eng-rail__dot::after { transform: scale(1); }
.v-eng-rail__opt:focus-within { outline: 2px solid rgba(16,158,117,0.6); outline-offset: -4px; }

/* --- reassurance marquee --- */
.v-eng__reassure {
  margin-top: clamp(2.6rem, 4.5vw, 3.8rem); padding: 22px 0;
  border-top: 1px solid rgba(125,168,152,0.14);
  border-bottom: 1px solid rgba(125,168,152,0.14);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.v-eng__reassure__track {
  display: flex; gap: 60px; width: max-content;
  will-change: transform; transform: translateZ(0);
  animation: v-eng-marquee 40s linear infinite;
}
.v-eng__reassure:hover .v-eng__reassure__track { animation-play-state: paused; }
@keyframes v-eng-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.v-eng__reassure__item {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 500;
  font-size: 0.88rem; color: rgba(255,255,255,0.84);
}
.v-eng__reassure__item svg { width: 20px; height: 20px; color: #109e75; flex: none; }

@media (max-width: 900px) {
  .v-eng__screens { min-height: 760px; }
  .v-eng-screen { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .v-eng-screen__ghost { font-size: 140px; top: 20px; }
  .v-eng-screen__list { grid-template-columns: 1fr; }
  .v-eng-screen__slot { display: none; }
  .v-eng__rail { grid-template-columns: 1fr; }
  .v-eng-rail__opt { border-right: none; border-bottom: 1px solid rgba(125,168,152,0.12); }
  .v-eng-rail__opt:last-child { border-bottom: none; }
}


/* =====================================================================
   Motion off
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .v-prb::before, .v-phi::before, .v-tech::before, .v-eng::before,
  .v-prb__step, .v-prb__chips__track, .v-ind__track,
  .v-tech__pile__scene, .v-tech__tile, .v-tech__card,
  .v-eng__badge::before, .v-eng__reassure__track { animation: none; }
  .v-ind-tile, .v-ind-tile__drawer, .v-ind-tile__ico, .v-prb__step,
  .v-eng-screen, .v-eng-rail__opt::after, .v-eng-rail__dot::after { transition: none; }
  .v-prb__step:hover { transform: none; }
}


/* =====================================================================
   09 · LONG-TERM PARTNERSHIP

   Third structure. The first was a dark band with a background video and
   floating 3D objects; the second was a two-column layout with the
   pillars in a bordered ledger panel. Both ended up as another box on a
   page that is already made of boxes.

   This one has no box at all. The four capabilities are full-bleed rows
   in an index — hairline, number, word, description, arrow — running the
   entire width of the viewport. Hovering a row washes that whole width
   in emerald. It reads as a directory rather than a card grid, which is
   the one thing this page did not already have.
   ===================================================================== */
.v-ltp {
  position: relative; overflow: hidden; isolation: isolate;
  background: #ffffff; color: #46584f;
  padding: clamp(5rem, 9vw, 8rem) 0 0;
}
.v-ltp::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,96,75,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,96,75,0.05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 22%, #000 20%, transparent 82%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 22%, #000 20%, transparent 82%);
  animation: v-grid-drift 42s linear infinite;
}
.v-ltp .v-sec__eyebrow { color: #0b7a58; }
.v-ltp .v-sec__title   { color: #0e1f19; }
.v-ltp .v-sec__title .em { color: #109e75; }
/* margin-left:0 pinned the lead to the left back when this section's head
   was left-aligned. The head is centred now, so the lead centres with it. */
.v-ltp .v-sec__lead    { color: #46584f; }
/* Centred like every other section heading. It was the only one set to
   text-align:left, which made it read as a different kind of section. */
.v-ltp .v-sec__head    { text-align: center; }

/* --- the argument, set as two columns of running text --- */
.v-ltp__body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.6vw, 64px);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.v-ltp__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.78;
  color: #46584f; margin: 0 0 1.15em;
}
.v-ltp__p:last-child { margin-bottom: 0; }

/* --- the index: full-bleed rows, no container, no border box --- */
.v-ltp__index {
  width: 100vw; margin-left: calc(50% - 50vw);
  border-top: 1px solid rgba(14,31,25,0.12);
}
.v-ltp__row {
  position: relative; display: block;
  border-bottom: 1px solid rgba(14,31,25,0.12);
  text-decoration: none; color: inherit;
  isolation: isolate;
}
/* the wash runs the whole viewport width, which is the point of the
   row being full-bleed in the first place */
.v-ltp__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(16,158,117,0.10) 0%, rgba(16,158,117,0.02) 70%, transparent 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms cubic-bezier(.22, 1, .28, 1);
}
.v-ltp__row:hover::before,
.v-ltp__row:focus-visible::before { transform: scaleX(1); }
.v-ltp__row:focus-visible { outline: 2px solid rgba(16,158,117,0.6); outline-offset: -3px; }

.v-ltp__row__in {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(26px, 3.2vw, 42px) clamp(1.5rem, 4vw, 4rem);
  display: grid; align-items: center;
  grid-template-columns: clamp(58px, 6vw, 92px) minmax(150px, 250px) 1fr clamp(36px, 4vw, 56px);
  gap: clamp(14px, 2vw, 32px);
}
.v-ltp__row__n {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(16,158,117,0.55);
  transition: color 380ms ease, -webkit-text-stroke-color 380ms ease;
}
.v-ltp__row:hover .v-ltp__row__n { color: #109e75; -webkit-text-stroke-color: transparent; }

.v-ltp__row__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.02; letter-spacing: -0.02em;
  color: #0e1f19; margin: 0;
  transition: transform 520ms cubic-bezier(.22, 1, .28, 1), color 380ms ease;
}
.v-ltp__row:hover .v-ltp__row__t { transform: translateX(10px); color: #109e75; }

.v-ltp__row__d {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(0.88rem, 1vw, 1rem); line-height: 1.65;
  color: #5d7068; margin: 0; max-width: 52ch;
  transition: color 380ms ease;
}
.v-ltp__row:hover .v-ltp__row__d { color: #46584f; }

.v-ltp__row__go {
  justify-self: end;
  width: clamp(36px, 4vw, 48px); height: clamp(36px, 4vw, 48px);
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(14,31,25,0.14); color: #0e1f19;
  transition: background 420ms ease, border-color 420ms ease,
              color 420ms ease, transform 520ms cubic-bezier(.22, 1, .28, 1);
}
.v-ltp__row__go svg { width: 17px; height: 17px; }
.v-ltp__row:hover .v-ltp__row__go {
  background: #109e75; border-color: #109e75; color: #ffffff;
  transform: translateX(6px);
}

/* --- closing, full width, no panel --- */
.v-ltp__close {
  padding: clamp(3.4rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 7vw, 6.5rem);
  text-align: center;
}
.v-ltp__close__b {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.018em;
  color: #0e1f19; margin: 0 0 clamp(22px, 3vw, 32px);
  max-width: 30ch; margin-inline: auto;   /* 20ch broke it onto three lines */
}
.v-ltp__close__b .em { color: #109e75; }

@media (max-width: 900px) {
  .v-ltp__body { grid-template-columns: 1fr; }
  .v-ltp__row__in {
    grid-template-columns: clamp(48px, 12vw, 62px) 1fr;
    row-gap: 10px; align-items: start;
  }
  .v-ltp__row__t { grid-column: 2; }
  .v-ltp__row__d { grid-column: 2; }
  .v-ltp__row__go { display: none; }
  .v-ltp__row:hover .v-ltp__row__t { transform: none; }
}

/* =====================================================================
   10 · OUR VISION

   Reworked. It used to be white-on-white against section 09 with no
   seam between them, and the copy ran down one ragged left column
   beside the orbit.

   Now: a tinted band with an explicit top edge so the section starts
   somewhere; the orbit centred as the focal point rather than pushed
   into a side column; and the copy set as three equal columns beneath
   it, divided by hairlines, at a measure that actually reads.

   The core of the orbit is the Veltrix insignia — the mark's four bars
   around a centre dot already say "orbit", so it belongs there far more
   than the 3D object that was in it before.
   ===================================================================== */
.v-vis {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #eaf4ef 0%, #dceee6 48%, #eaf4ef 100%);
  border-top: 1px solid rgba(16,158,117,0.20);
  color: #46584f;
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.v-vis::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, rgba(16,158,117,0.20) 1.5px, transparent 1.6px),
    linear-gradient(90deg, rgba(20,96,75,0.06) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
  animation: v-grid-drift 44s linear infinite;
}
.v-vis .v-sec__eyebrow { color: #109e75; }
.v-vis .v-sec__title   { color: #0e1f19; }
.v-vis .v-sec__title .em { color: #109e75; }
.v-vis .v-sec__lead    { color: #46584f; }

/* The orbit (three animated rings, nine orbiting satellites and a pulsing
   core) was removed on request — this section has no moving parts now.
   .v-vis__cols carries the top margin the orbit used to provide. */

/* --- the copy, three columns --- */
.v-vis__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(16,158,117,0.20);
  margin-top: clamp(2.4rem, 4.5vw, 4rem);
  padding-top: clamp(2rem, 3.4vw, 3rem);
}
.v-vis__col { padding: 0 clamp(16px, 2.4vw, 34px); }
.v-vis__col + .v-vis__col { border-left: 1px solid rgba(16,158,117,0.20); }
.v-vis__col:first-child { padding-left: 0; }
.v-vis__col:last-child  { padding-right: 0; }
.v-vis__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(0.92rem, 1vw, 1rem); line-height: 1.75;
  color: #46584f; margin: 0; max-width: 46ch;
}
.v-vis__p strong { color: #0e1f19; font-weight: 600; }

/* --- long-term direction --- */
.v-vis__dir {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.v-vis__dir__c {
  position: relative; overflow: hidden;
  padding: clamp(28px, 2.8vw, 38px) clamp(24px, 2.4vw, 30px);
  border-radius: 20px; background: #ffffff;
  border: 1px solid rgba(16,158,117,0.16);
  box-shadow: 0 10px 30px rgba(14,31,25,0.05);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms ease, border-color 300ms ease;
}
.v-vis__dir__c:hover {
  transform: translateY(-6px); border-color: rgba(16,158,117,0.5);
  box-shadow: 0 24px 50px rgba(14,31,25,0.10);
}
.v-vis__dir__c::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, transparent, rgba(16,158,117,0.08));
  transition: height 520ms cubic-bezier(.2,.8,.2,1);
}
.v-vis__dir__c:hover::before { height: 100%; }
.v-vis__dir__ico {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center;
  background: rgba(16,158,117,0.10); border: 1px solid rgba(16,158,117,0.26);
  transition: background 400ms ease, transform 500ms ease;
}
.v-vis__dir__c:hover .v-vis__dir__ico { background: #109e75; transform: rotate(-8deg) scale(1.06); }
.v-vis__dir__ico i {
  display: block; width: 22px; height: 22px; background: #109e75;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
  transition: background 400ms ease;
}
.v-vis__dir__c:hover .v-vis__dir__ico i { background: #ffffff; }
.v-vis__dir__t {
  position: relative; z-index: 1;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.015em;
  color: #0e1f19; margin: 0;
}
.v-vis__dir__t .em { color: #109e75; }

.v-vis__close {
  margin: clamp(3rem, 5vw, 4.5rem) auto 0; max-width: 960px; text-align: center;
  padding-top: clamp(2.2rem, 3.6vw, 3.2rem);
  border-top: 1px solid rgba(16,158,117,0.20);
}
.v-vis__close__b {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem); line-height: 1.1; letter-spacing: -0.015em;
  color: #0e1f19; margin: 0;
}
.v-vis__close__b .em { color: #109e75; }

@media (max-width: 900px) {
  .v-vis__cols { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  .v-vis__col { padding: 0; }
  .v-vis__col + .v-vis__col {
    border-left: 0; border-top: 1px solid rgba(16,158,117,0.20);
    padding-top: clamp(22px, 4vw, 32px);
  }
  .v-vis__p { max-width: none; }
  .v-vis__dir { grid-template-columns: 1fr; }
}

/* =====================================================================
   Motion off
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .v-ltp::before,
  .v-vis::before { animation: none; }
  .v-ltp__row::before, .v-ltp__row__t, .v-ltp__row__go,
  .v-vis__dir__c, .v-vis__dir__ico { transition: none; }
}