/* ============================================================
   HENRI MACHINES
   Brand source: Henri Machines Design System (claude.ai/design),
   tokens/henri-machines-tokens.json + README.md, pulled 2026-09-16.
   Primary #172a46 (field 04). Ground #eeede8. Archivo 600 display.
   IBM Plex Mono 500 labels / 300 body. Self-hosted fonts, no external
   requests.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/plexmono-300-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/plexmono-300-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- tokens ---------- */
:root{
  color-scheme:light;

  --navy:#172a46;          /* brand primary, field 04 */
  --ground:#eeede8;        /* brand light ground */
  --grey-01:#5a6065;
  --grey-02:#32363a;
  --grey-03:#4a4b48;

  --on-navy:#eeede8;
  --on-navy-muted:#b2b6bb; /* 7.0:1 on navy */

  --rule:rgba(23,42,70,.18);
  --rule-strong:rgba(23,42,70,.38);
  --rule-on-navy:rgba(238,237,232,.22);
  --tint:rgba(23,42,70,.045);

  --font-display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-display:clamp(2.25rem,1.15rem + 4.6vw,4.5rem);
  --t-h2:clamp(1.75rem,1.1rem + 2.7vw,3rem);
  --t-h3:clamp(1.0625rem,.98rem + .5vw,1.3125rem);
  --t-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --t-label:.9375rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem;
  --section:clamp(4rem,8vw,7.5rem);

  --shell:1280px;          /* reading shell */
  --shell-wide:min(2000px,56vw + 620px); /* grid shell, keeps ultrawide in use */
  --gutter:clamp(1.25rem,4vw,2.5rem);

  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:220ms; --dur-slow:520ms;
}

/* ---------- reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--navy);-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  font-size:clamp(16px,.35vw + 13.4px,19px)}
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--ground);
  color:var(--navy);
  font-family:var(--font-mono);
  font-weight:300;
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p a:not(.btn){text-decoration:underline;text-underline-offset:3px}
ul,ol{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--navy);color:var(--ground)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.on-navy :focus-visible{outline-color:var(--on-navy)}
:target{scroll-margin-top:6rem}

h1,h2,h3{font-family:var(--font-display);font-weight:600;text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.035em}
h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}
p{text-wrap:pretty}

.skip{position:absolute;left:var(--s4);top:-120px;z-index:100;
  padding:var(--s3) var(--s5);background:var(--navy);color:var(--ground);
  font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  transition:top var(--dur) var(--ease)}
.skip:focus{top:var(--s4)}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--wide{max-width:var(--shell-wide)}
.section{padding-block:var(--section)}
.section__head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__head h2{max-width:22ch}
.section__head .lead{margin-top:var(--s6)}

/* navy field, the brand's signature band */
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy .lead,.on-navy .muted{color:var(--on-navy-muted)}

/* ---------- type helpers ---------- */
.lead{font-size:var(--t-lead);line-height:1.7;color:var(--grey-01);max-width:58ch}
.muted{color:var(--grey-01)}
.label{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 var(--s6);
  font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;line-height:1;
  border:1px solid var(--navy);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--navy);color:var(--ground)}
