:root{
  --bg:#000;
  --lime:#D4E865;
  --text:#ffffff;
  --muted:rgba(255,255,255,.85);
  --panel:#ffffff;
  --right-top-gap: 20vh;   /* white space above the small image (increase/decrease) */
  --right-rail: clamp(20px, 5vw, 100px); /* the white border on the far right */
  --card-overlap: clamp(80px, 8vw, 150px);
}

@font-face {
  font-family: "Satoshi";
  src: url("./fonts/satoshi/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}


.hero__title{
  font-weight: 850;
  letter-spacing: 0.015em;
  font-stretch: 150%;
  transform: scaleX(1.150);
}



*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

/* Top bar */
.topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:22px 28px;
  pointer-events:none;
}
.brand{pointer-events:auto}
.brand img{
  height:40px;
  width:auto;
  display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
}


/* Hero layout */
.hero{
  min-height:100vh;
  position:relative;
}

.hero__left{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  padding-right: 0;
  background:#fff; /* <-- brings back the white below the big image */
}



.hero__big{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:95vh;          /* big image only 95% height */
  object-fit:contain ;
  object-position: -30% 0%;
  transform: scale(1); /* subtle zoom out for parallax effect */
  filter: contrast(1.0) saturate(1.0);
}

.hero__leftOverlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:95vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 32%),
    radial-gradient(900px 520px at 50% 52%,
      rgba(0,0,0,.10),
      rgba(0,0,0,.22) 70%,
      rgba(0,0,0,.35)
    ),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.06) 62%,
      rgba(0,0,0,.22) 100%);
}

/* Centered copy */
.hero__copy{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 100;  /* above everything */
  
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 0 28px;
  max-width: 820px;

}


.hero__title{
  margin:100px 0 0;
  line-height:.86;
  font-weight:800;
  letter-spacing:.015em;
  text-transform:uppercase;
  font-size: clamp(55px, 8.4vw, 112px);
  text-shadow:0 16px 40px rgba(0,0,0,.42);
}
.hero__title span{display:block}
.hero__text{
  margin: 20px 0 0;
  max-width: 640px;
  font-size: clamp(20px, 1.7vw, 18px);
  color: #ffffff;
  text-shadow:0 14px 36px rgba(0, 0, 0, 0);
}
.hero__cta{
  margin-top:100px;
  display:inline-flex;
  height:34px;
  padding:0 18px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.12);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:11px;
  backdrop-filter: blur(6px);
}

/* RIGHT SIDE: overlap card + white panel */
.hero__right{
  position:absolute;
  top:0;
  right:0;
  height:100vh;

  /* card width + right white rail */
  width: calc(clamp(220px, 40vw, 600px) + var(--right-rail));

  z-index:30;
  background:#fff;       /* makes the top area + rail white */
  overflow: visible;     /* allow overlap into big image */
}

/* overlapping small image "card" */
.hero__card{
  position:absolute;

  /* white area above, card reaches bottom */
  top: var(--right-top-gap);
  bottom: 0;

  /* keep a visible white strip on the far right */
  right: var(--right-rail);

  /* extend left to create overlap */
  left: calc(-1 * var(--card-overlap));

  overflow:hidden;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.hero__small{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  /* your action shot is portrait — keep the athlete centered */
  object-position: 50% 50%;

  filter: contrast(1) saturate(1);
}


/* This is the key: make the left edge melt into the big image */
.hero__cardFade{
  position:absolute;
  inset:0;
  background:
    /* subtle bright haze like your screenshot */
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 34%),

    /* soften the LEFT boundary so it blends into the big image */
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 14%,
      rgba(0,0,0,.08) 26%,
      rgba(0,0,0,0) 42%),

    /* keep right side slightly darker for depth */
    linear-gradient(90deg,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.12) 78%,
      rgba(0,0,0,.28) 100%);
}

