/* ==========================================================================
   Veyyo - design system + scroll scenes
   Brand colours and voice carried over from the Elementor build; type scale,
   rhythm and motion rebuilt.
   ========================================================================== */

:root {
  --vy-bg:          #0b0b0c;
  --vy-bg-deep:     #060607;
  --vy-bg-raised:   #141416;
  --vy-bg-card:     #121214;
  --vy-line:        rgba(255, 255, 255, 0.09);
  --vy-line-strong: rgba(255, 255, 255, 0.2);
  --vy-heading:     #ffffff;
  --vy-text:        #f2f2f3;
  --vy-muted:       #9a9aa0;
  --vy-accent:      #e0254f;
  --vy-accent-deep: #c02146;

  --vy-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --vy-display: clamp(2.9rem, 1.2rem + 7vw, 7rem);
  --vy-h2:      clamp(2.2rem, 1.1rem + 4.2vw, 4.5rem);
  --vy-h3:      clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  --vy-h4:      clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --vy-body:    1.0625rem;

  --vy-wrap: 1200px;
  --vy-gutter: clamp(1.25rem, 4vw, 3rem);
  --vy-section: clamp(5.5rem, 11vw, 11rem);
  --vy-radius: 22px;
  --vy-radius-sm: 14px;

  --vy-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vy-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--vy-bg);
  color: var(--vy-text);
  font-family: var(--vy-font);
  font-size: var(--vy-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  color: var(--vy-heading);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--vy-display); font-weight: 700; }
h2 { font-size: var(--vy-h2); }
h3 { font-size: var(--vy-h3); }
h4 { font-size: var(--vy-h4); line-height: 1.25; letter-spacing: -0.02em; }

p { margin: 0 0 1.2em; color: var(--vy-muted); }
p:last-child { margin-bottom: 0; }

/* Elementor's kit stylesheet is still enqueued site-wide and paints every
   link and button crimson. Theme elements state their own colours at a
   specificity it cannot reach. */
a.vy-btn, a.vy-btn:hover, a.vy-btn:focus { text-decoration: none; }
.vy a:where(:not(.vy-btn)) { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--vy-accent); outline-offset: 4px; border-radius: 6px; }

.vy-wrap { width: 100%; max-width: var(--vy-wrap); margin-inline: auto; padding-inline: var(--vy-gutter); }
.vy-wrap--narrow { max-width: 900px; }

.vy-section { padding-block: var(--vy-section); position: relative; }
.vy-section--tight { padding-block: calc(var(--vy-section) * 0.55); }
.vy-section--deep { background: var(--vy-bg-deep); }

.vy-eyebrow {
  display: inline-block;
  font-size: 0.78125rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vy-accent); margin-bottom: 1.1rem;
}

.vy-lede { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); max-width: 60ch; line-height: 1.55; }
.vy-center { text-align: center; }
/* a centred lede needs the auto margins whether the class sits on the
   paragraph itself or on an ancestor */
.vy-center .vy-lede, .vy-lede.vy-center { margin-inline: auto; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.vy-skip { position: absolute; left: -9999px; top: 0; background: var(--vy-accent); color: #fff; padding: 0.75rem 1.25rem; z-index: 999; }
.vy-skip:focus { left: 1rem; top: 1rem; }

/* ---------- Buttons ---------- */
.vy-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.7rem; border-radius: 999px;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.4s var(--vy-ease), background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.4s;
}
.vy-btn.vy-btn--primary { background: var(--vy-accent); color: #fff; box-shadow: 0 14px 40px -16px rgba(224, 37, 79, 0.9); }
.vy-btn.vy-btn--primary:hover { background: #f03059; transform: translateY(-2px); box-shadow: 0 20px 48px -18px rgba(224, 37, 79, 1); }
.vy-btn.vy-btn--ghost { border-color: var(--vy-line-strong); color: var(--vy-heading); background: transparent; }
.vy-btn.vy-btn--ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.34); transform: translateY(-2px); }
.vy-btn__arrow { transition: transform 0.4s var(--vy-ease); }
.vy-btn:hover .vy-btn__arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.vy-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 11, 12, 0.6);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s;
}
@supports (backdrop-filter: blur(1px)) {
  .vy-header { backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); }
}
.vy-header.is-stuck { background: rgba(11, 11, 12, 0.88); border-bottom-color: var(--vy-line); }
.vy-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 72px; }
.vy-logo, .vy-header__inner .custom-logo-link, .vy-footer .custom-logo-link { display: flex; align-items: center; }
/* WordPress prints the site logo with its own classes, not the theme's. */
.vy-logo img, .vy-logo svg,
.vy-header__inner .custom-logo-link img,
.vy-footer .custom-logo-link img { width: 42px; height: auto; }

