/* ==========================================================================
   VoyageVixen — public site design system (2026)

   Single stylesheet for the marketing site. Replaces the old
   public.css (legacy inuit.css/MissTravel build) + luxury-theme.css
   (!important override layer) + per-partial inline <style> blocks.

   Sections
     1.  Tokens
     2.  Reset & base
     3.  Typography
     4.  Layout primitives
     5.  Buttons
     6.  Forms
     7.  Site header
     8.  Site footer
     9.  Hero
     10. Sections & content blocks
     11. Cards, steps, stats, destinations
     12. Sidebar layout (help centre)
     13. Accordion
     14. Member browse & profile
     15. Prose / legacy content classes
     16. Utilities
     17. Motion, focus, print
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* --- Colour -------------------------------------------------------------
     Contrast against white (WCAG 2.1):
       --vv-ink        17.1:1   headings, body copy
       --vv-ink-mid     7.2:1   secondary body copy
       --vv-ink-mute    3.9:1   LARGE text and decorative only, never body
       --vv-clay        4.5:1   links, primary action (white text on clay: 4.5:1)
       --vv-teal        5.9:1   trust / verification semantics
     ---------------------------------------------------------------------- */
  --vv-ink: #0c1c2b;
  --vv-ink-soft: #16304a;
  --vv-ink-mid: #405a72;
  --vv-ink-mute: #6b8397;

  --vv-paper: #ffffff;
  --vv-sand: #fbf8f3;
  --vv-sand-deep: #f3ede3;
  --vv-line: #e4dfd5;
  --vv-line-strong: #cfc7b8;

  --vv-clay: #c0563a;
  --vv-clay-dark: #a4462d;
  --vv-clay-soft: #fbede8;

  --vv-teal: #14706c;
  --vv-teal-dark: #0e5451;
  --vv-teal-soft: #e2f0ef;

  /* On dark (ink) surfaces */
  --vv-on-ink: #f4f1ea;
  --vv-on-ink-dim: #b9c6d2;
  --vv-on-ink-line: rgba(244, 241, 234, 0.16);

  /* --- Type -------------------------------------------------------------- */
  --vv-font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --vv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --vv-t-xs: 0.8125rem;   /* 13 */
  --vv-t-sm: 0.9375rem;   /* 15 */
  --vv-t-base: 1.0625rem; /* 17 */
  --vv-t-md: clamp(1.125rem, 0.3vw + 1.05rem, 1.25rem);
  --vv-t-lg: clamp(1.3125rem, 0.9vw + 1.1rem, 1.625rem);
  --vv-t-xl: clamp(1.625rem, 1.8vw + 1.15rem, 2.25rem);
  --vv-t-2xl: clamp(2.125rem, 3.2vw + 1.1rem, 3.25rem);
  --vv-t-3xl: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  --vv-lh-tight: 1.08;
  --vv-lh-snug: 1.25;
  --vv-lh-body: 1.65;

  /* --- Space ------------------------------------------------------------- */
  --vv-s1: 0.25rem;
  --vv-s2: 0.5rem;
  --vv-s3: 0.75rem;
  --vv-s4: 1rem;
  --vv-s5: 1.5rem;
  --vv-s6: 2rem;
  --vv-s7: 2.5rem;
  --vv-s8: 3rem;
  --vv-s9: 4rem;
  --vv-s10: 5rem;

  --vv-section: clamp(3.5rem, 7vw, 7rem);
  --vv-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --vv-max: 1180px;
  --vv-max-narrow: 900px;
  --vv-max-prose: 68ch;

  /* --- Shape ------------------------------------------------------------- */
  --vv-r-sm: 6px;
  --vv-r: 12px;
  --vv-r-lg: 20px;
  --vv-r-pill: 999px;

  --vv-sh-1: 0 1px 2px rgba(12, 28, 43, 0.06), 0 2px 8px rgba(12, 28, 43, 0.05);
  --vv-sh-2: 0 4px 12px rgba(12, 28, 43, 0.07), 0 12px 32px rgba(12, 28, 43, 0.08);
  --vv-sh-3: 0 20px 60px rgba(12, 28, 43, 0.18);

  --vv-header-h: 72px;
  --vv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--vv-header-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--vv-sand);
  color: var(--vv-ink);
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-base);
  line-height: var(--vv-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--vv-clay);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color 0.18s var(--vv-ease);
}

a:hover,
a:focus-visible {
  color: var(--vv-clay-dark);
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px solid var(--vv-line);
  margin: var(--vv-s7) 0;
}

::selection {
  background: var(--vv-clay);
  color: #fff;
}

.vv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--vv-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--vv-r-sm) 0;
}

.vv-skip:focus {
  left: 0;
  text-decoration: none;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--vv-s4);
  font-family: var(--vv-font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: var(--vv-lh-snug);
  letter-spacing: -0.015em;
  color: var(--vv-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--vv-t-2xl);
  line-height: var(--vv-lh-tight);
}
h2 {
  font-size: var(--vv-t-xl);
}
h3 {
  font-size: var(--vv-t-lg);
}
h4 {
  font-size: var(--vv-t-md);
}
h5,
h6 {
  font-size: var(--vv-t-base);
  font-family: var(--vv-font-body);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--vv-s4);
  max-width: var(--vv-max-prose);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--vv-t-sm);
}

