/* ILA homepage. Video stage, pinned why block, contact form, compact footer. */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-300-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2"); }

:root {
  --bg: #080808;
  --ink: #ffffff;
  --ink-70: rgba(255, 255, 255, 0.7);
  --ink-55: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.1);
  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 5.5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 10px 14px; background: #fff; color: #000; border-radius: 4px; }
.skip-link:focus { top: 16px; }

/* Logo: the supplied lockup, shown in white through its own alpha */
.ila-logo {
  display: block;
  aspect-ratio: 1765 / 962;
  background: #fff;
  --logo-mask: url("/ila-logo-51fd3c95.png") 51.675127% 44.910515% / 155.807365% 285.862786% no-repeat;
  -webkit-mask: var(--logo-mask);
  mask: var(--logo-mask);
}

/* Header over the stage */
.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.6vw, 34px) var(--gutter);
}
.brand { display: block; }
.brand .ila-logo { height: clamp(64px, 7.6vw, 108px); }
.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); }
.nav a { font-size: 16px; color: var(--ink); opacity: 0.85; transition: opacity 0.3s var(--ease); }
.nav a:hover { opacity: 1; }
.nav .button { opacity: 1; color: #000; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  color: #000;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease);
}
.button:hover { background: #e8e8e8; }
.button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.menu-toggle { display: none; width: 44px; height: 44px; position: relative; }
.menu-toggle span { position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 28px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gutter);
  background: rgba(8, 8, 8, 0.96);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 14px 0; font-size: 28px; font-weight: 300; border-bottom: 1px solid var(--line); }
.mobile-menu a:last-child { border-bottom: 0; margin-top: 12px; font-size: 16px; font-weight: 400; }

/* Stage */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.stage video, .stage-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.stage-still { display: none; background: url("/hero-grass-poster.jpg") center / cover no-repeat; }
/* Fill the whole screen. The clip is 3:2, so on wide screens only the empty sky at the top is cropped:
   anchoring to the bottom keeps the grass, the figure, and the Earth in frame. */