.vy-nav { display: flex; align-items: center; }
.vy-nav ul { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.vy-nav li { position: relative; }
.vy-nav a {
  display: inline-block; padding: 0.55rem 0.9rem;
  font-size: 0.875rem; font-weight: 500; color: var(--vy-text);
  border-radius: 999px; transition: color 0.25s, background-color 0.25s;
}
.vy-nav a:hover, .vy-nav .current-menu-item > a { color: #fff; background: rgba(255, 255, 255, 0.08); }
.vy-nav .sub-menu {
  /* the nav sits hard right, so drop-downs hang from the right edge or
     they push the page sideways */
  position: absolute; top: calc(100% + 0.4rem); right: 0; left: auto; min-width: 230px;
  flex-direction: column; align-items: stretch; gap: 0.1rem; padding: 0.45rem;
  background: var(--vy-bg-raised); border: 1px solid var(--vy-line); border-radius: var(--vy-radius-sm);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
@media (min-width: 981px) {
  .vy-nav li:hover > .sub-menu, .vy-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}
.vy-nav .sub-menu a { display: block; padding: 0.55rem 0.75rem; border-radius: 9px; }

.vy-burger {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--vy-line); border-radius: 11px; cursor: pointer;
}
.vy-burger span { display: block; width: 17px; height: 1.5px; background: #fff; position: relative; transition: background-color 0.2s; }
.vy-burger span::before, .vy-burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: #fff;
  transition: transform 0.35s var(--vy-ease);
}
.vy-burger span::before { top: -6px; }
.vy-burger span::after { top: 6px; }
.vy-burger[aria-expanded="true"] span { background: transparent; }
.vy-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.vy-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .vy-burger { display: inline-flex; }
  .vy-nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch;
    padding: 1rem var(--vy-gutter) 2rem; background: rgba(11, 11, 12, 0.98);
    border-bottom: 1px solid var(--vy-line);
    max-height: calc(100dvh - 72px); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    /* The panel is fixed across the top of the page, so while it is shut
       nothing inside it may take a tap. */
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  }
  .vy-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .vy-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .vy-nav a { padding: 0.95rem 0.25rem; font-size: 1.05rem; border-radius: 0; }
  .vy-nav .sub-menu {
    /* inherit, not visible: a descendant that declares visibility:visible
       re-shows itself inside a hidden ancestor, and is hit-tested again with
       it - which left these links live over the page with the menu shut. */
    position: static; opacity: 1; visibility: inherit; transform: none; box-shadow: none;
    background: transparent; border: 0; border-left: 1px solid var(--vy-line);
    margin: 0 0 0.5rem 0.3rem; border-radius: 0; padding: 0 0 0 0.8rem;
  }
}

/* ==========================================================================
   Scroll scenes - every scene element gets --p (0 to 1) from scroll.js
   ========================================================================== */

/* Gated on .vy-js, which the inline script in the head sets. Without it the
   page is simply visible - a broken or blocked script must never leave the
   whole site blank, for a reader or for a crawler that does not run JS. */
.vy-js .vy-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--vy-ease), transform 0.9s var(--vy-ease); }
.vy-js .vy-reveal.is-in { opacity: 1; transform: none; }

.vy-js .vy-words span { display: inline-block; opacity: 0.12; transform: translateY(0.14em); transition: opacity 0.1s linear, transform 0.1s linear; will-change: opacity, transform; }
.vy-words span.is-lit { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vy-js .vy-reveal { opacity: 1; transform: none; transition: none; }
  .vy-js .vy-words span { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.vy-hero { position: relative; height: 170vh; }
.vy-hero__pin {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
}
.vy-hero__inner {
  position: relative; z-index: 2; text-align: center;
  opacity: calc(1 - var(--p, 0) * 1.7);
  transform: translateY(calc(var(--p, 0) * -70px));
  will-change: opacity, transform;
}
.vy-hero h1 { margin-bottom: 1.1rem; }
.vy-hero h1 em { font-style: normal; color: var(--vy-accent); }
.vy-hero p { max-width: 46ch; margin-inline: auto; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); color: var(--vy-muted); }
.vy-hero__cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

.vy-globe {
  position: absolute; left: 50%; top: 50%;
  width: min(1500px, 125%); aspect-ratio: 1024 / 484;
  z-index: 1; pointer-events: none;
  transform: translate(-50%, calc(-50% + 14vh)) scale(calc(1 + var(--p, 0) * 0.5));
  opacity: calc(1 - var(--p, 0) * 0.55);
  will-change: transform, opacity;
}
.vy-globe img { width: 100%; height: 100%; }
/* The canvas is deliberately larger than its box - see globe.js - so the
   dots have room to fly in from off the artwork instead of being clipped
   to a rectangle on a wide window. */
/* max-width from the global reset would cap it back to the box. */
.vy-globe canvas { position: absolute; max-width: none; }

@media (max-width: 760px) {
  /* The dot field shrinks to nothing at phone width, so it gets more room.
     It sits behind the headline and stops short of the copy below it. The
     offset is in vw, not vh: the globe is sized from the viewport's width,
     so a width-based lift tracks its height instead of drifting on short
     screens. */
  .vy-globe { width: 185%; transform: translate(-50%, calc(-50% - 21vw)) scale(calc(1 + var(--p, 0) * 0.5)); }
}
.vy-globe__fallback { opacity: 0.8; }

.vy-hero__glow {
  position: absolute; left: 50%; top: 68%; width: 130%; aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(224, 37, 79, 0.16), transparent 60%);
  z-index: 0; pointer-events: none;
  opacity: calc(1 - var(--p, 0));
}

.vy-scrollcue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vy-muted); display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  opacity: calc(1 - var(--p, 0) * 3);
}
.vy-scrollcue::after {
  content: ""; width: 1px; height: 38px;
  background: linear-gradient(180deg, var(--vy-line-strong), transparent);
  animation: vy-cue 2.4s var(--vy-ease-io) infinite;
}
@keyframes vy-cue { 0%, 100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (prefers-reduced-motion: reduce) { .vy-scrollcue::after { animation: none; } }

/* ---------- Statement scene ---------- */
.vy-statement { height: 190vh; position: relative; }
.vy-statement__pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.vy-statement h2 {
  font-size: clamp(2rem, 1rem + 5vw, 5.2rem);
  max-width: 17ch; text-align: center; margin: 0;
}

/* ---------- Zoom scene ---------- */
.vy-zoom { position: relative; height: 170vh; }
.vy-zoom__pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.vy-zoom__frame {
  position: relative; overflow: hidden;
  width: calc(58% + var(--p, 0) * 42%);
  height: calc(56vh + var(--p, 0) * 44vh);
  border-radius: calc(26px - var(--p, 0) * 26px);
  will-change: width, height, border-radius;
}
.vy-zoom__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.72); }
.vy-zoom__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0.25), rgba(11,11,12,0.8)); }
.vy-zoom__copy {
  position: absolute; z-index: 2; text-align: center; padding-inline: var(--vy-gutter);
  max-width: 900px; opacity: var(--p, 0);
}
.vy-zoom__copy h2 { margin-bottom: 0.6rem; }