blockquote {
  margin: 0;
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-lg);
  line-height: 1.4;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* Eyebrow / kicker */
.vv-eyebrow {
  display: block;
  margin: 0 0 var(--vv-s3);
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vv-teal);
}

.vv-lede {
  font-size: var(--vv-t-md);
  color: var(--vv-ink-mid);
  max-width: 60ch;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.vv-container,
.container {
  width: 100%;
  max-width: var(--vv-max);
  margin-inline: auto;
  padding-inline: var(--vv-gutter);
}

.vv-container--narrow,
.container--md,
.container.Med {
  max-width: var(--vv-max-narrow);
}

.root {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.vv-main {
  flex: 1 0 auto;
  display: block;
}

/* Simple auto-fit grid */
.vv-grid {
  display: grid;
  gap: var(--vv-s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.vv-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.vv-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.vv-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

/* Two-column split: media + copy */
.vv-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.vv-split__media img {
  width: 100%;
  border-radius: var(--vv-r-lg);
  box-shadow: var(--vv-sh-2);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .vv-split {
    grid-template-columns: 1fr 1fr;
  }
  .vv-split--mediaRight .vv-split__media {
    order: 2;
  }
}

/* --- Legacy inuit.css grid (kept for help-centre content) --------------- */

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 calc(var(--vv-s5) * -1);
  padding: 0;
  list-style: none;
}

.grid--rev {
  flex-direction: row-reverse;
}

.grid__item {
  width: 100%;
  padding-left: var(--vv-s5);
  min-width: 0;
}

.one-whole {
  width: 100%;
}

@media (min-width: 720px) {
  .one-half,
  .lap-and-up-one-half {
    width: 50%;
  }
  .one-third,
  .lap-and-up-one-third {
    width: 33.3333%;
  }
  .two-thirds {
    width: 66.6666%;
  }
  .one-quarter {
    width: 25%;
  }
  .three-quarters {
    width: 75%;
  }
}

@media (max-width: 719px) {
  .palm-one-whole {
    width: 100%;
  }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.vv-btn,
.btn,
.btn--primary,
.btn--transparent--primary,
.btn--outline-white,
.btn-warning {
  --_bg: var(--vv-clay);
  --_fg: #fff;
  --_bd: var(--vv-clay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--_bd);
  border-radius: var(--vv-r-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--vv-ease), border-color 0.18s var(--vv-ease),
    color 0.18s var(--vv-ease), transform 0.18s var(--vv-ease),
    box-shadow 0.18s var(--vv-ease);
}

.vv-btn:hover,
.btn:hover,
.btn--primary:hover,
.btn-warning:hover {
  --_bg: var(--vv-clay-dark);
  --_bd: var(--vv-clay-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--vv-sh-2);
}

.vv-btn--lg {
  padding: 1.05em 2.1em;
  font-size: var(--vv-t-base);
}

.vv-btn--full {
  width: 100%;
}

/* Secondary: ink outline on light surfaces */
.vv-btn--ghost,
.btn--transparent--primary {
  --_bg: transparent;
  --_fg: var(--vv-ink);
  --_bd: var(--vv-line-strong);
}

.vv-btn--ghost:hover,
.btn--transparent--primary:hover {
  --_bg: var(--vv-ink);
  --_fg: #fff;
  --_bd: var(--vv-ink);
  color: #fff;
}

/* Tertiary: quiet text button */
.vv-btn--quiet {
  --_bg: transparent;
  --_fg: var(--vv-clay);
  --_bd: transparent;
  padding-inline: 0.4em;
}

.vv-btn--quiet:hover {
  --_bg: transparent;
  --_bd: transparent;
  --_fg: var(--vv-clay-dark);
  box-shadow: none;
  text-decoration: underline;
}

/* On dark surfaces */
.vv-btn--onInk,
.btn--outline-white {
  --_bg: transparent;
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, 0.5);
}

.vv-btn--onInk:hover,
.btn--outline-white:hover {
  --_bg: #fff;
  --_fg: var(--vv-ink);
  --_bd: #fff;
  color: var(--vv-ink);
}

.vv-btn--solidWhite {
  --_bg: #fff;
  --_fg: var(--vv-ink);
  --_bd: #fff;
}

.vv-btn--solidWhite:hover {
  --_bg: var(--vv-sand-deep);
  --_fg: var(--vv-ink);
  --_bd: var(--vv-sand-deep);
  color: var(--vv-ink);
}

.vv-btn__icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke-width: 2;
  transition: transform 0.18s var(--vv-ease);
}

.vv-btn:hover .vv-btn__icon {
  transform: translateX(2px);
}

/* Legacy modifiers still referenced by kept templates */
.btn--fit {
  width: 100%;
}

.btn--thin {
  padding: 0.5em 1em;
}

.BlankBTN {
  --_bg: transparent;
  --_bd: transparent;
  --_fg: currentColor;
}

/* ==========================================================================
   6. Forms
   ========================================================================== */

.vv-input,
.submission-form,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--vv-line-strong);
  border-radius: var(--vv-r-sm);
  background: var(--vv-paper);
  color: var(--vv-ink);
  font-size: var(--vv-t-base);
  line-height: 1.4;
  transition: border-color 0.18s var(--vv-ease), box-shadow 0.18s var(--vv-ease);
}

