/* ============================================================
   V1 · Design tokens + shared components
   One source of truth. Every page links this before its own CSS.
   If this contradicts anything downstream, this wins.
   ============================================================ */

:root{
  /* colour */
  --ink:#0A0A0A;
  --green:#00E645;
  --grey:#7E7E7E;
  --soft:#B8B8B8;
  --line:#1E1E1E;
  --panel:#0F0F0F;

  /* type */
  --osw:"Oswald",sans-serif;
  --inter:"Inter",sans-serif;
  --mono:"IBM Plex Mono",monospace;

  /* rhythm */
  --gut:clamp(32px,6vw,120px);  /* horizontal gutter, bigger on large screens */
  --sect:22vh;                  /* standard section breathing */
  --ease:cubic-bezier(.16,1,.3,1);

  /* the resolution mark, from the logo spec:
     circle, 23% of cap height (.186em), baseline, .08em gap */
  --dot-size:.186em;
  --dot-gap:.08em;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:#fff;font-family:var(--inter);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.gut{padding-left:var(--gut);padding-right:var(--gut)}

/* --- the dot ------------------------------------------------ */
.dot{display:inline-block;width:var(--dot-size);height:var(--dot-size);border-radius:50%;
  background:var(--green);margin-left:var(--dot-gap);overflow:hidden;color:transparent;line-height:0}

/* --- kickers + mono labels ---------------------------------- */
.k{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* --- film grain --------------------------------------------- */
.grain{position:fixed;inset:-100%;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-5%,-8%)}40%{transform:translate(4%,-3%)}60%{transform:translate(-6%,5%)}80%{transform:translate(5%,7%)}}

/* --- cursor spotlight --------------------------------------- */
.cursor-spotlight{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(0,230,69,.07),transparent 70%);opacity:0;transition:opacity .6s var(--ease)}
@media(hover:hover){body:hover .cursor-spotlight{opacity:1}}
@media (prefers-reduced-motion: reduce){.cursor-spotlight{opacity:0}}

/* --- nav ------------------------------------------------------ */
.v1nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut);background:rgba(10,10,10,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.v1nav.scrolled{background:rgba(10,10,10,0.88);border-bottom-color:rgba(255,255,255,0.08)}
.v1nav .brand{font-family:var(--osw);font-weight:600;font-size:26px;letter-spacing:.01em;color:#fff}
/* the tagline handoff: the hero eyebrow relocates into the nav as you scroll.
   clip-path (not overflow) keeps the baseline honest; the inner span rises through the mask. */
.v1nav .brand .tagline{display:inline-block;margin-left:14px;white-space:nowrap;vertical-align:baseline;clip-path:inset(-2px 0 0 0)}
.v1nav .brand .tagline .tagline-in{display:inline-block;font-family:var(--mono);font-size:clamp(11px,.9vw,13px);letter-spacing:.28em;text-transform:uppercase;color:var(--green);opacity:0;transform:translateY(115%);will-change:transform,opacity}
@media(max-width:760px){.v1nav .brand .tagline{display:none}}
.v1nav .links a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-left:24px;opacity:.85;transition:opacity .2s,color .2s}
.v1nav .links a:hover{opacity:1}
.v1nav .links a.active{opacity:1;color:var(--green)}
.v1nav .links a.go-cta{opacity:1;color:var(--ink);background:var(--green);padding:9px 14px;border-radius:4px;font-weight:500;transition:transform .25s var(--ease)}
.v1nav .links a.go-cta:hover{transform:translateY(-2px)}

/* --- mobile menu: text links collapse into a burger, the pill stays --- */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:0;cursor:pointer;margin-left:14px;padding:8px 6px;flex:none}
.nav-burger span{display:block;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .25s ease}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.v1menu{position:fixed;inset:0;z-index:55;background:rgba(10,10,10,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:center;padding:0 32px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.v1menu.open{opacity:1;pointer-events:auto}
.v1menu a{font-family:var(--osw);font-weight:600;text-transform:uppercase;font-size:clamp(2rem,9vw,3.2rem);line-height:1;color:#fff;border-bottom:1px solid var(--line);padding:22px 0;transform:translateY(14px);opacity:0;transition:transform .45s var(--ease),opacity .4s ease}
.v1menu.open a{transform:none;opacity:1}
.v1menu.open a:nth-child(2){transition-delay:.05s}
.v1menu.open a:nth-child(3){transition-delay:.1s}
.v1menu.open a:nth-child(4){transition-delay:.15s}
.v1menu.open a:nth-child(5){transition-delay:.2s}
.v1menu a.m-active,.v1menu a.m-cta{color:var(--green)}
@media(max-width:760px){
  .v1nav .links{display:flex;align-items:center}
  .v1nav .links a:not(.go-cta){display:none}
  .nav-burger{display:inline-flex}
}

/* --- buttons -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:17px 26px;border-radius:4px;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:var(--green);color:var(--ink);font-weight:500;box-shadow:0 0 40px rgba(0,230,69,.22)}
.btn.ghost{border:1px solid #333;color:#fff}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}

/* --- page hero (interior pages) ------------------------------- */
.pagehero{position:relative;z-index:1;min-height:72svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(80px + 8vh) var(--gut) 7vh}
.pagehero .hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 55% 50% at 18% 70%,rgba(0,230,69,0.05),transparent 70%),radial-gradient(ellipse 45% 40% at 82% 30%,rgba(0,230,69,0.03),transparent 70%)}
.pagehero>*:not(.hero-glow){position:relative;z-index:1}
.pagehero .eyebrow{font-family:var(--mono);font-size:clamp(11px,.9vw,14px);letter-spacing:.28em;text-transform:uppercase;color:var(--green);margin-bottom:4.5vh;opacity:0;animation:fade 1s ease .2s forwards}
.pagehero h1{font-family:var(--osw);font-weight:600;text-transform:uppercase;letter-spacing:-.015em;line-height:.94}
.pagehero h1 .l{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em;white-space:nowrap}
.pagehero h1 .l>span{display:inline-block;transform:translateY(108%);animation:rise 1s var(--ease) forwards}
.pagehero h1 .l:nth-of-type(1)>span{animation-delay:.3s}
.pagehero h1 .l:nth-of-type(2)>span{animation-delay:.45s}
.pagehero .sub{margin-top:5vh;max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.4rem);color:var(--soft);line-height:1.55;opacity:0;animation:fade 1s ease 1.1s forwards}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* --- section scaffolding -------------------------------------- */
.sect{padding:var(--sect) var(--gut)}
.sect .k{display:block;margin-bottom:7vh}
.statement{font-family:var(--osw);font-weight:400;text-transform:uppercase;font-size:clamp(1.7rem,4vw,3.6rem);line-height:1.14;letter-spacing:-.005em;max-width:24ch}
.statement em{font-style:normal;color:var(--grey)}
.rule{border-top:1px solid var(--line)}

