/* ────────────────────────────────────────────────────────────────
       Marketing-site-only overrides.
       The Buttons / Hero / Nav / Footer / Forms components live in
       site.css; the patterns below are page-local (Services grid,
       Pillars, Insights grid) and use the same tokens.
       ──────────────────────────────────────────────────────────── */

    /* ================================================================
       NAV — full override per latest spec
       ----------------------------------------------------------------
       Site-wide v-nav lives in site.css; this block restyles it for
       the marketing site only. Targets the new structure rendered in
       components.jsx → Nav.
       ================================================================ */
    :root {
      --nav-h: 76px;
      --nav-text: #FAFAFA;
      --nav-text-dim: #8B97A4;
      --nav-accent: #EC5B29;
      --nav-cta: #E8490F;
      --nav-cta-hover: #C93D0C;
      --nav-navy: #15273F;
    }

    /* Base — the transparent-to-solid transition is scroll-driven CSS.
       Without animation-timeline support the header stays transparent
       at full height; that is intended. */
    .v-nav { background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; }

    @supports (animation-timeline: scroll()) {
      @property --nav-inner-height {
        syntax: "<length>";
        inherits: true;
        initial-value: 96px;
      }
      @keyframes nav-solidify {
        from {
          background-color: transparent;
          backdrop-filter: blur(0px);
          --nav-inner-height: 96px;
        }
        to {
          background-color: rgba(10, 19, 32, 0.92);
          backdrop-filter: blur(8px);
          --nav-inner-height: 64px;
        }
      }
      .v-nav {
        animation: nav-solidify linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 120px;
      }
    }
    .v-nav__inner {
      max-width: 1280px; margin: 0 auto;
      padding: 0 32px; height: var(--nav-inner-height, var(--nav-h));
      display: flex; align-items: center; gap: 28px;
      position: relative;
    }
    .v-nav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .v-nav__logo img { height: 26px; width: auto; display: block; }

    /* Links — centered between logo and right controls */
    .v-nav__links {
      display: flex; align-items: center;
      gap: 32px; flex: 1;
      justify-content: center;
      transition: opacity .2s ease;
    }
    .v-nav__item { position: relative; }
    .v-nav__link {
      position: relative;
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--nav-text); text-decoration: none;
      padding: 6px 0 8px;
      cursor: pointer;
      transition: color .15s ease;
    }
    .v-nav__link:hover { color: var(--nav-accent); }
    /* Dropdown open (hover or keyboard focus) turns the parent label orange */
    .v-nav__item:focus-within > .v-nav__link { color: var(--nav-accent); }
    /* Single chevron only — suppress the duplicate ::after chevron from site.css */
    .v-nav__item > .v-nav__link.has-sub::after { content: none; display: none; }
    .v-nav__caret {
      width: 8px; height: 8px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translate(-2px, -2px);
      opacity: .7;
      transition: transform .15s ease, opacity .15s ease;
    }
    .v-nav__item:hover .v-nav__caret { transform: rotate(225deg) translate(-1px, -1px); opacity: 1; }

    /* Active page underline */
    .v-nav__link.is-active::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      bottom: -2px;
      height: 2px;
      background: var(--nav-accent);
    }

    /* Dropdown — Navy 4px-radius card, 4px gap below link */
    .v-nav__sub {
      position: absolute;
      top: calc(100% + 4px);
      left: 50%;
      transform: translate(-50%, -6px);
      background: var(--nav-navy);
      border-radius: 4px;
      border: 0;
      box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.18);
      padding: 8px 0;
      min-width: 240px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
      z-index: 10;
      /* override site.css backdrop-filter on dropdowns */
      backdrop-filter: none;
    }
    /* hover bridge for the 4px gap */
    .v-nav__item::after {
      content: '';
      position: absolute;
      top: 100%; left: 0; right: 0;
      height: 8px;
      display: none;
    }
    .v-nav__item:hover::after,
    .v-nav__item:focus-within::after { display: block; }
    .v-nav__item:hover .v-nav__sub,
    .v-nav__item:focus-within .v-nav__sub {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
      transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
    }
    .v-nav__sub-item {
      display: block;
      padding: 10px 20px;
      text-decoration: none;
      cursor: pointer;
      transition: background .12s ease;
      white-space: nowrap;
      border: 0; /* override site.css teal accent line */
    }
    .v-nav__sub-item:hover { background: #1F3654; border: 0; }
    .v-nav__sub-item .t {
      display: block;
      font-family: 'Inter', var(--font-body);
      font-weight: 400; font-size: 15px; line-height: 1.3;
      color: var(--nav-text);
      letter-spacing: 0;
      text-transform: none;
    }
    .v-nav__sub-item .sub {
      display: block;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 11px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--nav-text-dim);
      margin-top: 4px;
    }

    /* Right cluster */
    .v-nav__util {
      display: flex; align-items: center;
      gap: 18px; flex: 0 0 auto;
      transition: opacity .2s ease;
    }

    /* Language toggle */
    .v-nav__lang {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-size: 13px; letter-spacing: 0.06em;
    }
    .v-nav__lang .l {
      color: var(--nav-text-dim);
      font-weight: 400;
      text-decoration: none;
      cursor: pointer;
      transition: color .15s ease;
    }
    .v-nav__lang .l.is-on { color: var(--nav-text); font-weight: 600; }
    .v-nav__lang .l:not(.is-on):hover { color: var(--nav-text); }
    .v-nav__lang .sep { color: var(--nav-text-dim); }

    /* Search icon button + dropdown wrapper */
    .v-nav__search { position: relative; display: inline-flex; }
    .v-nav__search-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      background: transparent; border: 0; cursor: pointer;
      color: var(--nav-text); padding: 0;
      border-radius: 50%;
      transition: background .15s ease;
    }
    .v-nav__search-btn:hover { background: rgba(255,255,255,0.08); }
    .v-nav__search-btn svg { width: 20px; height: 20px; }
    .v-nav__search-btn[aria-expanded="true"] { background: rgba(255,255,255,0.10); }

    /* ---- Search dropdown — bare underlined input, anchored below the search icon ---- */
    .v-nav__search-dd {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 280px;
      padding: 0;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
      z-index: 12;
      margin: 0;
    }
    .v-nav__search-dd.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
    }
    .v-nav__search-dd input {
      width: 100%;
      box-sizing: border-box;
      background: transparent;
      border: 0;
      border-bottom: 2px solid var(--nav-accent);
      border-radius: 0;
      padding: 8px 0;
      color: var(--nav-text);
      font-family: 'Inter', var(--font-body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.4;
      outline: none;
    }
    .v-nav__search-dd input::placeholder { color: var(--nav-text-dim); }
    .v-nav__search-dd input::-webkit-search-cancel-button { display: none; }

    /* CTA — already styled via v-btn; ensure exact tokens */
    .v-nav__cta {
      background: var(--nav-cta);
      color: var(--nav-text);
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border-radius: 4px;
      padding: 10px 18px;
      margin-left: 0;
    }
    .v-nav__cta:hover { background: var(--nav-cta-hover); }

    /* Burger — hidden on desktop */
    .v-nav__burger {
      display: none;
      width: 36px; height: 36px;
      background: transparent; border: 0; cursor: pointer;
      color: var(--nav-text); padding: 0;
      align-items: center; justify-content: center;
    }
    .v-nav__burger svg { width: 24px; height: 24px; }

    /* ---- Mobile dropdown panel (native popover: the browser owns show/hide) ----
       Fixed, not absolute: the top layer takes the initial containing block,
       so an absolute panel would resolve against the document, not the header. */
    .v-nav__mobile {
      position: fixed;
      top: var(--nav-inner-height, var(--nav-h)); left: 0; right: 0; bottom: auto;
      width: auto; height: auto;
      margin: 0; padding: 0; border: 0; overflow: visible;
      background: var(--nav-navy);
      color: inherit;
      z-index: 4;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    }
    .v-nav__mobile:popover-open { display: block; }
    .v-nav__mobile-inner { padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 24px; }
    .v-nav__mobile-links { display: flex; flex-direction: column; }
    .v-nav__mobile-links a {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--nav-text); text-decoration: none;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: space-between;
    }
    .v-nav__mobile-links a:last-child { border-bottom: 0; }
    .v-nav__mobile-links a.is-active { color: var(--nav-accent); }
    .v-nav__mobile-links a .arr { color: rgba(255,255,255,0.4); font-size: 14px; }
    .v-nav__mobile-lang {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-size: 13px; letter-spacing: 0.06em;
    }
    .v-nav__mobile-lang .l { color: var(--nav-text-dim); font-weight: 400; text-decoration: none; cursor: pointer; }
    .v-nav__mobile-lang .l.is-on { color: var(--nav-text); font-weight: 600; }
    .v-nav__mobile-lang .sep { color: var(--nav-text-dim); }
    .v-nav__mobile-search {
      display: flex; align-items: center; gap: 12px;
      border-bottom: 1px solid rgba(250,250,250,0.25);
      padding: 12px 0;
    }
    .v-nav__mobile-search svg { width: 20px; height: 20px; color: var(--nav-text); flex: 0 0 auto; }
    .v-nav__mobile-search input {
      flex: 1; background: transparent; border: 0; outline: 0;
      color: var(--nav-text); font-family: var(--font-body); font-size: 15px;
      padding: 4px 0;
    }
    .v-nav__mobile-search input::placeholder { color: rgba(250,250,250,0.5); }

    /* ---- Responsive (below 1000px) ---- */
    @media (max-width: 1000px) {
      .v-nav__inner { padding: 0 20px; gap: 12px; }
      .v-nav__links,
      .v-nav__util > .v-nav__lang,
      .v-nav__util > .v-nav__search { display: none; }
      .v-nav__burger { display: inline-flex; }
      .v-nav__cta { padding: 9px 14px; font-size: 12px; }
    }

    /* Hero eyebrow override — Plus Jakarta SemiBold 600, 13/0.12em, orange + em-dash */
    .v-hero .v-eyebrow {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--verge-orange);
    }
    .v-hero .v-eyebrow::before,
    .v-hero .v-eyebrow::after {
      background: var(--verge-orange);
    }
    /* Display weight 800 ExtraBold per type system */
    .v-display { font-weight: 800; }

    /* ===== Hero background video (page-local) =====
       Replaces the static coastline still with a muted, looping clip.
       Scrim is top-weighted so a fixed headline stays legible as the
       foam crest travels through frame. Mobile falls back to the poster. */
    .v-hero__bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      z-index: 0;
    }
    .v-hero__scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(180deg,
          rgba(10,19,32,0.78) 0%,
          rgba(10,19,32,0.55) 45%,
          rgba(10,19,32,0.45) 100%),
        rgba(21,39,63,0.55);
    }
    .v-hero__inner  { z-index: 2; }
    .v-hero--compact { min-height: 40vh; }
    .v-hero--compact .v-hero__inner {
      min-height: 40vh;
      padding-top: 120px; padding-bottom: 56px;
    }

    /* Mission statement block (About) */
    .v-mission { padding: 96px 0; background: #FAFAFA; }
    .v-sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .v-mission__body {
      font-family: 'Inter', var(--font-body);
      font-weight: 400; font-size: 21px; line-height: 1.6;
      color: var(--verge-ink); margin: 0 0 24px; max-width: 62ch;
      text-wrap: pretty;
    }
    .v-mission__body:last-child { margin-bottom: 0; }
    @media (max-width: 900px) {
      .v-mission { padding: 64px 0; }
      .v-mission__body { font-size: 19px; }
    }

    /* Blog teaser (Landing) */
    .v-blog { background: #FAFAFA; }
    .v-blog__grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px; grid-auto-rows: 1fr;
    }
    .v-blog__card {
      display: flex; flex-direction: column; height: 100%;
      background: #FFFFFF; border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 240ms var(--ease);
    }
    .v-blog__card:hover { box-shadow: var(--shadow); }
    .v-blog__media { display: block; aspect-ratio: 3 / 2; background: var(--verge-stone-2); }
    .v-blog__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .v-blog__body { padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1; }
    .v-blog__date {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--fg-2); margin-bottom: 12px;
    }
    .v-blog__t {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em;
      margin: 0 0 12px; text-wrap: pretty;
    }
    .v-blog__t a { color: var(--verge-ink); text-decoration: none; }
    .v-blog__t a:hover { color: var(--verge-orange); }
    .v-blog__d {
      font-family: 'Inter', var(--font-body);
      font-weight: 400; font-size: 16px; line-height: 1.6;
      color: var(--fg-2); margin: 0 0 20px; text-wrap: pretty;
    }
    .v-blog__cta {
      margin-top: auto;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 14px; color: var(--verge-orange-deep);
    }
    @media (max-width: 900px) {
      .v-blog__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    }

    /* Article page */
    .v-article { background: #FAFAFA; padding-bottom: 96px; }
    .v-article__head { background: var(--verge-navy); padding: 140px 0 64px; }
    .v-article__head-inner {
      max-width: 780px; margin: 0 auto; padding: 0 24px;
      display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    }
    .v-article__back {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 14px; color: var(--verge-foam);
      text-decoration: none; margin-bottom: 28px;
    }
    .v-article__back:hover { color: #FFFFFF; }
    /* DS scopes its eyebrow to .v-hero / .v-section; the article head
       is neither, so lift the on-dark treatment verbatim. */
    .v-article__head .v-eyebrow {
      font-family: var(--font-mono); font-weight: 500;
      font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      display: inline-flex; align-items: center; gap: 14px;
      margin-bottom: 18px;
    }
    .v-article__head .v-eyebrow::before,
    .v-article__head .v-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--verge-orange); }
    .v-article__title {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 46px; line-height: 1.12; letter-spacing: -0.02em;
      color: #FFFFFF; margin: 0 0 20px; text-wrap: pretty;
    }
    .v-article__standfirst {
      font-family: 'Inter', var(--font-body);
      font-weight: 400; font-size: 20px; line-height: 1.55;
      color: var(--verge-foam); margin: 0 0 28px; text-wrap: pretty;
    }
    .v-article__meta {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--verge-foam); margin: 0;
    }
    .v-article__sep { margin: 0 10px; }
    .v-article__figure {
      max-width: 900px; margin: -40px auto 56px; padding: 0 24px;
    }
    .v-article__figure img {
      width: 100%; display: block; border-radius: var(--radius);
      box-shadow: var(--shadow); background: var(--verge-stone-2);
    }
    .v-article__body { max-width: 720px; margin: 0 auto; padding: 0 24px; }
    .v-article__p, .v-article__lead {
      font-family: 'Inter', var(--font-body);
      font-size: 18px; line-height: 1.68; color: var(--verge-ink);
      margin: 0 0 24px; text-wrap: pretty;
    }
    .v-article__lead { font-weight: 600; font-size: 20px; }
    .v-article__h2 {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em;
      color: var(--verge-ink); margin: 56px 0 20px; text-wrap: pretty;
    }
    .v-article__h3 {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 21px; line-height: 1.25;
      color: var(--verge-ink); margin: 40px 0 14px; text-wrap: pretty;
    }
    .v-article__quote {
      margin: 36px 0; padding: 0 0 0 28px;
      border-left: 3px solid var(--verge-orange);
    }
    .v-article__quote p {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 22px; line-height: 1.35; letter-spacing: -0.01em;
      color: var(--verge-navy); margin: 0; text-wrap: pretty;
    }
    .v-article__foot {
      max-width: 720px; margin: 56px auto 0; padding: 0 24px;
      display: flex; justify-content: flex-start;
    }
    @media (max-width: 900px) {
      .v-article__head { padding: 116px 0 48px; }
      .v-article__title { font-size: 34px; }
      .v-article__standfirst { font-size: 18px; }
      .v-article__h2 { font-size: 24px; }
    }

    /* Blog as a vertical list — one article per row (Insights) */
    .v-blog--list .v-blog__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 28px; }
    .v-blog--list .v-blog__card { flex-direction: row; }
    .v-blog--list .v-blog__media { flex: none; width: 38%; aspect-ratio: 16 / 10; }
    .v-blog--list .v-blog__body { justify-content: center; padding: 32px 40px; }
    @media (max-width: 700px) {
      .v-blog--list .v-blog__card { flex-direction: column; }
      .v-blog--list .v-blog__media { width: 100%; aspect-ratio: 3 / 2; }
      .v-blog--list .v-blog__body { padding: 28px 32px 32px; }
    }

    /* Convictions (About) — 2x2 grid of equally-weighted cards.
       Carries the DS .v-section class too (section rhythm + the
       parent-scoped .v-section .v-eyebrow treatment). */
    .v-conv { background: var(--verge-stone-2); }
    .v-conv .v-section__head { margin-bottom: 56px; max-width: none; }
    .v-conv .v-eyebrow { justify-content: center; width: 100%; }
    .v-conv__grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px; align-items: stretch; grid-auto-rows: 1fr;
    }
    .v-conv__card {
      background: #FAFAFA; border: 1px solid var(--border);
      border-radius: var(--radius); padding: 32px;
      display: flex; flex-direction: column; gap: 14px;
      height: 100%;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 240ms var(--ease);
    }
    .v-conv__card:hover { box-shadow: var(--shadow); }
    .v-conv__head { display: flex; align-items: baseline; gap: 14px; }
    .v-conv__num {
      flex: none;
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
      color: var(--verge-orange);
    }
    .v-conv__text { min-width: 0; }
    .v-conv__t {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em;
      color: var(--verge-ink); margin: 0; text-wrap: pretty;
    }
    .v-conv__d {
      font-family: 'Inter', var(--font-body);
      font-weight: 400; font-size: 16px; line-height: 1.6;
      color: var(--fg-2); margin: 0; text-wrap: pretty;
    }
    @media (max-width: 900px) {
      .v-conv__grid { grid-template-columns: 1fr; gap: 20px; grid-auto-rows: auto; }
      .v-conv .v-section__head { margin-bottom: 40px; }
    }
    .v-hero__scroll { z-index: 2; }
    @media (max-width: 767px) {
      .v-hero video.v-hero__bg { display: none; }
    }

    /* Scroll cue — Plus Jakarta SemiBold 600 · 11/0.16em · Foam */
    .v-hero__scroll {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.16em;
      color: #C7DBE0; /* Foam */
    }

    /* Section eyebrow above the H2 — same A spec, light surfaces */
    .v-section .v-eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 13px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--verge-orange);
      margin-bottom: 18px;
    }
    .v-section .v-eyebrow::before,
    .v-section .v-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--verge-orange); opacity: 0.85; }

    /* Make all main display headings explicitly ExtraBold 800 */
    .v-h2 { font-weight: 800; }

    /* ===== Service cards =====
       Numbered (01–04) · Lucide icon · badge · title · description · text-link */
    .v-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: stretch; }
    .v-svc {
      background: white;
      border: 1px solid var(--verge-stone);
      padding: 40px 36px 36px;
      display: flex; flex-direction: column; gap: 14px;
      transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
    }
    .v-svc:hover { box-shadow: 0 16px 36px rgba(10,19,32,0.07); transform: translateY(-2px); }
    /* Head row: icon + title + number on ONE line, aligned to the first title line (Variant B) */
    .v-svc__head {
      display: flex; align-items: flex-start; gap: 16px;
      margin-bottom: 4px;
    }
    .v-svc__icon {
      width: 44px; height: 44px; border-radius: 4px;
      background: #15273F;
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .v-svc__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
    .v-svc__num {
      margin-left: auto; flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.18em; font-weight: 600;
      color: var(--fg-muted); text-transform: uppercase;
      padding-top: 4px;
    }
    .v-svc__t {
      flex: 1; min-width: 0;
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800;
      font-size: 28px; line-height: 1.18;
      letter-spacing: -0.018em; margin: 0;
      color: var(--verge-ink); text-wrap: balance;
    }
    .v-svc__d {
      font-family: var(--font-body);
      font-size: 16px; line-height: 1.65;
      color: var(--fg-2); margin: 0;
      flex: 1 0 auto;
    }
    .v-svc__foot { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
    .v-svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
    .v-svc__cta {
      margin-top: 0;
      align-self: flex-start;
    }

    /* ===== Badges =====
       Plus Jakarta SemiBold 600 · 11/0.08em · 999px pill · soft tints */
    .v-badge {
      display: inline-flex; align-items: center;
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 11px;
      letter-spacing: 0.08em;
      padding: 5px 10px; border-radius: 999px;
      line-height: 1;
      text-transform: uppercase;
    }
    /* What's-On badge scheme: Masterclass → Tide, all others → Navy.
       Orange + Moss variants removed — orange is reserved for CTAs/Live only. */
    .v-badge--navy   { background: var(--verge-navy-soft); color: var(--verge-navy); }   /* navy-soft #D5DCE4 · navy #15273F */
    .v-badge--tide   { background: var(--g-tide-soft); color: var(--g-tide); }           /* foam #C7DBE0 · tide #2C5A6E */
    .v-badge--outline{ background: transparent; border: 1px solid var(--verge-ink); color: var(--verge-ink); }

    /* ===== Pillars =====
       Stay clean — H3 800 + body. */
    .v-pillar__t {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800;
      font-size: 22px; letter-spacing: -0.018em;
      margin: 0 0 12px; color: var(--verge-ink);
    }
    .v-pillar__d { font-size: 15px; line-height: 1.7; color: var(--fg-2); margin: 0; }
    .v-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; text-align: center; }
    .v-pillar__icon {
      width: 56px; height: 56px; border-radius: 4px;   /* same radius as the service chip */
      background: #15273F; border: none;
      color: #FAFAFA;
      display: inline-flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
    }
    .v-pillar__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }

    /* ===== Insights cards ===== */
    .v-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .v-post {
      background: white;
      border: 1px solid var(--verge-stone);
      display: flex; flex-direction: column;
      transition: box-shadow 240ms var(--ease);
    }
    .v-post:hover { box-shadow: 0 16px 36px rgba(10,19,32,0.07); }
    .v-post__img { aspect-ratio: 16/10; background-size: cover; background-position: center; position: relative; }
    .v-post__img .v-badge { position: absolute; top: 14px; left: 14px; background: rgba(250,250,250,0.95); }
    .v-post__body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
    .v-post__date {
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.14em;
      font-weight: 600;
      color: var(--fg-muted); text-transform: uppercase;
    }
    .v-post__t {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800;
      font-size: 22px; letter-spacing: -0.018em; line-height: 1.25;
      margin: 0; color: var(--verge-ink); text-wrap: balance;
    }
    .v-post__d { font-size: 14px; line-height: 1.65; color: var(--fg-2); margin: 0; }
    .v-post__cta { margin-top: auto; padding-top: 6px; }

    /* ===== What's On — events ===== */
    .v-events { display: flex; flex-direction: column; gap: 24px; }

    /* Level 1 — Featured event (prominent, navy) */
    .v-featured {
      background: var(--verge-navy);
      color: var(--verge-off-white);
      border-radius: 4px;
      padding: 48px 56px;
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 56px;
      align-items: center;
    }
    .v-featured__main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
    .v-featured__labels { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .v-featured__t {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 32px; line-height: 1.16;
      letter-spacing: -0.02em; margin: 0; color: #fff; text-wrap: balance;
    }
    .v-featured__d { font-size: 17px; line-height: 1.65; color: rgba(250,250,250,0.78); margin: 0; max-width: 54ch; }
    .v-featured__cta { margin-top: 8px; }
    .v-featured__meta {
      display: flex; flex-direction: column; gap: 22px;
      border-left: 1px solid rgba(255,255,255,0.16);
      padding-left: 40px;
    }
    .v-featured__date {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: #fff; line-height: 1.12;
    }
    .v-featured__metarow { display: flex; flex-direction: column; gap: 4px; }
    .v-featured__metarow .k {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; color: #8B97A4;
    }
    .v-featured__metarow .val { font-family: var(--font-body); font-size: 16px; color: rgba(250,250,250,0.92); }

    /* Live indicator */
    .v-live { display: inline-flex; align-items: center; gap: 8px; }
    .v-live__dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--verge-orange);
      animation: vPulse 2s infinite;
    }
    .v-live__txt {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; color: rgba(250,250,250,0.85);
    }
    @keyframes vPulse {
      0%   { box-shadow: 0 0 0 0 rgba(236,91,41,0.55); }
      70%  { box-shadow: 0 0 0 8px rgba(236,91,41,0); }
      100% { box-shadow: 0 0 0 0 rgba(236,91,41,0); }
    }

    /* Level 2 — Event list (compact schedule) */
    .v-evlist { border-top: 1px solid var(--verge-stone); }
    .v-evrow {
      display: grid;
      grid-template-columns: 150px 140px 1fr 220px 132px;
      gap: 24px; align-items: center;
      padding: 22px 16px;
      border-bottom: 1px solid var(--verge-stone);
      transition: background 160ms var(--ease);
    }
    .v-evrow:hover { background: var(--verge-stone-2); }
    .v-evrow__date {
      font-family: var(--font-mono);
      font-size: 13px; letter-spacing: 0.08em; color: var(--fg-2); text-transform: uppercase; font-weight: 600;
    }
    .v-evrow__name {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 700; font-size: 18px; letter-spacing: -0.012em; color: var(--verge-ink);
      line-height: 1.3;
    }
    .v-evrow__loc {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-body); font-size: 15px; color: var(--fg-2);
    }
    .v-evrow__loc svg { width: 15px; height: 15px; stroke-width: 1.6; color: var(--verge-orange); flex: 0 0 auto; }
    .v-evrow__cta { justify-self: end; }

    @media (max-width: 900px) {
      .v-featured { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px; }
      .v-featured__meta { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 28px 48px; }
      .v-evrow { grid-template-columns: auto 1fr; gap: 6px 20px; padding: 20px 12px; }
      .v-evrow__name { grid-column: 1 / -1; }
      .v-evrow__loc { grid-column: 1 / -1; }
      .v-evrow__cta { grid-column: 1 / -1; justify-self: start; }
    }

    /* ===== Contact (form section) ===== */
    .v-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; max-width: 1080px; margin: 0 auto; }
    .v-contact__lede { font-size: 17px; line-height: 1.7; color: var(--fg-2); margin: 18px 0 28px; max-width: 38ch; }
    .v-contact__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .v-contact__facts li {
      display: grid; grid-template-columns: 22px 1fr 1fr; gap: 14px; align-items: start;
      font-size: 15px; color: var(--fg-2);
    }
    .v-contact__facts li svg { width: 18px; height: 18px; stroke-width: 1.5; color: var(--verge-orange); margin-top: 2px; }
    .v-contact__facts .k {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; color: #8B97A4;
    }
    .v-check {
      display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
      font-size: 13px; line-height: 1.55; color: var(--fg-2);
      margin: 0 0 24px;
    }
    .v-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--verge-orange); }

    .v-svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* keep the description block starting at the same y across cards regardless of title line count */
    .v-svc-grid--3 .v-svc__t { min-height: calc(28px * 1.18 * 2); }
    @media (max-width: 1100px) {
      .v-svc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .v-svc-grid, .v-svc-grid--3 { grid-template-columns: 1fr; }
      .v-pillars, .v-posts { grid-template-columns: 1fr; gap: 32px; }
      .v-contact { grid-template-columns: 1fr; gap: 48px; }
    }

    /* ===== Personal invitation (Christian) ===== */
    .v-invite {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 60px;
      align-items: center;
      max-width: 1000px;
      margin: 0 auto;
    }
    .v-invite__aside { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; flex: 0 0 auto; }
    .v-invite__photo {
      width: 132px; height: 132px; border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(255,255,255,0.16);
      box-shadow: 0 14px 36px rgba(0,0,0,0.32);
      background: #1F3654; display: block;
    }
    .v-invite__id { display: flex; flex-direction: column; gap: 4px; }
    .v-invite__name {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: #fff; line-height: 1.15;
    }
    .v-invite__role {
      font-family: 'Plus Jakarta Sans', var(--font-body);
      font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8B97A4;
    }
    .v-invite__body { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
    .v-invite__statement {
      font-family: 'Plus Jakarta Sans', var(--font-display);
      font-weight: 500; font-size: 27px; line-height: 1.4; letter-spacing: -0.012em;
      color: #FAFAFA; margin: 0; text-wrap: pretty;
    }
    .v-invite__statement em { font-style: italic; font-weight: 600; color: var(--verge-orange); }
    .v-invite__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
    .v-invite__primary { text-transform: uppercase; letter-spacing: 0.08em; }

    @media (max-width: 760px) {
      .v-invite { grid-template-columns: 1fr; gap: 36px; padding: 44px 30px; }
      .v-invite__body { align-items: center; text-align: center; }
      .v-invite__statement { font-size: 22px; }
      .v-invite__actions { justify-content: center; gap: 20px; }
    }

    /* ================================================================
       FOOTER — three equal columns, no logo column
       ================================================================ */
    .v-foot { background: #0A1320; }
    .v-foot__inner {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 64px;
    }
    .v-foot__social {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .v-foot__social a {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.85);
      transition: border-color .15s ease, color .15s ease, background .15s ease;
      /* unset site.css .v-foot__col a styling */
      font-size: 0;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }
    .v-foot__social a:hover {
      color: var(--verge-orange);
      border-color: var(--verge-orange);
    }
    .v-foot__social svg { width: 18px; height: 18px; display: block; }

    /* Bottom bar — Legal Notice · Datenschutz · © 2026 Verged CX GmbH */
    .v-foot__bottom {
      color: #8B97A4;
      font-family: 'Inter', var(--font-body);
      font-weight: 400;
      font-size: 13px;
      text-transform: none;
      letter-spacing: 0;
    }
    .v-foot__legal {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .v-foot__legal a {
      color: #8B97A4;
      font-family: 'Inter', var(--font-body);
      font-weight: 400;
      font-size: 13px;
      text-transform: none;
      letter-spacing: 0;
      text-decoration: none;
      transition: color .15s ease;
    }
    .v-foot__legal a:hover { color: #FAFAFA; }
    .v-foot__sep { color: rgba(139, 151, 164, 0.6); }

    @media (max-width: 767px) {
      .v-foot__inner { grid-template-columns: 1fr; gap: 40px; }
    }