/* ==========================================================================
   FORJ web system — Brand Brief v2.0, "Website" surface.
   Source of truth for tokens: forj-brand/tokens/forj-tokens.css

   Website rules from the brief, as implemented here:
   · Ground   Paper #F2F1EE, with dark bands in #14171A
   · Logo     Horizontal lockup in the header, stacked lockup in the footer
   · Accent   Ember on primary CTAs ONLY (never headings, labels, rules)
   · Type     Saira for voice; IBM Plex Mono for measured values and
              caps labels at 0.2em tracking
   · Motion   The Fit path draws in once, on the hero. Nothing else moves.
   ========================================================================== */

@font-face{
  font-family:'Saira';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/saira-latin-var.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
}

:root{
  /* ---- brand tokens (verbatim from forj-tokens.css) ---- */
  --forj-brand-graphite:#2B2E30;
  --forj-brand-ball-white:#F4F6F8;
  --forj-brand-ball-grey:#8D949B;
  --forj-brand-slate:#7FA3B6;
  --forj-brand-ember:#F79320;
  --forj-brand-ember-deep:#93350D;
  --forj-brand-ember-light:#FFD9AE;
  --forj-brand-paper:#F2F1EE;
  --forj-brand-ink:#111214;
  --forj-fitter-app-base:#14171A;
  --forj-fitter-app-tier1:#1C1F22;
  --forj-fitter-app-tier2:#24282C;
  --forj-fitter-app-tier3:#2D3237;
  --forj-fitter-app-edge:#3A4046;
  --forj-fitter-app-text-primary:#E9ECEF;
  --forj-fitter-app-text-secondary:#9AA1A8;
  --forj-fitter-app-text-muted:#7D858C;
  --forj-font-ui:'Saira', system-ui, sans-serif;
  --forj-font-data:'IBM Plex Mono', ui-monospace, monospace;

  /* ---- website aliases ---- */
  --paper:var(--forj-brand-paper);
  --paper-raised:#F8F7F5;
  --paper-line:rgba(17,18,20,.13);
  --ink:var(--forj-brand-ink);
  --ink-2:var(--forj-brand-graphite);
  --ink-body:#3E4347;          /* body copy on paper (brief) */
  --ink-label:#5F666B;         /* small mono labels on paper, >=5:1 */

  --dark:var(--forj-fitter-app-base);
  --dark-1:var(--forj-fitter-app-tier1);
  --dark-2:var(--forj-fitter-app-tier2);
  --dark-line:#2F3438;
  --dark-edge:var(--forj-fitter-app-edge);
  --on-dark:#F6F8FA;
  --on-dark-2:var(--forj-fitter-app-text-secondary);
  --on-dark-3:var(--forj-fitter-app-text-muted);

  --ember:var(--forj-brand-ember);
  --ember-hover:#FFB256;       /* link/hover colour from the brief */
  --slate:var(--forj-brand-slate);

  --maxw:1180px;
  --gutter:clamp(22px, 5vw, 64px);
  --section:clamp(80px, 10vw, 144px);
  --radius:4px;
}

/* ---------- reset ---------- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  font:400 17px/1.65 var(--forj-font-ui);
  color:var(--ink-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0;
  font-weight:300;
  color:var(--ink);
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1 strong,h2 strong{ font-weight:500; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
b,strong{ font-weight:500; color:var(--ink); }

::selection{ background:var(--ember); color:var(--ink); }

:focus-visible{ outline:2px solid var(--ink-2); outline-offset:3px; border-radius:2px; }
.band--dark :focus-visible{ outline-color:var(--on-dark); }

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

/* ---------- layout ---------- */

.wrap{
  width:100%;
  max-width:calc(var(--maxw) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:calc(780px + var(--gutter) * 2); }

.band{ padding-block:var(--section); }
.band--tight{ padding-block:clamp(56px, 7vw, 96px); }
.band--paper{ background:var(--paper); }
.band--dark{
  background:var(--dark);
  color:var(--on-dark-2);
}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{ color:var(--on-dark); }
.band--dark b,.band--dark strong{ color:var(--on-dark); }
.band--paper + .band--paper{ border-top:1px solid var(--paper-line); }

/* ---------- type ---------- */

.label{
  font:500 11px/1.3 var(--forj-font-data);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-label);
}
.band--dark .label{ color:var(--on-dark-3); }

.display{
  font-size:clamp(40px, 5.4vw, 72px);
  line-height:1.03;
  letter-spacing:-.025em;
}
.h2{
  font-size:clamp(32px, 4.2vw, 54px);
  line-height:1.08;
  letter-spacing:-.022em;
}
.lede{
  font-size:clamp(18px, 1.7vw, 21px);
  line-height:1.6;
  max-width:44em;
}
.mono{ font-family:var(--forj-font-data); font-variant-numeric:tabular-nums; }

.section-head{ margin-bottom:clamp(40px, 5vw, 64px); }
.section-head .label{ margin-bottom:20px; }
.section-head .lede{ margin-top:22px; }

/* ---------- buttons ----------
   --primary is the ONLY place ember appears on the website.
   Ink text on ember: 8.6:1. (White on ember would be 2.2:1.)          */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65em;
  min-height:52px;
  padding:0 28px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font:500 15px/1 var(--forj-font-ui);
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary{ background:var(--ember); color:var(--ink); }
.btn--primary:hover{ background:var(--ember-hover); }