textarea {
  min-height: 9rem;
  resize: vertical;
}

.vv-input::placeholder,
.submission-form::placeholder {
  color: var(--vv-ink-mute);
}

.vv-input:focus,
.submission-form:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--vv-clay);
  box-shadow: 0 0 0 3px var(--vv-clay-soft);
}

.vv-label,
.form-label {
  display: block;
  margin-bottom: var(--vv-s2);
  font-size: var(--vv-t-sm);
  font-weight: 600;
  color: var(--vv-ink-soft);
}

.vv-field {
  margin-bottom: var(--vv-s5);
}

.vv-hint {
  display: block;
  margin-top: var(--vv-s2);
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-mid);
}

.FormError,
.ticket_error {
  display: block;
  margin-top: var(--vv-s2);
  font-size: var(--vv-t-sm);
  font-weight: 500;
  color: var(--vv-clay-dark);
}

.FormError.hidden,
.hidden {
  display: none;
}

.list--formfields {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list--formfields > * {
  margin-bottom: var(--vv-s5);
}

/* Checkbox */
.CheckboxControl {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-s3);
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-mid);
  cursor: pointer;
}

.CheckboxControl input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--vv-clay);
}

.CheckboxControl-Indicator {
  display: none;
}

/* --- Inline join form (hero + page bands) ------------------------------- */

.vv-joinform {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--vv-r-lg);
  padding: var(--vv-s5);
  box-shadow: var(--vv-sh-3);
}

.vv-joinform__grid {
  display: grid;
  gap: var(--vv-s3);
  grid-template-columns: 1fr;
}

.vv-joinform__legal {
  margin: var(--vv-s4) 0 0;
  font-size: var(--vv-t-xs);
  line-height: 1.5;
  color: var(--vv-ink-mid);
  max-width: none;
}

.vv-joinform__legal a {
  color: var(--vv-ink-soft);
  text-decoration: underline;
}

.vv-joinform .vv-label {
  margin-bottom: var(--vv-s1);
  font-size: var(--vv-t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vv-ink-mid);
}

@media (min-width: 860px) {
  .vv-joinform__grid {
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end;
    gap: var(--vv-s4);
  }
  .vv-joinform__grid > .vv-joinform__submit {
    padding-bottom: 1px;
  }
}

/* ==========================================================================
   7. Site header
   ========================================================================== */

.vv-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--vv-ink);
  color: var(--vv-on-ink);
  border-bottom: 1px solid var(--vv-on-ink-line);
}

/* Transparent variant sits over a hero image */
.vv-header--over {
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(
    to bottom,
    rgba(12, 28, 43, 0.72) 0%,
    rgba(12, 28, 43, 0.35) 55%,
    rgba(12, 28, 43, 0) 100%
  );
  border-bottom-color: transparent;
}

.vv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-s5);
  min-height: var(--vv-header-h);
}

/* Hidden below the desktop breakpoint; space-between then puts the logo
   left and the actions right with nothing in between. */
.vv-header__navwrap {
  display: none;
}

.vv-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0;
}

.vv-logo img {
  width: auto;
  height: 38px;
}

.vv-nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
}

.vv-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--vv-on-ink);
  font-size: var(--vv-t-sm);
  font-weight: 500;
  white-space: nowrap;
}

.vv-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  background: var(--vv-clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--vv-ease);
}

.vv-nav__link:hover,
.vv-nav__link:focus-visible {
  color: #fff;
  text-decoration: none;
}

.vv-nav__link:hover::after,
.vv-nav__link.is-active::after {
  transform: scaleX(1);
}

.vv-header__actions {
  display: flex;
  align-items: center;
  gap: var(--vv-s4);
}

.vv-header__login {
  display: none;
  color: var(--vv-on-ink);
  font-size: var(--vv-t-sm);
  font-weight: 500;
}

.vv-header__login:hover {
  color: #fff;
}

.vv-header .vv-btn {
  padding: 0.65em 1.35em;
}

/* Burger */
.vv-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--vv-r-sm);
  background: transparent;
  color: var(--vv-on-ink);
  cursor: pointer;
}

.vv-burger svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (min-width: 1000px) {
  .vv-header__navwrap {
    display: block;
  }
  .vv-header__login {
    display: inline-block;
  }
  .vv-burger {
    display: none;
  }
}

/* Mobile drawer */
.vv-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}

.vv-drawer.is-open {
  display: block;
}

.vv-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 28, 43, 0.55);
  backdrop-filter: blur(2px);
}

.vv-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(22rem, 88vw);
  display: flex;
  flex-direction: column;
  gap: var(--vv-s5);
  padding: var(--vv-s5);
  background: var(--vv-ink);
  color: var(--vv-on-ink);
  overflow-y: auto;
  animation: vv-slide-in 0.24s var(--vv-ease);
}

