/* =====================================================================
   Services page sections.

   The page was a stub — four cards in a grid and nothing else. Cleared
   and restarted here. Same rules as everywhere: Oswald headings,
   Montserrat body, emerald #109e75 with #14E185 as the bright accent,
   no third family and no colour outside the brand set.

   Reveal primitives (.r-up / .r-z / .r-wm / .r-w / .r-idle) come from
   /public/shared/reveal.css; the highlight (.v-hl) from site.css.
   ===================================================================== */

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


/* =====================================================================
   01 · WHAT WE BUILD — the page opener.

   Runs over Bg Vid 4, a dark grid of glowing tiles, so the whole section
   is on-dark: white headline, mint accent, and the highlight switches to
   its translucent-emerald variant.

   Three layers of content over it — the claim, the integration hub, and
   a rail naming the six capabilities outright. That rail is the keyword
   surface this page competes on, and it belongs in real content on first
   paint rather than only in a meta tag.
   ===================================================================== */
.v-swb {
  position: relative; overflow: hidden; isolation: isolate;
  background: #04120c; color: rgba(255,255,255,0.78);
  padding: clamp(5.5rem, 10vw, 9rem) 0 clamp(4.5rem, 8vw, 7rem);
  text-align: center;
}
.v-swb__bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
}
/* The footage is bright in places and busy everywhere; white type needs
   this much cover, plus a darker band top and bottom so the section
   meets the nav and the next block cleanly. */
.v-swb__scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, #04120c 0%, rgba(4,18,12,0.82) 26%, rgba(4,18,12,0.86) 74%, #04120c 100%),
    radial-gradient(62% 46% at 50% 26%, rgba(16,158,117,0.22) 0%, transparent 72%);
}
.v-swb::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 78% 62% at 50% 34%, #000 22%, transparent 84%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 22%, transparent 84%);
  animation: v-swb-grid 42s linear infinite;
}
@keyframes v-swb-grid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 72px 72px, 72px 72px; }
}

