/* ============================================================
   GROW100X — riso print-shop system
   paper · navy ink · orange flood · electric blue accent
   ============================================================ */

:root{
  --paper:#F4F1E9;
  --paper-2:#EBE6D9;
  --ink:#0B1B3A;
  --ink-70:rgba(11,27,58,.7);
  --ink-45:rgba(11,27,58,.45);
  --ink-15:rgba(11,27,58,.15);
  --orange:#FBB040;
  --orange-deep:#F0982A;
  --blue:#2E7BF6;
  --blue-deep:#1B4FD0;
  --pink:#F87BA8;
  --sky:#9CC4FA;

  --rule:2px solid var(--ink);
  --pop:7px 7px 0 var(--ink);
  --pop-sm:4px 4px 0 var(--ink);
  --pop-blue:7px 7px 0 var(--blue);

  --pad:clamp(20px,5vw,72px);
  --gap:clamp(24px,3.4vw,52px);
  --bay:clamp(72px,10vw,148px);

  --display:"Bricolage Grotesque","Arial Black",sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --quote:"Newsreader",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--paper);
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(1rem,.96rem + .18vw,1.09rem)/1.62 var(--body);
  font-synthesis-weight:none;
  overflow-x:hidden;
}

/* --- paper grain, sits over everything, never intercepts ---- */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:9999;
  pointer-events:none;
  opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit}

::selection{background:var(--blue);color:var(--paper)}

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

.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;top:-100px;left:16px;z-index:200;
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font:600 .72rem var(--mono);text-decoration:none;
}
.skip:focus{top:12px}

/* ============================ shell ======================== */

.wrap{
  width:min(1320px,100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap-narrow{width:min(940px,100%)}

main{display:block}

/* ============================ type ========================= */


h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.94;
  text-wrap:balance;
  margin:0;
}

h1{font-size:clamp(2.9rem,1.6rem + 6.1vw,6.6rem);line-height:.9;letter-spacing:-.045em}
h2{font-size:clamp(2.2rem,1.35rem + 3.6vw,4.3rem);letter-spacing:-.04em}
h3{font-size:clamp(1.32rem,1.12rem + .82vw,1.85rem);line-height:1.06}
h4{font-size:clamp(1.02rem,.96rem + .34vw,1.18rem);line-height:1.2;letter-spacing:-.02em}

.lede{
  font-size:clamp(1.09rem,1rem + .5vw,1.4rem);
  line-height:1.5;
  color:var(--ink-70);
  max-width:56ch;
  margin:0;
  text-wrap:pretty;
}

p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* orange marker swipe behind a word */
.mark{
  position:relative;
  white-space:nowrap;
  z-index:0;
}
.mark::after{
  content:"";
  position:absolute;
  left:-.06em;right:-.06em;
  bottom:.3em;
  height:.28em;
  background:var(--orange);
  z-index:-1;
  transform:skewX(-9deg) scaleX(0);
  transform-origin:left;
  animation:swipe .62s cubic-bezier(.2,.8,.3,1) .55s forwards;
}
@keyframes swipe{to{transform:skewX(-9deg) scaleX(1)}}

/* outlined display word */
.hollow{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
}

.blue{color:var(--blue)}

.pull{
  font:400 italic clamp(1.25rem,1.05rem + 1vw,2rem)/1.32 var(--quote);
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
}

/* ============================ nav ========================== */

.nav{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:var(--rule);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:70px;
}

.brand{
  font:800 clamp(1.24rem,1.1rem + .7vw,1.6rem)/1 var(--display);
  letter-spacing:-.055em;
  text-decoration:none;
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}
.brand em{
  font-style:normal;
  background:linear-gradient(96deg,var(--blue-deep),var(--blue) 55%,var(--sky));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.9vw,30px);
}
.nav-links a{
  font:600 .69rem/1 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-70);
  padding:6px 0;
  position:relative;
  transition:color .18s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;
  transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--orange)}

.nav-cta{
  padding:11px 17px !important;
  background:var(--ink);
  color:var(--paper) !important;
  border:2px solid var(--ink);
  box-shadow:var(--pop-sm);
  transition:transform .16s ease,box-shadow .16s ease;
}
.nav-cta::after{display:none !important}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--blue)}