/* ---------- Capability grid ---------- */
.vy-grid { display: grid; gap: 1.1rem; }
.vy-grid > *, .vy-split > *, .vy-stats > *, .vy-posts > *, .vy-footer__grid > * { min-width: 0; }
.vy-grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.vy-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.vy-card {
  position: relative; padding: 2rem 1.9rem 2.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.016));
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius);
  transition: transform 0.5s var(--vy-ease), border-color 0.5s; overflow: hidden;
}
.vy-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(224,37,79,0.18), transparent 62%);
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.vy-card:hover { transform: translateY(-5px); border-color: var(--vy-line-strong); }
.vy-card:hover::after { opacity: 1; }
.vy-card h4 { font-size: 1.22rem; margin-bottom: 0.55rem; }
.vy-card p { font-size: 0.975rem; margin: 0; line-height: 1.6; }
.vy-card__num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--vy-accent); margin-bottom: 1.4rem; display: block; }

/* ---------- Sticky services ---------- */
.vy-services { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
/* Sticky only once the head has a column of its own. In the single-column
   layout it would pin itself over the cards it is introducing. */
@media (min-width: 900px) {
  .vy-services { grid-template-columns: 0.85fr 1.15fr; }
  .vy-services__head { position: sticky; top: calc(72px + 3rem); }
}
.vy-services__list { display: grid; gap: 1rem; }
.vy-service {
  padding: 2rem 1.9rem; border: 1px solid var(--vy-line); border-radius: var(--vy-radius);
  background: var(--vy-bg-card);
  transition: border-color 0.5s, background-color 0.5s, transform 0.5s var(--vy-ease);
}
.vy-service.is-near { border-color: var(--vy-line-strong); background: var(--vy-bg-raised); }
.vy-service__kicker { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.vy-service__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vy-accent); flex: 0 0 auto; }
.vy-service h3 { font-size: 1.5rem; margin: 0; letter-spacing: -0.02em; }
.vy-service p { font-size: 0.975rem; margin: 0; }

/* ---------- Stats ---------- */
.vy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.vy-stat { text-align: center; }
.vy-stat__num {
  display: block; font-size: clamp(1.8rem, 1rem + 2vw, 3rem); font-weight: 700;
  color: #fff; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vy-stat__label { font-size: 0.9rem; color: var(--vy-muted); display: block; margin-top: 0.7rem; }

/* ---------- Marquee ---------- */

/* ---------- Testimonials rail ---------- */
.vy-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 400px);
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--vy-gutter); padding-bottom: 1.2rem;
  scrollbar-width: none;
}
.vy-rail::-webkit-scrollbar { display: none; }
.vy-rail:focus-visible { outline: 2px solid var(--vy-accent); outline-offset: 6px; border-radius: var(--vy-radius); }

/* Swiping sideways suits a phone; on a desktop a half-visible card just reads
   as cut off, so the quotes wrap into a grid inside the normal column. */
@media (min-width: 900px) {
  .vy-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    max-width: var(--vy-wrap);
    margin-inline: auto;
    padding-bottom: 0;
  }
}
.vy-quote {
  scroll-snap-align: center; padding: 2rem 1.9rem;
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius); background: var(--vy-bg-card);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
}
.vy-quote blockquote { margin: 0; color: var(--vy-text); font-size: 1.05rem; line-height: 1.6; letter-spacing: -0.01em; }
.vy-quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; }
.vy-quote__name { color: #fff; font-weight: 600; font-size: 0.9rem; }
.vy-quote__role { color: var(--vy-muted); font-size: 0.85rem; }

/* ---------- FAQ ---------- */
.vy-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 0.6rem; }
.vy-faq details { border: 1px solid var(--vy-line); border-radius: var(--vy-radius-sm); background: var(--vy-bg-card); overflow: hidden; }
.vy-faq details[open] { border-color: var(--vy-line-strong); }
.vy-faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 1.5rem; color: #fff;
  font-weight: 500; font-size: 1.05rem; letter-spacing: -0.015em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.vy-faq summary::-webkit-details-marker { display: none; }
.vy-faq summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 1.5px solid var(--vy-muted); border-bottom: 1.5px solid var(--vy-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.4s var(--vy-ease);
}
.vy-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.vy-faq__body { padding: 0 1.5rem 1.45rem; }
.vy-faq__body p { margin: 0; }