.v-swb .v-sec__eyebrow { color: #14E185; }
.v-swb .v-sec__title {
  /* 18ch cut the accented half ("around your business.", 21 characters)
     onto two lines while the plain half sat on one. 24ch clears the longer
     of the two so each half keeps its own single line. */
  color: #ffffff; max-width: 24ch; margin-inline: auto;
  text-shadow: 0 2px 34px rgba(0,0,0,0.45);
}
.v-swb .v-sec__title .em { color: #14E185; }

.v-swb__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.72;
  color: rgba(255,255,255,0.78); max-width: 720px;
  margin: clamp(1.2rem, 2vw, 1.7rem) auto 0;
}

.v-swb__btns {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  margin-top: clamp(2.2rem, 3.6vw, 3.2rem);
}
/* the outlined button needs its on-dark colours restating */
.v-swb .v-btn--edge { color: #ffffff; border-color: rgba(20,225,133,0.6); }
.v-swb .v-btn--edge:hover { color: #04120c; }
.v-swb .v-btn--edge::before { background: #14E185; }
/* the secondary action scrolls rather than navigates, so its chevron
   points down and nudges downward on hover */
.v-swb__btns .v-cta__ico svg { transition: transform 420ms cubic-bezier(.22, 1, .28, 1); }
.v-swb__btns .v-btn--edge:hover .v-cta__ico svg { transform: translateY(3px); }


/* ---------------------------------------------------------------------
   The integration hub.

   Two layers sharing one coordinate space: an SVG on a fixed 1000x420
   viewBox draws the connectors, and the logo chips are DOM elements
   positioned at the same coordinates expressed as percentages. That
   keeps them aligned at any width with no measurement at runtime.
   --------------------------------------------------------------------- */
.v-swb__hub {
  position: relative; width: 100%; max-width: 1080px;
  aspect-ratio: 1200 / 520;
  margin: clamp(2.8rem, 5vw, 4.4rem) auto 0;
}
.v-swb__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-swb__wire {
  fill: none; stroke: url(#v-wire); stroke-width: 2;
}
/* a short lit segment travelling the same path, so the wires read as
   carrying something rather than just connecting */
.v-swb__pulse {
  fill: none; stroke: #14E185; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 26 760;
  filter: drop-shadow(0 0 6px rgba(20,225,133,0.85));
  animation: v-swb-pulse 4.2s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes v-swb-pulse {
  from { stroke-dashoffset: 786; }
  to   { stroke-dashoffset: 0; }
}

/* the hub itself */
.v-swb__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 17.5%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 26%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 22px 52px rgba(0,0,0,0.5), 0 0 0 12px rgba(4,18,12,0.5);
}
.v-swb__core img {
  width: 76%; height: 76%; object-fit: contain; border-radius: 22%;
}
.v-swb__core::after {
  content: ""; position: absolute; inset: -6%;
  border-radius: 26%; border: 1px solid rgba(20,225,133,0.4);
  animation: v-swb-halo 4.4s ease-out infinite;
}
@keyframes v-swb-halo {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* a platform */
.v-swb__node {
  position: absolute; transform: translate(-50%, -50%) scale(var(--s, 1));
  width: clamp(40px, 4.4vw, 56px); aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 30%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  animation: v-swb-bob 7s ease-in-out infinite;
  animation-delay: var(--f, 0s);
}
@keyframes v-swb-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(0); }
  50%      { transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(-7px); }
}
.v-swb__node img { width: 56%; height: 56%; object-fit: contain; }

@media (max-width: 720px) {
  /* four rows either side is too tall to read on a phone; the wires stop
     carrying meaning at that width, so the hub becomes a plain grid */
  .v-swb__hub {
    aspect-ratio: auto; max-width: 340px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; place-items: center;
  }
  .v-swb__node { --s: 1 !important; }
  .v-swb__wires { display: none; }
  .v-swb__core { position: static; transform: none; width: 68px; grid-column: span 4; }
  .v-swb__core::after { display: none; }
  .v-swb__node { position: static; transform: none; animation: none; }
}


/* --- capability rail --- */
.v-swb__rail {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: clamp(2.8rem, 4.4vw, 3.8rem);
  padding-top: clamp(2.2rem, 3.4vw, 3rem);
  border-top: 1px solid rgba(125,168,152,0.18);
  max-width: 940px; margin-inline: auto;
}
.v-swb__cap {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 14px; border-radius: 999px;
  background: rgba(6,26,19,0.62); border: 1px solid rgba(125,168,152,0.24);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600;
  font-size: 0.86rem; color: #ffffff; white-space: nowrap;
  transition: transform 380ms cubic-bezier(.22, 1, .28, 1),
              border-color 300ms ease, background 300ms ease;
}
.v-swb__cap:hover {
  transform: translateY(-3px);
  border-color: rgba(20,225,133,0.55);
  background: rgba(16,158,117,0.16);
}
.v-swb__cap i {
  display: block; width: 17px; height: 17px; flex: none;
  background: #14E185;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}

/* The anchor the secondary CTA scrolls to. It sits at the foot of this
   section for now; the next section down will take the id over. */
#capabilities { scroll-margin-top: clamp(90px, 12vh, 130px); }

@media (max-width: 560px) {
  .v-swb__btns { flex-direction: column; align-items: stretch; }
  .v-swb__btns .v-btn { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .v-swb::before, .v-swb__pulse, .v-swb__core::after, .v-swb__node { animation: none; }
  .v-swb__cap { transition: none; }
}


/* =====================================================================
   02 · OUR SERVICES — the seven offers.

   Seven is an awkward count for a grid: 3+3+1 leaves a hole and 4+3 is
   ragged. This runs on a 6-column track instead and varies the span —
   two wide, three medium, two wide — which fills every row exactly and
   gives the list a rhythm rather than a uniform tile wall.

   Light band, so it reads against the dark opener above it.
   ===================================================================== */
.v-svc {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8f6 52%, #ffffff 100%);
  color: #46584f;
  padding: clamp(5rem, 9vw, 8rem) 0;
  scroll-margin-top: clamp(90px, 12vh, 130px);
}
.v-svc::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.14) 1.5px, transparent 1.6px),
    linear-gradient(90deg, rgba(20,96,75,0.05) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 28%, #000 20%, transparent 82%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 28%, #000 20%, transparent 82%);
  animation: v-swb-grid 46s linear infinite;
}
.v-svc .v-sec__eyebrow { color: #0b7a58; }
.v-svc .v-sec__title   { color: #0e1f19; }
.v-svc .v-sec__title .em { color: #109e75; }
.v-svc .v-sec__lead    { color: #46584f; }

.v-svc__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
}
.v-svc__card {
  position: relative; overflow: hidden;
  grid-column: span var(--span, 2);
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: 22px; background: #ffffff;
  border: 1px solid rgba(14,31,25,0.10);
  box-shadow: 0 10px 30px rgba(14,31,25,0.05);
  text-decoration: none; color: inherit;
  transition: transform 420ms cubic-bezier(.22, 1, .28, 1),
              border-color 300ms ease, box-shadow 420ms ease;
}
.v-svc__card:hover {
  transform: translateY(-6px);
  border-color: rgba(16,158,117,0.45);
  box-shadow: 0 26px 54px rgba(14,31,25,0.10);
}
.v-svc__card:focus-visible { outline: 2px solid rgba(16,158,117,0.7); outline-offset: 3px; }
/* emerald wash rising out of the base, the same idiom the about page
   uses on its direction cards */
.v-svc__card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(16,158,117,0.09));
  transition: height 520ms cubic-bezier(.22, 1, .28, 1);
}
.v-svc__card:hover::before { height: 100%; }

/* the index, ghosted into the corner */
.v-svc__n {
  position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(20px, 2.2vw, 30px);
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(16,158,117,0.4);
  transition: color 380ms ease, -webkit-text-stroke-color 380ms ease;
}
.v-svc__card:hover .v-svc__n { color: rgba(16,158,117,0.14); -webkit-text-stroke-color: transparent; }

.v-svc__ico {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center; flex: none;
  background: rgba(16,158,117,0.10); border: 1px solid rgba(16,158,117,0.24);
  /* opacity is here because these icons are now reveal targets. reveal.css
     loads BEFORE this file and its .r-z transition has equal specificity,
     so this declaration wins and would drop opacity from the transition
     list entirely, making the icon snap in while it scaled. */
  transition: background 400ms ease, transform 500ms cubic-bezier(.22, 1, .28, 1),
              opacity 500ms ease;
}
.v-svc__card:hover .v-svc__ico { background: #109e75; transform: rotate(-8deg) scale(1.06); }
.v-svc__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-svc__card:hover .v-svc__ico i { background: #ffffff; }

.v-svc__k {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #0b7a58; margin: 0 0 10px;
}
.v-svc__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.12; letter-spacing: -0.015em;
  color: #0e1f19; margin: 0 0 12px; max-width: 24ch;
}
.v-svc__d {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: 0.9rem; line-height: 1.65; color: #5d7068; margin: 0 0 22px;
}
/* the action sits on the base line whatever the card's height */
.v-svc__go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0b6b4f;
  transition: color 320ms ease, gap 320ms ease;
}
.v-svc__go svg { width: 14px; height: 14px; }
.v-svc__card:hover .v-svc__go { color: #109e75; gap: 16px; }

@media (max-width: 1024px) {
  .v-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-svc__card { grid-column: span 1; }
}
@media (max-width: 640px) {
  .v-svc__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .v-svc::before { animation: none; }
  .v-svc__card, .v-svc__ico, .v-svc__go, .v-svc__n { transition: none; }
}


/* =====================================================================
   SERVICE DEEP DIVE — .v-dd

   One block, reused by every service section: intro, nine capabilities
   in a 3x3 (the one count that needs no layout tricks), closing line,
   CTA. Sections alternate tone with .v-dd--light so consecutive ones do
   not merge; the dark tone is the default.
   ===================================================================== */
.v-dd {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04120c 0%, #06231a 48%, #04120c 100%);
  color: rgba(255,255,255,0.78);
  padding: clamp(5rem, 9vw, 8rem) 0;
  scroll-margin-top: clamp(90px, 12vh, 130px);
}
.v-dd::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 74% 58% at 50% 30%, #000 22%, transparent 84%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 30%, #000 22%, transparent 84%);
  animation: v-swb-grid 44s linear infinite;
}
.v-dd::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 38% at 82% 12%, rgba(16,158,117,0.16) 0%, transparent 70%),
    radial-gradient(52% 38% at 10% 88%, rgba(15,110,86,0.14) 0%, transparent 70%);
}
.v-dd .v-sec__eyebrow { color: #14E185; }
.v-dd .v-sec__title   { color: #ffffff; }
.v-dd .v-sec__title .em { color: #14E185; }

.v-dd__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(1rem, 1.12vw, 1.12rem); line-height: 1.74;
  color: rgba(255,255,255,0.76); max-width: 760px;
  margin: clamp(1.3rem, 2.2vw, 1.9rem) auto 0; text-align: center;
}
.v-dd__kicker {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #14E185; text-align: center;
  margin: clamp(2.8rem, 5vw, 4rem) 0 clamp(1.6rem, 2.6vw, 2.2rem);
}

/* --- the capability grid ---
   Six columns so each group can size its own rows. Items default to
   span 2, which gives the plain 3x3 the nine-item sections want; a
   group of four or five overrides per item so no row is left ragged. */
.v-dd__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.v-dd__grid + .v-dd__kicker { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.v-dd__item {
  position: relative; overflow: hidden;
  grid-column: span var(--span, 2);
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,42,31,0.6) 0%, rgba(4,22,16,0.78) 100%);
  border: 1px solid rgba(125,168,152,0.18);
  transition: transform 420ms cubic-bezier(.22, 1, .28, 1),
              border-color 300ms ease, box-shadow 420ms ease;
}
.v-dd__item:hover {
  transform: translateY(-5px);
  border-color: rgba(20,225,133,0.45);
  box-shadow: 0 24px 50px rgba(0,0,0,0.42);
}
/* hairline that sweeps across the top */
.v-dd__item::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #14E185, transparent);
  transform: scaleX(0); transition: transform 560ms cubic-bezier(.22, 1, .28, 1);
}
.v-dd__item:hover::after { transform: scaleX(1); }

.v-dd__ico {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: rgba(16,158,117,0.14); border: 1px solid rgba(16,158,117,0.32);
  /* opacity is here because these icons are now reveal targets. reveal.css
     loads BEFORE this file and its .r-z transition has equal specificity,
     so this declaration wins and would drop opacity from the transition
     list entirely, making the icon snap in while it scaled. */
  transition: background 400ms ease, transform 500ms cubic-bezier(.22, 1, .28, 1),
              opacity 500ms ease;
}
.v-dd__item:hover .v-dd__ico { background: #109e75; transform: rotate(-8deg) scale(1.06); }
.v-dd__ico i {
  display: block; width: 20px; height: 20px; background: #14E185;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
  transition: background 400ms ease;
}
.v-dd__item:hover .v-dd__ico i { background: #04120c; }

.v-dd__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.14; letter-spacing: -0.012em;
  color: #ffffff; margin: 0 0 10px;
}
.v-dd__d {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: 0.87rem; line-height: 1.62; color: rgba(255,255,255,0.62); margin: 0;
}

/* --- closing --- */
.v-dd__close {
  margin: clamp(3rem, 5vw, 4.5rem) auto 0; max-width: 940px; text-align: center;
  padding-top: clamp(2.2rem, 3.6vw, 3.2rem);
  border-top: 1px solid rgba(125,168,152,0.18);
}
.v-dd__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.08; letter-spacing: -0.015em;
  color: #ffffff; margin: 0 0 clamp(22px, 3vw, 32px);
}
.v-dd__close__b .em { color: #14E185; }
.v-dd .v-btn--edge { color: #ffffff; border-color: rgba(20,225,133,0.6); }
.v-dd .v-btn--edge:hover { color: #04120c; }
.v-dd .v-btn--edge::before { background: #14E185; }


/* ---------------------------------------------------------------------
   Light tone. Only the surfaces and ink change — every dimension,
   transition and animation above is shared.
   --------------------------------------------------------------------- */
.v-dd--light {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8f6 52%, #ffffff 100%);
  color: #46584f;
}
.v-dd--light::before {
  background-image:
    radial-gradient(circle at 0 0, rgba(16,158,117,0.14) 1.5px, transparent 1.6px),
    linear-gradient(90deg, rgba(20,96,75,0.05) 1px, transparent 1px);
}
.v-dd--light::after {
  background:
    radial-gradient(52% 38% at 82% 12%, rgba(16,158,117,0.08) 0%, transparent 70%),
    radial-gradient(52% 38% at 10% 88%, rgba(16,158,117,0.06) 0%, transparent 70%);
}
.v-dd--light .v-sec__eyebrow,
.v-dd--light .v-dd__kicker { color: #0b7a58; }
.v-dd--light .v-sec__title { color: #0e1f19; }
.v-dd--light .v-sec__title .em { color: #109e75; }
.v-dd--light .v-dd__p { color: #46584f; }
.v-dd--light .v-dd__item {
  background: #ffffff; border-color: rgba(14,31,25,0.10);
  box-shadow: 0 10px 30px rgba(14,31,25,0.05);
}
.v-dd--light .v-dd__item:hover {
  border-color: rgba(16,158,117,0.45);
  box-shadow: 0 26px 54px rgba(14,31,25,0.10);
}
.v-dd--light .v-dd__item::after { background: linear-gradient(90deg, transparent, #109e75, transparent); }
.v-dd--light .v-dd__ico { background: rgba(16,158,117,0.10); border-color: rgba(16,158,117,0.24); }
.v-dd--light .v-dd__item:hover .v-dd__ico { background: #109e75; }
.v-dd--light .v-dd__ico i { background: #109e75; }
.v-dd--light .v-dd__item:hover .v-dd__ico i { background: #ffffff; }
.v-dd--light .v-dd__t { color: #0e1f19; }
.v-dd--light .v-dd__d { color: #5d7068; }
.v-dd--light .v-dd__close { border-top-color: rgba(14,31,25,0.10); }
.v-dd--light .v-dd__close__b { color: #0e1f19; }
.v-dd--light .v-dd__close__b .em { color: #109e75; }

@media (max-width: 900px) {
  .v-dd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-dd__item { grid-column: span 1; }
}
@media (max-width: 600px) { .v-dd__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .v-dd::before { animation: none; }
  .v-dd__item, .v-dd__ico, .v-dd__item::after { transition: none; }
}


/* =====================================================================
   FLOW — the before / automation / after strip.

   An optional block inside a deep dive. Three stages across: the manual
   sequence on the left in dashed, muted chips; the automation in the
   middle; the outcome on the right in solid emerald. A pulse travels the
   whole width so the strip reads left to right the way the argument
   does.

   Declared once here rather than in the automation section, because the
   same shape will serve any service that needs a before/after.
   ===================================================================== */
.v-flow {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 26px);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.v-flow__col {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  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);
}
.v-flow__k {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  margin: 0 0 16px;
}
.v-flow__col--before .v-flow__k { color: #5a6d64; }
.v-flow__col--after  .v-flow__k { color: #0b7a58; }

.v-flow__step {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.86rem; line-height: 1.4;
}
.v-flow__step + .v-flow__step { margin-top: 9px; }
/* before: dashed, muted, deliberately unresolved */
.v-flow__col--before .v-flow__step {
  border: 1px dashed rgba(14,31,25,0.20);
  color: #5d7068; background: #fbfcfc;
}
.v-flow__col--before .v-flow__step i {
  display: block; width: 15px; height: 15px; flex: none; background: #9aaba2;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
/* after: solid, emerald, resolved */
.v-flow__col--after .v-flow__step {
  border: 1px solid rgba(16,158,117,0.28);
  color: #0e1f19; font-weight: 600; background: rgba(16,158,117,0.07);
}
.v-flow__col--after .v-flow__step i {
  display: block; width: 15px; height: 15px; flex: none; background: #109e75;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}

/* the middle stage */
.v-flow__mid {
  align-self: center; display: grid; place-items: center; gap: 12px;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 22px);
  min-width: clamp(130px, 15vw, 190px);
  border-radius: 20px;
  background: linear-gradient(180deg, #0a2f25 0%, #04120c 100%);
  border: 1px solid rgba(16,158,117,0.34);
  box-shadow: 0 22px 48px rgba(4,18,12,0.28);
}
.v-flow__mid__ico {
  position: relative;
  width: 56px; height: 56px; border-radius: 17px;
  display: grid; place-items: center;
  background: rgba(20,225,133,0.14); border: 1px solid rgba(20,225,133,0.4);
}
.v-flow__mid__ico i {
  display: block; width: 24px; height: 24px; background: #14E185;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
.v-flow__mid__ico::after {
  content: ""; position: absolute; inset: -6px; border-radius: 20px;
  border: 1px solid rgba(20,225,133,0.45);
  animation: v-flow-pulse 3.4s ease-out infinite;
}
@keyframes v-flow-pulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  100% { transform: scale(1.45); opacity: 0; }
}
.v-flow__mid__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 0.98rem; letter-spacing: 0.02em; color: #ffffff; margin: 0; text-align: center;
}
.v-flow__mid__d {
  font-family: "Montserrat", Arial, sans-serif; font-size: 0.74rem; line-height: 1.5;
  color: rgba(255,255,255,0.6); margin: 0; text-align: center;
}

/* the travelling connector, drawn behind the three stages */
.v-flow__wire { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v-flow { position: relative; }
.v-flow__wire span {
  position: absolute; top: 50%; height: 2px;
  background: linear-gradient(90deg, rgba(16,158,117,0.1), rgba(16,158,117,0.45), rgba(16,158,117,0.1));
  overflow: hidden;
}
.v-flow__wire span::after {
  content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 100%;
  background: #14E185; box-shadow: 0 0 12px rgba(20,225,133,0.9);
  animation: v-flow-run 2.8s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes v-flow-run {
  from { transform: translateX(-40px); }
  to   { transform: translateX(var(--run, 300px)); }
}

@media (max-width: 880px) {
  .v-flow { grid-template-columns: 1fr; }
  .v-flow__wire { display: none; }
  .v-flow__mid { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .v-flow__mid__ico::after, .v-flow__wire span::after { animation: none; }
}


/* =====================================================================
   TECH RAIL — an optional strip naming the platforms a service ships on.

   Text rather than logos on purpose: the icon library has no Apple mark
   (only xcode.svg), and a rail with three real logos and one hand-drawn
   trademark would look worse than one with none. It also keeps the copy
   exactly as written.
   ===================================================================== */
.v-dd__tech {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: clamp(2.2rem, 3.6vw, 3rem);
}
.v-dd__tech__k {
  width: 100%; text-align: center;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #14E185; margin: 0 0 4px;
}
.v-dd--light .v-dd__tech__k { color: #0b7a58; }
.v-dd__tech span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px 10px 16px; border-radius: 999px;
  background: rgba(6,26,19,0.55); border: 1px solid rgba(125,168,152,0.24);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600;
  font-size: 0.85rem; color: #ffffff; white-space: nowrap;
  transition: border-color 300ms ease, background 300ms ease;
}
.v-dd__tech span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #14E185; box-shadow: 0 0 8px rgba(20,225,133,0.7);
}
.v-dd__tech span:hover { border-color: rgba(20,225,133,0.5); background: rgba(16,158,117,0.14); }
.v-dd--light .v-dd__tech span {
  background: #ffffff; border-color: rgba(14,31,25,0.10); color: #0e1f19;
  box-shadow: 0 6px 18px rgba(14,31,25,0.05);
}
.v-dd--light .v-dd__tech span::before { background: #109e75; box-shadow: none; }
.v-dd--light .v-dd__tech span:hover { border-color: rgba(16,158,117,0.45); background: #ffffff; }


/* =====================================================================
   STAGE RAIL — a linear progression across the top of a deep dive.

   Distinct from .v-flow, which contrasts a before against an after.
   This one has no contrast: it is one thing moving through stages, so
   it is a single line with markers on it and a lit segment travelling
   the whole way. Supplied as a `stages` key.
   ===================================================================== */
.v-dd__stages {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(8px, 1.4vw, 20px);
  max-width: 900px; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
}
/* the line the markers sit on, plus the segment running along it */
.v-dd__stages::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 21px; height: 2px;
  background: linear-gradient(90deg, rgba(16,158,117,0.15), rgba(16,158,117,0.5), rgba(16,158,117,0.15));
}
.v-dd__stages::after {
  content: ""; position: absolute; left: 6%; top: 20px; width: 60px; height: 4px;
  border-radius: 4px; background: #14E185;
  box-shadow: 0 0 14px rgba(20,225,133,0.9);
  animation: v-stage-run 5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes v-stage-run {
  0%   { transform: translateX(0);              opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(88vw - 60px)); opacity: 0; }
}
@media (min-width: 1024px) {
  .v-dd__stages::after {
    animation-name: v-stage-run-wide;
  }
  @keyframes v-stage-run-wide {
    0%   { transform: translateX(0);   opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(730px); opacity: 0; }
  }
}

.v-dd__stage { text-align: center; }
.v-dd__stage__dot {
  position: relative; z-index: 1;
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: #04120c; border: 2px solid rgba(20,225,133,0.55);
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: 0.92rem; color: #14E185;
}
.v-dd--light .v-dd__stage__dot { background: #ffffff; border-color: rgba(16,158,117,0.5); color: #109e75; }
.v-dd__stage__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.1; letter-spacing: -0.01em;
  color: #ffffff; margin: 0;
}
.v-dd--light .v-dd__stage__t { color: #0e1f19; }

@media (max-width: 640px) {
  .v-dd__stages { grid-auto-flow: row; grid-auto-columns: auto; gap: 18px; max-width: 320px; }
  .v-dd__stages::before, .v-dd__stages::after { display: none; }
  .v-dd__stage { display: flex; align-items: center; gap: 14px; text-align: left; }
  .v-dd__stage__dot { margin: 0; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-dd__stages::after { animation: none; opacity: 0; }
}


/* =====================================================================
   11 · THE TECHNOLOGY BEHIND WHAT WE BUILD

   Copy on the left, a cluster of logo tiles on the right — the first
   split layout on this page, which is deliberate: ten centred sections
   in a row need breaking before the last one.

   The cluster is a golden-angle spiral across a disc. Depth comes from
   the radius, so rim tiles render smaller and dimmer and the flat disc
   reads as a sphere. Each tile drifts on its own duration and delay so
   the cluster never resolves into a pattern.
   ===================================================================== */
.v-tc {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04120c 0%, #06231a 46%, #04120c 100%);
  color: rgba(255,255,255,0.78);
  padding: clamp(5rem, 9vw, 8rem) 0;
  scroll-margin-top: clamp(90px, 12vh, 130px);
}
.v-tc::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 70% 60% at 30% 40%, #000 20%, transparent 82%);
          mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 82%);
  animation: v-swb-grid 46s linear infinite;
}

/* Copy column widened from 0.85fr to 1.15fr. At 0.85 it was only 478px,
   while the headline's plain half ("The technology behind") needs ~613px on
   one line, so it always broke into two. The logo cloud on the right loses a
   little width and is unaffected by it. */
.v-tc__split {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.v-tc .v-sec__eyebrow { color: #14E185; }
.v-tc__title {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  /* Cap 4rem -> 3.5rem, and max-width dropped: 15ch cut "The technology
     behind" (21 characters) in half regardless of the column width. The
     widened column now governs the measure. */
  font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.018em;
  color: #ffffff; margin: 0 0 clamp(16px, 2vw, 24px);
}
.v-tc__title .em { color: #14E185; display: block; }
.v-tc__p {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.74;
  color: rgba(255,255,255,0.76); margin: 0 0 clamp(1.8rem, 3vw, 2.4rem); max-width: 52ch;
}

/* --- the category rail --- */
.v-tc__cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}
.v-tc__cats span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px; border-radius: 999px;
  background: rgba(6,26,19,0.6); border: 1px solid rgba(125,168,152,0.2);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600;
  font-size: 0.78rem; color: rgba(255,255,255,0.85); white-space: nowrap;
  transition: border-color 300ms ease, background 300ms ease;
}
.v-tc__cats span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; background: #14E185;
}
.v-tc__cats span:hover { border-color: rgba(20,225,133,0.5); background: rgba(16,158,117,0.14); }

/* --- the cluster --- */
.v-tc__cloud {
  position: relative; width: 100%; max-width: 620px;
  aspect-ratio: 1 / 1; margin: 0 auto;
}
/* the emerald bloom the cluster sits in front of */
.v-tc__cloud::before {
  content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16,158,117,0.24), transparent 72%);
  filter: blur(28px);
  animation: v-tc-breathe 9s ease-in-out infinite;
}
@keyframes v-tc-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.v-tc__logo {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(38px, 5.2vw, 62px); aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 26%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  opacity: var(--o, 1);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  animation: v-tc-float var(--t, 9s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: box-shadow 320ms ease;
}
@keyframes v-tc-float {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(0); }
  50%      { transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(-10px); }
}
.v-tc__logo img { width: 58%; height: 58%; object-fit: contain; }
.v-tc__logo:hover { box-shadow: 0 16px 36px rgba(20,225,133,0.4); }

@media (max-width: 980px) {
  .v-tc__split { grid-template-columns: 1fr; }
  .v-tc__title { max-width: none; }
  .v-tc__cloud { max-width: 460px; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .v-tc::before, .v-tc__cloud::before, .v-tc__logo { animation: none; }
}


/* =====================================================================
   12 · SERVICE SELECTION

   A router, not another pitch. Eight goals, each pointing at the section
   that answers it — the page's eight anchors turned into a decision
   path. Two columns of four so the whole table is scannable without
   scrolling, and every row is a link.
   ===================================================================== */
.v-sel {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8f6 52%, #ffffff 100%);
  color: #46584f;
  padding: clamp(5rem, 9vw, 8rem) 0;
  scroll-margin-top: clamp(90px, 12vh, 130px);
}
.v-sel::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.14) 1.5px, transparent 1.6px),
    linear-gradient(90deg, rgba(20,96,75,0.05) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 78% 60% at 50% 30%, #000 20%, transparent 82%);
          mask-image: radial-gradient(ellipse 78% 60% at 50% 30%, #000 20%, transparent 82%);
  animation: v-swb-grid 46s linear infinite;
}
.v-sel .v-sec__eyebrow { color: #0b7a58; }
.v-sel .v-sec__title   { color: #0e1f19; }
.v-sel .v-sec__title .em { color: #109e75; }
.v-sel .v-sec__lead    { color: #46584f; }

.v-sel__kicker {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #0b7a58; text-align: center;
  margin: clamp(2.6rem, 4.4vw, 3.6rem) 0 clamp(1.4rem, 2.2vw, 1.9rem);
}

.v-sel__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.v-sel__row {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(12px, 1.8vw, 22px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  border-radius: 18px; background: #ffffff;
  border: 1px solid rgba(14,31,25,0.10);
  box-shadow: 0 8px 24px rgba(14,31,25,0.04);
  text-decoration: none; color: inherit;
  transition: transform 380ms cubic-bezier(.22, 1, .28, 1),
              border-color 300ms ease, box-shadow 380ms ease;
}
.v-sel__row:hover {
  transform: translateY(-4px);
  border-color: rgba(16,158,117,0.45);
  box-shadow: 0 22px 46px rgba(14,31,25,0.09);
}
.v-sel__row:focus-visible { outline: 2px solid rgba(16,158,117,0.7); outline-offset: 3px; }
/* the emerald wash, sweeping from the left edge this time so the row
   reads as resolving toward its answer */
.v-sel__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(16,158,117,0.10), transparent 70%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 560ms cubic-bezier(.22, 1, .28, 1);
}
.v-sel__row:hover::before { transform: scaleX(1); }

.v-sel__goal {
  display: block;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 500;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem); line-height: 1.5;
  color: #46584f; margin: 0 0 8px;
}
.v-sel__svc {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.02rem, 1.3vw, 1.24rem); line-height: 1.12; letter-spacing: -0.012em;
  color: #0e1f19; margin: 0;
  transition: color 320ms ease, transform 460ms cubic-bezier(.22, 1, .28, 1);
}
.v-sel__svc::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px; flex: none;
  background: #109e75;
  transition: width 460ms cubic-bezier(.22, 1, .28, 1);
}
.v-sel__row:hover .v-sel__svc { color: #109e75; transform: translateX(4px); }
.v-sel__row:hover .v-sel__svc::before { width: 30px; }

.v-sel__go {
  justify-self: end; flex: none;
  width: clamp(34px, 3.6vw, 44px); height: clamp(34px, 3.6vw, 44px);
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(14,31,25,0.14); color: #0e1f19;
  transition: background 400ms ease, border-color 400ms ease,
              color 400ms ease, transform 460ms cubic-bezier(.22, 1, .28, 1);
}
.v-sel__go svg { width: 16px; height: 16px; }
.v-sel__row:hover .v-sel__go {
  background: #109e75; border-color: #109e75; color: #ffffff; transform: translateX(4px);
}

.v-sel__close {
  margin: clamp(3rem, 5vw, 4.4rem) auto 0; max-width: 860px; text-align: center;
  padding-top: clamp(2.2rem, 3.6vw, 3rem);
  border-top: 1px solid rgba(14,31,25,0.10);
}
.v-sel__close__b {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em;
  color: #0e1f19; margin: 0 0 clamp(22px, 3vw, 30px);
}
.v-sel__close__b .em { color: #109e75; }

@media (max-width: 780px) { .v-sel__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .v-sel::before { animation: none; }
  .v-sel__row, .v-sel__row::before, .v-sel__svc, .v-sel__go { transition: none; }
}


/* =====================================================================
   13 · FAQ

   Native <details>/<summary>. It is keyboard-operable, announced
   correctly by screen readers, and works with JavaScript off — all of
   which a div-and-click accordion would have had to reimplement badly.
   Single column rather than two, because a two-column accordion shifts
   the neighbouring column every time a row opens.
   ===================================================================== */
.v-faq {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04120c 0%, #06231a 46%, #04120c 100%);
  color: rgba(255,255,255,0.78);
  padding: clamp(5rem, 9vw, 8rem) 0;
  scroll-margin-top: clamp(90px, 12vh, 130px);
}
.v-faq::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 70% 58% at 50% 30%, #000 20%, transparent 84%);
          mask-image: radial-gradient(ellipse 70% 58% at 50% 30%, #000 20%, transparent 84%);
  animation: v-swb-grid 46s linear infinite;
}
.v-faq .v-sec__eyebrow { color: #14E185; }
.v-faq .v-sec__title   { color: #ffffff; }
.v-faq .v-sec__title .em { color: #14E185; }

.v-faq__list { max-width: 900px; margin: clamp(2.6rem, 4.4vw, 3.6rem) auto 0; }
.v-faq__q {
  border-radius: 16px;
  background: rgba(6,26,19,0.5);
  border: 1px solid rgba(125,168,152,0.18);
  transition: border-color 300ms ease, background 300ms ease;
}
.v-faq__q + .v-faq__q { margin-top: 10px; }
.v-faq__q:hover { border-color: rgba(20,225,133,0.4); }
.v-faq__q[open] { background: rgba(16,158,117,0.10); border-color: rgba(20,225,133,0.4); }

.v-faq__q summary {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(16px, 1.9vw, 22px) clamp(18px, 2.2vw, 26px);
  cursor: pointer; list-style: none;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.95rem, 1.2vw, 1.12rem); line-height: 1.25; letter-spacing: -0.008em;
  color: #ffffff;
}
/* the default disclosure triangle, gone in both engines */
.v-faq__q summary::-webkit-details-marker { display: none; }
.v-faq__q summary::marker { content: ''; }
.v-faq__q summary:focus-visible { outline: 2px solid rgba(20,225,133,0.7); outline-offset: -3px; border-radius: 16px; }

.v-faq__sign {
  margin-left: auto; flex: none; position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(20,225,133,0.45);
  transition: background 320ms ease, border-color 320ms ease, transform 420ms cubic-bezier(.22,1,.28,1);
}
/* a plus that becomes a minus, drawn rather than iconified */
.v-faq__sign::before, .v-faq__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; border-radius: 2px; background: #14E185;
  transform: translate(-50%, -50%);
  transition: transform 420ms cubic-bezier(.22, 1, .28, 1), background 320ms ease;
}
.v-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.v-faq__q[open] .v-faq__sign { background: #109e75; border-color: #109e75; transform: rotate(180deg); }
.v-faq__q[open] .v-faq__sign::before,
.v-faq__q[open] .v-faq__sign::after { background: #ffffff; }
.v-faq__q[open] .v-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

.v-faq__a {
  padding: 0 clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 24px) clamp(18px, 2.2vw, 26px);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(0.9rem, 1.02vw, 1rem); line-height: 1.72;
  color: rgba(255,255,255,0.7); margin: 0; max-width: 74ch;
}

@media (prefers-reduced-motion: reduce) {
  .v-faq::before { animation: none; }
  .v-faq__q, .v-faq__sign, .v-faq__sign::before, .v-faq__sign::after { transition: none; }
}