.btn--primary:hover{background:var(--grey-02);border-color:var(--grey-02)}
.btn--ghost{background:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--tint)}
.on-navy .btn--primary{background:var(--ground);color:var(--navy);border-color:var(--ground)}
.on-navy .btn--primary:hover{background:var(--on-navy-muted);border-color:var(--on-navy-muted)}
.on-navy .btn--ghost{color:var(--on-navy);border-color:var(--rule-on-navy)}
.on-navy .btn--ghost:hover{background:rgba(238,237,232,.1);border-color:var(--on-navy)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(238,237,232,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease)}
.nav[data-scrolled]{border-bottom-color:var(--rule)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);min-height:76px;padding-block:var(--s3)}
.nav__brand{display:inline-flex;align-items:center;min-height:44px;color:var(--navy)}
.nav__brand svg{width:auto;height:clamp(40px,4.6vw,51px)}
.nav .btn{white-space:nowrap}
@media (max-width:420px){.nav .btn{padding:0 var(--s4)}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem)}
.hero h1{max-width:19ch}
.hero .lead{margin-top:clamp(1.5rem,2.6vw,2.25rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(2rem,3.4vw,2.75rem)}
.hero__trust{margin-top:clamp(2rem,3.4vw,2.75rem);padding-top:var(--s5);
  border-top:1px solid var(--rule-strong);max-width:46ch;color:var(--grey-01)}


/* ---------- teaser ---------- */
.hero--teaser{flex:1;display:flex;align-items:center;
  padding-block:clamp(2rem,4vw,3rem)}
main{flex:1 0 auto;display:flex}
.footer{flex:none}
.stamp{display:inline-flex;align-items:center;gap:var(--s3);
  margin-bottom:clamp(1.25rem,2vw,1.75rem);color:var(--grey-01)}
.stamp::before{content:"";flex:none;width:.5rem;height:.5rem;background:var(--navy)}



/* ---------- platforms ---------- */
.plat{display:grid;gap:1px;background:var(--rule-strong);
  border:1px solid var(--rule-strong);grid-template-columns:1fr}
@media (min-width:760px){.plat{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1380px){.plat{grid-template-columns:repeat(4,1fr)}}
.plat__item{display:flex;flex-direction:column;background:var(--ground);
  padding:clamp(1.75rem,2.6vw,2.5rem);transition:background var(--dur) var(--ease)}
.plat__item:hover{background:#f4f3ef}
.plat__name{font-family:var(--font-mono);font-weight:500;
  font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem);letter-spacing:.08em;line-height:1.1}
.plat__role{display:block;margin-top:var(--s2);color:var(--grey-01);min-height:2.8em}
.plat__head{padding-bottom:var(--s5);border-bottom:1px solid var(--rule-strong)}
.plat__lead{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.3;letter-spacing:-.015em;
  margin-top:var(--s6);text-wrap:balance}
.spec{margin-top:var(--s6);display:grid;gap:var(--s4)}
.spec li{position:relative;padding-left:1.75rem;line-height:1.6;color:var(--grey-01)}
.spec li::before{content:"";position:absolute;left:0;top:.62em;
  width:.875rem;height:2px;background:var(--navy)}

/* ---------- approach ---------- */
.steps{display:grid;gap:clamp(2.5rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding-top:var(--s5);border-top:1px solid var(--rule-on-navy)}
.step__n{display:block;margin-bottom:var(--s6);color:var(--on-navy-muted)}
.step h3{margin-bottom:var(--s4)}
.step p{color:var(--on-navy-muted);line-height:1.8}

/* ---------- cta ---------- */
.cta h2{max-width:22ch}
.cta .lead{margin-top:var(--s6)}
.cta__row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(2rem,3.4vw,2.75rem)}

/* ---------- footer: single bottom bar ---------- */
.footer{padding-block:var(--s8)}
.footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5) var(--s8)}
.footer__note{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  line-height:1.5;color:var(--on-navy)}
.footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
.footer__links a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy);
  transition:color var(--dur) var(--ease)}
.footer__links a:hover{color:var(--on-navy-muted)}
.footer__dot{color:var(--on-navy-muted);line-height:1}
.footer__bd{padding-left:var(--s2)}
.footer__bd svg{width:auto;height:36px;color:var(--on-navy)}
@media (max-width:860px){.footer__bar{flex-direction:column;align-items:flex-start;gap:var(--s5)}}