/* ---------- Posts ---------- */
.vy-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.vy-post { border: 1px solid var(--vy-line); border-radius: var(--vy-radius); overflow: hidden; background: var(--vy-bg-card); transition: transform 0.5s var(--vy-ease), border-color 0.5s; }
.vy-post:hover { transform: translateY(-5px); border-color: var(--vy-line-strong); }
/* an <a> is inline by default, and aspect-ratio does nothing to an inline box */
.vy-post__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #1a1a1c; }
.vy-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--vy-ease); }
.vy-post:hover .vy-post__thumb img { transform: scale(1.05); }
.vy-post__body { padding: 1.5rem; }
.vy-post__meta { font-size: 0.75rem; color: var(--vy-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.vy-post__title { font-size: 1.8rem; margin: 0.7rem 0 0.8rem; line-height: 1.2; letter-spacing: -0.025em; }
.vy-post__title a:hover { color: var(--vy-accent); }

/* ---------- CTA ---------- */
.vy-cta {
  text-align: center; padding: clamp(3.5rem, 8vw, 6.5rem) var(--vy-gutter);
  border: 1px solid var(--vy-line); border-radius: calc(var(--vy-radius) + 8px);
  background: radial-gradient(1000px circle at 50% 0%, rgba(224,37,79,0.2), transparent 60%), var(--vy-bg-card);
}
.vy-cta h2 { max-width: 16ch; margin-inline: auto; }

/* ---------- Split ---------- */
.vy-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vy-split { grid-template-columns: 1fr 1fr; } .vy-split--flip .vy-split__media { order: 2; } }
.vy-split__media img { border-radius: var(--vy-radius); border: 1px solid var(--vy-line); width: 100%; }

/* ---------- Footer ---------- */
.vy-footer { border-top: 1px solid var(--vy-line); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.vy-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .vy-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.vy-footer h4 { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vy-muted); margin-bottom: 1.1rem; font-weight: 600; }
.vy-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.vy-footer a { color: var(--vy-text); font-size: 0.9rem; }
.vy-footer a:hover { color: var(--vy-accent); }
.vy-footer__about p { font-size: 0.9rem; max-width: 40ch; }
.vy-footer__legal { font-size: 0.78rem; color: var(--vy-muted); line-height: 1.8; margin-top: 1.3rem; }
.vy-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--vy-line); font-size: 0.82rem; color: var(--vy-muted); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ---------- Editor content ---------- */
.vy-entry { max-width: 740px; margin-inline: auto; font-size: 1.0625rem; }
.vy-entry img { border-radius: var(--vy-radius-sm); margin-block: 1.6rem; }
.vy-entry h2, .vy-entry h3 { margin-top: 1.8em; }
.vy-entry ul, .vy-entry ol { color: var(--vy-muted); padding-left: 1.3em; }
.vy-entry li { margin-bottom: 0.5em; }
.vy-entry blockquote { margin: 2rem 0; padding-left: 1.6rem; border-left: 2px solid var(--vy-accent); color: var(--vy-text); }
.vy-entry a { color: var(--vy-accent); text-decoration: underline; text-underline-offset: 3px; }
.vy-entry code { background: #1a1a1c; padding: 0.15em 0.4em; border-radius: 5px; font-size: 0.9em; }
.vy-entry pre { background: #1a1a1c; padding: 1.3rem; border-radius: var(--vy-radius-sm); overflow-x: auto; }

.vy-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.vy-pagination .page-numbers { padding: 0.6rem 1rem; border: 1px solid var(--vy-line); border-radius: 11px; font-size: 0.9rem; }
.vy-pagination .current { background: var(--vy-accent); border-color: var(--vy-accent); color: #fff; }

.vy-404 { text-align: center; padding-block: clamp(5rem, 14vw, 10rem); }

@media (prefers-reduced-motion: reduce) {
  .vy-hero, .vy-statement, .vy-zoom { height: auto; }
  .vy-hero__pin, .vy-statement__pin, .vy-zoom__pin { position: static; height: auto; padding-block: var(--vy-section); }
  .vy-hero__inner, .vy-globe, .vy-zoom__copy { opacity: 1; transform: none; }
  .vy-globe { position: relative; left: auto; top: auto; width: 100%; margin-top: 3rem; }
  .vy-zoom__frame { width: 100%; height: 60vh; border-radius: var(--vy-radius); }
}

/* ==========================================================================
   Journal - index, archives and the article itself
   The reading column is the point here: ~68 characters, 1.78 line-height and
   a slightly brighter body colour than the marketing pages use, because this
   is text people actually sit and read.
   ========================================================================== */

.vy-chip {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--vy-line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vy-muted);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
a.vy-chip:hover { color: #fff; border-color: var(--vy-line-strong); }
.vy-chip.is-current { background: var(--vy-accent); border-color: var(--vy-accent); color: #fff; }

.vy-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }

/* ---------- Lead post ---------- */
.vy-lead-post {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--vy-line); border-radius: calc(var(--vy-radius) + 4px);
  background: var(--vy-bg-card);
  transition: border-color 0.5s, transform 0.5s var(--vy-ease);
}
@media (min-width: 880px) { .vy-lead-post { grid-template-columns: 1.15fr 1fr; } }
.vy-lead-post:hover { border-color: var(--vy-line-strong); transform: translateY(-4px); }
.vy-lead-post__thumb { display: block; overflow: hidden; border-radius: var(--vy-radius); aspect-ratio: 16 / 10; }
.vy-lead-post__title a:hover { color: var(--vy-accent); }
.vy-lead-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vy-lead-post__title {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); margin: 1rem 0 0.75rem; line-height: 1.12;
}
.vy-lead-post p { font-size: 1.0625rem; margin-bottom: 1.1rem; }

/* ---------- Reading progress ---------- */
.vy-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: transparent; pointer-events: none;
}
.vy-progress__fill {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--vy-accent);
}

