/* ============================================================
   containers & sections
   ============================================================ */
.c {
  width: 100%;
  max-width: var(--fluid-container);
  margin-inline: auto;
  padding-inline: var(--padding--container);
}

.s { position: relative; }

.sticky-track { position: relative; }
.sticky-item  { position: sticky; top: 0; }

.main-w { position: relative; }

/* ============================================================
   typography helpers
   ============================================================ */
.text-eyebrow {
  font-family: var(--font--sans);
  font-size: var(--text--eyebrow);
  line-height: 1;
  font-weight: 700;
  /* Hebrew has no uppercase — tracking carries the same texture */
  letter-spacing: .08em;
}

.eyebrow-w {
  display: flex;
  gap: calc(var(--gap) * .5);
  overflow: clip;
}
.eyebrow-w.gap0-25 { gap: calc(var(--gap) * .25); }
.eyebrow-w.hero-next-race {
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  max-width: 80%;
}

/* line-reveal used by split-text.js */
.line { position: relative; display: block; }
.high-line-reveal {
  position: absolute;
  inset: 0;
  background-color: var(--color--lime);
  transform-origin: right center;
  transform: scaleX(0);
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   buttons
   ============================================================ */
.btn-w {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  height: 3rem;
  padding-inline: 1rem;
  border: 1px solid var(--color--lime);
  border-radius: .54rem;
  background-color: var(--color--lime);
  color: var(--color--dark-green);
  transition: background-color var(--animation-default),
              border-color var(--animation-default),
              color var(--animation-default);
}
.btn-w.is-nav { height: 3.75rem; }
.btn-w:hover  { background-color: var(--color--lime-off); border-color: var(--color--lime-off); }

.btn-inner {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * .5);
}
.btn-icon-w { display: flex; flex: 0 0 auto; }
.btn-icon { width: 1.06rem; height: 1.12rem; }

/* clip window for the per-character hover roll */
.btn-inner-text-w {
  position: relative;
  overflow: clip;
}
.btn-text {
  display: block;
  font-family: var(--font--sans);
  font-size: var(--text--btn-primary);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* the incoming copy sits exactly on top of the outgoing one; its
   characters wait one line below the window until hover */
.btn-text.is-ghost {
  position: absolute;
  inset: 0;
}
.btn-text .char { display: inline-block; will-change: transform; }

/* ============================================================
   nav
   ============================================================ */
.nav-inner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  /* row-reverse against the RTL flow: the wordmark sits on the left,
     the menu and the contact button on the right */
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--gap);
  pointer-events: none;
}
.nav-inner > * { pointer-events: auto; }

.nav-brand-link { transform-origin: 0 0; }

/* corner wordmark — the artwork carries its own colours, so it needs no
   theme swap the way the old type-set lockup did */
.nav-brand {
  display: block;
  width: auto;
  /* matches .btn-w.is-nav so the bar reads as one row of equal elements */
  height: 3.75rem;
}

.nav-middle {
  position: absolute;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  pointer-events: none;
}
.nav-middle > * { pointer-events: auto; }

.nav-rive-w {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
}
.nav-mark { display: block; width: auto; }
.nav-mark.is-icon { height: 3.75rem; }
.nav-mark.is-full { display: none; height: 1.95rem; }

.nav-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: calc(var(--gap) * .6);
}

.nav-ham {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.75rem;
  height: 3.75rem;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: .74rem;
  color: var(--color--black);
  transition: border-color var(--animation-default),
              background-color var(--animation-default),
              color var(--animation-default);
}
/* two icons in the one button: bars while the menu is shut, a cross while it
   is open. Without the cross there is nothing to aim at — the panel covers
   the page and the only way out is a control you cannot see. */
.nav-ham-icon {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity var(--animation-default), rotate var(--animation-default);
}
.nav-ham { position: relative; }
.nav-ham-icon.is-close { opacity: 0; rotate: -45deg; }
html[data-menu-open] .nav-ham-icon.is-bars  { opacity: 0; rotate: 45deg; }
html[data-menu-open] .nav-ham-icon.is-close { opacity: 1; rotate: 0deg; }

