/* hi! — The Human Intelligence Agency · preview stylesheet
   Palette is TENTATIVE (3 accents); full 8-color system lands later.
   Every color must reference these properties. */

:root{
  --yellow:#EFD865; --red:#FF3821; --purple:#111111;
  --ink:#111111; --grey-hi:#EDEDED; --grey-lo:#767676; --paper:#FFFFFF;
  --ochre:#6F5F00;
  --disp:"Bricolage Grotesque","Arial Black",sans-serif;
  --stat:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --ink-deep:#000000;
  --text-body:#333333; --text-soft:#555555; --text-dim:#888888;
  --rule-dark:#3a3a3a; --rule-dark-hi:#444444;
  --pad:clamp(20px,4vw,64px);
  /* gutter between a left-hand title and its right-hand text. Hard floor:
     display headings run long, and 3vw collapsed to ~38px on a laptop. */
  --gutter:clamp(72px,8vw,180px);
  --t-d1:clamp(56px,10vw,150px); --t-d2:clamp(40px,6.5vw,96px);
  --t-d3:clamp(30px,4vw,56px);   --t-d4:clamp(24px,2.6vw,34px); --t-d5:22px;
  /* founder names: a fixed editorial size, not a scaled display token.
     Caps in Arial Black stop reading as a heading below ~20px. */
  --t-name:23px; --t-name-sm:20px;
  --t-b1:19px; --t-b2:17px; --t-b3:15px; --t-b4:13px; --t-ui:16px; --t-m:12.5px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--purple)}
::selection{background:var(--yellow);color:var(--ink)}

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

/* ---------- signature ---------- */
.sweep{background:linear-gradient(180deg,transparent 55%,var(--yellow) 55%,var(--yellow) 92%,transparent 92%)}
/* Header punctuation: red on light, yellow on dark. One class, colour by context. */
.bang{color:var(--red)}
.never .bang,.cta-band .bang{color:var(--yellow)}
.eyebrow{font:600 var(--t-m) var(--mono);letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--grey-lo)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5em;
  padding:18px var(--pad);border-bottom:1px solid var(--grey-hi);position:relative}
.mark{display:block;flex:none}
.nav-links{display:flex;align-items:center;gap:2.2em;font:500 var(--t-b3) var(--body)}
.nav-links a{color:var(--ink);text-decoration:none}
.nav-links a:hover{text-decoration:underline;text-underline-offset:.35em}
.nav-links a.nav-cta{color:var(--purple);font-weight:600}
.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
.nav-toggle{display:none;background:none;border:1.5px solid var(--ink);font:600 var(--t-m) var(--mono);
  padding:.6em .9em;cursor:pointer;letter-spacing:.08em}

/* ---------- buttons ---------- */
.btn{display:inline-block;font:600 var(--t-ui) var(--body);text-decoration:none;
  padding:1em 1.6em;border-radius:2px;cursor:pointer;border:0}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--ink-deep)}
.btn--ghost{color:var(--ink);border:1.5px solid var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- shared section plumbing ---------- */
main{display:block}
.section{padding:9vh var(--pad)}
.section--tight{padding:6vh var(--pad)}
.h-display{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.h-sub{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.15}
.lede{font:400 var(--t-b1)/1.6 var(--body);color:var(--text-body);max-width:32em}
.mono-note{font:400 var(--t-m)/1.7 var(--mono);color:var(--grey-lo);letter-spacing:.02em}

/* reveals — motion is opt-in, gated on JS + motion preference */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .js .reveal.is-in{opacity:1;transform:none}
}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--grey-hi);padding:5vh var(--pad) 6vh;
  display:flex;flex-wrap:wrap;gap:2.5em;align-items:flex-start;justify-content:space-between}
.footer .cols{display:flex;gap:4em;flex-wrap:wrap}
.footer h3{font:600 var(--t-m) var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-lo);margin-bottom:.9em}
.footer ul{list-style:none}
.footer li{margin-bottom:.55em}
.footer a{color:var(--ink);text-decoration:none;font:400 var(--t-b3) var(--body)}
.footer a:hover{text-decoration:underline;text-underline-offset:.3em}
.footer .fine{font:400 var(--t-m)/1.7 var(--mono);color:var(--grey-lo);width:100%}

/* ---------- home: hero ---------- */
.hero{padding:10vh var(--pad) 8vh}
.hero .eyebrow{margin-bottom:2.4em}
.hero h1{font-size:var(--t-d2);max-width:12.5em}
.hero .lede{margin-top:5vh}
.cta-row{display:flex;gap:1em;margin-top:2.2em;flex-wrap:wrap}