/* ---------- Article ---------- */
.vy-article__head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.vy-article__head h1 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  margin: 1.1rem 0 0; line-height: 1.08; max-width: 20ch;
}
.vy-article__standfirst {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6;
  color: var(--vy-muted); margin: 1.2rem 0 0; max-width: 60ch;
}
.vy-article__meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin-top: 1.6rem; font-size: 0.875rem; color: var(--vy-muted);
}
.vy-article__author { color: var(--vy-text); }

.vy-crumbs { font-size: 0.8125rem; color: var(--vy-muted); margin-bottom: 1.4rem; }
.vy-crumbs a { color: var(--vy-muted); }
.vy-crumbs a:hover { color: var(--vy-accent); }

.vy-article__cover { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.vy-article__cover img {
  width: 100%; max-height: 62vh; object-fit: cover;
  border-radius: var(--vy-radius); border: 1px solid var(--vy-line);
}

.vy-article__body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 1080px) {
  /* no align-items here on purpose: the aside has to stretch the full row
     height, or its sticky child has nothing to travel inside and scrolls
     away with the first screen */
  .vy-article__body { grid-template-columns: 230px minmax(0, 1fr); }
  .vy-article__body.is-solo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contents ---------- */
.vy-toc__inner {
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius-sm);
  padding: 1.2rem 1.3rem; background: var(--vy-bg-card);
}
@media (min-width: 1080px) {
  .vy-toc__inner { position: sticky; top: calc(72px + 2rem); background: transparent; border: 0; padding: 0; }
}
.vy-toc__title {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vy-muted); margin: 0 0 0.9rem; font-weight: 600;
}
.vy-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.vy-toc a {
  display: block; font-size: 0.9rem; line-height: 1.45; color: var(--vy-muted);
  padding-left: 0.85rem; border-left: 2px solid var(--vy-line);
  transition: color 0.3s, border-color 0.3s;
}
.vy-toc a:hover { color: var(--vy-text); }
.vy-toc a.is-current { color: #fff; border-left-color: var(--vy-accent); }
.vy-toc__item--h3 a { padding-left: 1.6rem; font-size: 0.85rem; }

/* ---------- The reading column ---------- */
.vy-entry {
  /* ch over-measures badly in Inter - 68ch lands near 90 characters,
     which is well past comfortable. A fixed measure keeps it around 70. */
  max-width: 41rem;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.78;
  color: #c9c9cf;
  letter-spacing: 0.002em;
}
.vy-entry > p { margin: 0 0 1.5em; }
.vy-entry > p:first-of-type { font-size: 1.1em; line-height: 1.7; color: var(--vy-text); }
.vy-entry strong, .vy-entry b { color: #fff; font-weight: 600; }

.vy-entry h2, .vy-entry h3, .vy-entry h4 {
  color: #fff; letter-spacing: -0.02em; line-height: 1.2;
  scroll-margin-top: calc(72px + 1.5rem);
}
.vy-entry h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2.6em 0 0.6em; }
.vy-entry h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); margin: 2.2em 0 0.5em; }
.vy-entry h4 { font-size: 1.15rem; margin: 2em 0 0.5em; }
.vy-entry h2:first-child, .vy-entry h3:first-child { margin-top: 0; }

.vy-entry ul, .vy-entry ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.vy-entry li { margin-bottom: 0.6em; padding-left: 0.2em; }
.vy-entry li::marker { color: var(--vy-accent); }

.vy-entry a {
  color: #fff; text-decoration: underline;
  text-decoration-color: rgba(224, 37, 79, 0.6);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color 0.3s, color 0.3s;
}
.vy-entry a:hover { color: var(--vy-accent); text-decoration-color: var(--vy-accent); }

.vy-entry blockquote {
  margin: 2.2em 0; padding: 0.2em 0 0.2em 1.6rem;
  border-left: 2px solid var(--vy-accent);
  color: #fff; font-size: 1.1em; line-height: 1.6;
}
.vy-entry blockquote p:last-child { margin-bottom: 0; }

.vy-entry img, .vy-entry figure { margin: 2.4em 0; }
.vy-entry img { border-radius: var(--vy-radius-sm); width: 100%; }
.vy-entry figcaption {
  margin-top: 0.8rem; font-size: 0.85rem; color: var(--vy-muted); text-align: center;
}

.vy-entry hr { border: 0; border-top: 1px solid var(--vy-line); margin: 3em 0; }

.vy-entry code {
  background: #1a1a1c; padding: 0.15em 0.4em; border-radius: 5px;
  font-size: 0.88em; color: #fff;
}
.vy-entry pre {
  background: #141416; border: 1px solid var(--vy-line);
  padding: 1.3rem; border-radius: var(--vy-radius-sm); overflow-x: auto;
  font-size: 0.9rem; line-height: 1.6; margin: 2em 0;
}
.vy-entry pre code { background: none; padding: 0; }