.burger{
  display:none;
  width:44px;height:40px;
  padding:0;
  background:var(--paper);
  border:var(--rule);
  box-shadow:var(--pop-sm);
  cursor:pointer;
}
.burger span{
  display:block;
  width:19px;height:2px;
  margin:3.5px auto;
  background:var(--ink);
  transition:transform .24s ease,opacity .18s ease;
}
.nav.open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================ ticker ======================= */

.ticker{
  border-bottom:var(--rule);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  padding:9px 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:roll 34s linear infinite;
}
.ticker span{
  padding-inline:22px;
  font:600 .63rem/1 var(--mono);
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker span i{font-style:normal;color:var(--orange)}
@keyframes roll{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ============================ buttons ====================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:15px 24px;
  border:var(--rule);
  background:var(--ink);
  color:var(--paper);
  font:600 .74rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--pop);
  transition:transform .17s cubic-bezier(.2,.8,.3,1),box-shadow .17s cubic-bezier(.2,.8,.3,1);
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--blue)}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--blue)}
.btn i{font-style:normal;transition:transform .22s ease}
.btn:hover i{transform:translateX(4px)}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  box-shadow:var(--pop-sm);
}
.btn-ghost:hover{background:var(--orange);box-shadow:7px 7px 0 var(--ink)}

.btn-row{display:flex;flex-wrap:wrap;gap:16px}

/* ============================ sections ===================== */

.bay{padding-block:var(--bay)}
.bay-tight{padding-block:clamp(52px,7vw,96px)}

.rule-top{border-top:var(--rule)}

.ink-bay{
  background:var(--ink);
  color:var(--paper);
  border-block:var(--rule);
}
.ink-bay .lede{color:rgba(244,241,233,.72)}
.ink-bay .hollow{-webkit-text-stroke-color:var(--paper)}
.ink-bay .pull{color:var(--paper)}

/* dotted halftone field */
.dots{
  background-image:radial-gradient(var(--ink-15) 1.4px,transparent 1.4px);
  background-size:15px 15px;
}
.ink-bay.dots{
  background-image:radial-gradient(rgba(244,241,233,.13) 1.4px,transparent 1.4px);
  background-color:var(--ink);
}

.bay-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--gap);
  align-items:end;
  margin-bottom:clamp(38px,4.4vw,64px);
}
.bay-head > div:last-child{padding-bottom:.5em}

/* ============================ hero ========================= */

.hero{
  position:relative;
  padding-block:clamp(56px,7.4vw,112px) clamp(64px,8vw,124px);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:-160px;top:-140px;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 34%,rgba(46,123,246,.19),transparent 62%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:var(--gap);
  align-items:center;
  position:relative;
  z-index:1;
}
.hero h1{margin:26px 0 30px}
.hero-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(18px,2.6vw,36px);
  margin-top:38px;
}
.hero-note{
  font:600 .66rem/1.6 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-45);
  max-width:23ch;
  margin:0;
}

/* stacked sticker cluster */
.stack{
  position:relative;
  min-height:340px;
}
.chip{
  position:absolute;
  border:var(--rule);
  box-shadow:var(--pop);
  padding:18px 20px;
  background:var(--paper);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.chip:hover{transform:rotate(0deg) translateY(-6px) !important}
.chip .n{
  display:block;
  font:800 clamp(1.9rem,1.4rem + 1.9vw,2.9rem)/1 var(--display);
  letter-spacing:-.05em;
}
.chip .t{
  display:block;
  margin-top:7px;
  font:600 .6rem/1.5 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-70);
}
.chip-1{top:0;left:0;width:70%;background:var(--orange);transform:rotate(-2.4deg)}
.chip-2{top:38%;right:0;width:66%;background:var(--paper);transform:rotate(2deg)}
.chip-3{bottom:0;left:6%;width:74%;background:var(--blue);color:var(--paper);transform:rotate(-1.4deg)}
.chip-3 .t{color:rgba(244,241,233,.78)}

/* ============================ cards ======================== */