@keyframes vv-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.vv-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-s4);
}

.vv-drawer__close {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--vv-r-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--vv-on-ink);
  cursor: pointer;
}

.vv-drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--vv-on-ink-line);
}

.vv-drawer__nav a {
  display: block;
  padding: var(--vv-s4) 0;
  border-bottom: 1px solid var(--vv-on-ink-line);
  color: var(--vv-on-ink);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-md);
  font-weight: 600;
}

.vv-drawer__nav a:hover {
  color: #fff;
  text-decoration: none;
}

.vv-drawer__actions {
  display: grid;
  gap: var(--vv-s3);
  margin-top: auto;
}

body.vv-noscroll {
  overflow: hidden;
}

/* ==========================================================================
   8. Site footer
   ========================================================================== */

.vv-footer {
  background: var(--vv-ink);
  color: var(--vv-on-ink-dim);
  padding: var(--vv-s9) 0 var(--vv-s6);
  font-size: var(--vv-t-sm);
}

.vv-footer__grid {
  display: grid;
  gap: var(--vv-s7);
  grid-template-columns: 1fr;
  padding-bottom: var(--vv-s7);
  border-bottom: 1px solid var(--vv-on-ink-line);
}

@media (min-width: 700px) {
  .vv-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .vv-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

.vv-footer__brand img {
  height: 40px;
  width: auto;
  margin-bottom: var(--vv-s4);
}

.vv-footer__blurb {
  max-width: 30ch;
  color: var(--vv-on-ink-dim);
}

.vv-footer__title {
  margin: 0 0 var(--vv-s4);
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.vv-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--vv-s3);
}

.vv-footer__list a {
  color: var(--vv-on-ink-dim);
}

.vv-footer__list a:hover {
  color: #fff;
}

.vv-footer__social {
  display: flex;
  gap: var(--vv-s3);
  margin-top: var(--vv-s5);
}

.vv-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--vv-on-ink-line);
  border-radius: 50%;
  color: var(--vv-on-ink-dim);
}

.vv-footer__social a:hover {
  border-color: #fff;
  color: #fff;
}

.vv-footer__social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.vv-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vv-s3) var(--vv-s5);
  padding-top: var(--vv-s5);
  font-size: var(--vv-t-xs);
  color: var(--vv-ink-mute);
}

.vv-footer__bottom a {
  color: var(--vv-on-ink-dim);
}

.vv-footer__bottom a:hover {
  color: #fff;
}

.vv-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-s2) var(--vv-s4);
  margin-left: auto;
  list-style: none;
  padding: 0;
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.vv-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(46rem, 92svh);
  padding: calc(var(--vv-header-h) + var(--vv-s9)) 0 var(--vv-s9);
  background: var(--vv-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.vv-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vv-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--vv-ease);
}

.vv-hero__slide.is-active {
  opacity: 1;
}

/* Scrim: darkens bottom-left where the copy sits, keeps the photo readable */
.vv-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(9, 21, 33, 0.9) 0%,
      rgba(9, 21, 33, 0.65) 32%,
      rgba(9, 21, 33, 0.2) 65%,
      rgba(9, 21, 33, 0.35) 100%
    ),
    linear-gradient(to right, rgba(9, 21, 33, 0.55) 0%, rgba(9, 21, 33, 0) 70%);
}

.vv-hero__inner {
  position: relative;
  width: 100%;
}

.vv-hero__eyebrow {
  color: #fff;
  opacity: 0.85;
}

.vv-hero__title {
  max-width: 22ch;
  margin: 0 0 var(--vv-s5);
  font-size: var(--vv-t-3xl);
  font-weight: 600;
  line-height: var(--vv-lh-tight);
  color: #fff;
}

.vv-hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: #fff;
}

.vv-hero__lede {
  max-width: 46ch;
  margin: 0 0 var(--vv-s6);
  font-size: var(--vv-t-md);
  color: rgba(255, 255, 255, 0.92);
}

.vv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-s4);
}

.vv-hero__form {
  max-width: 60rem;
  margin-top: var(--vv-s7);
}

.vv-hero__dots {
  display: flex;
  gap: var(--vv-s2);
  margin-top: var(--vv-s6);
  padding: 0;
  list-style: none;
}

.vv-hero__dot {
  width: 2rem;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: var(--vv-r-pill);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.2s var(--vv-ease);
}

.vv-hero__dot.is-active {
  background: #fff;
}

/* Compact page hero (interior pages). Needs its own, lighter scrim: the
   full-height gradient above is tuned for a ~700px hero and turns a short one
   into a flat navy block with the photo invisible behind it. */
.vv-hero--page {
  min-height: min(24rem, 60svh);
  align-items: center;
  padding: calc(var(--vv-header-h) + var(--vv-s7)) 0 var(--vv-s7);
  text-align: left;
}

.vv-hero--page .vv-hero__scrim {
  background: linear-gradient(
      to top,
      rgba(9, 21, 33, 0.82) 0%,
      rgba(9, 21, 33, 0.45) 60%,
      rgba(9, 21, 33, 0.3) 100%
    ),
    linear-gradient(to right, rgba(9, 21, 33, 0.7) 0%, rgba(9, 21, 33, 0.1) 75%);
}

