/* Approved mockup C: dark navigation, lime wordmark, Parkinsans ExtraBold title. */
@font-face {
  font-family: "Clevver Display";
  src: url('/_nuxt/Parkinsans-ExtraBold.Bk-545Rw.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

.ys-home body { font-family:"Avenir Next",Avenir,"Nunito Sans",Arial,sans-serif; }
.ys-home .section-hero { height:auto; min-height:100svh; padding:140px 0 36px; box-sizing:border-box; background-color:#005236; }
.ys-home .section-hero__container { height:auto; min-height:calc(100svh - 176px); gap:32px; padding:0 24px; }
.ys-home .section-hero .section-hero__title {
  font-family:"Clevver Display",Parkinsans,sans-serif;
  font-weight:800;
  font-size:76px;
  line-height:1.08;
  letter-spacing:-.025em;
  word-spacing:.045em;
}
.ys-home .section-hero__subtitle { font-family:"Avenir Next",Avenir,Arial,sans-serif; max-width:53ch; font-size:clamp(16px,1.6vw,22px); line-height:1.5; margin-top:24px; }
.ys-home .section-hero__bottom-text { font-family:"Avenir Next",Avenir,Arial,sans-serif; }
.ys-home .section-hero__ctas { margin-top:32px; gap:20px; }
.ys-home .section-hero__bottom-text,.ys-home .section-hero__cta-underline { font-size:16px; }
.ys-home .main-logo { width:100%; height:auto; display:block; }
.ys-home .clevver-nav-logo { display:block; width:100%; height:auto; }

html.ys-home .nav { --nav-bg:#0c2018; --nav-text:#fbf8f1; --nav-backdrop-filter:none; }
.ys-home .nav .nav__container { min-height:82px; padding:12px 16px 12px 27px; font-size:16px; }
.ys-home .nav.nav--blur .nav__container--dropdown-open { background-color:#0c2018; }
.ys-home .nav .nav__logo--desktop { width:216px; }
.ys-home .nav .nav__logo--mobile { width:155px; height:auto; }
.ys-home .nav .mega-menu,.ys-home .nav .nav-mobile {
  --mm-bg:#0c2018;
  --mm-text:#fbf8f1;
  --mm-text-soft:rgba(251,248,241,.65);
  --mm-border:rgba(251,248,241,.25);
}
.ys-home .nav .button,.ys-home .section-hero .button { font-family:"Avenir Next",Avenir,Arial,sans-serif; font-size:16px; min-height:48px; padding:0; }
.ys-home .nav .button__inner,.ys-home .section-hero .button__inner { padding:14px 24px; }

/* Keep the native button motion, with readable colors throughout its sweep. */
.ys-home .nav :is(.button--primary,.button--tertiary) { color:#0c2018; }
.ys-home .nav :is(.button--primary,.button--tertiary) .button__bg { background-color:#e6ff55; }
.ys-home .nav :is(.button--primary,.button--tertiary) .button__text,
.ys-home .nav :is(.button--primary,.button--tertiary) .button__inner::after { color:#0c2018; }
.ys-home .nav :is(.button--primary,.button--tertiary) .button__bg-inner--first { background-color:#e6ff55; }
.ys-home .nav :is(.button--primary,.button--tertiary) .button__bg-inner--second { background-color:#d4f5e0; }
.ys-home .nav .button--secondary { color:#fbf8f1; }
.ys-home .nav .button--secondary .button__bg { background-color:#263e32; }
.ys-home .nav .button--secondary .button__text { color:#fbf8f1; }
.ys-home .nav .button--secondary .button__inner::after { color:#0c2018; }
.ys-home .nav .button--secondary .button__bg-inner--first { background-color:#d4f5e0; }
.ys-home .nav .button--secondary .button__bg-inner--second { background-color:#e6ff55; }

@media (min-width:769px) and (max-width:1100px) {
  .ys-home .nav .nav__logo--desktop { width:clamp(155px,17vw,187px); }
  .ys-home .nav .nav__container { gap:16px; padding-left:20px; }
  .ys-home .nav .nav__links { gap:16px; }
  .ys-home .nav .nav__ctas { gap:8px; }
  .ys-home .nav .nav__lang-switcher { display:none; }
  .ys-home .nav .button { font-size:14px; }
  .ys-home .nav .button__inner { padding:12px 14px; }
}
@media (max-width:768px) {
  .ys-home .nav .nav__container { min-height:68px; padding:10px 12px; gap:12px; }
  .ys-home .nav .nav__burger { width:40px; height:40px; }
  .ys-home .nav .button { font-size:14px; min-height:44px; }
  .ys-home .nav .button__inner { padding:12px 14px; }
  .ys-home .section-hero__container { padding:0 24px; }
  .ys-home .section-hero .section-hero__title { font-size:clamp(38px,10vw,60px); }
  .ys-home .section-hero__subtitle { line-height:1.5; }
  .ys-home .section-hero__ctas { flex-direction:row; }
}
@media (max-width:360px) {
  .ys-home .nav .nav__logo--mobile { width:136px; }
  .ys-home .nav .nav__container { gap:8px; }
  .ys-home .nav .button__inner { padding:12px 10px; }
}

/* The mirrored icon set has no close glyph; draw its two strokes locally. */
.ys-home .nav .nav__burger[aria-expanded="true"] { position:relative; }
.ys-home .nav .nav__burger[aria-expanded="true"] > span { display:none; }
.ys-home .nav .nav__burger[aria-expanded="true"]::before,
.ys-home .nav .nav__burger[aria-expanded="true"]::after {
  content:"";
  position:absolute;
  width:22px;
  height:2px;
  top:50%;
  left:50%;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.ys-home .nav .nav__burger[aria-expanded="true"]::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* Keep the faces below the floating navigation while preserving the video pace. */
.ys-home .section-hero {
  --hero-video-offset: clamp(36px, calc(var(--nav-height, 112px) - 64px), 64px);
}
.ys-home .section-hero__bg {
  /* One moving image: never fill the navigation gap with a separate poster. */
  background: #0c2018;
  overflow: hidden;
}
.ys-home .section-hero__bg video.section-hero__bg-media {
  position: absolute;
  inset: var(--hero-video-offset) 0 0;
  width: 100%;
  height: calc(100% - var(--hero-video-offset));
  object-fit: cover;
  object-position: center top;
  /* Blend the lowered video into the brand color without a hard upper edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px);
  mask-image: linear-gradient(to bottom, transparent, #000 44px);
}