.grid{display:grid;gap:clamp(16px,1.9vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;
  padding:clamp(22px,2.4vw,32px);
  background:var(--paper);
  border:var(--rule);
  box-shadow:var(--pop-sm);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s cubic-bezier(.2,.8,.3,1);
}
.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--blue)}
.card h3,.card h4{margin-bottom:11px}
.card p{color:var(--ink-70);font-size:.965rem;line-height:1.58}
.card .idx{
  font:600 .62rem/1 var(--mono);
  letter-spacing:.14em;
  color:var(--blue);
  display:block;
  margin-bottom:15px;
}
.card-orange{background:var(--orange)}
.card-orange p,.card-orange .idx{color:rgba(11,27,58,.74)}
.card-orange .idx{color:var(--blue-deep)}
.card-flat{box-shadow:none}
.card-flat:hover{transform:none;box-shadow:var(--pop-sm)}

.ink-bay .card{
  background:var(--ink);
  border-color:var(--paper);
  box-shadow:4px 4px 0 var(--paper);
}
.ink-bay .card p{color:rgba(244,241,233,.68)}
.ink-bay .card:hover{box-shadow:8px 8px 0 var(--orange)}

/* ============================ flow line ==================== */

.flow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
  list-style:none;
  margin:0;padding:0;
}
.flow li{
  flex:1 1 150px;
  padding:20px 18px;
  border:2px solid var(--paper);
  background:transparent;
  position:relative;
}
.flow li .s{
  display:block;
  font:600 .58rem/1 var(--mono);
  letter-spacing:.16em;
  color:var(--orange);
  margin-bottom:12px;
}
.flow li b{
  font:800 clamp(1.05rem,.95rem + .5vw,1.35rem)/1 var(--display);
  letter-spacing:-.03em;
  display:block;
}
.flow li:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-13px;top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  color:var(--orange);
  z-index:2;
}

/* ============================ tiers ======================== */

.tiers{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:0;padding:0;
}
.tiers li{
  padding:12px 18px;
  border:var(--rule);
  background:var(--paper);
  font:600 .68rem/1 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:var(--pop-sm);
}
.tiers li:nth-child(1){background:var(--paper)}
.tiers li:nth-child(2){background:var(--sky)}
.tiers li:nth-child(3){background:var(--orange)}
.tiers li:nth-child(4){background:var(--pink)}

/* ============================ numbered list ================ */

.steps{
  list-style:none;
  counter-reset:s;
  margin:0;padding:0;
  border-top:var(--rule);
}
.steps li{
  counter-increment:s;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  padding:19px 4px;
  border-bottom:var(--rule);
  transition:background .18s ease,padding .18s ease;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font:600 .68rem/1 var(--mono);
  color:var(--blue);
  letter-spacing:.08em;
}
.steps li:hover{background:var(--orange);padding-inline:14px 4px}
.steps b{
  font:800 clamp(1.05rem,.98rem + .48vw,1.32rem)/1.15 var(--display);
  letter-spacing:-.028em;
  display:block;
  margin-bottom:5px;
}
.steps span{color:var(--ink-70);font-size:.95rem;line-height:1.55}

/* ============================ split ======================== */

.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
}
.split-side{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gap);
  align-items:start;
}

.panel{
  padding:clamp(26px,3.2vw,44px);
  border:var(--rule);
  box-shadow:var(--pop);
  background:var(--orange);
}
.panel-blue{background:var(--blue);color:var(--paper)}
.panel-paper{background:var(--paper)}