.vy-entry table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 0.95em; }
.vy-entry th, .vy-entry td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--vy-line); text-align: left; }
.vy-entry th { color: #fff; font-weight: 600; }

.vy-tags { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vy-tags a {
  font-size: 0.8rem; color: var(--vy-muted);
  padding: 0.35rem 0.8rem; border: 1px solid var(--vy-line); border-radius: 999px;
}
.vy-tags a:hover { color: #fff; border-color: var(--vy-line-strong); }

/* ---------- Previous / next ---------- */
.vy-adjacent__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .vy-adjacent__grid { grid-template-columns: 1fr 1fr; } }
.vy-adjacent__link {
  display: grid; gap: 0.4rem; padding: 1.5rem 1.6rem;
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius);
  background: var(--vy-bg-card);
  transition: border-color 0.4s, transform 0.4s var(--vy-ease);
}
.vy-adjacent__link:hover { border-color: var(--vy-line-strong); transform: translateY(-3px); }
.vy-adjacent__link--next { text-align: right; }
.vy-adjacent__label {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vy-accent);
}
.vy-adjacent__title { color: #fff; font-weight: 500; line-height: 1.35; }

/* ---------- Search form ---------- */
.vy-search { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.vy-search input[type="search"] {
  flex: 1 1 240px; padding: 0.85rem 1.1rem;
  background: var(--vy-bg-card); color: var(--vy-text);
  border: 1px solid var(--vy-line); border-radius: 999px;
  font-family: inherit; font-size: 0.95rem;
}
.vy-search input[type="search"]::placeholder { color: var(--vy-muted); }

/* ---------- Comments ---------- */
.vy-comments { font-size: 0.975rem; }
.vy-comments ol { list-style: none; padding: 0; }
.vy-comments .comment-body {
  padding: 1.3rem 1.4rem; border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm); margin-bottom: 1rem; background: var(--vy-bg-card);
}
.vy-comments input[type="text"], .vy-comments input[type="email"], .vy-comments input[type="url"], .vy-comments textarea {
  width: 100%; padding: 0.8rem 1rem; background: var(--vy-bg-card); color: var(--vy-text);
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius-sm);
  font-family: inherit; font-size: 0.95rem; margin-top: 0.35rem;
}
.vy-comments .submit {
  margin-top: 1rem; padding: 0.85rem 1.7rem; border-radius: 999px; border: 0;
  background: var(--vy-accent); color: #fff; font-family: inherit; font-weight: 600; cursor: pointer;
}

/* ==========================================================================
   Inner pages - features, pricing, about, contact
   ========================================================================== */

/* Defensive: where the builder's kit CSS still loads it styles bare h2/h3 at
   display sizes, which blew these titles up. Two classes beats its one. */
.vy-post .vy-post__title { font-size: 1.8rem; line-height: 1.2; }
.vy-lead-post .vy-lead-post__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.vy-card h2, .vy-card h3, .vy-card h4 { font-size: var(--vy-h4); }

/* ---------- Tick lists ---------- */
.vy-ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.vy-ticks li {
  position: relative; padding-left: 1.7rem; color: var(--vy-muted); font-size: 0.975rem;
}
.vy-ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.46em;
  width: 9px; height: 5px; border-left: 1.5px solid var(--vy-accent);
  border-bottom: 1.5px solid var(--vy-accent); transform: rotate(-45deg);
}

/* ---------- Pricing ---------- */
.vy-plans { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.vy-plan {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 2rem 1.9rem 2.1rem;
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius);
  background: var(--vy-bg-card);
  transition: border-color 0.5s, transform 0.5s var(--vy-ease);
}
.vy-plan:hover { border-color: var(--vy-line-strong); transform: translateY(-4px); }
.vy-plan--lead {
  background: radial-gradient(700px circle at 50% 0%, rgba(224, 37, 79, 0.16), transparent 62%), var(--vy-bg-card);
  border-color: rgba(224, 37, 79, 0.4);
}
.vy-plan__note {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vy-accent); font-weight: 600;
}
.vy-plan .vy-plan__name { font-size: 1.35rem; margin: 0.8rem 0 0; letter-spacing: -0.02em; }
.vy-plan__list { list-style: none; margin: 1.3rem 0 2rem; padding: 0; display: grid; gap: 0.6rem; flex: 1 1 auto; }
.vy-plan__list li {
  position: relative; padding-left: 1.3rem; font-size: 0.95rem; color: var(--vy-muted);
}
.vy-plan__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--vy-line-strong);
}
.vy-plan .vy-btn { align-self: flex-start; }

/* ---------- Features ---------- */
.vy-feature { display: grid; gap: clamp(1.25rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .vy-feature { grid-template-columns: 7rem minmax(0, 1fr); } }
.vy-feature__index {
  font-size: clamp(2.6rem, 2rem + 2vw, 4rem); font-weight: 700;
  color: transparent; -webkit-text-stroke: 1px var(--vy-line-strong);
  line-height: 1; letter-spacing: -0.04em;
}
.vy-feature__body { max-width: 62ch; }
.vy-feature__body h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); margin-bottom: 0.7rem; }

/* ---------- Team ---------- */
.vy-team {
  list-style: none; margin: 3rem 0 0; padding: 0;
  /* Fixed track counts, not auto-fit: eight people divide evenly into four
     across, so both rows stay full and the cards line up. */
  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 680px)  { .vy-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vy-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vy-team__member {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.35rem 1.5rem; border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm); background: var(--vy-bg-card);
  transition: border-color 0.4s, transform 0.4s var(--vy-ease);
}
.vy-team__member:hover { border-color: var(--vy-line-strong); transform: translateY(-3px); }
.vy-team__initial {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 0.95rem; color: #fff;
  background: linear-gradient(145deg, var(--vy-accent), #7d1430);
}
.vy-team__name { color: var(--vy-text); font-size: 1.05rem; font-weight: 500; }

/* ---------- Contact ---------- */
.vy-contact { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .vy-contact { grid-template-columns: 1.35fr 1fr; } }
.vy-contact__form {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius);
  background: var(--vy-bg-card);
}