/* ---------- home: stat ---------- */
.stat{border-top:1px solid var(--grey-hi);padding:8vh var(--pad)}
.stat .big{font:var(--t-d1)/0.95 var(--stat);letter-spacing:-.03em;text-transform:uppercase}
.stat .big .pct{color:var(--red)}
.stat .cap{display:flex;flex-direction:column;gap:1.5em;margin-top:3.5vh;align-items:flex-start}
.stat .cap h2{font:600 var(--t-d4)/1.15 var(--disp);letter-spacing:-.01em;max-width:20em}
.stat .mono-note{margin-top:2em;display:block}

/* ---------- home: ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--grey-hi)}
.rung-card{padding:2.4em 2em 2.8em;border-right:1px solid var(--grey-hi)}
.rung-card:last-child{border-right:0}
.rung-card .k{font:600 var(--t-m) var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:linear-gradient(180deg,transparent 8%,var(--yellow) 8%,var(--yellow) 92%,transparent 92%);
  padding:.25em .34em;margin-left:-.34em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  display:inline-block;margin-bottom:1.1em}
.rung-card{display:flex;flex-direction:column;align-items:flex-start}
.rung-card h3{font:600 var(--t-d5)/1.2 var(--disp);letter-spacing:-.01em;margin-bottom:.55em}
.rung-card p{font:400 var(--t-b3)/1.55 var(--body);color:var(--text-soft)}
.rung-card .price{display:block;margin-top:1.3em;font:500 var(--t-b4) var(--body);color:var(--grey-lo)}

/* ---------- home: founders teaser ---------- */
.founders{border-top:1px solid var(--grey-hi);display:grid;grid-template-columns:1.1fr .9fr;
  gap:var(--gutter);padding:8vh var(--pad);align-items:start}
.founders h2{font-size:var(--t-d3)}
.founders p{font:400 var(--t-b2)/1.65 var(--body);color:var(--text-body);max-width:30em}
.founders .more{display:inline-block;margin-top:1.4em;font:600 var(--t-ui) var(--body)}

/* ---------- cta band (shared: home + services) ---------- */
.cta-band{background:var(--ink);color:var(--paper);padding:9vh var(--pad);text-align:left}
.cta-band h2{font-size:var(--t-d3);max-width:14em;color:var(--paper)}

.cta-band .btn--primary{background:var(--paper);color:var(--ink);margin-top:2em}
.cta-band .btn--primary:hover{background:var(--grey-hi)}

/* ---------- services ---------- */
.rung{border-top:1px solid var(--grey-hi);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--gutter);padding:7vh var(--pad)}
.rung .n{font:400 var(--t-m) var(--mono);color:var(--red);display:block;margin-bottom:1em}
.rung h2{font:600 var(--t-d3)/1.05 var(--disp);letter-spacing:-.02em}
.rung .range{display:block;margin-top:.9em;font:500 var(--t-b3) var(--body);color:var(--grey-lo)}
.rung .body p{font:400 var(--t-b2)/1.65 var(--body);color:var(--text-body);max-width:34em}
.rung .body ul{list-style:none;margin-top:1.4em}
.rung .body li{font:400 var(--t-b3)/1.55 var(--body);color:var(--text-body);padding:.65em 0 .65em 1.6em;
  border-bottom:1px solid var(--grey-hi);position:relative}
.rung .body li::before{content:"→";position:absolute;left:0;color:var(--purple)}
.rung .body .btn{margin-top:1.6em}
.never{background:var(--ink);color:var(--paper);padding:8vh var(--pad)}
.never h2{font:800 var(--t-d3)/1.05 var(--disp);letter-spacing:-.02em;color:var(--paper)}
.never ul{list-style:none;display:flex;gap:2.5em;flex-wrap:wrap;margin-top:2em}
.never li{font:600 var(--t-b2)/1.65 var(--body);border:1.5px solid var(--rule-dark-hi);padding:.8em 1.2em}
.never .mono-note{color:var(--text-dim);margin-top:2.5em;display:block}
.never + .cta-band{border-top:1px solid var(--rule-dark)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- about ---------- */
.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);border-top:1px solid var(--grey-hi)}
.founder{padding:6vh var(--pad) 7vh;border-right:1px solid var(--grey-hi)}
.founder:last-child{border-right:0}
.founder h2{font:var(--t-name-sm)/1.25 var(--stat);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5em}
.founder .role{font:600 var(--t-m) var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);display:block;margin:.9em 0 1.3em}
.founder p{font:400 var(--t-b2)/1.65 var(--body);color:var(--text-body)}
.cred{list-style:none;margin-top:1.8em}
.cred li{font:400 var(--t-m)/1.7 var(--mono);letter-spacing:.03em;color:var(--grey-lo);
  padding:.5em 0;border-bottom:1px solid var(--grey-hi)}
.founder .more{display:inline-block;margin-top:1.6em;font:600 var(--t-b3) var(--body);
  color:var(--purple);text-decoration:none}