.hero__card::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width: 2px;
  background: rgba(255,255,255,.18);
  mix-blend-mode: screen;
  pointer-events:none;
}

.imprint{
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 200;
  font-size: 16px;
line-height: 1.7;
  letter-spacing: .04em;
  opacity: .45;
}
.imprint a{
  color: #494949;
  text-decoration: none;
}
.imprint a:hover{
  opacity: .9;
}

/* Mailchimp embed – styled to match the hero */
.mc-shell{
  width: min(260px, 92vw);
  margin-top: 28px;
}

.mc-form{
  display:block;
}

.mc-row{
  display:flex;
  gap: 10px;
  align-items: center;
  justify-content: center;

  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(3px);
}

.mc-field{
  flex: 1 1 6000px;  /* give it a real base width */
  min-width: 50px; /* prevents extreme shrinking */
}

.mc-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.mc-input{
  width: 100%;
  height: 28px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 0 5px;
}

.mc-input::placeholder{
  color: rgba(255,255,255,.65);
}

.mc-actions{
  flex: 0 0 auto;
}

.mc-button{
  height: 34px;
  padding: 10px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap; /* keep “Sign up” from wrapping wider */
}


.mc-button:hover{
  background: rgba(255,255,255,.12);
}

.mc-responses{
  width: 100%;
  margin-top: 10px;
}

.mc-response{
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.mc-error{ color: #fff; opacity: .9; }
.mc-success{ color: #fff; opacity: .9; }




/* Mobile layout */
@media (max-width: 700px){


   .imprint{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 10px;
    font-size: 10px;
    opacity: .55;
  }


  /* Use safer viewport units on mobile browsers */
  .hero{ min-height: 100svh; }
  .hero__left{ min-height: 100svh; }
  .hero__big,
  .hero__leftOverlay{ height: 92svh; } /* keep a small white band below */

  /* Right rail becomes a floating overlay card */
  .hero__right{
    position:absolute;
    left: 50%;
    right: auto;
    top: auto;

    bottom: 6svh;
    transform: translateX(-50%);

    width: min(92vw, 420px);
    height: auto;

    background: transparent; /* no white column on mobile */
    z-index: 40;
  }

  /* Card becomes a standalone overlay */
  .hero__card{
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    margin-top: 0;
    height: 34svh;
    min-height: 240px;

    border-radius: 2px;
    box-shadow: 0 26px 70px rgba(0,0,0,.55);

    /* no desktop overlap trick on mobile */
    transform: none;
  }

  /* If you keep the right-rail strip on desktop, hide it on mobile */
  .hero__whitePanel{ display:none !important; }

  /* Make sure text sits above the card with enough space */
  .hero__copy{
    padding: 12px 6px 260px; /* bottom padding reserves space for overlay card */
    max-width: 92vw;
  }

  /* Slightly reduce title to avoid wrapping */
  .hero__title{
    font-size: clamp(44px, 12vw, 72px);
    line-height: .9;
    margin-top: 200px;
  }
  .hero__text{
    font-size: clamp(14px, 4vw, 18px);
  }

  /* Reduce arrows clutter on mobile */
  .arrows-manual .a{
    width: 12px;
    height: 12px;
    opacity: .75;
  }

  /* Optional: hide arrows entirely on very small screens */
  @media (max-width: 380px){
    .arrows-manual{ display:none; }
  }
}



.arrows-manual{
  position:absolute;
  inset:0;
  z-index:70;
  pointer-events:none;
}

/* each arrow */
.arrows-manual .a{
  position:absolute;

  /* place by percentages */
  left: calc(var(--x) * 1%);
  top:  calc(var(--y) * 1%);

  width: 15px;
  height: 15px;
  background: var(--lime);
  opacity: .95;

  -webkit-mask: url("./arrow.svg") center / contain no-repeat;
          mask: url("./arrow.svg") center / contain no-repeat;

  transform: translate(-50%, -50%) rotate(0deg);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}