/* ==========================================================================
   VI SHIPPING — Design System
   Editorial / Swiss grid layout adapted from the supplied reference.
   Palette derived from the brand logo (#355C7D deep marine, #9BC7E4 sky).
   These tokens map 1:1 to theme.json in the WordPress block theme.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Colour */
  --vi-ink:        #0D1B24;   /* headings, near-black marine */
  --vi-ink-soft:   #2A3B47;
  --vi-muted:      #77868F;   /* secondary copy */
  --vi-line:       #E3E6E8;   /* hairlines */
  --vi-line-dark:  rgba(255,255,255,.22);
  --vi-paper:      #FBFBFA;   /* page background */
  --vi-paper-2:    #F2F3F2;   /* alternating band */
  --vi-brand:      #355C7D;   /* logo deep marine */
  --vi-brand-deep: #22415A;
  --vi-sky:        #9BC7E4;   /* logo sky blue */
  --vi-sky-soft:   #E6F1F8;

  /* Type */
  --vi-font-avenir:  "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", Roboto,
                     "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vi-font-display: var(--vi-font-avenir);
  --vi-font-head:    var(--vi-font-avenir);
  --vi-font-body:    var(--vi-font-avenir);
  --vi-text-body:    1rem;
  --vi-leading-body: 1.62;
  --vi-text-meta:    .875rem;

  /* Rhythm */
  --vi-shell-max: 1440px;  /* centred content measure */
  --vi-gutter: clamp(20px, 4.2vw, 62px);
  --vi-radius-sm: 14px;
  --vi-section-y: clamp(64px, 8vw, 128px);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vi-paper);
  color: var(--vi-ink);
  font-family: var(--vi-font-body);
  font-size: var(--vi-text-body);
  line-height: var(--vi-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.06; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
:focus-visible { outline: 2px solid var(--vi-brand); outline-offset: 3px; border-radius: 4px; }
.vi-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vi-skip {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--vi-ink); color: #fff; padding: 12px 22px; border-radius: 99px;
  z-index: 999; transition: top .2s;
}
.vi-skip:focus { top: 14px; }

/* ---------- 3. Shell ----------------------------------------------------- */
/* No card, no clipping: every section runs the full width of the viewport. */
.vi-shell {
  width: 100%;
  background: var(--vi-paper);
}

/* Sections stay full-bleed — several carry their own background (the alt band,
   the dark statement band) — while their contents align to one centred
   measure. Done with padding rather than max-width so the background is never
   constrained along with the text. */
.vi-wrap {
  padding-inline: max(var(--vi-gutter), calc((100% - var(--vi-shell-max)) / 2));
}
.vi-section { padding-block: var(--vi-section-y); }
.vi-section--tight { padding-block: clamp(48px, 5.5vw, 84px); }
.vi-band-alt { background: var(--vi-paper-2); }

/* ---------- 4. Typography utilities -------------------------------------- */
.vi-display {
  font-family: var(--vi-font-display);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: .96;
  font-size: clamp(2.1rem, 9vw, 8.2rem);
  overflow-wrap: break-word;
}
.vi-display--md { font-size: clamp(2rem, 8vw, 7.4rem); }
.vi-h2 {
  font-family: var(--vi-font-head);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 15ch;
}
.vi-h2--wide { max-width: 22ch; }
.vi-h3 {
  font-family: var(--vi-font-head);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  letter-spacing: -.02em;
}
.vi-label {
  font-family: var(--vi-font-display);
  font-size: .79rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--vi-muted);
}
.vi-lead {
  font-size: var(--vi-text-body);
  line-height: var(--vi-leading-body);
  color: var(--vi-ink-soft);
  max-width: 62ch;
}
.vi-body-sm { font-size: var(--vi-text-body); line-height: var(--vi-leading-body); color: var(--vi-muted); }
/* Was a uppercase note; now ordinary sentence-case supporting copy. */
.vi-upper-note {
  letter-spacing: normal;
  font-size: var(--vi-text-body);
  line-height: var(--vi-leading-body);
  color: var(--vi-ink-soft);
  max-width: 52ch;
}