/* ---------- scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
@media print{.js .reveal{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- tracks (brand tread field, Asset_1) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .shell{position:relative}
.hero__tracks{
  position:absolute;z-index:-1;pointer-events:none;
  right:var(--gutter);top:-16%;width:min(46%,560px);height:136%;
  background:url("brand/tread-navy.svg") right top/100% 100% no-repeat;
  opacity:.13;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 97%);
}
@media (max-width:760px){
  .hero__tracks{right:0;top:-8%;width:64%;height:118%;background-size:100% 100%;opacity:.08}
}

/* ---------- legal pages ---------- */
.legal{padding-block:clamp(3rem,6vw,5rem) var(--section)}
.legal__meta{margin-bottom:var(--s5);color:var(--grey-01)}
.legal h1{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em;max-width:18ch}
.legal__intro{margin-top:var(--s6);max-width:58ch}
.clauses{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:clamp(2rem,3.4vw,2.75rem)}
.clause{display:grid;gap:var(--s3);padding-top:var(--s5);border-top:1px solid var(--rule);
  grid-template-columns:1fr}
@media (min-width:820px){.clause{grid-template-columns:4.5rem minmax(0,58ch);gap:var(--s6)}}
.clause__n{color:var(--grey-01)}
.clause h2{font-family:var(--font-display);font-size:var(--t-h3);line-height:1.25;
  letter-spacing:-.01em;margin-bottom:var(--s3)}
.clause p + p{margin-top:var(--s4)}
.legal__back{margin-top:clamp(3rem,5vw,4rem);padding-top:var(--s6);border-top:1px solid var(--rule)}


/* ---------- contact modal ---------- */
.modal{
  /* the global *{margin:0} reset kills the UA's auto-centring margin on <dialog> */
  margin:auto;
  width:min(560px,calc(100vw - 2rem));max-width:none;
  max-height:calc(100dvh - 2rem);overflow:auto;padding:0;
  border:1px solid var(--navy);background:var(--ground);color:var(--navy);
  box-shadow:0 24px 70px rgba(23,42,70,.28)}
.modal::backdrop{background:rgba(23,42,70,.55);backdrop-filter:blur(3px)}
.modal__close-form{position:absolute;top:0;right:0;margin:0}
.modal__close{
  width:48px;height:48px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--grey-01);
  font-size:1.75rem;line-height:1;transition:color var(--dur) var(--ease)}
.modal__close:hover{color:var(--navy)}
.modal__body{padding:clamp(1.75rem,4vw,2.75rem)}
.modal__eyebrow{color:var(--grey-01);margin-bottom:var(--s4)}
.modal h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);line-height:1.15;
  letter-spacing:-.02em;max-width:22ch}
.modal form{margin-top:clamp(1.5rem,3vw,2rem)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.field{margin-bottom:var(--s5)}
.field label{display:block;margin-bottom:var(--s2);
  font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--grey-01)}
.field input,.field textarea{
  width:100%;min-height:48px;padding:var(--s3) var(--s4);
  font-family:var(--font-mono);font-weight:300;font-size:1rem;line-height:1.5;
  color:var(--navy);background:#f5f4f0;
  border:1px solid var(--rule-strong);border-radius:0;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field textarea:focus{outline:2px solid var(--navy);outline-offset:1px;background:#fff}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#8c2f2f}
.field__err{margin-top:var(--s2);font-size:var(--t-label);color:#8c2f2f}
.field__err[hidden]{display:none}

.modal__submit{width:100%;margin-top:var(--s2)}
.modal__status{margin-top:var(--s4);font-size:var(--t-label);
  line-height:1.6;color:var(--grey-01)}
.modal__status.is-ok{color:var(--navy)}
.modal__status.is-err{color:#8c2f2f}

/* ---------- ultrawide: unfreeze the root lever above 2000px ----------
   Below 2000px nothing here applies, so normal screens are untouched.
   At exactly 2000px this resolves to 19px, matching the base clamp's
   ceiling, so the handover is continuous. Everything else (type, ch-based
   column widths, rem spacing) derives from the root size and scales with it. */
@media (min-width:2000px){
  :root{--shell-wide:min(2300px,28.9vw + 1163px)}
  html{font-size:clamp(19px,.35vw + 12px,26px)}
  .hero__tracks{width:min(46%,clamp(560px,10.9vw + 342px,760px))}
}