/* the panel is dark whatever the page under it was doing, so the controls
   take the light treatment for as long as it is up — the same trap the
   section triggers hit: what matters is what is drawn beneath the bar */
/* Open, the control fills in: a solid square carrying a dark cross. White by
   default against the dark panel, lime under the pointer — the cross itself
   stays dark through both, so the square is what changes. */
html[data-menu-open] .nav-ham {
  color: var(--color--dark-green);
  border-color: var(--color--white);
  background-color: var(--color--white);
}
html[data-menu-open] .nav-ham:hover {
  color: var(--color--dark-green);
  border-color: var(--color--lime);
  background-color: var(--color--lime);
}
html[data-menu-open] .nav-middle { color: var(--color--white); }
.nav-ham:hover { background-color: rgb(0 0 0 / .05); }

/* ---- nav colour themes ---- */
[data-nav-theme="dark"] .nav-middle { color: var(--color--dark-green); }
[data-nav-theme="dark"] .nav-ham    { color: var(--color--dark-green); border-color: var(--color--dark-green); background-color: transparent; }

[data-nav-theme="light"] .nav-middle  { color: var(--color--white); }
[data-nav-theme="light"] .nav-ham     { color: var(--color--white); border-color: var(--color--white); }
[data-nav-theme="light"] .nav-ham:hover { background-color: rgb(255 255 255 / .08); }

.nav-middle { transition: color var(--animation-default); }

/* iPads sit at 1024 and land above the 991 layout break, where the fluid root
   is only ~9.5px — everything came out tiny. The nav takes its compact
   treatment across the whole tablet range instead. */
@media screen and (max-width: 1199px) {
  /* the wordmark drops out; the button and the menu split to the two corners */
  .nav-brand-link { display: none; }
  .nav-mark.is-icon { display: none; }
  .nav-mark.is-full { display: block; height: 5.6rem; }
  .nav-right {
    flex: 1 1 auto;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  /* the fluid root shrinks hard here, so the controls need bigger rem values
     to stay a comfortable tap target */
  .btn-w.is-nav { height: 5.6rem; }
  .nav-ham      { width: 5.6rem; height: 5.6rem; }
  .nav-rive-w   { height: 5.6rem; }
  .nav-ham-icon { width: 2.2rem; height: 2.2rem; }
  .btn-icon     { width: 1.5rem; height: 1.6rem; }
}
@media screen and (max-width: 479px) {
  /* drop the label so the two controls are matching squares either side of
     the centred logo */
  .btn-w.is-nav {
    height: 4.7rem;
    width: 4.7rem;
    aspect-ratio: 1;
    padding-inline: 0;
  }
  /* Scoped to the nav, which is the only place the label is in the way. Left
     unscoped it stripped the words off EVERY button on a phone: the close
     CTA under the gallery and the footer's own became bare icons with nothing
     to say what they do. */
  .btn-w.is-nav .btn-inner-text-w { display: none; }
  .btn-w.is-nav .btn-icon { width: 2rem; height: 2.1rem; }
  .nav-ham      { width: 4.7rem; height: 4.7rem; }
  .nav-rive-w   { height: 4.7rem; }
  .nav-mark.is-full { height: 4.7rem; }
  .text-eyebrow { font-size: max(11px, .8rem); }
}
@media screen and (max-width: 1199px) { .text-eyebrow { font-size: max(11px, .8rem); } }
@media screen and (max-width: 767px) { .text-eyebrow { font-size: max(11px, 1rem); } }
@media screen and (max-width: 479px) { .text-eyebrow { font-size: max(11px, .8rem); } }

/* ============================================================
   preloader
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color--lime);
  color: var(--color--black);
  clip-path: ellipse(140% 140% at 50% 20%);
}
.preloader.is-done { pointer-events: none; }

.preloader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
}
.preloader-mark img { width: auto; height: 3.4rem; }

.preloader-foot {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--gap) * 2.4);
  display: flex;
  justify-content: center;
}