/* Section header row:  01 Introduction ——————————————————————————— */
.vi-secthead {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vi-line);
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.vi-secthead__name { color: var(--vi-ink); letter-spacing: .03em; }

/* ---------- 5. Buttons --------------------------------------------------- */
.vi-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  border-radius: 99px;
  font-family: var(--vi-font-head);
  font-size: .94rem; font-weight: 500;
  background: var(--vi-ink); color: #fff;
  transition: background .22s ease, transform .22s ease, color .22s ease;
  white-space: nowrap;
}
.vi-btn:hover { background: var(--vi-brand); transform: translateY(-1px); }
.vi-btn--light { background: #fff; color: var(--vi-ink); }
.vi-btn--light:hover { background: var(--vi-sky); color: var(--vi-ink); }
.vi-btn--ghost { background: transparent; color: var(--vi-ink); border: 1px solid var(--vi-line); }
.vi-btn--ghost:hover { background: var(--vi-ink); color: #fff; border-color: var(--vi-ink); }
.vi-btn__dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--vi-ink); color: #fff;
  display: grid; place-items: center; flex: none;
}
.vi-btn--light .vi-btn__dot { background: var(--vi-ink); color: #fff; }
.vi-link-micro {
  font-family: var(--vi-font-display);
  font-size: .79rem; letter-spacing: .03em;
  color: var(--vi-muted);
  transition: color .2s;
  white-space: nowrap;
}
.vi-link-micro:hover { color: var(--vi-ink); }
.vi-link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vi-font-display);
  font-size: .82rem; letter-spacing: .03em;
}
.vi-link-arrow svg { transition: transform .25s ease; }
.vi-link-arrow:hover svg { transform: translateX(5px); }