.vv-hero--page .vv-hero__title {
  font-size: var(--vv-t-2xl);
  max-width: 26ch;
}

.vv-hero--page .vv-hero__lede {
  margin-bottom: 0;
}

/* Text-only hero, no photo */
.vv-hero--plain {
  background: var(--vv-ink);
}

.vv-hero--plain .vv-hero__scrim {
  background: radial-gradient(
    ellipse at 15% 0%,
    rgba(20, 112, 108, 0.35) 0%,
    rgba(12, 28, 43, 0) 60%
  );
}

/* ==========================================================================
   10. Sections & content blocks
   ========================================================================== */

.vv-section {
  padding: var(--vv-section) 0;
  background: var(--vv-paper);
}

.vv-section--sand {
  background: var(--vv-sand);
}

.vv-section--sandDeep {
  background: var(--vv-sand-deep);
}

.vv-section--ink {
  background: var(--vv-ink);
  color: var(--vv-on-ink);
}

.vv-section--ink h1,
.vv-section--ink h2,
.vv-section--ink h3,
.vv-section--ink h4 {
  color: #fff;
}

.vv-section--ink .vv-lede,
.vv-section--ink p {
  color: var(--vv-on-ink-dim);
}

.vv-section--ink .vv-eyebrow {
  color: #7fc4c0;
}

.vv-section--ink .vv-card__list,
.vv-cta .vv-card__list {
  color: var(--vv-on-ink-dim);
}

.vv-section--tight {
  padding: calc(var(--vv-section) * 0.55) 0;
}

.vv-section__head {
  max-width: 46rem;
  margin-bottom: var(--vv-s8);
}

.vv-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.vv-section__head--center .vv-lede {
  margin-inline: auto;
}

.vv-section__foot {
  margin-top: var(--vv-s8);
}

.vv-section__foot--center {
  text-align: center;
}

/* Trust strip */
.vv-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vv-s4) var(--vv-s7);
  padding: var(--vv-s5) 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid var(--vv-line);
  background: var(--vv-paper);
}

.vv-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-s2);
  font-size: var(--vv-t-sm);
  font-weight: 500;
  color: var(--vv-ink-soft);
}

.vv-trust__item svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--vv-teal);
  stroke-width: 2;
}

/* Callout / notice */
.vv-callout,
.notice {
  display: block;
  padding: var(--vv-s5);
  border: 1px solid var(--vv-line);
  border-left: 3px solid var(--vv-teal);
  border-radius: var(--vv-r-sm);
  background: var(--vv-teal-soft);
  color: var(--vv-ink-soft);
}

.vv-callout__title {
  margin: 0 0 var(--vv-s2);
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-base);
  font-weight: 600;
}

.vv-callout--warn {
  border-left-color: var(--vv-clay);
  background: var(--vv-clay-soft);
}

/* CTA band */
.vv-cta {
  position: relative;
  padding: var(--vv-section) 0;
  background: var(--vv-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.vv-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}

.vv-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(9, 21, 33, 0.92) 0%,
    rgba(9, 21, 33, 0.75) 45%,
    rgba(9, 21, 33, 0.45) 100%
  );
}

.vv-cta__inner {
  max-width: 40rem;
}

.vv-cta h2 {
  color: #fff;
  font-size: var(--vv-t-2xl);
}

.vv-cta p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--vv-t-md);
}

.vv-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-s4);
  margin-top: var(--vv-s6);
}

/* ==========================================================================
   11. Cards, steps, stats, destinations
   ========================================================================== */

.vv-card {
  display: flex;
  flex-direction: column;
  gap: var(--vv-s3);
  padding: var(--vv-s6);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-lg);
  background: var(--vv-paper);
  box-shadow: var(--vv-sh-1);
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease),
    border-color 0.2s var(--vv-ease);
}

.vv-card--hover:hover {
  transform: translateY(-3px);
  border-color: var(--vv-line-strong);
  box-shadow: var(--vv-sh-2);
}

.vv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--vv-r);
  background: var(--vv-teal-soft);
  color: var(--vv-teal);
  margin-bottom: var(--vv-s2);
}

.vv-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke-width: 1.9;
}

.vv-card__title {
  margin: 0;
  font-size: var(--vv-t-md);
}

.vv-card__body {
  margin: 0;
  color: var(--vv-ink-mid);
  font-size: var(--vv-t-sm);
  max-width: none;
}

.vv-card__list {
  list-style: none;
  margin: var(--vv-s2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--vv-s2);
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-soft);
}

.vv-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-s2);
}

.vv-card__list li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.28em;
  border-radius: 50%;
  background: var(--vv-teal-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314706c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
}

