/* Start49 — site stylesheet.
   The page markup carries the design's own inline styles, and the design is
   already intrinsically responsive: it sizes type with clamp() and lays out
   with `repeat(auto-fit, minmax(...))` grids and `flex: 0 1 <basis>` rows.
   So this file deliberately does NOT override layout — doing that would
   fight the design. It provides the baseline, accessibility, and the few
   things inline styles can't express.
   Build appends the generated hover rules to the end of this file. */

:root {
  --green: #08A202;
  --green-dark: #057A01;
  --ink: #1E201F;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The site header overlays the page; keep in-page anchors clear of it.
     On phones the nav wraps to two rows and the bar is ~157px tall. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  /* Per-page <style> from the artboard sets the real background, font and
     colour; these are the fallbacks if one is ever missing. */
  background: #fff;
  color: var(--ink);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #fff;
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 0 0 4px;
}
.skip-link:focus { left: 0; }

/* The nav wraps onto a second row on narrow screens, which grows the fixed
   header and lets it cover the top of the page. Keep it compact instead. */
@media (max-width: 720px) {
  [data-site-header] a { padding: 4px 8px !important; font-size: 13px !important; }
  html { scroll-padding-top: 170px; }
}

/* Contact form feedback injected by site.js */
.form-status { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.form-status[data-state="error"] { color: #b00020; }
.form-status[data-state="ok"] { color: var(--green-dark); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  [data-site-header] { position: static !important; }
}

/* ---------------------------------------------------------------------
   Header on phones.

   The header is position:fixed. Below ~768px the nav wraps to two rows
   and the bar grows to 157px tall, which covered the top of every page -
   the homepage headline sat entirely behind it. Sticky gives the same
   stick-on-scroll behaviour while letting the bar occupy its own space,
   so no page needs a magic top padding. Desktop keeps the design's
   translucent overlay.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
  [data-site-header] {
    position: sticky !important;
    top: 0;
  }
}

/* ---------------------------------------------------------------------
   Homepage hero.

   The design lays the headline and lead paragraph directly over a
   full-bleed background illustration: `cover` at 50% 60%, a 100vh floor,
   a left margin and no right one. On the deployed site the text crossed
   the artwork at 375px, 768px and 1280px, and both the headline and the
   paragraph ended exactly on the viewport edge on a phone.

   These rules give the illustration space of its own rather than
   restyling it: stacked below the copy on phones, beside it from tablet
   up. The selector matches the hero's own inline background-position, so
   it applies to that block and nothing else on the site.
   --------------------------------------------------------------------- */

main > div[style*="background-position:50% 60%"] {
  background-repeat: no-repeat !important;
  padding-right: clamp(20px, 5vw, 60px) !important;
  /* was min-height:100vh - at 1280x800 that left the lower 60% empty */
  min-height: clamp(520px, 78vh, 780px) !important;
}

/* Phones: copy first, artwork beneath it. */
@media (max-width: 767px) {
  main > div[style*="background-position:50% 60%"] {
    min-height: auto !important;
    justify-content: flex-start !important;
    background-size: 82% auto !important;
    background-position: 50% 100% !important;
    padding-top: 40px !important;
    padding-bottom: min(80vw, 340px) !important;
  }
  /* The design's 48px floor stopped the headline shrinking below ~650px,
     which is what pushed "DEVELOPMENT" past the edge of the screen. */
  main > div[style*="background-position:50% 60%"] > h1 {
    font-size: clamp(32px, 9vw, 56px) !important;
  }
}

/* Tablet and up: artwork to the right, copy held clear of it. */
@media (min-width: 768px) {
  main > div[style*="background-position:50% 60%"] {
    background-size: auto 72% !important;
    background-position: 94% 58% !important;
  }
  main > div[style*="background-position:50% 60%"] > h1,
  main > div[style*="background-position:50% 60%"] > p {
    max-width: min(56%, 720px) !important;
  }
}

/* Tablet only: at 768px the headline still reached into the artwork. */
@media (min-width: 768px) and (max-width: 1023px) {
  main > div[style*="background-position:50% 60%"] > h1 {
    font-size: clamp(34px, 5.4vw, 52px) !important;
  }
  main > div[style*="background-position:50% 60%"] > p {
    font-size: 18px !important;
  }
}

/* Web3Forms honeypot - visible only to bots. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}

/* ---- hover states lifted from style-hover attributes ---- */
.hv-1:hover{box-shadow:2px 2px 16px #00000040;color:#1E201F}
.hv-2:hover{background:#1E201F;color:#fff}
.hv-3:hover{background:#057a01}
.hv-4:hover{color:#08a202}
.hv-5:hover{background:#057a01;color:#fff}
.hv-6:hover{color:#057a01}
.hv-7:hover{background:#08A202;color:#FBFBFA}
.hv-8:hover{background:#5FD95B;color:#1E201F}
.hv-9:hover{background:#282B29;color:#5FD95B}
.hv-10:hover{background:#fff;color:#057A01}