/* ---------- 6. Header ---------------------------------------------------- */
.vi-header {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-block: clamp(22px, 2.4vw, 34px);
  padding-inline: max(var(--vi-gutter), calc((100% - var(--vi-shell-max)) / 2));
}
.vi-header--solid {
  position: relative;
  background: var(--vi-paper);
  border-bottom: 1px solid var(--vi-line);
}
.vi-logo { display: inline-flex; align-items: center; gap: 12px; }
.vi-logo__mark { width: 30px; height: auto; flex: none; }
.vi-logo__word {
  font-family: var(--vi-font-display);
  font-weight: 700; font-size: 1.06rem;
  letter-spacing: .02em;
}
.vi-header--over .vi-logo, .vi-header--over .vi-nav a { color: #fff; }
/* Belt and braces over moving footage: the scrim carries the contrast, the
   shadow keeps edges crisp if a bright frame comes through. */
.vi-header--over .vi-logo,
.vi-header--over .vi-nav a,
.vi-header--over .vi-navtoggle { text-shadow: 0 1px 3px rgba(9,22,31,.55); }
.vi-header--over .vi-logo__mark path { fill: #fff; }
.vi-header--solid .vi-logo__mark .st0 { fill: var(--vi-brand); }
.vi-nav { display: flex; gap: clamp(18px, 2.6vw, 42px); }
.vi-nav a {
  font-family: var(--vi-font-display);
  font-size: .88rem; font-weight: 500; letter-spacing: .03em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, opacity .2s;
}
.vi-nav a:hover, .vi-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.vi-navtoggle { display: none; }

/* ---------- 7. Hero ------------------------------------------------------ */
.vi-hero {
  position: relative; isolation: isolate; color: #fff;
  width: 100%; border-radius: 0; overflow: hidden;
}
/* Dedicated scrim behind the transparent header. Spans the full viewport
   width (the header itself is centred to the shell measure) and fades out
   quickly, so the nav stays legible over any frame of the video without
   dulling the image below it. */
.vi-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: clamp(130px, 17vh, 190px);
  background: linear-gradient(180deg,
    rgba(9,22,31,.95) 0%, rgba(9,22,31,.78) 48%, rgba(9,22,31,0) 100%);
  pointer-events: none;
}
.vi-hero__media { position: absolute; inset: 0; z-index: -2; }
.vi-hero__media svg { width: 100%; height: 100%; object-fit: cover; }

/* Background video.
   The SVG artwork stays underneath as the poster layer, so something on-brand
   is always visible — before the video buffers, if it fails, and when the
   visitor has asked for reduced motion. The video fades in once it can play. */
.vi-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.vi-hero__video[data-ready="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vi-hero__video { display: none; }
}
.vi-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Tuned for live footage: keeps the nav legible at the top, opens up through
     the middle so the image reads, then carries the text block at the bottom. */
  background:
    linear-gradient(180deg,
      rgba(9,22,31,.34) 0%,
      rgba(9,22,31,.12) 28%,
      rgba(9,22,31,.58) 58%,
      rgba(9,22,31,.88) 100%);
}
.vi-hero__inner {
  min-height: clamp(560px, 88vh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(120px, 14vh, 180px) clamp(34px, 4vw, 54px);
}
.vi-hero h1 { margin: 0; }
.vi-hero__display { display: block; }
/* The hero headline is a full sentence, so it runs smaller than the
   single-phrase display type used elsewhere. */
.vi-hero__display {
  font-size: clamp(1.9rem, 4.6vw, 4.3rem);
  line-height: 1.04;
  max-width: 32ch;
}
.vi-hero__sub {
  display: block;
  font-family: var(--vi-font-body);
  font-weight: 400;
  font-size: var(--vi-text-body);
  letter-spacing: normal; line-height: var(--vi-leading-body);
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 62ch;
  color: rgba(255,255,255,.94);
}
.vi-hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-top: clamp(26px, 3.4vw, 46px);
}
.vi-hero__foot .vi-upper-note { color: rgba(255,255,255,.86); }
.vi-hero__scroll {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vi-font-head); font-size: .92rem; color: #fff;
}
.vi-hero__scroll svg { animation: vi-bob 2.4s ease-in-out infinite; }
@keyframes vi-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- 8. Two-column editorial split -------------------------------- */
.vi-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 76px);
  align-items: start;
}
.vi-split--60 { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }

/* ---------- 9. Media panels (illustrated placeholders) ------------------- */
.vi-media {
  position: relative;
  border-radius: var(--vi-radius-sm);
  overflow: hidden;
  background: var(--vi-brand-deep);
  aspect-ratio: 4 / 3;
}
.vi-media svg { width: 100%; height: 100%; }
.vi-media--tall { aspect-ratio: 3 / 4; }
.vi-media--wide { aspect-ratio: 16 / 9; }
/* Video filling a media panel. Same pattern as the hero: the artwork beneath
   is the poster, the video fades in once it can play. */
.vi-media__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.vi-media__video[data-ready="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vi-media__video { display: none; }
}
.vi-media__tag {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--vi-font-display);
  font-size: .66rem; letter-spacing: .03em;
  color: rgba(255,255,255,.72);
  background: rgba(9,22,31,.42);
  backdrop-filter: blur(6px);
  padding: 6px 10px; border-radius: 99px;
}

/* ---------- 10. Pillar cards --------------------------------------------- */
.vi-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
/* All four cards carry the same structure — title, icon, description — so the
   column reads evenly. The dark treatment from the reference becomes the hover
   state rather than being fixed to one card. */