.btn--solid{ background:var(--ink); color:var(--on-dark); }
.btn--solid:hover{ background:var(--ink-2); }
.band--dark .btn--solid{ background:var(--forj-fitter-app-text-primary); color:var(--ink); }
.band--dark .btn--solid:hover{ background:#fff; }

.btn--ghost{ border-color:rgba(17,18,20,.38); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); }
.band--dark .btn--ghost{ border-color:#4B525A; color:var(--on-dark); }
.band--dark .btn--ghost:hover{ border-color:var(--on-dark); }

.btn--sm{ min-height:40px; padding:0 18px; font-size:14px; }

.btn__play{
  width:.7em; height:.8em;
  background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  transition:color .16s ease;
}
.link:hover{ color:var(--ink); }
.band--dark .link:hover{ color:var(--ember-hover); }

/* ---------- header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(242,241,238,.92);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--paper-line);
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:68px;
}
.brand{ display:inline-flex; line-height:0; }
.brand img{ height:38px; width:auto; }

.nav{
  display:flex;
  align-items:center;
  gap:clamp(18px, 3vw, 36px);
}
.nav a:not(.btn){
  font:500 15px/1 var(--forj-font-ui);
  color:var(--ink-body);
  text-decoration:none;
  transition:color .16s ease;
}
.nav a:not(.btn):hover{ color:var(--ink); }

/* ---------- footer ---------- */

.site-footer{
  background:var(--dark);
  color:var(--on-dark-2);
  padding-block:clamp(56px, 7vw, 88px);
  border-top:1px solid var(--dark-line);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px clamp(40px, 8vw, 120px);
  align-items:center;
}
.site-footer .brand .site-footer__logo{ width:132px; height:auto; }
.site-footer__meta{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
}
.site-footer__tag{
  font:300 clamp(22px, 2.4vw, 30px)/1.2 var(--forj-font-ui);
  letter-spacing:-.015em;
  color:var(--on-dark);
}
.site-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font:400 14px/1.5 var(--forj-font-ui);
}
.site-footer__links a{ color:var(--on-dark); text-decoration:none; }
.site-footer__links a:hover{ color:var(--ember-hover); }
.site-footer__fine{ font:400 12px/1.5 var(--forj-font-data); letter-spacing:.06em; color:var(--on-dark-3); }

@media (max-width:640px){
  .site-footer__grid{ grid-template-columns:1fr; }
}

/* ---------- shared bits ---------- */

/* node bullets — the mark's own vocabulary, no glyph dependencies */
.nodes li{ position:relative; padding-left:26px; }
.nodes li::before{
  content:"";
  position:absolute;
  left:0; top:.66em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ink-2);
}
.band--dark .nodes li::before{ background:var(--slate); }

/* media placeholders */
.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  color:var(--ink-label);
  background:var(--paper-raised);
  border:1px dashed rgba(17,18,20,.28);
  border-radius:var(--radius);
  font:500 11px/1.6 var(--forj-font-data);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.band--dark .ph{
  background:var(--dark-1);
  border-color:var(--dark-edge);
  color:var(--on-dark-3);
}

/* form fields */
.field{
  min-height:52px;
  padding:0 16px;
  border-radius:var(--radius);
  border:1px solid rgba(17,18,20,.3);
  background:var(--paper-raised);
  color:var(--ink);
  font:400 16px/1.2 var(--forj-font-ui);
}
.field::placeholder{ color:#6D7378; }

/* dropdowns and multi-line fields share the .field look */
select.field{
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232B2E30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}
select.field:invalid{ color:#6D7378; }   /* the "Choose..." placeholder option */
select.field option{ color:var(--ink); }
textarea.field{ min-height:150px; padding:14px 16px; line-height:1.55; resize:vertical; }
.band--dark .field{ background:var(--dark-1); border-color:var(--dark-edge); color:var(--on-dark); }
.band--dark .field::placeholder{ color:var(--on-dark-3); }

/* ==========================================================================
   The Fit path — hero motion, plays once.
   Sequence follows the route the fitting took: top-right node, across,
   down, in to the diamond (the fit that was found).
   ========================================================================== */

.fitpath{ width:100%; height:auto; overflow:visible; }
.fitpath .fp-stem{ animation:fp-stem .8s ease-out 1.3s both; }
.fitpath .fp-path{ stroke-dasharray:80; animation:fp-draw 1.2s cubic-bezier(.45,.05,.25,1) .25s both; }
.fitpath .fp-node{
  transform-box:fill-box;
  transform-origin:center;
  animation:fp-pop .5s cubic-bezier(.2,.8,.2,1) both;
}
.fitpath .fp-n3{ animation-delay:.10s; }   /* 52,12 — start of the path */
.fitpath .fp-n2{ animation-delay:.42s; }
.fitpath .fp-n1{ animation-delay:.75s; }
.fitpath .fp-n4{ animation-delay:1.07s; }
.fitpath .fp-n5{ animation-delay:1.45s; }  /* the option not taken */
.fitpath .fp-diamond{
  transform-box:view-box;
  transform-origin:32px 32px;
  animation:fp-pop .55s cubic-bezier(.2,.8,.2,1) 1.5s both;
}

@keyframes fp-draw{ from{ stroke-dashoffset:80; } to{ stroke-dashoffset:0; } }
@keyframes fp-pop{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:none; } }
@keyframes fp-stem{ from{ opacity:0; } to{ opacity:.45; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fitpath *{ animation:none !important; }
}

@media print{
  .site-header{ position:static; }
  .fitpath *{ animation:none !important; }
}