.stage video { object-position: 50% 100%; }
.stage-still { background-position: center bottom; }
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.stage-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(150px, 22vh, 220px) var(--gutter) clamp(130px, 17vh, 190px);
  text-align: left;
}
.stage-lead { margin: auto 0; max-width: 760px; }
.stage h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.005em;
}
.stage h1 span {
  background: linear-gradient(90deg, #ffffff 0%, #c9ccd3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stage-copy {
  max-width: 700px;
  margin: clamp(22px, 3.4vh, 36px) 0 0;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.92;
}
.fade { opacity: 0; animation: fade 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes fade { to { opacity: 1; } }

/* Why block: a pinned screen the page scrolls through. Each line sharpens from a blur as its turn comes,
   the line before it dims, and the green glow behind them scales down as the reader goes. All driven by
   scroll position, so it runs backwards exactly the same. */
.why { padding: 0; margin: 0; }
.why-pin {
  position: relative;
  height: 300vh;
}
.why-media {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, #050807 0%, #071410 55%, #050807 100%);
}
.why-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 62%, rgba(52, 211, 153, 0.34) 0%, rgba(16, 120, 86, 0.16) 40%, rgba(0, 0, 0, 0) 72%);
  transform: scale(var(--why-scale, 1));
  transform-origin: 50% 60%;
  will-change: transform;
}
.why-lines {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-top: -100vh;
  margin-top: -100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.why-line {
  margin: 0 0 clamp(22px, 3.4vh, 40px);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
  max-width: 1000px;
  opacity: 0;
  filter: blur(6px);
  transition: color 0.3s var(--ease);
}
.why-line.is-past { color: rgba(255, 255, 255, 0.55); }
.why-final {
  margin-top: clamp(30px, 5vh, 60px);
  font-size: clamp(36px, 5.1vw, 74px);
  line-height: 1.1;
}
.why-final.is-on {
  background: linear-gradient(90deg, #ffffff 0%, #6ee7b7 55%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why-after { padding: clamp(96px, 14vh, 170px) var(--gutter) 0; max-width: 1160px; margin: 0 auto; }
.why-after > * { max-width: 900px; }
.why-after p {
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
}
.why-after .why-strong { font-weight: 500; }
.why-after .button { margin-top: 8px; }

/* Contact */
.contact-section {
  border-top: 1px solid var(--line);
  padding: clamp(80px, 12vh, 140px) var(--gutter);
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px clamp(40px, 6vw, 96px);
  max-width: 1160px;
  margin: 0 auto;
}
.contact-section h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 300;
  line-height: 1.05;
}
.contact-copy { margin: 0 0 12px; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--ink-70); }
.contact-copy a { color: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.lead-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: #0d1411;
}
.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.lead-form .full { grid-column: 1 / -1; }
.lead-form input, .lead-form textarea, .lead-form select {
  width: 100%;
  height: 50px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #050808;
  color: var(--ink);
  font: 400 16px/1.3 var(--font);
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.lead-form textarea { height: 140px; resize: vertical; line-height: 1.5; }
.lead-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%), linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lead-form select option { background: #0d1411; color: #fff; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: none; border-color: rgba(255, 255, 255, 0.35); background: #070b0a; }
.budget { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0; padding: 0; border: 0; }
.budget legend { grid-column: 1 / -1; padding: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.budget .radio { position: relative; display: block; margin: 0; cursor: pointer; }
.budget .radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.budget .radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #050808;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.budget .radio:hover span { color: var(--ink); border-color: rgba(255, 255, 255, 0.2); }
.budget .radio input:checked + span { color: var(--ink); border-color: rgba(255, 255, 255, 0.45); background: #0b1210; }
.budget .radio input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.lead-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .button.submit {
  width: 100%;
  height: 60px;
  justify-content: center;
  margin-top: 6px;
  padding: 0 36px;
  border-radius: 12px;
  background: #0cc481;
  color: #050808;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lead-form .button.submit:hover { background: #19d18e; }
.form-note { margin: 14px 0 0; font-size: 15px; color: var(--ink-70); min-height: 1.4em; text-align: center; }
.form-note.is-error { color: #f0b4b4; }
.contact-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 28px 0 0; font-size: 15px; }
.contact-facts dt { color: var(--ink-55); }
.contact-facts dd { margin: 0; color: var(--ink); }
.contact-facts a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 7vh, 80px) var(--gutter) 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px clamp(32px, 5vw, 80px);
  max-width: 1160px;
  margin: 0 auto;
}
.footer-grid .ila-logo { height: 84px; width: auto; }
.footer-grid p { margin: 18px 0 0; max-width: 360px; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.footer-label { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.footer-grid nav a, .footer-grid .contact a { display: block; padding: 6px 0; font-size: 15px; color: var(--ink-70); transition: color 0.3s var(--ease); }
.footer-grid nav a:hover, .footer-grid .contact a:hover { color: #fff; }
.footer-grid .contact .button { display: inline-flex; margin-top: 14px; padding: 12px 20px; font-size: 13px; color: #000; }
.footer-grid .contact .button:hover { color: #000; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  max-width: 1160px;
  margin: 56px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-55);
}
.footer-legal p { margin: 0; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .brand .ila-logo { height: 64px; }
  .stage h1 { white-space: normal; font-size: clamp(40px, 11vw, 64px); }
  .stage-content { padding-top: 140px; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .lead-form { grid-template-columns: 1fr; }
  .budget { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { animation: none; opacity: 1; }
  .why-pin { height: auto; }
  .why-media { position: relative; height: 30vh; }
  .why-lines { position: relative; height: auto; margin-top: 0; padding: 64px var(--gutter); }
  .why-line { opacity: 1; filter: none; transition: none; }
  .stage video { display: none; }
  .stage-still { display: block; }
  * { transition: none !important; }
}