/* Formidable keeps its own markup and validation; this is only paint. */
.vy-contact__form .frm_form_field { margin-bottom: 1.2rem; }
.vy-contact__form .frm_primary_label {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--vy-text);
  margin-bottom: 0.45rem; letter-spacing: 0.01em;
}
.vy-contact__form input[type="text"],
.vy-contact__form input[type="email"],
.vy-contact__form input[type="url"],
.vy-contact__form input[type="tel"],
.vy-contact__form select,
.vy-contact__form textarea {
  width: 100%; padding: 0.85rem 1rem;
  background: var(--vy-bg); color: var(--vy-text);
  border: 1px solid var(--vy-line); border-radius: var(--vy-radius-sm);
  font-family: inherit; font-size: 0.975rem; line-height: 1.5;
  transition: border-color 0.3s, background-color 0.3s;
}
.vy-contact__form textarea { min-height: 150px; resize: vertical; }
.vy-contact__form input:focus, .vy-contact__form select:focus, .vy-contact__form textarea:focus {
  outline: none; border-color: var(--vy-accent); background: var(--vy-bg-raised);
}
.vy-contact__form .frm_description, .vy-contact__form .frm_error {
  font-size: 0.85rem; color: var(--vy-muted); margin-top: 0.4rem;
}
.vy-contact__form .frm_error { color: #ff6b8a; }
.vy-contact__form .frm_button_submit,
.vy-contact__form input[type="submit"],
.vy-contact__form button[type="submit"] {
  padding: 0.9rem 1.8rem; border-radius: 999px; border: 0;
  background: var(--vy-accent); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer;
  transition: background-color 0.3s, transform 0.3s var(--vy-ease);
}
.vy-contact__form .frm_button_submit:hover,
.vy-contact__form input[type="submit"]:hover,
.vy-contact__form button[type="submit"]:hover { background: #f03059; transform: translateY(-2px); }
.vy-contact__form .frm_radio label, .vy-contact__form .frm_checkbox label {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--vy-muted);
}

/* a whole card that is a link */
a.vy-card { display: block; }
.vy-card__more {
  display: inline-block; margin-top: 1.2rem;
  font-size: 0.85rem; font-weight: 600; color: var(--vy-accent);
}

/* a service page carries no table of contents, so the reading column
   lines up with the title instead of floating in the middle */
.vy-wrap--narrow > .vy-entry { margin-inline: 0; }

/* a heading that is itself a link should read as a link */
.vy-entry h2 > a, .vy-entry h3 > a, .vy-entry h4 > a {
  color: var(--vy-accent); text-decoration-color: currentColor;
}
.vy-entry h2 > a:hover, .vy-entry h3 > a:hover, .vy-entry h4 > a:hover { opacity: 0.8; }

/* ---------- A fixed pair ---------- */
/* auto-fit squeezes a third column in at wide widths and leaves the fourth
   card stranded on a row of its own; four cards should read as 2x2. */
.vy-grid--pair { grid-template-columns: 1fr; }
@media (min-width: 760px) { .vy-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Plan price ---------- */
.vy-plan__price { margin: 0.2rem 0 1.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.vy-plan__from {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--vy-muted);
}
.vy-plan__amount {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: #fff;
}
.vy-plan--lead .vy-plan__amount { color: var(--vy-accent); }

/* ---------- Team avatars ---------- */
.vy-team__avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; background: #17171a;
  transition: transform 0.4s var(--vy-ease);
}
.vy-team__member:hover .vy-team__avatar { transform: scale(1.08) rotate(-4deg); }

/* ---------- The YO mark ---------- */
/* The brand mark blown up well past the column and parked behind the team.
   Faint, slowly drifting, feathered at the edges so it reads as texture
   rather than a picture someone forgot to crop. */
.vy-yo { position: relative; isolation: isolate; overflow: hidden; }
.vy-yo > .vy-wrap { position: relative; z-index: 1; }
.vy-yo__mark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  top: 50%; left: 50%; width: min(150vw, 1600px); aspect-ratio: 1714 / 917;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.08;
  filter: grayscale(1) brightness(2.2) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 74%);
  transform: translate(-50%, -50%);
  animation: vy-yo-drift 24s ease-in-out infinite alternate;
}
@keyframes vy-yo-drift {
  from { transform: translate(-53%, -50%) scale(1) rotate(-1.5deg); opacity: 0.055; }
  to   { transform: translate(-47%, -50%) scale(1.08) rotate(1.5deg); opacity: 0.105; }
}
@media (prefers-reduced-motion: reduce) { .vy-yo__mark { animation: none; } }

/* ==========================================================================
   Form sent
   The plugin's own success box is a white card with white text on this
   theme - unreadable, and easy to miss under the fold. It gets replaced
   with a panel that draws itself in so you cannot miss that it worked.
   ========================================================================== */

.with_frm_style .frm_message,
.frm_success_style {
  background-color: transparent;
  border-color: transparent;
  color: var(--vy-text);
}

