/* ===================================================================
 * Critical first-paint CSS — hero, header, menu trigger, base scale.
 * Full styles load async via main.css / base.css / micons / vendor.
 * =================================================================== */

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

:root {
  --color-text: #292929;
  --color-green: #385c3e;
  /* Font system — change here, updates globally */
  --font-sans: "Montserrat", sans-serif;
  --font-display: "Roboto Slab", serif;
  --font-weight-body: 550;      /* Montserrat floor */
  --font-weight-medium: 600;    /* buttons / emphasis */
  --font-weight-bold: 700;      /* strong / labels */
  --font-weight-display: 500;   /* Roboto Slab titles */
  --content-max-width: 1400px;
  --content-width: min(85vw, var(--content-max-width));
  /* Brand logos — official wordmark aspect ~3.74:1 (width:height) */
  --logo-white-width: clamp(100px, 9.5vw, 132px);
  --logo-white-height: calc(var(--logo-white-width) * 232 / 867);
  --logo-dark-width: clamp(100px, 9.5vw, 132px);
  --logo-dark-height: calc(var(--logo-dark-width) * 232 / 867);
  --header-height: calc(clamp(12px, 2vw, 20px) + var(--logo-white-height) + clamp(12px, 2vw, 20px));
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem; /* 16px */
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-display: clamp(1.75rem, 2.2vw + 0.6875rem, 3rem);
  --fs-display-lg: clamp(1.75rem, 2.5vw + 0.71875rem, 3rem);
  --fs-display-sm: clamp(1.5rem, 2.6vw + 0.53125rem, 3rem);
  --fs-display-hero: 5.625rem;
  --fs-display-lead: clamp(1.03125rem, 2.8vw + 0.53125rem, 2.5rem);
  --fs-lead-fluid: clamp(0.875rem, 0.55vw + 0.71875rem, 1.125rem);
}


html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 100%; /* ≈ 16px; 1rem = 16px */
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--font-weight-body);
  font-synthesis: none;
  line-height: 1.8;
  color: var(--color-text);
}

a {
  background: transparent;
  color: #FFFFFF;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.row {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.col-twelve,
.col-full {
  width: 100%;
  float: left;
  padding: 0 15px;
}

/* ---- header ---- */
header {
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 700;
  background: transparent;
  padding: clamp(12px, 2vw, 20px) clamp(28px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .header-logo {
  padding-bottom: 0.25rem;
}

header .header-logo a {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  width: var(--logo-white-width);
  height: var(--logo-white-height);
  position: relative;
  background: none;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

header .header-logo a::before,
header .header-logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: none;
}

header .header-logo a::before {
  background-image: url("../img/logo.webp");
  opacity: 1;
}

header .header-logo a::after {
  background-image: url("../img/logo-scrolled.webp");
}

header.scrolled .header-logo a::before {
  opacity: 0;
}

header.scrolled .header-logo a::after {
  opacity: 1;
}

#header-menu-trigger {
  display: block;
  position: relative;
  height: clamp(35px, 4vw, 42px);
  width: clamp(35px, 4vw, 42px);
  line-height: clamp(35px, 4vw, 42px);
  color: #FFFFFF;
  z-index: 702;
}

#header-menu-trigger .header-menu-text {
  display: none;
}

#header-menu-trigger .header-menu-icon {
  display: block;
  height: clamp(2px, 0.3vw, 3px);
  width: clamp(20px, 2.5vw, 24px);
  background-color: currentColor;
  position: absolute;
  top: 50%;
  right: clamp(7px, 1vw, 9px);
  margin-top: clamp(-1px, -0.15vw, -1.5px);
}

#header-menu-trigger .header-menu-icon::before,
#header-menu-trigger .header-menu-icon::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}

#header-menu-trigger .header-menu-icon::before {
  top: clamp(-7px, -1vw, -9px);
}

#header-menu-trigger .header-menu-icon::after {
  bottom: clamp(-7px, -1vw, -9px);
}

#menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2000000001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.menu-is-open #menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