.founder .more:hover{text-decoration:underline;text-underline-offset:.35em}

/* ---------- bios page ---------- */
.bio{border-top:1px solid var(--grey-hi);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--gutter);padding:7vh var(--pad)}
.bio-id h2{font:var(--t-name)/1.25 var(--stat);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.55em}
.bio-id .role{font:600 var(--t-m) var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);display:block;margin:.9em 0 1.6em}
.bio-body p{font:400 var(--t-b2)/1.65 var(--body);color:var(--text-body);max-width:34em}
.bio-body p + p{margin-top:1.15em}
.back{margin-top:2em}
.back a{font:600 var(--t-b3) var(--body);text-decoration:none}
.back a:hover{text-decoration:underline;text-underline-offset:.35em}

.about-block{border-top:1px solid var(--grey-hi);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--gutter);padding:6vh var(--pad)}
.about-block h2{font:600 var(--t-d4)/1.15 var(--disp);letter-spacing:-.01em}
.about-block p{font:400 var(--t-b2)/1.65 var(--body);color:var(--text-body);max-width:34em}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:var(--gutter);padding:0 var(--pad) 9vh}
.form label{display:block;font:600 var(--t-b3) var(--body);margin:1.6em 0 .5em}
.form input[type=text],.form input[type=email],.form textarea{width:100%;
  font:400 var(--t-ui) var(--body);padding:.9em 1em;border:1.5px solid var(--ink);
  border-radius:2px;background:var(--paper);color:var(--ink)}
.form textarea{min-height:9em;resize:vertical}
.form .check{display:flex;gap:.7em;align-items:flex-start;margin-top:1.6em;font:500 var(--t-b3) var(--body)}
.form .check input{width:1.15em;height:1.15em;accent-color:var(--purple);margin-top:.15em}
.form .mono-note{display:block;margin-top:2em}
.form .btn{margin-top:1.2em}
.form-note{display:none;font:500 var(--t-b3) var(--body);color:var(--purple);margin-top:1em}
.form-note.show{display:block}
.aside h2{font:600 var(--t-d5)/1.2 var(--disp);margin-bottom:.8em}
.aside p{font:400 var(--t-b3)/1.55 var(--body);color:var(--text-body)}
.aside .mono-note{margin-top:2.5em;display:block}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .founders,.rung,.about-block,.contact-grid,.bio{grid-template-columns:1fr}
  .bio-body{margin-top:1.6em}
  .founder-grid{grid-template-columns:1fr}
  .founder{border-right:0;border-bottom:1px solid var(--grey-hi)}
  .founder:last-child{border-bottom:0}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);
    border-bottom:1px solid var(--grey-hi);padding:.5em var(--pad) 1em}
  .nav-links.open{display:flex}
  .nav-links a{padding:.8em 0;width:100%}
  .ladder{grid-template-columns:1fr}
  .rung-card{border-right:0;border-bottom:1px solid var(--grey-hi)}
  .rung-card:last-child{border-bottom:0}
}

/* body links: ink needs an underline so colour isn't the only signal */
.cap a,.lede a,p a,.body a,li a{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1.5px}

/* ---------- nav CTA attention wave ---------- */
.nav-links a.nav-cta{color:var(--ink);font-weight:600}
.nav-cta .w{display:inline-block;white-space:pre;
  animation:ctaWave 5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 55ms)}
@keyframes ctaWave{
  0%,100%{color:var(--ink)}
  5%     {color:var(--red)}
  13%    {color:var(--ink)}
}
.nav-cta:hover .w,.nav-cta:focus-visible .w{color:var(--red);animation:none}
@media (prefers-reduced-motion: reduce){
  .nav-cta .w{animation:none}
  .nav-cta{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
}

/* stat: supporting evidence sits under the pitch, deliberately quieter */
.stat .cap-note{font:400 var(--t-b4)/1.5 var(--body);
  color:var(--text-soft);max-width:38em;margin:0}


/* superscript: one treatment, proportional to its parent — never a fixed size */
sup{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;top:-.45em;font-weight:inherit}

/* ---------- line breaking ----------
   balance: even out short headings so they don't leave one word alone
   pretty:  stop a paragraph ending on a single orphaned word */
h1,h2,h3,.h-display,.stat .cap h2{text-wrap:balance}
p,li,.lede,.stat .cap-note,.rung .body p,.founder p,.bio-body p,.about-block p{text-wrap:pretty}

/* founder role: the house highlighter, sized to a mono label */
.founder .role,.bio-id .role{position:relative;display:inline-block}
.founder .role .hl,.bio-id .role .hl{
  background:linear-gradient(180deg,transparent 12%,var(--yellow) 12%,var(--yellow) 88%,transparent 88%);
  padding:0 .18em;margin:0 -.18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}