.with_frm_style .frm_message.vy-sent {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; text-align: center; gap: 0.4rem;
  margin: 0; padding: clamp(2.4rem, 5vw, 3.4rem) 1.5rem;
  border: 1px solid rgba(224, 37, 79, 0.35);
  border-radius: var(--vy-radius);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 37, 79, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.016));
  animation: vy-sent-in 0.6s var(--vy-ease) both;
}
@keyframes vy-sent-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.vy-sent__check { width: 62px; height: 62px; margin-bottom: 0.7rem; overflow: visible; }
.vy-sent__check circle,
.vy-sent__check path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vy-sent__check circle { stroke: var(--vy-accent); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: vy-draw 0.75s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards; }
.vy-sent__check path   { stroke: #fff;            stroke-width: 3; stroke-dasharray: 36;  stroke-dashoffset: 36;  animation: vy-draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.62s forwards; }
@keyframes vy-draw { to { stroke-dashoffset: 0; } }

.with_frm_style .frm_message p.vy-sent__title {
  margin: 0; color: #fff; font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); line-height: 1.15;
  animation: vy-sent-rise 0.55s var(--vy-ease) 0.72s both;
}
.with_frm_style .frm_message p.vy-sent__note {
  margin: 0; max-width: 34ch; color: var(--vy-muted); font-size: 1rem; line-height: 1.6;
  animation: vy-sent-rise 0.55s var(--vy-ease) 0.84s both;
}
@keyframes vy-sent-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* a short burst of brand-coloured confetti from behind the tick */
.vy-sent__burst { position: absolute; top: clamp(2.4rem, 5vw, 3.4rem); left: 0; right: 0; height: 62px; pointer-events: none; }
.vy-sent__burst span {
  position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 2px;
  background: var(--vy-accent); opacity: 0;
  animation: vy-sent-burst 1.15s cubic-bezier(0.2, 0.7, 0.3, 1) 0.58s forwards;
}
.vy-sent__burst span:nth-child(even) { background: #fff; width: 5px; height: 5px; border-radius: 50%; }
@keyframes vy-sent-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(8px) scale(0.3); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .with_frm_style .frm_message.vy-sent,
  .with_frm_style .frm_message p.vy-sent__title,
  .with_frm_style .frm_message p.vy-sent__note { animation: none; }
  .vy-sent__check circle, .vy-sent__check path { stroke-dashoffset: 0; animation: none; }
  .vy-sent__burst { display: none; }
}

/* ==========================================================================
   reCAPTCHA
   The badge sits in normal flow until Google's own stylesheet arrives, then
   turns fixed and animates its `right` - which looks like it leaps from the
   middle of the page to the corner. Hiding it is permitted as long as the
   attribution is shown instead, which app.js adds under each form.
   ========================================================================== */

.grecaptcha-badge { visibility: hidden !important; }

.vy-recaptcha {
  margin: 1.2rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--vy-muted);
}
.vy-recaptcha a { color: var(--vy-muted); text-decoration: underline; text-underline-offset: 2px; }
.vy-recaptcha a:hover { color: #fff; }

/* ==========================================================================
   Sent modal
   ========================================================================== */

.vy-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--vy-gutter);
}
.vy-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 6, 8, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.35s var(--vy-ease);
}
.vy-modal.is-open .vy-modal__backdrop { opacity: 1; }
.vy-modal.is-closing .vy-modal__backdrop { opacity: 0; }

.vy-modal__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

.vy-modal__card {
  position: relative; z-index: 1;
  width: min(560px, 100%); padding: clamp(2.4rem, 6vw, 3.6rem) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
  text-align: center; border-radius: calc(var(--vy-radius) + 6px);
  border: 1px solid rgba(224, 37, 79, 0.4);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(224, 37, 79, 0.28), transparent 65%),
    linear-gradient(180deg, #17171b, #0e0e10);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 80px rgba(224, 37, 79, 0.12);
  opacity: 0; transform: translateY(26px) scale(0.94);
  transition: opacity 0.4s var(--vy-ease), transform 0.5s cubic-bezier(0.22, 1.4, 0.4, 1);
}
.vy-modal.is-open .vy-modal__card { opacity: 1; transform: none; }
.vy-modal.is-closing .vy-modal__card { opacity: 0; transform: translateY(14px) scale(0.97); }

.vy-modal__close {
  position: absolute; top: 0.8rem; right: 0.9rem;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--vy-muted); font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
.vy-modal__close:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.vy-modal__check { width: 86px; height: 86px; margin: 0 auto 1.2rem; }
/* The emoji layer is absolute, so the card's own content needs a stacking
   position of its own or the faces drift across the words. */
.vy-modal__check, .vy-modal__title, .vy-modal__note, .vy-modal__actions { position: relative; z-index: 1; }

.vy-modal__title {
  margin: 0 0 0.6rem; color: #fff; letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem);
  animation: vy-sent-rise 0.5s var(--vy-ease) 0.5s both;
}
.vy-modal__note {
  margin: 0 auto; max-width: 36ch; color: var(--vy-muted);
  font-size: 1.05rem; line-height: 1.6;
  animation: vy-sent-rise 0.5s var(--vy-ease) 0.6s both;
}
.vy-modal__actions {
  display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;
  animation: vy-sent-rise 0.5s var(--vy-ease) 0.72s both;
}

/* emoji drifting up behind the card's top edge */
.vy-modal__faces { position: absolute; inset: 0 0 auto; z-index: 0; height: 100%; pointer-events: none; overflow: hidden; border-radius: inherit; }
.vy-modal__faces span {
  position: absolute; bottom: 18%; font-size: clamp(1.5rem, 4vw, 2.1rem);
  opacity: 0; animation: vy-face-rise 2.6s cubic-bezier(0.3, 0.8, 0.4, 1) forwards;
}
@keyframes vy-face-rise {
  0%   { opacity: 0; transform: translateY(30px) rotate(-12deg) scale(0.6); }
  18%  { opacity: 0.95; }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-230px) rotate(14deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .vy-modal__backdrop, .vy-modal__card { transition: none; }
  .vy-modal__title, .vy-modal__note, .vy-modal__actions { animation: none; }
  .vy-modal__faces { display: none; }
  .vy-modal__check circle, .vy-modal__check path { stroke-dashoffset: 0; animation: none; }
}

/* The form's own fieldset carries a solid black fill, square corners and
   30px of padding, which draws a black box inside the card holding it. The
   card already provides the surface and the spacing. */
.with_frm_style .frm_form_fields > fieldset {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}