/* Numbered steps */
.vv-steps {
  counter-reset: vv-step;
  display: grid;
  gap: var(--vv-s6);
  margin: 0;
  padding: 0;
  list-style: none;
  /* 13rem keeps a 4-step list on one row at container width; 3 steps still
     spread to 3 equal columns. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.vv-step {
  position: relative;
  counter-increment: vv-step;
  padding-top: var(--vv-s6);
  border-top: 2px solid var(--vv-line);
}

.vv-step::before {
  content: counter(vv-step, decimal-leading-zero);
  position: absolute;
  top: var(--vv-s5);
  left: 0;
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--vv-clay);
}

.vv-step__title {
  margin: var(--vv-s5) 0 var(--vv-s3);
  font-size: var(--vv-t-md);
}

.vv-step__body {
  margin: 0;
  color: var(--vv-ink-mid);
  font-size: var(--vv-t-sm);
  max-width: none;
}

/* Stats */
.vv-stats {
  display: grid;
  gap: var(--vv-s5);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.vv-stat {
  padding: var(--vv-s5) 0;
  border-top: 2px solid var(--vv-on-ink-line);
}

.vv-section--ink .vv-stat {
  border-top-color: var(--vv-on-ink-line);
}

.vv-stat__value {
  display: block;
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-xl);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.vv-section:not(.vv-section--ink) .vv-stat {
  border-top-color: var(--vv-line);
}

.vv-section:not(.vv-section--ink) .vv-stat__value {
  color: var(--vv-ink);
}

.vv-stat__label {
  display: block;
  margin-top: var(--vv-s2);
  font-size: var(--vv-t-sm);
  color: var(--vv-on-ink-dim);
}

.vv-section:not(.vv-section--ink) .vv-stat__label {
  color: var(--vv-ink-mid);
}

/* Destination tiles — decorative, not links */
.vv-destgrid {
  display: grid;
  gap: var(--vv-s4);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
  .vv-destgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vv-dest {
  position: relative;
  margin: 0;
  border-radius: var(--vv-r);
  overflow: hidden;
  background: var(--vv-sand-deep);
  aspect-ratio: 4 / 5;
}

.vv-dest img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--vv-ease);
}

.vv-dest:hover img {
  transform: scale(1.04);
}

.vv-dest figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--vv-s6) var(--vv-s4) var(--vv-s4);
  background: linear-gradient(to top, rgba(9, 21, 33, 0.85), rgba(9, 21, 33, 0));
  color: #fff;
}

.vv-dest__name {
  display: block;
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-md);
  font-weight: 600;
  line-height: 1.2;
}

.vv-dest__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--vv-t-xs);
  color: rgba(255, 255, 255, 0.8);
}

/* Quote */
.vv-quote {
  display: grid;
  gap: var(--vv-s5);
  padding: var(--vv-s7);
  border-radius: var(--vv-r-lg);
  background: var(--vv-sand);
  border: 1px solid var(--vv-line);
}

.vv-quote__text {
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-lg);
  line-height: 1.4;
  color: var(--vv-ink);
  margin: 0;
  max-width: 46ch;
}

.vv-quote__by {
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-mid);
}

/* Badge / pill */
.vv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  border-radius: var(--vv-r-pill);
  background: var(--vv-teal-soft);
  color: var(--vv-teal-dark);
  font-size: var(--vv-t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.vv-badge svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* ==========================================================================
   12. Sidebar layout (help centre)
   ========================================================================== */

.vv-shell {
  padding: var(--vv-s8) 0 var(--vv-s10);
  background: var(--vv-sand);
}

.vv-shell__grid {
  display: grid;
  gap: var(--vv-s7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .vv-shell__grid {
    grid-template-columns: 17rem 1fr;
  }
  .vv-shell__grid--rev {
    grid-template-columns: 1fr 17rem;
  }
  .vv-shell__grid--rev .vv-shell__aside {
    order: 2;
  }
}

@media (min-width: 900px) {
  .vv-shell__aside {
    position: sticky;
    top: calc(var(--vv-header-h) + var(--vv-s5));
  }
}

/* Legacy .block used by every help-centre page */
.block {
  margin-bottom: var(--vv-s6);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-lg);
  background: var(--vv-paper);
  overflow: hidden;
  box-shadow: var(--vv-sh-1);
}

.block:last-child {
  margin-bottom: 0;
}

.block__heading {
  padding: var(--vv-s5) var(--vv-s6);
  border-bottom: 1px solid var(--vv-line);
  background: var(--vv-sand);
}

.block__heading__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vv-s3);
  margin: 0;
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-md);
  font-weight: 600;
  color: var(--vv-ink);
}

.block__heading__action {
  margin-left: auto;
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-sm);
  font-weight: 500;
}

.block__content {
  padding: var(--vv-s6);
}

.block.clean,
.block.flat {
  border: 0;
  background: none;
  box-shadow: none;
}

.block.clean .block__heading,
.block.flat .block__heading {
  padding: 0;
  border: 0;
  background: none;
}

.block.thin .block__content {
  padding: var(--vv-s6);
}

.block.StandOut {
  box-shadow: var(--vv-sh-2);
}

