/* =====================================================================
   Contact page.

   Restructured so the decision to get in touch comes first and the
   information-gathering comes last:

     hero → routes → what happens next → form → people → why → faq → close

   The form is a five-step panel: one step on screen, a numbered rail
   above it showing the whole length. A wizard normally hides how long
   the form is, so the rail is not decoration — it is the thing that
   pays that cost back.

   ALIGNMENT: everything in the form column shares one left edge. That
   was measured, not eyeballed — an earlier version had headings sitting
   31px right of their own fields because a step number was inline.

   Type: Oswald headings, Montserrat body. No third family.
   ===================================================================== */

.v-ct {
  --line: rgba(14, 31, 25, 0.11);
  --mut: #5a6d64;
  --ink: #0e1f19;
}
.v-ct .v-wrap {
  max-width: 1240px; margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  position: relative; z-index: 1;
}

.v-ct__eyebrow {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: #0b7a58;
  margin: 0 0 18px; text-align: center;
}
.v-on-dark .v-ct__eyebrow { color: #14E185; }
.v-ct__h {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em;
  color: #0e1f19; margin: 0 auto clamp(18px, 2.4vw, 24px); text-align: center; max-width: 20ch;
}
.v-ct__h .em { color: #109e75; }
.v-on-dark .v-ct__h { color: #ffffff; }
.v-on-dark .v-ct__h .em { color: #14E185; }
.v-ct__lead {
  font-family: "Montserrat", Arial, sans-serif; font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.8; color: #5a6d64; max-width: 58ch;
  margin: 0 auto clamp(38px, 4.6vw, 56px); text-align: center;
}
.v-on-dark .v-ct__lead { color: #a8c4b8; }


/* =====================================================================
   01 · HERO
   ===================================================================== */
.v-cth {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #0d2a20 0%, #061410 58%, #04100c 100%);
  padding: clamp(6rem, 11vw, 9.5rem) 0 clamp(5rem, 8vw, 7rem);
  text-align: center;
}
.v-cth::before {
  content: ""; position: absolute; inset: -80px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 225, 133, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 225, 133, 0.05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 26%, black 8%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 26%, black 8%, transparent 70%);
  animation: v-cth-grid 46s linear infinite;
}
@keyframes v-cth-grid { to { background-position: 56px 56px, 56px 56px; } }

/* --------------------------------------------------------------------
   Animated grid, replicated from the hub page across the rest of contact.
   The hero already had its own (56px, radially masked) and keeps it; these
   carry the shared 48px one so the page reads as a single surface instead
   of alternating flat bands.

   Tint is a variable so only the colour changes between light and dark
   sections, never the geometry. Dark sections are named explicitly rather
   than keyed off .v-on-dark, because .v-cth is also .v-on-dark and must
   not pick up a second grid on top of the one it already has.

   v-fc-grid comes from site.css at the same 48px step, so every section on
   the page drifts in phase.
   -------------------------------------------------------------------- */
.v-rt, .v-nx, .v-ctf, .v-pp, .v-why, .v-ctq, .v-close {
  position: relative;
  --grid: rgba(20, 96, 75, 0.05);
}
.v-nx, .v-close { --grid: rgba(20, 225, 133, 0.055); }

.v-rt::before, .v-nx::before, .v-ctf::before, .v-pp::before,
.v-why::before, .v-ctq::before, .v-close::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  animation: v-fc-grid 36s linear infinite;
}
/* Content sits above the overlay. Every one of these sections has exactly
   one .v-wrap child, so this covers all of them. */
.v-rt > .v-wrap, .v-nx > .v-wrap, .v-ctf > .v-wrap, .v-pp > .v-wrap,
.v-why > .v-wrap, .v-ctq > .v-wrap, .v-close > .v-wrap {
  position: relative; z-index: 1;
}
.v-cth__title {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.4rem, 5.8vw, 5rem); line-height: 0.98; letter-spacing: -0.024em;
  color: #ffffff; margin: 0 auto clamp(20px, 2.8vw, 28px); max-width: 17ch;
}
.v-cth__title .em { color: #14E185; }
.v-cth__p {
  font-family: "Montserrat", Arial, sans-serif; font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.8; color: #b9d6c9; max-width: 56ch; margin: 0 auto clamp(34px, 4vw, 44px);
}
.v-cth__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.v-cth__trust {
  margin: clamp(30px, 3.6vw, 40px) 0 0;
  font-family: "Montserrat", Arial, sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.05em; color: #6f9686;
}


/* =====================================================================
   02 · ROUTES
   ===================================================================== */
.v-rt { background: #f4f8f6; padding: clamp(4.5rem, 8vw, 7rem) 0; }
.v-rt__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(18px, 2.4vw, 26px); max-width: 1040px; margin: 0 auto;
}
.v-rt__card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(30px, 3.6vw, 44px);
  border-radius: 20px; background: #ffffff; border: 1px solid rgba(14, 31, 25, 0.11);
  /* opacity is in this list because the element is a reveal target and
     reveal.css loads BEFORE this file at equal specificity, so this
     declaration wins and would otherwise drop the fade entirely. */
  transition: transform 380ms cubic-bezier(.22, 1, .28, 1), box-shadow 380ms ease, border-color 380ms ease, opacity 380ms ease;
}
.v-rt__card:hover {
  transform: translateY(-5px); border-color: rgba(16, 158, 117, 0.32);
  box-shadow: 0 26px 56px rgba(14, 31, 25, 0.12);
}
.v-rt__card--lead { background: linear-gradient(160deg, #0d2a20, #04120c); border-color: transparent; }
.v-rt__n {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; color: #0b7a58; margin: 0 0 20px;
}
.v-rt__card--lead .v-rt__n { color: #14E185; }
.v-rt__ic {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center; background: rgba(16, 158, 117, 0.12);
}
.v-rt__card--lead .v-rt__ic { background: rgba(20, 225, 133, 0.16); }
.v-rt__ic i {
  width: 23px; height: 23px; display: block;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  background: #0b7a58;
}
.v-rt__card--lead .v-rt__ic i { background: #14E185; }
.v-rt__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.12; letter-spacing: -0.01em;
  color: #0e1f19; margin: 0 0 8px;
}
.v-rt__card--lead .v-rt__t { color: #ffffff; }
.v-rt__meta {
  font-family: "Montserrat", Arial, sans-serif; font-size: 12.5px; font-weight: 600;
  color: #0b7a58; margin: 0 0 16px;
}
.v-rt__card--lead .v-rt__meta { color: #14E185; }
.v-rt__d {
  font-family: "Montserrat", Arial, sans-serif; font-size: 14.5px; line-height: 1.75;
  color: #5a6d64; margin: 0 0 26px; flex: 1;
}
.v-rt__card--lead .v-rt__d { color: #a8c4b8; }


/* =====================================================================
   03 · WHAT HAPPENS NEXT
   ===================================================================== */
.v-nx { background: #04120c; padding: clamp(4.5rem, 8vw, 7rem) 0; }
.v-nx__track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.v-nx__step { position: relative; padding-top: 32px; }
.v-nx__step::before {
  content: ""; position: absolute; top: 13px; left: 0; right: 0;
  height: 1px; background: rgba(255, 255, 255, 0.1);
}
.v-nx__step::after {
  content: ""; position: absolute; top: 8px; left: 0;
  width: 11px; height: 11px; border-radius: 999px;
  background: #14E185; box-shadow: 0 0 0 4px rgba(20, 225, 133, 0.16);
}
.v-nx__n {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; color: #14E185; margin: 0 0 10px;
}
.v-nx__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.15rem); color: #ffffff; margin: 0 0 10px; line-height: 1.22;
}
.v-nx__d {
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; line-height: 1.72;
  color: #8fb3a3; margin: 0;
}
.v-nx__foot {
  margin: clamp(34px, 4vw, 46px) 0 0; text-align: center;
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; font-weight: 600; color: #6f9686;
}


/* =====================================================================
   04 · THE FORM — a stepped panel
   ===================================================================== */
.v-ctf { background: #ffffff; padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); }

/* Header is LEFT-aligned to the panel's measure, not centred like the
   others: a centred title floating over a left-aligned panel reads as two
   unrelated blocks. */
.v-ctf__head { max-width: 920px; margin: 0 auto; }
.v-ctf__head .v-ct__eyebrow,
.v-ctf__head .v-ct__h { text-align: left; margin-left: 0; margin-right: 0; }
.v-ctf__head .v-ct__h { max-width: 26ch; margin-bottom: clamp(26px, 3vw, 34px); }

.v-panel {
  max-width: 920px; margin: 0 auto;
  background: #ffffff; border: 1px solid rgba(14, 31, 25, 0.11);
  border-radius: clamp(16px, 1.8vw, 22px); overflow: hidden;
  box-shadow: 0 26px 60px rgba(14, 31, 25, 0.09);
}

/* --- step rail --- */
.v-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
  background: #f9fbfa; border-bottom: 1px solid rgba(14, 31, 25, 0.11);
}
.v-rail__i { position: relative; min-width: 0; }
.v-rail__i + .v-rail__i::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: auto;
  width: 1px; height: 22px; background: rgba(14, 31, 25, 0.09);
}
.v-rail__b {
  width: 100%; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 8px 18px;
  transition: background 200ms ease;
}
.v-rail__b:disabled { cursor: default; }
.v-rail__b:not(:disabled):hover { background: rgba(16, 158, 117, 0.05); }
.v-rail__n {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: #ffffff; border: 1px solid rgba(14, 31, 25, 0.14); color: #5a6d64;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}
.v-rail__n svg { width: 13px; height: 13px; }
.v-rail__l {
  font-family: "Montserrat", Arial, sans-serif; font-size: 11.5px; font-weight: 600;
  color: #5a6d64; text-align: center; line-height: 1.3;
  transition: color 240ms ease;
}
.v-rail__i.is-on .v-rail__n { background: #0b6b4f; border-color: #0b6b4f; color: #ffffff; }
.v-rail__i.is-on .v-rail__l { color: #0e1f19; }
.v-rail__i.is-done .v-rail__n { background: rgba(16, 158, 117, 0.13); border-color: rgba(16, 158, 117, 0.4); color: #0b6b4f; }
.v-rail__i.is-done .v-rail__l { color: #46584f; }

/* --- panel body --- */
.v-panel__body { padding: clamp(28px, 3.6vw, 46px); }
.v-panel__step {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #0b7a58; margin: 0 0 12px;
}
.v-panel__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.14; letter-spacing: -0.008em;
  color: #0e1f19; margin: 0 0 10px;
}
.v-panel__hint {
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; line-height: 1.7;
  color: #5a6d64; margin: 0 0 clamp(22px, 2.6vw, 30px); max-width: 66ch;
}
.v-panel__t + .v-chips,
.v-panel__t + .v-fs__body,
.v-panel__t + * { margin-top: clamp(22px, 2.6vw, 30px); }
.v-panel__hint + .v-chips,
.v-panel__hint + .v-fs__body { margin-top: 0; }

/* --- panel foot --- */
.v-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 2.2vw, 24px) clamp(28px, 3.6vw, 46px);
  background: #f9fbfa; border-top: 1px solid rgba(14, 31, 25, 0.11);
}
.v-panel__req {
  font-family: "Montserrat", Arial, sans-serif; font-size: 12.5px; color: #5a6d64;
}
/* The form's Back button: the shared button, outlined. Same shape and
   same wipe as everything else — only the resting fill differs, so a
   secondary action still recedes next to Continue. */
.v-back {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 26px; border: 0; border-radius: 4px; cursor: pointer;
  background: transparent; color: #04120c;
  box-shadow: inset 0 0 0 1.5px rgba(4, 18, 12, 0.28);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  transition: color 140ms cubic-bezier(0.694, 0, 0.335, 1), box-shadow 200ms ease;
}
.v-back > * { position: relative; z-index: 1; }
.v-back::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: #14E185; backface-visibility: hidden; transform: translateZ(0);
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  transition: clip-path 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
}
.v-back:hover::before { clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%); }
.v-back svg { width: 15px; height: 15px; }
.v-back:hover { color: #04120c; box-shadow: inset 0 0 0 1.5px #14E185; }







.v-sub__spin {
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid rgba(20, 225, 133, 0.3); border-top-color: #14E185;
  animation: v-spin 700ms linear infinite;
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* --- fields --- */
.v-fs__body { display: grid; gap: clamp(16px, 2vw, 22px); }
.v-fs__body--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .v-fs__body--2 { grid-template-columns: 1fr; } }

.v-fd { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.v-fd__l {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: 13px; color: #0e1f19;
}
.v-fd__l s { text-decoration: none; color: #0b7a58; }
.v-fd__opt { font-weight: 500; color: #5a6d64; }
.v-fd input,
.v-fd textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(14, 31, 25, 0.13); border-radius: 11px; background: #f9fbfa;
  font-family: "Montserrat", Arial, sans-serif; font-size: 15px; color: #0e1f19;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.v-fd textarea { min-height: 160px; resize: vertical; line-height: 1.7; }
.v-fd input::placeholder, .v-fd textarea::placeholder { color: #93a79d; }
.v-fd input:focus, .v-fd textarea:focus {
  outline: none; background: #ffffff;
  border-color: #109e75; box-shadow: 0 0 0 3px rgba(16, 158, 117, 0.15);
}
.v-fd.is-bad input, .v-fd.is-bad textarea { border-color: #b42318; background: #fef4f3; }
.v-fd.is-bad input:focus, .v-fd.is-bad textarea:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.13); }
.v-fd__err {
  display: flex; align-items: center; gap: 6px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 12.5px; font-weight: 600; color: #b42318;
}
.v-fd__err svg { width: 14px; height: 14px; flex: none; }

/* --- chips --- */
.v-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 780px) { .v-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 11px; cursor: pointer;
  background: #f9fbfa; border: 1px solid rgba(14, 31, 25, 0.13);
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; font-weight: 600; color: #46584f;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.v-chip:hover { border-color: rgba(16, 158, 117, 0.5); background: #ffffff; }
.v-chip i {
  width: 17px; height: 17px; flex: none; display: block;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  background: currentColor;
}
.v-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v-chip.is-on { background: #0b6b4f; border-color: #0b6b4f; color: #ffffff; }
.v-chip input:focus-visible + i { outline: 2px solid #109e75; outline-offset: 3px; }

/* --- segmented --- */
.v-seg { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; }
.v-seg label {
  position: relative;
  padding: 11px 17px; border-radius: 10px; cursor: pointer;
  background: #f9fbfa; border: 1px solid rgba(14, 31, 25, 0.13);
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; font-weight: 600; color: #46584f;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.v-seg label:hover { border-color: rgba(16, 158, 117, 0.5); background: #ffffff; }
.v-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v-seg label.is-on { background: rgba(16, 158, 117, 0.11); border-color: #0b6b4f; color: #0b6b4f; }
.v-seg input:focus-visible + span { outline: 2px solid #109e75; outline-offset: 4px; border-radius: 4px; }

.v-cbx {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 16px 18px; border-radius: 11px; background: #f9fbfa; border: 1px solid rgba(14, 31, 25, 0.13);
}
.v-cbx input { margin-top: 1px; width: 17px; height: 17px; accent-color: #0b6b4f; flex: none; }
.v-cbx span {
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; line-height: 1.65; color: #46584f;
}

/* honeypot — off-screen, never display:none (some bots skip hidden fields) */
.v-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.v-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 24px; padding: 16px 18px; border-radius: 11px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; line-height: 1.65;
}
.v-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.v-note--bad { background: #fef4f3; border: 1px solid rgba(180, 35, 24, 0.26); color: #91231a; }
.v-note--warn { background: #fdf6ec; border: 1px solid rgba(138, 84, 6, 0.28); color: #7a4a05; }
.v-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- success --- */
.v-panel--done { text-align: center; padding: clamp(44px, 6vw, 72px) clamp(28px, 4vw, 56px); }
.v-done__tick {
  width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 999px;
  background: linear-gradient(150deg, #14E185, #0b7a58);
  display: grid; place-items: center; box-shadow: 0 16px 34px rgba(16, 158, 117, 0.3);
  animation: v-pop 520ms cubic-bezier(.22, 1.4, .36, 1) both;
}
@keyframes v-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.v-done__tick svg { width: 29px; height: 29px; color: #04120c; }
.v-panel--done h3 {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.45rem, 2.6vw, 2rem); color: #0e1f19; margin: 0 0 14px;
}
.v-panel--done p {
  font-family: "Montserrat", Arial, sans-serif; font-size: 15px; line-height: 1.8;
  color: #5a6d64; margin: 0 auto; max-width: 48ch;
}
.v-done__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.v-done__again {
  margin-top: 20px; background: none; border: 0; cursor: pointer;
  font-family: "Montserrat", Arial, sans-serif; font-size: 13px; font-weight: 700;
  color: #0b7a58; text-decoration: underline; text-underline-offset: 3px;
}


/* =====================================================================
   05 · PEOPLE
   ===================================================================== */
.v-pp { background: #f4f8f6; padding: clamp(4.5rem, 8vw, 7rem) 0; }
/* =====================================================================
   People cards. Portrait tiles: the photo fills the card, a gradient veil
   rises from the bottom, and the name, role, bio and links sit on it.
   Reference layout supplied by Shahid; palette swapped from its blue to
   the Veltrix greens.
   ===================================================================== */
.v-pp__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  max-width: 760px; margin: 0 auto;   /* two cards, so do not let them sprawl */
}
.v-pp__card {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4.15; border-radius: 20px;
  display: grid; place-items: center;          /* centres the monogram bed */
  background: linear-gradient(165deg, #14E185 0%, #0b7a58 55%, #04120c 100%);
  /* opacity is in this list because the element is a reveal target and
     reveal.css loads BEFORE this file at equal specificity, so this
     declaration wins and would otherwise drop the fade entirely. */
  transition: transform 380ms cubic-bezier(.22, 1, .28, 1), box-shadow 380ms ease, opacity 380ms ease;
}
.v-pp__card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(4, 18, 12, 0.22); }

.v-pp__mono {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 5rem); color: rgba(4, 18, 12, 0.5);
}
/* Visible by default, hidden by onError. Starting hidden and revealing on
   load looked safer but loses the race: a cached file completes BEFORE the
   load listener attaches, onLoad never fires, and the photo stays hidden
   forever. An image that has not painted yet simply shows the monogram
   underneath, so defaulting to visible costs nothing.

   Desaturated to match the reference and to stop two unrelated portraits
   fighting the palette; colour returns on hover. */
.v-pp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.04);
  /* opacity is in this list because the element is a reveal target and
     reveal.css loads BEFORE this file at equal specificity, so this
     declaration wins and would otherwise drop the fade entirely. */
  transition: filter 420ms ease, transform 480ms cubic-bezier(.22, 1, .28, 1), opacity 480ms ease;
}
.v-pp__card:hover .v-pp__img { filter: grayscale(0.25) contrast(1); transform: scale(1.03); }

/* The veil is what makes the text legible over any photo. Transparent at the
   top so the face stays clear, opaque emerald-to-black by the time it
   reaches the copy. */
.v-pp__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4, 18, 12, 0) 0%,
    rgba(11, 122, 88, 0.30) 38%,
    rgba(7, 60, 44, 0.88) 62%,
    rgba(4, 18, 12, 0.97) 100%);
}

.v-pp__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 24px);
  text-align: center;
}
.v-pp__n {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.05; letter-spacing: -0.005em;
  color: #ffffff; margin: 0 0 6px;
}
.v-pp__r {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: #14E185; margin: 0 0 10px;
}
.v-pp__bio {
  font-family: "Montserrat", Arial, sans-serif; font-size: 12.5px; line-height: 1.62;
  /* No link row under this any more, so the bio is the last thing in the
     card and carries the bottom spacing itself. */
  color: rgba(255, 255, 255, 0.82); margin: 0;
}


/* =====================================================================
   06 · WHY
   ===================================================================== */
.v-why { background: #ffffff; padding: clamp(4.5rem, 8vw, 7rem) 0; }
.v-why__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 40px); max-width: 1040px; margin: 0 auto;
}
.v-why__i { text-align: center; }
.v-why__ic {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 18px;
  display: grid; place-items: center; background: rgba(16, 158, 117, 0.11);
}
.v-why__ic i {
  width: 23px; height: 23px; display: block;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  background: #0b7a58;
}
.v-why__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #0e1f19; margin: 0 0 10px;
}
.v-why__d {
  font-family: "Montserrat", Arial, sans-serif; font-size: 14px; line-height: 1.75;
  color: #5a6d64; margin: 0 auto; max-width: 34ch;
}


/* =====================================================================
   07 · FAQ
   ===================================================================== */
.v-ctq { background: #f4f8f6; padding: clamp(4.5rem, 8vw, 7rem) 0; }
.v-ctq__list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
.v-ctq__i { border: 1px solid rgba(14, 31, 25, 0.11); border-radius: 13px; background: #ffffff; overflow: hidden; }
.v-ctq__i[open] { border-color: rgba(16, 158, 117, 0.32); }
.v-ctq__i summary {
  cursor: pointer; list-style: none; padding: 19px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: 14.5px; color: #0e1f19;
}
.v-ctq__i summary::-webkit-details-marker { display: none; }
.v-ctq__i summary::after {
  content: "+"; flex: none;
  font-family: "Montserrat", Arial, sans-serif; font-size: 21px; font-weight: 400; color: #0b7a58;
  transition: transform 260ms ease;
}
.v-ctq__i[open] summary::after { transform: rotate(45deg); }
.v-ctq__i p {
  margin: 0; padding: 0 24px 22px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 14px; line-height: 1.8; color: #5a6d64;
}


/* =====================================================================
   08 · CLOSE
   ===================================================================== */
.v-close {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 110% 130% at 50% 100%, #0d2a20 0%, #04120c 62%);
  padding: clamp(5rem, 9vw, 8rem) 0; text-align: center;
}
.v-close__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.022em;
  color: #ffffff; margin: 0 auto clamp(18px, 2.4vw, 24px); max-width: 18ch;
}
.v-close__t .em { color: #14E185; }
.v-close__p {
  font-family: "Montserrat", Arial, sans-serif; font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.8; color: #a8c4b8; max-width: 52ch; margin: 0 auto clamp(32px, 4vw, 42px);
}
.v-close__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 720px) {
  /* The rail turns vertical rather than squeezing five labels into a row
     that cannot hold them. */
  .v-rail { grid-auto-flow: row; grid-auto-columns: auto; }
  .v-rail__b { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 13px 18px; }
  .v-rail__l { text-align: left; }
  .v-rail__i + .v-rail__i::before { left: 18px; right: 18px; top: 0; width: auto; height: 1px; }
  .v-panel__foot { flex-direction: column-reverse; align-items: stretch; }
  .v-panel__foot .v-sub { justify-content: center; }
  .v-back { justify-content: center; }
  .v-panel__req { text-align: center; }
  .v-cth__btns .v-btn, .v-close__btns .v-btn { width: 100%; justify-content: center; }
  .v-chips { grid-template-columns: 1fr; }
  .v-nx__step::before { display: none; }
  /* One portrait per row on narrow screens, and shorter than the desktop
     3:4.15 so a single card does not fill the whole phone. */
  .v-pp__grid { grid-template-columns: 1fr; max-width: 380px; }
  .v-pp__card { aspect-ratio: 3 / 3.7; }
}
@media (prefers-reduced-motion: reduce) {
  .v-cth::before, .v-sub__spin, .v-done__tick,
  .v-rt::before, .v-nx::before, .v-ctf::before, .v-pp::before,
  .v-why::before, .v-ctq::before, .v-close::before { animation: none; }
}