.model-tag{
  display:inline-block;
  padding:7px 13px;
  margin-bottom:18px;
  background:var(--ink);
  color:var(--paper);
  font:600 .6rem/1 var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.panel-blue .model-tag{background:var(--paper);color:var(--ink)}

.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.ticks li{
  position:relative;
  padding-left:28px;
  font-size:.965rem;
  line-height:1.5;
}
.ticks li::before{
  content:"";
  position:absolute;
  left:0;top:.42em;
  width:12px;height:7px;
  border-left:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
  transform:rotate(-45deg);
  opacity:.85;
}

/* ============================ founder ====================== */

.founder{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.portrait{
  position:relative;
  aspect-ratio:4/5;
  border:var(--rule);
  box-shadow:var(--pop);
  background:
    radial-gradient(circle at 50% 38%,var(--sky),transparent 58%),
    linear-gradient(150deg,var(--orange),var(--pink));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.portrait::after{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(11,27,58,.2) 1.6px,transparent 1.6px);
  background-size:9px 9px;
  mix-blend-mode:multiply;
}
.portrait .mono{
  font:800 clamp(3rem,2rem + 5vw,5.4rem)/1 var(--display);
  letter-spacing:-.06em;
  color:var(--paper);
  -webkit-text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
  position:relative;z-index:1;
}
.creds{
  display:flex;flex-wrap:wrap;gap:9px;
  list-style:none;margin:22px 0 0;padding:0;
}
.creds li{
  padding:9px 14px;
  border:2px solid var(--ink);
  font:600 .63rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.ink-bay .creds li{border-color:var(--paper)}

/* ============================ faq ========================== */

.faq{border-top:var(--rule)}
.faq details{border-bottom:var(--rule)}
.faq summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
  font:800 clamp(1.05rem,.98rem + .5vw,1.35rem)/1.25 var(--display);
  letter-spacing:-.025em;
  transition:background .18s ease,padding .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  flex:none;
  font:400 1.5rem/1 var(--body);
  color:var(--blue);
  transition:transform .24s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--orange);padding-inline:14px 10px}
.faq .a{
  padding:0 4px 26px;
  max-width:74ch;
  color:var(--ink-70);
  font-size:.99rem;
  line-height:1.6;
}
.ink-bay .faq,.ink-bay .faq details{border-color:rgba(244,241,233,.3)}
.ink-bay .faq summary::after{color:var(--orange)}
.ink-bay .faq summary:hover{background:rgba(244,241,233,.08)}
.ink-bay .faq .a{color:rgba(244,241,233,.7)}

/* ============================ form ========================= */

.form-field{
  display:flex;
  align-items:stretch;
  border:var(--rule);
  background:var(--paper);
  box-shadow:var(--pop);
  margin-top:26px;
  flex-wrap:wrap;
}
.form-field input{
  flex:1 1 220px;
  min-width:0;
  padding:18px 20px;
  border:0;background:transparent;
  color:var(--ink);
  font:400 1rem var(--body);
}
.form-field input::placeholder{color:var(--ink-45)}
.form-field input:focus{outline:0;background:rgba(46,123,246,.07)}
.form-field button{
  flex:none;
  padding:18px 26px;
  border:0;border-left:var(--rule);
  background:var(--orange);
  color:var(--ink);
  font:600 .74rem/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease;
}
.form-field button:hover{background:var(--ink);color:var(--paper)}
.form-field button:disabled{opacity:.55;cursor:wait}

.form-status{
  min-height:1.5em;
  margin:13px 0 0;
  font:600 .68rem/1.5 var(--mono);
  letter-spacing:.04em;
}
.form-status[data-state="ok"]{color:var(--blue-deep)}
.form-status[data-state="err"]{color:#C03030}
.ink-bay .form-status[data-state="ok"]{color:var(--orange)}
.ink-bay .form-status[data-state="err"]{color:var(--pink)}

.fine{
  margin:14px 0 0;
  font:400 .68rem/1.5 var(--mono);
  color:var(--ink-45);
}
.ink-bay .fine{color:rgba(244,241,233,.5)}

/* ============================ contact rails ================ */

.rails{list-style:none;margin:0;padding:0;border-top:var(--rule)}
.rails li{border-bottom:var(--rule)}
.rails a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  text-decoration:none;
  transition:padding .2s cubic-bezier(.2,.8,.3,1),background .2s ease;
}
.rails a:hover{background:var(--orange);padding-inline:16px 10px}
.rails .lbl{
  font:800 clamp(1.15rem,1rem + .8vw,1.6rem)/1 var(--display);
  letter-spacing:-.03em;
}
.rails .val{
  font:600 .66rem/1 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-70);
  white-space:nowrap;
}

/* ============================ CTA band ===================== */

.band{
  border-block:var(--rule);
  background:var(--orange);
  padding-block:clamp(54px,6.4vw,92px);
}
.band-in{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--gap);
  align-items:center;
}
.band p{color:rgba(11,27,58,.78);margin-top:18px;max-width:46ch}

