/**
 * Base — reset, typography defaults, and the accessibility primitives
 * every section relies on. Loaded after tokens.css.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the fixed nav — WCAG 2.4.3 focus order
     is meaningless if the target lands underneath the header. */
  scroll-padding-top: calc(var(--vu-nav-height) + var(--vu-space-5));
}

body {
  margin: 0;
  background-color: var(--vu-cream);
  color: var(--vu-ink);
  font-family: var(--vu-font-sans);
  font-size: var(--vu-body-size);
  line-height: var(--vu-body-lh);
  letter-spacing: var(--vu-body-track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------
 * Focus visibility — WCAG 2.2 SC 2.4.11 (Focus Not Obscured),
 * 2.4.13 (Focus Appearance). A single consistent indicator, never
 * removed, always at least 3px and offset clear of the element.
 * ---------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--vu-focus-width) solid var(--vu-focus-colour);
  outline-offset: var(--vu-focus-offset);
  border-radius: 2px;
}

.vu-on-dark :focus-visible,
.vu-footer :focus-visible {
  outline-color: var(--vu-focus-colour-on-dark);
}

/* ------------------------------------------------------------------
 * Skip link — WCAG 2.4.1 Bypass Blocks
 * ---------------------------------------------------------------- */
.vu-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: var(--vu-space-3) var(--vu-space-5);
  background-color: var(--vu-ink);
  color: var(--vu-on-dark);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-120%);
}

.vu-skip-link:focus {
  transform: translateY(0);
}

/* Visually hidden but available to assistive tech. */
.vu-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;
}

/* ------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------- */
.vu-container {
  width: 100%;
  max-width: calc(var(--vu-container) + (var(--vu-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--vu-gutter);
}

/* Every ACF section is wrapped in this. Spacing is a token, not a
   hardcoded value, so reordering sections never breaks rhythm. */
/* Figma section frames carry bottom padding only, so 120px is the gap
   between consecutive sections. The first section still needs clearance
   from the header, which no frame in the file shows. */
.vu-section {
  padding-block-end: var(--vu-space-30);
}

.vu-main > .vu-section:first-child {
  padding-block-start: var(--vu-space-16);
}

/* Section backgrounds are editor-controlled (see vu_section_open). Ink
   sections flip text to the light token so contrast holds either way. */
.vu-section--bg-cream {
  background-color: var(--vu-cream);
}
#about.vu-section {
	padding-top: var(--vu-space-5);
}

.vu-section--bg-white {
  background-color: #fff;
}
#why.vu-section {
padding-block: var(--vu-space-30);
}
#faq.vu-section {
	padding-block: var(--vu-space-30);
}

.vu-section--bg-ink {
  background-color: var(--vu-ink);
  color: var(--vu-on-dark);
}

.vu-section--bg-ink :focus-visible {
  outline-color: var(--vu-focus-colour-on-dark);
}

.vu-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--vu-space-7);
  margin-block-end: var(--vu-space-10);
}

.vu-section__title {
  font-family: var(--vu-font-sans);
  font-weight: 400;
  font-size: var(--vu-display-size);
  line-height: var(--vu-display-lh);
  letter-spacing: var(--vu-display-track);
}

.vu-rule {
  height: var(--vu-rule-width);
  background-color: var(--vu-rule);
  border: 0;
  margin: 0;
}

/* ------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------- */
.vu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px var(--vu-space-5);
  border-radius: var(--vu-radius-pill);
  font-family: var(--vu-font-sans);
  font-weight: 500;
  font-size: var(--vu-button-size);
  letter-spacing: var(--vu-button-track);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.5s ease-in-out;
	min-width: 120px;
}

.vu-button--dark {
  background-color: var(--vu-ink);
  color: var(--vu-on-dark);
	border: 2px solid var(--vu-ink);
}

.vu-button--dark:hover {
  background-color: transparent;
	color: var(--vu-ink);
}

.vu-button--outline {
  background-color: transparent;
  color: var(--vu-ink);
  box-shadow: inset 0 0 0 var(--vu-rule-width) var(--vu-ink);
}

.vu-button--outline:hover {
  background-color: var(--vu-ink);
  color: var(--vu-on-dark);
}

.vu-button--gold {
  background-color: var(--vu-gold);
  color: var(--vu-ink);
	border: 2px solid var(--vu-gold)!important;
}
.vu-button--gold:hover {
	background: transparent;
	border-color: var(--vu-ink)!important;
	
}

/* ------------------------------------------------------------------
 * Motion preference — WCAG 2.3.3
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
 * Forced colours (Windows High Contrast)
 * ---------------------------------------------------------------- */
@media (forced-colors: active) {
  .vu-button {
    border: 1px solid ButtonText;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}

/* ------------------------------------------------------------------
 * Video facade
 * A poster plus a play button; the player is injected on demand, so
 * nothing third-party loads for visitors who never press play.
 * ---------------------------------------------------------------- */
.vu-video {
  position: relative;
  width: 100%;
  aspect-ratio: 660 / 410;
  background-color: var(--vu-ink);
}

.vu-video__poster,
.vu-video__frame,
.vu-video__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vu-video__poster,
.vu-video__native {
  object-fit: cover;
}

.vu-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vu-ink);
  transition: opacity var(--vu-transition);
}

/* While an uploaded video is playing, fade the toggle out of the way and
 * only bring it back on hover/focus, rather than leaving it on screen. */
.vu-video.is-playing .vu-video__play {
  opacity: 0;
}

.vu-video.is-playing:hover .vu-video__play,
.vu-video.is-playing .vu-video__play:focus-visible {
  opacity: 1;
}

.vu-video__play-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 62px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: background-color var(--vu-transition), scale var(--vu-transition);
}

.vu-video__play:hover .vu-video__play-mark {
  background-color: #fff;
  scale: 1.04;
}

.vu-video__play:focus-visible {
  outline: var(--vu-focus-width) solid var(--vu-focus-colour-on-dark);
  outline-offset: -6px;
}

.vu-video__fallback a {
  text-decoration: underline;
  text-underline-offset: 3px;
}