/* Unbuttond — coming soon. Green from the logo, greys between, orange highlight. */
:root {
  --paper: #e9f2e1;      /* very light green */
  --paper-2: #dceccf;    /* card / deeper light green */
  --green: #33a651;      /* logo green */
  --green-dk: #1d7c38;
  --orange: #f2701d;     /* highlight */
  --ink: #20261d;        /* dark grey-green, near black */
  --grey-d: #464c42;
  --grey-m: #7c8473;
  --grey-l: #c4ccbb;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Fixed stage: header image + video + walking models ---- */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stage__img {
  position: absolute; inset: 0;
  background: url("/images/header-bg.png") center/cover no-repeat;
  filter: grayscale(1) contrast(1.05);
  opacity: .10;
}
.stage__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) saturate(1.1) hue-rotate(60deg) brightness(1.02);
  opacity: .16;
}
.stage__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233,242,225,.2), rgba(233,242,225,.72) 60%, var(--paper) 100%);
}
/* ---- Ticker ---- */
.ticker {
  position: relative; z-index: 3;
  background: var(--ink); color: var(--paper);
  overflow: hidden; white-space: nowrap; border-bottom: 2px solid var(--green);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.ticker__track { display: inline-block; padding: .55rem 0; animation: scroll-l 26s linear infinite; }
.ticker__group { display: inline-block; }
.ticker span { padding: 0 1.1rem; }
.ticker .star { color: var(--orange); }

/* ---- Header ---- */
.site-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.6rem); max-width: var(--maxw); margin: 0 auto; width: 100%;
}
.brand img { display: block; height: clamp(26px, 4vw, 34px); width: auto; }
.head-tag {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: #fff; background: var(--green); border-radius: 999px; padding: .34rem .8rem; white-space: nowrap;
}

/* ---- Layout shell above stage ---- */
main, .ticker, .site-head, .band, .site-foot { position: relative; z-index: 2; }
main { flex: 1; }

/* ---- Hero ---- */
.hero { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3rem); }
.eyebrow { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: .9rem; }
.hero__title {
  font-family: "Archivo Black", sans-serif; line-height: .84; letter-spacing: -.02em;
  text-transform: uppercase; font-size: clamp(4rem, 19vw, 14rem); margin-bottom: .4rem; color: var(--ink);
}
.hero__title span { display: block; }
.hero__title .fill { color: var(--green); text-shadow: 6px 6px 0 var(--orange); }
.hero__lede { font-size: clamp(1.05rem, 1.9vw, 1.35rem); max-width: 34ch; font-weight: 500; margin-top: 1.3rem; color: var(--grey-d); }

/* ---- Signup ---- */
.signup { margin-top: 2.2rem; max-width: 620px; border: 2px solid var(--ink); background: var(--paper-2); padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: 8px 8px 0 var(--green); }
.signup__label { font-weight: 700; margin-bottom: .9rem; }
.signup__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.signup input[type=email] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 1.02rem; padding: .85rem 1rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 0; outline: none; }
.signup input[type=email]::placeholder { color: var(--grey-m); }
.signup input[type=email]:focus { box-shadow: 0 0 0 3px var(--green); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ts-slot:empty { display: none; } .ts-slot { flex-basis: 100%; }
.btn { font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; padding: .85rem 1.6rem; border: 2px solid var(--ink); background: var(--green); color: #fff; border-radius: 999px; white-space: nowrap; transition: background .15s ease, transform .12s ease; }
.btn:hover { background: var(--orange); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; }
.signup__status { margin-top: .8rem; font-weight: 700; min-height: 1.2em; }
.signup__status.ok { color: var(--green-dk); }
.signup__status.err { color: var(--orange); }

/* ---- Gallery ---- */
.gallery { max-width: var(--maxw); margin: 3rem auto 0; padding: 0 clamp(1rem, 4vw, 2.6rem); }
.gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; border-bottom: 2px solid var(--ink); padding-bottom: .7rem; margin-bottom: 1.3rem; }
.gallery__title { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: clamp(1.7rem, 4.4vw, 2.8rem); line-height: 1; }
.gallery__link { font-weight: 700; text-decoration: none; color: var(--green-dk); }
.gallery__link:hover { color: var(--orange); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.55rem, 1.4vw, 1rem); }
.tile { margin: 0; border: 2px solid var(--ink); background: var(--paper-2); overflow: hidden; box-shadow: 4px 4px 0 var(--green); }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 82/106; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.045); }
@media (max-width: 760px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Marquee band ---- */
.band { background: var(--green); color: #fff; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; white-space: nowrap; margin-top: 1rem; }
.band__track { display: inline-block; padding: .6rem 0; animation: scroll-l 30s linear infinite; font-family: "Archivo Black", sans-serif; font-size: clamp(1.6rem, 4vw, 2.8rem); }
.band span { padding: 0 1.4rem; }
.band .dot { color: var(--orange); }

/* ---- Footer ---- */
.site-foot { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 1.6rem clamp(1rem, 4vw, 2.6rem) 2.2rem; }
.foot-top { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1.5px solid var(--grey-l); }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; font-weight: 700; font-size: .95rem; }
.socials a { text-decoration: none; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.socials a:hover { color: var(--green); border-color: var(--green); }
.foot-links { display: flex; gap: 1.2rem; font-weight: 500; }
.foot-links a { text-decoration: none; } .foot-links a:hover { color: var(--orange); }
.foot-credit { margin-top: 1rem; font-size: .85rem; color: var(--grey-d); }
.foot-credit a { font-weight: 700; color: var(--ink); }

/* ---- Legal pages ---- */
.legal { max-width: 780px; margin: 0 auto; width: 100%; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3rem); }
.legal__title { font-family: "Archivo Black", sans-serif; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; font-size: clamp(2.2rem, 7vw, 4rem); margin-bottom: .6rem; }
.legal__title em { font-style: normal; color: var(--green); }
.legal__updated { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: 1.6rem; }
.legal__card { border: 2px solid var(--ink); background: var(--paper-2); padding: clamp(1.2rem, 3.5vw, 2rem); box-shadow: 8px 8px 0 var(--green); }
.legal__card h2 { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; margin: 1.4rem 0 .5rem; color: var(--ink); border-bottom: 2px solid var(--green); display: inline-block; padding-bottom: .15rem; }
.legal__card h2:first-child { margin-top: 0; }
.legal__card p { margin-bottom: .8rem; color: var(--grey-d); }
.legal__card p:last-child { margin-bottom: 0; }
.legal__back { display: inline-block; margin-top: 1.6rem; font-weight: 700; text-decoration: none; color: var(--green-dk); }
.legal__back:hover { color: var(--orange); }
@media (max-width: 560px) { .legal__card { box-shadow: 5px 5px 0 var(--green); } }

/* ---- Motion ---- */
@keyframes scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track, .band__track, .stage__video { animation: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .head-tag { display: none; }
  .signup { box-shadow: 5px 5px 0 var(--green); }
}