/* ============================ footer ======================= */

.foot{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(48px,5.4vw,76px) 26px;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:var(--gap);
  padding-bottom:38px;
  border-bottom:2px solid rgba(244,241,233,.22);
}
.foot .brand{color:var(--paper);font-size:1.75rem}
.foot-blurb{
  margin-top:16px;
  max-width:34ch;
  color:rgba(244,241,233,.62);
  font-size:.94rem;
  line-height:1.55;
}
.foot h4{
  font:600 .61rem/1 var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:16px;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot ul a{
  text-decoration:none;
  color:rgba(244,241,233,.72);
  font-size:.93rem;
  transition:color .18s ease;
}
.foot ul a:hover{color:var(--orange)}
.foot-base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px;
  padding-top:24px;
  font:400 .63rem/1.6 var(--mono);
  letter-spacing:.06em;
  color:rgba(244,241,233,.45);
  text-transform:uppercase;
}
.foot-base a{color:inherit;text-decoration:none}
.foot-base a:hover{color:var(--orange)}

/* ============================ reveal ======================= */

.js .rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.2,.8,.3,1),transform .62s cubic-bezier(.2,.8,.3,1);
}
.rv.in{opacity:1;transform:none}

/* load-in stagger for the hero */
.js .load > *:not(h1){
  opacity:0;
  animation:rise .72s cubic-bezier(.2,.8,.3,1) forwards;
}
.load > *:nth-child(1){animation-delay:.06s}
.load > *:nth-child(2){animation-delay:.15s}
.load > *:nth-child(3){animation-delay:.24s}
.load > *:nth-child(4){animation-delay:.33s}
.load > *:nth-child(5){animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ============================ responsive =================== */

@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}

@media (max-width:900px){
  .hero-grid,.bay-head,.split,.split-side,.founder,.band-in{grid-template-columns:minmax(0,1fr)}
  .bay-head > div:last-child{padding-bottom:0}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stack{min-height:0;display:grid;gap:12px;margin-top:8px}
  .chip{position:static;width:auto !important;transform:none !important}
  .chip:hover{transform:translateY(-4px) !important}
  .flow li:not(:last-child)::after{display:none}
  .founder{gap:32px}
  .portrait{max-width:340px}
}

@media (max-width:760px){
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--pad) 22px;
    background:var(--paper);
    border-bottom:var(--rule);
    display:none;
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{
    padding:15px 0;
    border-bottom:1px solid var(--ink-15);
    font-size:.76rem;
  }
  .nav-links a::after{display:none}
  .nav-cta{
    margin-top:16px;
    justify-content:center;
    text-align:center;
    border-bottom:2px solid var(--ink) !important;
  }
  .burger{display:block}
}

@media (max-width:760px){
  /* comfortable tap targets on touch */
  .foot ul{gap:2px}
  .foot ul a{display:inline-block;padding:9px 0;min-height:22px}
  .foot-base a{display:inline-block;padding:6px 0}
  .rails a{padding-block:24px}
}

@media (max-width:640px){
  :root{--pop:5px 5px 0 var(--ink);--pop-sm:3px 3px 0 var(--ink)}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .steps li{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .rails a{flex-direction:column;gap:7px}
  .hero-foot{gap:20px}
  .form-field{flex-direction:column;align-items:stretch}
  .form-field button{border-left:0;border-top:var(--rule);width:100%}
  .faq summary{font-size:1.02rem;gap:14px;padding:19px 2px}
  .flow li{flex:1 1 100%}
  .chip{padding:15px 16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .js .load > *,.js .load > *:not(h1){opacity:1;animation:none}
  .mark::after{transform:skewX(-9deg) scaleX(1)}
}

/* ============================================================
   MOTION SYSTEM
   ============================================================ */

/* --- cross-page transitions (progressive enhancement) ------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .42s cubic-bezier(0,0,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}

/* --- scroll progress rail ----------------------------------- */
.progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:120;
  background:transparent;
  pointer-events:none;
}
.progress i{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(var(--p,0));
  transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--orange));
}