.vi-pillar {
  border-top: 1px solid var(--vi-ink);
  border-radius: 0 0 var(--vi-radius-sm) var(--vi-radius-sm);
  padding: 18px 16px 22px;
  display: flex; flex-direction: column;
  min-height: 210px;
  transition: background .28s ease, color .28s ease,
              transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.vi-pillar__icon { margin: 14px 0 16px; color: var(--vi-brand); transition: color .28s ease; }
.vi-pillar p {
  font-size: var(--vi-text-body); line-height: var(--vi-leading-body); margin: 0;
  color: var(--vi-muted);
  transition: color .28s ease;
}
.vi-pillar:hover,
.vi-pillar:focus-within {
  background: var(--vi-ink);
  color: #fff;
  border-top-color: var(--vi-ink);
  border-radius: var(--vi-radius-sm);
  transform: translateY(-4px);
  box-shadow: 0 20px 42px -24px rgba(13,27,36,.62);
}
.vi-pillar:hover .vi-pillar__icon,
.vi-pillar:focus-within .vi-pillar__icon { color: var(--vi-sky); }
.vi-pillar:hover p,
.vi-pillar:focus-within p { color: rgba(255,255,255,.80); }

/* ---------- 11. Services slider ------------------------------------------ */
.vi-showcase { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.vi-showcase::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(9,22,31,.08), rgba(9,22,31,.02));
  pointer-events: none;
}
.vi-showcase__inner {
  padding-block: clamp(38px, 4.6vw, 66px) clamp(28px, 3.4vw, 48px);
  min-height: clamp(620px, 50.3vw, 760px);
  display: flex; flex-direction: column; justify-content: center;
}
.vi-carousel { display: flex; align-items: center; justify-content: center; flex: 1; }
.vi-slide {
  display: none;
  width: 100%;
}
.vi-slide__backdrop {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover;
  transform: scale(1.015);
}
.vi-slide__card {
  width: min(1264px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: stretch;
  gap: clamp(42px, 7.2vw, 108px);
  background: #fff; color: var(--vi-ink);
  border-radius: 14px;
  padding: clamp(26px, 2.5vw, 36px);
  box-shadow: 0 28px 70px -38px rgba(9,22,31,.58);
}
.vi-slide[data-active="true"] { display: block; }
.vi-slide__image {
  min-height: clamp(360px, 31.6vw, 456px);
  border-radius: 11px;
  overflow: hidden;
  background: var(--vi-brand-deep);
}
.vi-slide__image img { width: 100%; height: 100%; object-fit: cover; }
.vi-slide__content {
  display: flex; flex-direction: column; justify-content: center;
  padding-right: clamp(4px, 1.6vw, 24px);
}
.vi-slide h3 {
  margin-bottom: clamp(18px, 2.4vw, 32px);
  font-family: var(--vi-font-head);
  font-weight: 500;
  font-size: clamp(1.65rem, 2.25vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--vi-brand-deep);
}
.vi-slide p {
  max-width: 40ch;
  font-family: var(--vi-font-body);
  font-size: var(--vi-text-body);
  line-height: var(--vi-leading-body);
  color: var(--vi-ink-soft);
  margin: 0;
}
.vi-carousel__tabs {
  position: relative;
  z-index: 4;
  width: min(1264px, 100%);
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.vi-carousel__tabs button {
  display: flex; align-items: center;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 10px;
  background: rgba(9,22,31,.38);
  color: #fff;
  text-align: left;
  font-family: var(--vi-font-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
  backdrop-filter: blur(8px);
  transition: background .2s, color .2s, border-color .2s;
}
.vi-carousel__tabs button:hover,
.vi-carousel__tabs button[data-active="true"] {
  background: #fff;
  border-color: #fff;
  color: #243e69;
}
.vi-carousel__nav {
  position: relative;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  gap: clamp(12px, 2vw, 24px);
  width: fit-content;
  margin: 12px auto 0;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #243e69;
  box-shadow: 0 14px 36px -22px rgba(9,22,31,.68);
  opacity: 1;
  visibility: visible;
}
.vi-carousel__nav button {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vi-font-display);
  font-size: .82rem; letter-spacing: .03em;
  color: #243e69; padding: 9px 14px;
  border-radius: 999px;
  background: var(--vi-sky-soft);
  transition: background .2s, color .2s;
}
.vi-carousel__nav button:hover { background: #243e69; color: #fff; }
.vi-carousel__count { min-width: 52px; text-align: center; font-family: var(--vi-font-display); font-size: .82rem; font-weight: 600; letter-spacing: .03em; }

/* ---------- 12. Vision / Mission band ------------------------------------ */
.vi-statement { background: var(--vi-ink); color: #fff; }
.vi-statement .vi-secthead { border-bottom-color: var(--vi-line-dark); }
.vi-statement .vi-secthead__name { color: #fff; }
.vi-statement .vi-label { color: rgba(255,255,255,.6); }
.vi-statement__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 68px);
}
.vi-statement__item { border-top: 1px solid var(--vi-line-dark); padding-top: 22px; }
.vi-statement__item h3 {
  font-family: var(--vi-font-display); letter-spacing: .03em;
  font-size: .8rem; font-weight: 600; color: var(--vi-sky);
  margin-bottom: 18px;
}
.vi-statement__item p {
  font-family: var(--vi-font-body);
  font-size: var(--vi-text-body);
  line-height: var(--vi-leading-body); letter-spacing: normal;
  color: rgba(255,255,255,.94);
}

/* ---------- 13. Row list (ports / principles) ---------------------------- */
.vi-rows { border-top: 1px solid var(--vi-line); }
.vi-row { border-bottom: 1px solid var(--vi-line); }
.vi-row__head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 18px;
  padding: clamp(18px, 2vw, 26px) 0;
  text-align: left;
  transition: opacity .2s;
}
.vi-row__head:hover { opacity: .62; }
.vi-row__title {
  font-family: var(--vi-font-head);
  font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.15rem, 2vw, 1.72rem);
}
.vi-row__meta { color: var(--vi-muted); font-size: var(--vi-text-meta); line-height: 1.5; }
.vi-row__tags { display: flex; gap: 8px; justify-self: end; flex-wrap: wrap; }
.vi-tag {
  font-family: var(--vi-font-head);
  font-size: .76rem; padding: 6px 14px; border-radius: 99px;
  background: var(--vi-paper-2); color: var(--vi-ink-soft);
  white-space: nowrap;
}
.vi-row[data-open="true"] .vi-tag--lead { background: var(--vi-ink); color: #fff; }
.vi-row__panel { display: none; padding-bottom: clamp(24px, 3vw, 38px); }
.vi-row[data-open="true"] .vi-row__panel { display: block; }
.vi-row__gallery {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  margin-bottom: 22px;
}
.vi-row__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.vi-row__foot p { max-width: 62ch; font-size: var(--vi-text-body); line-height: var(--vi-leading-body); color: var(--vi-muted); }

/* Illustrated principle rows */
.vi-principle__head { grid-template-columns: 48px minmax(0, 1.4fr) minmax(0, 1.6fr); }
.vi-principle__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--vi-line);
  border-radius: 50%;
  color: var(--vi-brand);
  background: var(--vi-paper);
  transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.vi-principle__icon svg { width: 23px; height: 23px; overflow: visible; }
.vi-principle__icon .vi-icon__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.vi-principle__icon[data-animated="true"] .vi-icon__stroke {
  animation: vi-icon-draw .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.vi-principle__icon[data-animated="true"] .vi-icon__stroke:nth-child(2) { animation-delay: .12s; }
.vi-principle__icon[data-animated="true"] .vi-icon__stroke:nth-child(3) { animation-delay: .2s; }
.vi-principle__head:hover .vi-principle__icon {
  transform: translateY(-3px) rotate(4deg);
  background: var(--vi-ink);
  border-color: var(--vi-ink);
  color: var(--vi-sky);
}
@keyframes vi-icon-draw { to { stroke-dashoffset: 0; } }
.vi-principle__head .vi-row__meta {
  font-size: var(--vi-text-body);
  line-height: var(--vi-leading-body);
}

/* ---------- 14. Closing CTA ---------------------------------------------- */
.vi-cta { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.vi-cta__media { position: absolute; inset: 0; z-index: -2; }
.vi-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vi-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(9,22,31,.72), rgba(34,65,90,.55) 55%, rgba(9,22,31,.8));
}
.vi-cta__inner {
  padding-block: clamp(68px, 8vw, 118px);
}
.vi-cta__body {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: center;
}
.vi-cta__copy { max-width: 570px; }
.vi-quote-form__label {
  margin: 0 0 14px;
  font-family: var(--vi-font-display);
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.vi-cta__title { color: #fff; margin-bottom: clamp(28px, 3.5vw, 48px); }
.vi-cta__copy h3 {
  font-family: var(--vi-font-head);
  font-size: clamp(1.4rem, 2.4vw, 2.15rem);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.12;
  margin-bottom: 20px;
}
.vi-cta__copy p { color: rgba(255,255,255,.88); font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
.vi-quote-form {
  font-family: var(--vi-font-body);
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: clamp(18px, 2vw, 28px);
  background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.08));
  box-shadow: 0 30px 80px rgba(5,18,28,.28), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.vi-quote-form__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 28px;
}
.vi-quote-form__head h3 {
  font-family: var(--vi-font-head);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 500;
}
.vi-quote-form__label { margin-bottom: 8px; }
.vi-quote-form__mark {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.1);
  font-family: var(--vi-font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
}
.vi-quote-form__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.vi-form-field { display: grid; gap: 8px; min-width: 0; }
.vi-form-field--full { grid-column: 1 / -1; }
.vi-form-field > span {
  font-family: var(--vi-font-display); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.82);
}
.vi-form-field input,
.vi-form-field select,
.vi-form-field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  background: rgba(8,26,38,.2);
  color: #fff;
  font-family: var(--vi-font-body);
  font-weight: 400;
  font-size: var(--vi-text-body);
  line-height: 1.4;
  padding: 13px 14px;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vi-quote-form button { font-family: var(--vi-font-head); }
.vi-form-field textarea { min-height: 112px; resize: vertical; }
.vi-form-field input::placeholder,
.vi-form-field textarea::placeholder { color: rgba(255,255,255,.5); }
.vi-form-field select option { color: var(--vi-ink); background: #fff; }
.vi-form-field input:focus,
.vi-form-field select:focus,
.vi-form-field textarea:focus {
  border-color: rgba(255,255,255,.7);
  background: rgba(8,26,38,.32);
  box-shadow: 0 0 0 3px rgba(155,199,228,.2);
}
.vi-quote-form__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 24px;
}
.vi-quote-form__footer p {
  max-width: 25ch; margin: 0;
  font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.66);
}