/* editorial rows (quiet room pattern) */
.rowlist .row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) auto;gap:3vw;align-items:baseline;border-bottom:1px solid var(--line);padding:5.5vh 0;transition:padding-left .4s var(--ease)}
.rowlist .row:first-of-type{border-top:1px solid var(--line)}
.rowlist .row:hover{padding-left:1.2vw}
.rowlist .row .name{font-family:var(--osw);font-weight:600;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3.6rem);line-height:1}
.rowlist .row .what{color:var(--soft);font-size:clamp(1rem,1.25vw,1.2rem);max-width:44ch}
.rowlist .row .st{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);white-space:nowrap}
@media(max-width:760px){.rowlist .row{grid-template-columns:1fr;gap:10px}}

/* --- footer: the talk moment. One big email, the legal bits, the signature. --- */
.v1foot{border-top:1px solid var(--line);padding:12vh var(--gut) 5vh}
.v1foot .ftalk .k{display:block;margin-bottom:4vh}
.v1foot .fmail{font-family:var(--osw);font-weight:600;font-size:clamp(1.5rem,4.8vw,4.4rem);line-height:1;color:#fff;position:relative;width:fit-content;display:inline-block}
.v1foot .fmail::after{content:"";position:absolute;left:0;bottom:-8px;height:3px;width:0;background:var(--green);transition:width .45s var(--ease)}
.v1foot .fmail:hover::after{width:100%}
.v1foot .fbot{margin-top:10vh;border-top:1px solid var(--line);padding-top:3.5vh;display:flex;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.v1foot .fbot a:hover{color:#fff}

/* --- scroll runway: the point of no return, systemised ------------- */
.scrollrunway{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.scrollrunway .srdraw{position:absolute;top:0;left:0;height:2px;width:0;background:var(--green);box-shadow:0 0 12px rgba(0,230,69,.5)}

/* --- brand micro-details ------------------------------------------- */
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@view-transition{navigation:auto}

/* --- reveal on scroll ------------------------------------------ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* --- mobile ------------------------------------------------------ */
@media(max-width:640px){
  :root{--gut:32px;--sect:15vh}
  .v1nav{padding:14px var(--gut)}
  .v1nav .brand{font-size:20px}
  .v1nav .links a{margin-left:12px;font-size:9px;letter-spacing:.1em}
  .v1nav .links a.go-cta{padding:7px 10px}
  .btn{padding:14px 18px;font-size:11px;letter-spacing:.1em}
  .pagehero{min-height:70svh;padding-top:calc(64px + 6vh)}
  .statement{font-size:clamp(1.4rem,6.4vw,2rem)}
  .k{font-size:11px;letter-spacing:.18em}
  .sect .k{margin-bottom:5vh}
  .v1foot{padding:10vh var(--gut) 4vh}
  .v1foot .fmail{font-size:clamp(1.25rem,6.4vw,2rem)}
  .v1foot .fbot{margin-top:7vh;flex-direction:column;gap:14px}
}

/* --- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .pagehero h1 .l>span{transform:none}
  .reveal{opacity:1;transform:none}
  .grain{display:none}
}