/* Sidebar link lists */
.ListBorder_wp {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ListBorder_wp > li + li {
  border-top: 1px solid var(--vv-line);
}

.ListBorder_wp > li > a {
  display: block;
  padding: 0.75rem var(--vv-s2);
  border-radius: var(--vv-r-sm);
  color: var(--vv-ink-soft);
  font-size: var(--vv-t-sm);
  font-weight: 500;
}

.ListBorder_wp > li > a:hover {
  background: var(--vv-sand);
  color: var(--vv-clay-dark);
  text-decoration: none;
}

.ListBorder_wp > li.current_page_item > a {
  background: var(--vv-clay-soft);
  color: var(--vv-clay-dark);
  box-shadow: inset 3px 0 0 var(--vv-clay);
}

/* Mobile disclosure for the help menu */
.ShowLap {
  display: block;
}

.HideLap {
  display: none;
}

.DisplayBlock {
  display: block !important;
}

@media (min-width: 900px) {
  .ShowLap {
    display: none;
  }
  .HideLap {
    display: block;
  }
}

/* ==========================================================================
   13. Accordion
   ========================================================================== */

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

.accordion > li {
  border-bottom: 1px solid var(--vv-line);
}

.accordion > li > .js-accordion-trigger {
  position: relative;
  display: block;
  padding: var(--vv-s5) 2.5rem var(--vv-s5) 0;
  color: var(--vv-ink);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-md);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.accordion > li > .js-accordion-trigger:hover,
.accordion > li > .js-accordion-trigger:focus-visible {
  color: var(--vv-clay-dark);
  text-decoration: none;
}

.accordion > li > .js-accordion-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.45rem;
  border-right: 2px solid var(--vv-clay);
  border-bottom: 2px solid var(--vv-clay);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.22s var(--vv-ease);
}

.accordion > li.is-expanded > .js-accordion-trigger::after {
  transform: rotate(-135deg);
  margin-top: -0.1rem;
}

.accordion .submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--vv-s5);
  color: var(--vv-ink-mid);
}

.accordion > li.is-expanded > .submenu {
  display: block;
  animation: vv-reveal 0.24s var(--vv-ease);
}

@keyframes vv-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.accordion .submenu > p:first-child {
  margin-top: 0;
}

.accordion .submenu p,
.accordion .submenu li {
  color: var(--vv-ink-mid);
}

/* ==========================================================================
   14. Member browse & profile
   ========================================================================== */

.vv-members {
  display: grid;
  gap: var(--vv-s5);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.vv-member {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-lg);
  background: var(--vv-paper);
  overflow: hidden;
  box-shadow: var(--vv-sh-1);
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}

.vv-member:hover {
  transform: translateY(-3px);
  box-shadow: var(--vv-sh-2);
}

.vv-member__photo {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--vv-sand-deep) center / cover no-repeat;
}

.vv-member__body {
  padding: var(--vv-s4) var(--vv-s5) var(--vv-s5);
}

.vv-member__name {
  margin: 0 0 var(--vv-s1);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-md);
  font-weight: 600;
}

.vv-member__meta {
  margin: 0;
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-mid);
  max-width: none;
}

/* Public profile */
.vv-profile {
  display: grid;
  gap: var(--vv-s6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .vv-profile {
    grid-template-columns: 12rem 1fr;
    gap: var(--vv-s7);
  }
}

.vv-profile__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--vv-r-lg);
  background: var(--vv-sand-deep) center / cover no-repeat;
  box-shadow: var(--vv-sh-2);
}

.vv-profile__name {
  margin: 0 0 var(--vv-s2);
  font-size: var(--vv-t-2xl);
}

.vv-profile__where {
  margin: 0 0 var(--vv-s5);
  font-size: var(--vv-t-md);
  color: var(--vv-ink-mid);
}

.vv-deflist {
  display: grid;
  gap: var(--vv-s3);
  margin: 0;
  padding: 0;
}

.vv-deflist > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-s2) var(--vv-s5);
  padding-bottom: var(--vv-s3);
  border-bottom: 1px solid var(--vv-line);
}

.vv-deflist dt {
  min-width: 9rem;
  font-size: var(--vv-t-sm);
  font-weight: 600;
  color: var(--vv-ink-mid);
}

.vv-deflist dd {
  margin: 0;
  font-size: var(--vv-t-sm);
  color: var(--vv-ink);
}

/* Legacy media object (kept: used by help-centre content) */
.media {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-s4);
}

.media__img {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--vv-r);
  background: var(--vv-sand-deep) center / cover no-repeat;
}

.media__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   15. Prose / legacy content classes
   ========================================================================== */

.vv-prose {
  max-width: var(--vv-max-prose);
}

.vv-prose > * + * {
  margin-top: var(--vv-s4);
}

.vv-prose h2 {
  margin-top: var(--vv-s8);
}

.vv-prose h3 {
  margin-top: var(--vv-s7);
}

.vv-prose h2:first-child,
.vv-prose h3:first-child {
  margin-top: 0;
}

.SectionBigHeading {
  margin: 0 0 var(--vv-s4);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-xl);
  font-weight: 600;
}

.SectionHeading {
  margin: 0 0 var(--vv-s3);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-lg);
  font-weight: 600;
}

.BigHeading,
.FitMedHeading {
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-2xl);
  font-weight: 600;
  line-height: var(--vv-lh-tight);
}

.paragraph-header {
  display: block;
  margin-bottom: var(--vv-s1);
  font-family: var(--vv-font-body);
  font-size: var(--vv-t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vv-ink);
}