/* ---------- 16. Footer --------------------------------------------------- */
.vi-footer { background: var(--vi-paper); padding-block: clamp(28px, 3vw, 42px) clamp(30px, 3.4vw, 48px); }
.vi-footer__top {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: clamp(28px, 4vw, 48px);
}
.vi-footer__brand {
  color: var(--vi-brand);
  gap: clamp(14px, 1.6vw, 20px);
}
.vi-footer__brand .vi-logo__mark { width: clamp(46px, 5vw, 68px); }
.vi-footer__brand .vi-logo__word {
  color: var(--vi-ink);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.vi-footer__cols {
  padding-top: clamp(24px, 3vw, 38px);
  border-top: 1px solid var(--vi-line);
  display: grid;
  gap: clamp(26px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.vi-footer__cols h4 {
  font-family: var(--vi-font-display);
  font-size: .78rem; font-weight: 500; letter-spacing: .03em;
  color: var(--vi-muted); margin-bottom: 16px;
}
.vi-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.vi-footer__cols li { margin-bottom: 9px; font-size: .93rem; color: var(--vi-ink-soft); }
.vi-footer__cols a:hover { color: var(--vi-brand); }
.vi-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.vi-footer__nav a {
  font-family: var(--vi-font-display);
  font-size: .88rem; letter-spacing: .025em;
}
.vi-footer__base {
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--vi-line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- 17. Legal pages ---------------------------------------------- */
.vi-pagehead,
.vi-pagehead__meta,
.vi-legal,
.vi-toc,
.vi-prose,
.vi-callout { font-family: var(--vi-font-body); }
.vi-pagehead { background: var(--vi-ink); color: #fff; overflow: hidden; padding-block: clamp(56px, 7vw, 104px); }
.vi-pagehead .vi-label { color: rgba(255,255,255,.6); }
.vi-pagehead h1 {
  font-family: var(--vi-font-display); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 6rem); letter-spacing: -.035em; line-height: .9;
  margin: 18px 0 0;
}
.vi-pagehead__meta {
  display: flex; gap: 12px 40px; flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 42px);
  padding-top: 20px; border-top: 1px solid var(--vi-line-dark);
  color: rgba(255,255,255,.72); font-size: var(--vi-text-meta); line-height: 1.5;
}
.vi-legal { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(28px, 5vw, 84px); }
.vi-toc { position: sticky; top: 26px; align-self: start; }
.vi-toc ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: toc; }
.vi-toc li { counter-increment: toc; margin-bottom: 2px; }
.vi-toc a {
  display: flex; gap: 12px; padding: 7px 0;
  font-family: var(--vi-font-body); font-size: var(--vi-text-meta); line-height: 1.5; color: var(--vi-muted);
  border-bottom: 1px solid transparent;
  transition: color .2s;
}
.vi-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--vi-font-display); font-size: .74rem; letter-spacing: .02em;
  padding-top: 3px; flex: none;
}
.vi-toc a:hover { color: var(--vi-ink); }
.vi-prose { max-width: 74ch; font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
.vi-prose section { padding-top: clamp(26px, 3vw, 40px); margin-bottom: clamp(26px, 3vw, 40px); border-top: 1px solid var(--vi-line); scroll-margin-top: 24px; }
.vi-prose section:first-child { padding-top: 0; border-top: 0; }
.vi-prose h2 {
  font-family: var(--vi-font-head);
  font-size: clamp(1.25rem, 1.9vw, 1.62rem); font-weight: 500;
  letter-spacing: -.02em; margin-bottom: 8px;
}
.vi-prose h2 .vi-prose__num {
  font-family: var(--vi-font-display); font-size: .7rem;
  letter-spacing: .03em; color: var(--vi-muted);
  display: block; margin-bottom: 12px;
}
.vi-prose h3 {
  font-family: var(--vi-font-head); font-size: 1.02rem; font-weight: 600;
  margin: 22px 0 8px; letter-spacing: -.01em;
}
.vi-prose p, .vi-prose li { font-family: var(--vi-font-body); color: var(--vi-ink-soft); font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
.vi-prose table { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-family: var(--vi-font-body); font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
.vi-prose th, .vi-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--vi-line); vertical-align: top; }
.vi-prose td { font-family: var(--vi-font-body); }
.vi-prose th { font-family: var(--vi-font-display); font-size: .76rem; letter-spacing: .03em; color: var(--vi-muted); font-weight: 500; }
.vi-tablewrap { overflow-x: auto; }
.vi-callout {
  background: var(--vi-sky-soft);
  border-left: 3px solid var(--vi-brand);
  border-radius: 0 var(--vi-radius-sm) var(--vi-radius-sm) 0;
  padding: 18px 22px;
  margin: 0 0 clamp(26px, 3vw, 38px);
  font-family: var(--vi-font-body); font-size: var(--vi-text-body); line-height: var(--vi-leading-body); color: var(--vi-ink-soft);
}
.vi-placeholder {
  background: #FFF4E0; color: #7A5A12;
  border-radius: 4px; padding: 1px 7px;
  font-family: var(--vi-font-display); font-size: .8em; letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------- 18. Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .vi-row__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
  .vi-row__tags { grid-column: 3; }
}
@media (max-width: 900px) {
  .vi-navtoggle {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--vi-font-display); font-size: .74rem; letter-spacing: .03em;
  }
  .vi-nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 4px;
    background: var(--vi-paper); color: var(--vi-ink);
    padding-block: 18px 26px;
    padding-inline: max(var(--vi-gutter), calc((100% - var(--vi-shell-max)) / 2));
    border-bottom: 1px solid var(--vi-line);
    display: none;
  }
  .vi-nav[data-open="true"] { display: flex; }
  .vi-header--over .vi-nav a { color: var(--vi-ink); }
  .vi-nav a { font-size: .95rem; padding: 9px 0; }
  .vi-header__cta { display: none; }
  .vi-split, .vi-split--60,
  .vi-statement__grid,
  .vi-cta__body, .vi-legal { grid-template-columns: minmax(0, 1fr); }
  .vi-cta__copy { max-width: 680px; }
  .vi-toc { position: static; }
  .vi-secthead { grid-template-columns: 1fr auto; }
  .vi-row__head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .vi-row__meta { grid-column: 1; font-size: .85rem; }
  .vi-row__tags { grid-column: 1 / -1; justify-self: start; }
  /* Three children, two columns: keep the description under the title. */
  .vi-principle__head { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .vi-principle__head .vi-row__meta { grid-column: 2; font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
  .vi-showcase__inner { min-height: 0; padding-block: 42px 30px; }
  .vi-slide__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px;
  }
  .vi-slide__image { min-height: 0; aspect-ratio: 16 / 9; }
  .vi-slide__content { padding: 28px 12px 14px; }
  .vi-slide h3 { margin-bottom: 18px; font-size: clamp(1.55rem, 4vw, 1.95rem); }
  .vi-slide p { max-width: 40ch; font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
  .vi-carousel__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .vi-pillars { grid-template-columns: minmax(0, 1fr); }
  .vi-row__gallery { grid-template-columns: minmax(0, 1fr); }
  .vi-footer__top { align-items: flex-start; }
  .vi-quote-form__grid { grid-template-columns: minmax(0, 1fr); }
  .vi-form-field--full { grid-column: auto; }
  .vi-quote-form__footer { align-items: flex-start; flex-direction: column; }
  .vi-showcase__inner { padding-block: 24px 20px; }
  .vi-slide__card { padding: 12px; border-radius: 12px; }
  .vi-slide__image { border-radius: 8px; }
  .vi-slide__content { padding: 24px 8px 12px; }
  .vi-slide h3 { font-size: 1.45rem; }
  .vi-slide p { font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
  .vi-carousel__tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }
  .vi-carousel__tabs button { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
  .vi-carousel__nav { gap: 8px; padding: 6px; }
  .vi-carousel__nav button { font-size: 0; gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .vi-principle__icon .vi-icon__stroke { stroke-dashoffset: 0; }
}

@media print {
  body { background: #fff; }
  .vi-header, .vi-footer, .vi-cta, .vi-toc { display: none; }
  .vi-legal { grid-template-columns: 1fr; }
}

/* Legal prose rendered as flat block markup (WordPress block editor output):
   give each H2 the same rule-and-spacing treatment as a <section> wrapper. */
.vi-prose > h2 {
  padding-top: clamp(26px, 3vw, 40px);
  margin-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--vi-line);
  scroll-margin-top: 24px;
}
.vi-prose > h2:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.vi-prose > .wp-block-table { margin: 16px 0 4px; }
.vi-prose > .wp-block-table table { width: 100%; border-collapse: collapse; font-family: var(--vi-font-body); font-size: var(--vi-text-body); line-height: var(--vi-leading-body); }
.vi-prose > .wp-block-table td,
.vi-prose > .wp-block-table th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--vi-line); vertical-align: top; }
.vi-prose > .wp-block-table th {
  font-family: var(--vi-font-display); font-size: .76rem;
  letter-spacing: .03em; color: var(--vi-muted); font-weight: 500;
}