/* --- nav lifts once you leave the top ----------------------- */
.nav{transition:box-shadow .28s ease,border-color .28s ease}
.nav.scrolled{box-shadow:0 3px 0 rgba(11,27,58,.13)}

/* --- line-mask reveal for display headings ------------------ */
.ln{
  display:block;
  overflow:hidden;
  padding:.02em .1em .16em;
  margin:0 -.1em -.16em;
}
.ln-i{
  display:block;
  transform:translateY(108%) rotate(2.2deg);
  opacity:0;
  transition:transform .82s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  transition-delay:var(--d,0ms);
}
.lines-in .ln-i{transform:none;opacity:1}

/* hero headline reveals per line on load */
.load h1 .ln-i{
  animation:lineUp .9s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--d,0ms) + 140ms);
}
@keyframes lineUp{
  from{transform:translateY(108%) rotate(2.2deg);opacity:0}
  to{transform:none;opacity:1}
}

/* --- hero sticker parallax ---------------------------------- */
.stack{
  perspective:900px;
  transform-style:preserve-3d;
}
.chip{
  will-change:transform;
  transform:
    rotate(var(--rot,0deg))
    translate3d(calc(var(--mx,0) * var(--dep,1) * 14px), calc(var(--my,0) * var(--dep,1) * 14px), 0);
}
.chip-1{--rot:-2.4deg;--dep:1.5}
.chip-2{--rot:2deg;--dep:.9}
.chip-3{--rot:-1.4deg;--dep:2}
.chip:hover{
  transform:rotate(0deg) translate3d(calc(var(--mx,0) * 14px),-7px,0) !important;
}

/* --- flow steps draw in sequence ---------------------------- */
.js .flow li{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 95ms);
}
.flow.in li{opacity:1;transform:none}
.js .flow li::after{
  opacity:0;
  transition:opacity .3s ease;
  transition-delay:calc(var(--i,0) * 95ms + 420ms);
}
.flow.in li::after{opacity:1}

/* --- card grids cascade ------------------------------------- */
.js .grid .card{
  opacity:0;
  transform:translateY(20px) scale(.985);
  transition:
    opacity .55s ease var(--d,0ms),
    transform .68s cubic-bezier(.16,1,.3,1) var(--d,0ms),
    box-shadow .2s cubic-bezier(.2,.8,.3,1),
    scale .2s ease;
}
.grid.in .card{opacity:1;transform:none}
.grid.in .card:hover{transform:translate(-3px,-3px)}

/* --- steps list wipes in ------------------------------------ */
.js .steps li{
  opacity:0;
  transform:translateX(-14px);
  transition:opacity .45s ease var(--d,0ms),transform .55s cubic-bezier(.16,1,.3,1) var(--d,0ms),background .18s ease,padding .18s ease;
}
.steps.in li{opacity:1;transform:none}

/* --- tick lists stagger ------------------------------------- */
.js .ticks li{
  opacity:0;
  transform:translateY(9px);
  transition:opacity .42s ease var(--d,0ms),transform .5s cubic-bezier(.16,1,.3,1) var(--d,0ms);
}
.ticks.in li{opacity:1;transform:none}

/* --- counting numerals -------------------------------------- */
.chip .n{font-variant-numeric:tabular-nums}

/* --- halftone field drifts very slowly ---------------------- */
.dots{animation:drift 34s linear infinite}
@keyframes drift{to{background-position:15px 15px}}

/* --- button shine ------------------------------------------- */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-60%;
  width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.2,.8,.3,1);
}
.btn:hover::before{left:120%}
.btn-ghost::before{background:linear-gradient(100deg,transparent,rgba(11,27,58,.09),transparent)}

/* --- portrait breathes -------------------------------------- */
.portrait .mono{animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}

/* --- pull quotes fade up ------------------------------------ */
.pull{transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .ln-i,.flow li,.grid .card,.steps li,.ticks li,.rv{opacity:1 !important;transform:none !important}
  .load h1 .ln-i{animation:none}
  .flow li::after{opacity:1 !important}
  .chip{transform:rotate(var(--rot,0deg)) !important}
  .dots{animation:none}
  .portrait .mono{animation:none}
  .btn::before{display:none}
  .progress{display:none}
}