.ListStyle {
  margin: 0 0 var(--vv-s4);
  padding-left: 1.35rem;
  color: var(--vv-ink-mid);
}

.ListStyle > li {
  margin-bottom: var(--vv-s2);
}

.ListStyle > li::marker {
  color: var(--vv-clay);
}

.ListDisc {
  list-style: disc;
}

.ListDecimal {
  list-style: decimal;
}

.guideline-list {
  margin: var(--vv-s4) 0;
  padding-left: 1.35rem;
  list-style: disc;
  color: var(--vv-ink-mid);
}

.guideline-list > li {
  margin-bottom: var(--vv-s3);
}

.guideline-list > li::marker {
  color: var(--vv-clay);
}

/* Label/value rows */
.SplitInfo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-s2) var(--vv-s5);
  margin: 0 0 var(--vv-s3);
  font-size: var(--vv-t-sm);
  font-weight: 400;
}

.SplitInfo__Title {
  flex: 0 0 auto;
  min-width: 9rem;
  color: var(--vv-ink-mid);
}

/* Doubles as the support-ticket form's field column, so it has to grow. */
.SplitInfo__Content {
  flex: 1 1 18rem;
  color: var(--vv-ink);
}

.SplitInfo .form-label {
  margin-bottom: 0;
}

.card__heading {
  margin: 0 0 var(--vv-s3);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-md);
  font-weight: 600;
}

/* Rule with centred text */
.hr {
  display: block;
  position: relative;
  margin: var(--vv-s7) 0;
  text-align: center;
}

.hr::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--vv-line);
}

.hr__text {
  position: relative;
  display: inline-block;
  padding: 0 var(--vv-s5);
  background: var(--vv-sand);
  font-family: var(--vv-font-display);
  font-size: var(--vv-t-lg);
  font-weight: 600;
}

.epsilon {
  font-size: var(--vv-t-lg);
}

.action-color {
  color: var(--vv-clay);
}

.LightFontColor--sm {
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-mid);
}

/* Legacy surface wrappers */
.PubWrapers {
  background: var(--vv-paper);
}

.PubWrapers.White {
  background: var(--vv-paper);
}

.PubWrapers.Light {
  background: var(--vv-sand);
}

.PubWrapers.Dark {
  background: var(--vv-ink);
  color: var(--vv-on-ink);
}

.PubWrapers.Dark h1,
.PubWrapers.Dark h2,
.PubWrapers.Dark h3 {
  color: #fff;
}

.BorderBottom {
  border-bottom: 1px solid var(--vv-line);
}

.BorderTop {
  border-top: 1px solid var(--vv-line);
}

.SoftSidesMobile {
  /* .block__content already pads; nothing extra needed at any width */
}

/* ==========================================================================
   16. Utilities
   ========================================================================== */

.text--center {
  text-align: center;
}
.text--left {
  text-align: left;
}
.text--right {
  text-align: right;
}

.vv-center {
  margin-inline: auto;
  text-align: center;
}

.vv-measure {
  max-width: var(--vv-max-prose);
}

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

/* Legacy spacing utilities, mapped onto the token scale */
.flush {
  margin: 0;
}
.flush--top {
  margin-top: 0;
}
.flush--bottom {
  margin-bottom: 0;
}

.push--bottom {
  margin-bottom: var(--vv-s5);
}
.push-half--bottom {
  margin-bottom: var(--vv-s3);
}
.push--top {
  margin-top: var(--vv-s5);
}
.push-half--top {
  margin-top: var(--vv-s3);
}
.push--left {
  margin-left: var(--vv-s5);
}

.soft {
  padding: var(--vv-s5);
}
.soft--ends {
  padding-top: var(--vv-s7);
  padding-bottom: var(--vv-s7);
}
.soft--top {
  padding-top: var(--vv-s7);
}
.soft--bottom {
  padding-bottom: var(--vv-s7);
}
.soft--sides {
  padding-inline: var(--vv-s5);
}
.soft-half {
  padding: var(--vv-s3);
}
.soft-half--ends {
  padding-top: var(--vv-s5);
  padding-bottom: var(--vv-s5);
}
.soft-half--top {
  padding-top: var(--vv-s5);
}
.soft-half--sides {
  padding-inline: var(--vv-s3);
}

.vv-stack > * + * {
  margin-top: var(--vv-s4);
}

/* Row of buttons/links */
.vv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-s4);
  margin-top: var(--vv-s6);
}

.vv-stack--lg > * + * {
  margin-top: var(--vv-s6);
}

/* ==========================================================================
   17. Motion, focus, print
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--vv-clay);
  outline-offset: 2px;
  border-radius: 2px;
}

.vv-header :focus-visible,
.vv-footer :focus-visible,
.vv-hero :focus-visible,
.vv-cta :focus-visible,
.vv-section--ink :focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .vv-hero__slide {
    transition: none;
  }
}

@media print {
  .vv-header,
  .vv-footer,
  .vv-drawer,
  .vv-hero__media,
  .vv-cta {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  .block {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
  .accordion .submenu {
    display: block !important;
  }
}