#menu-nav-wrap {
  background: #FFFFFF;
  color: var(--color-text);
  font-size: clamp(0.9375rem, 1.8vw, 1rem);
  line-height: 1.6;
  padding: 0;
  height: 100%;
  width: 50vw;
  max-width: 50vw;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  overflow-y: auto;
  z-index: 2000000002;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
}

.menu-is-open #menu-nav-wrap {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

@media only screen and (max-width: 768px) {
  #menu-nav-wrap {
    width: 100vw;
    max-width: 100vw;
    box-shadow: none;
  }
}

#menu-nav-wrap .menu-nav-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: clamp(12px, 2vw, 20px) clamp(28px, 5vw, 56px);
  padding-bottom: calc(clamp(12px, 2vw, 20px) + 0.25rem);
  padding-right: calc(clamp(28px, 5vw, 56px) + clamp(35px, 4vw, 42px) + 1rem);
}

#menu-nav-wrap .menu-nav-logo {
  display: block;
  width: var(--logo-dark-width);
  height: var(--logo-dark-height);
  line-height: 0;
  padding-bottom: 0.25rem;
  box-sizing: content-box;
}

#menu-nav-wrap .menu-nav-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

#menu-nav-wrap .menu-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 6vw, 3.5rem);
}

#menu-nav-wrap .menu-nav-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(21, 21, 21, 0.08);
  padding: clamp(1.25rem, 4vw, 2rem) clamp(28px, 5vw, 56px);
}

#menu-nav-wrap a,
#menu-nav-wrap a:visited {
  color: var(--color-text);
}

#menu-nav-wrap .nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#menu-nav-wrap .nav-list li {
  margin: 0;
  padding: 0.375rem 0;
  text-align: center;
}

#menu-nav-wrap .nav-list a {
  font-size: clamp(1.25rem, 4vw, 2rem);
  text-decoration: none;
}

#menu-nav-wrap .close-button {
  position: absolute;
  top: clamp(12px, 2vw, 20px);
  right: clamp(28px, 5vw, 56px);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

@media only screen and (max-width: 400px) {
  .home-content-tablecell h1 { font-size: 2.625rem; }
}
#home {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero-poster-first-frame.webp") center center / cover no-repeat;
  z-index: 0;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  object-position: center center;
}

#home .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

.home-content-table {
  width: 100%;
  height: 100%;
  display: table;
  position: relative;
  text-align: center;
  z-index: 3;
}

.home-content-tablecell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 2;
}

.home-content-tablecell .row {
  position: relative;
  padding-top: 10.125rem;
  padding-bottom: 9.375rem;
}

.home-content-tablecell h3 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: var(--font-weight-body);
  color: white;
  text-transform: none;
  margin: 0 0 0.5625rem 0;
  opacity: 0;
  transform: translateY(16px);
  animation: heroTextIn 1.2s ease 0.35s forwards;
}

.home-content-tablecell h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-hero);
  line-height: 1.133;
  font-weight: var(--font-weight-display);
  color: #FFFFFF;
  margin: 0;
  opacity: 0;
  transform: translateY(24px);
  animation: heroTextIn 1.6s ease 0.75s forwards;
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-content-tablecell h3,
  .home-content-tablecell h1 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media only screen and (max-width: 1200px) {
  .home-content-tablecell h3 { font-size: 1.3125rem; }
  .home-content-tablecell h1 { font-size: 4.375rem; }
}

@media only screen and (max-width: 1024px) {
  .home-content-tablecell h3 { font-size: var(--fs-xl); }
  .home-content-tablecell h1 { font-size: 3.75rem; }
}

@media only screen and (max-width: 768px) {
  #home {
    height: 100svh;
    min-height: 100svh;
    background-color: #19191b;
  }
  .home-content-tablecell .row { max-width: 600px; }
  .home-content-tablecell h3 { font-size: var(--fs-lg); }
  .home-content-tablecell h1 { font-size: 3.25rem; }
}

@media only screen and (max-width: 600px) {
  .home-content-tablecell .row {
    max-width: 480px;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
  .home-content-tablecell h3 { font-size: 1.0625rem; }
  .home-content-tablecell h1 { font-size: 3rem; }
}

@media only screen and (max-width: 400px) {
  .home-content-tablecell h1 { font-size: 2.625rem; }
}