/* AgentsCreation.ai — the foundry.
   Design language: engineering drawing. A cool graphite ground, hairline
   schematic rules, copper as the only heat in the palette, and data set in
   IBM Plex Mono because this company sells engineering, not enthusiasm.
   No character illustration anywhere: the product here is a build team. */

/* ==========================================================================
   Fonts, self-hosted so font-src can stay 'self'
   ========================================================================== */
@font-face {
  font-family: "Plex Sans";
  src: url("/assets/fonts/plex-sans-var.woff2?v=4") format("woff2-variations");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2?v=4") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2?v=4") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-var.woff2?v=4") format("woff2-variations");
  font-weight: 600 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Ground: cool graphite, never pure black. Steel, not space. */
  --bg:          #0D1219;
  --bg-deep:     #080B10;
  --surface:     #131A24;
  --surface-2:   #19222E;
  --raised:      #1F2A38;

  --fg:          #E9ECEF;
  --fg-strong:   #FFFFFF;
  --muted:       #98A2AE;
  --faint:       #6B7480;

  /* One heat source. Copper, not the default vermilion or acid green. */
  --heat:        #D2703A;
  --heat-bright: #EE8A50;
  --heat-soft:   rgba(210, 112, 58, .13);
  --heat-line:   rgba(210, 112, 58, .38);

  /* Cool counterpart for schematic ink and links */
  --steel:       #79A6D2;
  --steel-soft:  rgba(121, 166, 210, .13);
  --steel-deep:  #2C4C6E;

  --ok:          #67C08D;
  --stop:        #E0685C;

  --border:      rgba(140, 165, 195, .20);
  --border-hard: rgba(140, 165, 195, .36);
  --rule:        rgba(140, 165, 195, .12);

  --ink-invert:  #0B0E11;

  /* Type scale, 1.22 minor third, clamped */
  --t--2: .6875rem;
  --t--1: .8125rem;
  --t-0:  1rem;
  --t-1:  clamp(1.0625rem, .4vw + .97rem, 1.1875rem);
  --t-2:  clamp(1.25rem, .8vw + 1.06rem, 1.5rem);
  --t-3:  clamp(1.5rem, 1.5vw + 1.16rem, 2rem);
  --t-4:  clamp(1.9rem, 2.6vw + 1.3rem, 2.9rem);
  --t-5:  clamp(2.35rem, 4.6vw + 1.35rem, 4.2rem);
  --t-6:  clamp(2.8rem, 6.4vw + 1.3rem, 5.4rem);

  --font-display: Sora, "Plex Sans", system-ui, sans-serif;
  --font-sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing, 4px base */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.75rem; --s-8: 4rem;
  --s-9: 6rem;   --s-10: 8rem;

  --wrap: 74rem;
  --wrap-tight: 58rem;

  /* Squarer than the AI default. This is machined, not rounded. */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px -20px rgba(0,0,0,.85);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 28px 60px -28px rgba(0,0,0,.95);
}

/* The site is dark by design, one committed visual world. Light-preference
   visitors still get a deliberate ground rather than a borrowed one. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  color: var(--fg-strong);
}
p { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--heat-bright);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sr-only {
  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; left: -9999px; top: 0; z-index: 200;
  background: var(--heat); color: var(--ink-invert);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.wrap-tight { max-width: var(--wrap-tight); }

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3.25rem); }

.band { background: var(--surface); border-block: 1px solid var(--rule); }
.band-deep { background: var(--bg-deep); border-block: 1px solid var(--rule); }

.stack { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); }
.gap-8 { gap: var(--s-8); }

.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-2-stack { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 660px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); }
}

.center { text-align: center; }
.center-x { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }
.mono { font-family: var(--font-mono); }
.sub { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--t--1); }
.lede { font-size: var(--t-1); color: var(--muted); line-height: 1.66; }

/* ==========================================================================
   Schematic furniture — the visual signature
   ========================================================================== */


/* Eyebrow: a measured, technical label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t--2);
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--heat);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--heat-line);
  flex: none;
}
.eyebrow-plain::before { display: none; }
.eyebrow-steel { color: var(--steel); }
.eyebrow-steel::before { background: rgba(127,169,204,.4); }

/* Index numbers on sequences */
.idx {
  font-family: var(--font-mono);
  font-size: var(--t--2);
  font-weight: 500;
  color: var(--faint);
  letter-spacing: .1em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--heat);
  --btn-fg: var(--ink-invert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.375rem;
  min-height: 46px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover { --btn-bg: var(--heat-bright); }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 1rem 1.75rem; min-height: 54px; font-size: 1rem; }
.btn-sm { padding: .5rem .875rem; min-height: 38px; font-size: .8125rem; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--border-hard);
}
.btn-ghost:hover { --btn-bg: var(--surface-2); border-color: var(--fg); }

.btn-quiet {
  --btn-bg: transparent;
  --btn-fg: var(--muted);
  border-color: transparent;
  padding-inline: .5rem;
}
.btn-quiet:hover { --btn-fg: var(--fg); --btn-bg: var(--surface-2); }

.arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .arw { transition: none; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(13, 18, 25, .82);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 66px; }

.brand {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -.035em; color: var(--fg-strong); flex: none; min-width: 0;
}
.brand-mark {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-tld { color: var(--heat); }

.nav-links { display: flex; align-items: center; gap: var(--s-1); }
.nav-links a {
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--muted);
  transition: color .16s ease, background .16s ease;
}
.nav-links a:hover { color: var(--fg); background: var(--surface-2); }
.nav-links a[aria-current="page"] { color: var(--heat); }
.nav-links .btn { display: none; }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-hard);
  border-radius: var(--r); cursor: pointer; color: var(--fg);
}
.nav-toggle .ico-close { display: none; }
.nav.is-open .nav-toggle .ico-open { display: none; }
.nav.is-open .nav-toggle .ico-close { display: block; }

@media (max-width: 900px) {
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 80;
    background: rgba(8, 10, 13, .62);
  }
  /* sticky resolves against a scrollport; the open-state lock removes the
     root one, so the bar is fixed while open and the flow box replaced */
  body.nav-open .nav { position: fixed; top: 0; left: 0; right: var(--sbw, 0px); }
  body.nav-open { padding-top: 66px; }

  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open .nav-links {
    display: flex; position: absolute; inset: 66px 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-4) var(--s-5) var(--s-6);
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: navIn .2s ease both;
  }
  @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav.is-open .nav-links a { padding: .875rem .25rem; font-size: 1.0625rem; color: var(--fg); }
  .nav.is-open .nav-links .btn { display: inline-flex; margin-top: var(--s-4); padding-block: .9375rem; }
  .nav-actions .btn-nav-cta { padding: .5rem .8125rem; font-size: .8125rem; min-height: 44px; }
}
@media (max-width: 480px) {
  .nav .wrap { padding-inline: var(--s-3); }
  .nav-inner { gap: var(--s-2); }
  .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .nav-actions { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav-links { animation: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { font-size: var(--t-6); font-weight: 800; letter-spacing: -.04em; }
.hero .lede { font-size: clamp(1.0625rem, 1.1vw + .82rem, 1.3125rem); max-width: 54ch; }

.hero-split { display: grid; gap: var(--s-8); align-items: center; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 980px) { .hero-split { grid-template-columns: minmax(0,1fr); gap: var(--s-7); } }

.split-line { color: var(--heat); }

/* ==========================================================================
   Layer stack — the schematic centrepiece
   ========================================================================== */
.stackplan {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-deep);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stackplan-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}
.layer {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  padding: .8125rem var(--s-5);
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
}
.layer:last-child { border-bottom: 0; }
.layer-name { color: var(--muted); }
.layer-own {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .09em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--faint);
  white-space: nowrap;
}
.layer.is-ours { background: var(--heat-soft); }
.layer.is-ours .layer-name { color: var(--fg-strong); font-weight: 500; }
.layer.is-ours .layer-own { color: var(--heat); border-color: var(--heat-line); }
.layer.is-theirs .layer-own { color: var(--steel); border-color: rgba(127,169,204,.32); }

/* ==========================================================================
   Cards, panels
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.card-quiet { background: transparent; border-color: var(--rule); }
.card-heat { border-color: var(--heat-line); background: linear-gradient(180deg, var(--heat-soft), transparent 60%), var(--surface); }
.card h3 { font-size: var(--t-2); margin-bottom: var(--s-3); }

/* Deliverable list, used for the kit without any prices */
.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kit li {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: .875rem 0;
  border-bottom: 1px solid var(--rule);
}
.kit li:last-child { border-bottom: 0; }
.kit .idx { padding-top: .1rem; }
.kit b { font-weight: 600; color: var(--fg-strong); display: block; }
.kit span.d { color: var(--muted); font-size: .9375rem; }

/* Numbered process rail */
.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.rail > li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s-5); align-items: start; }
.rail-num {
  font-family: var(--font-mono); font-size: var(--t--1); font-weight: 500;
  color: var(--heat); border: 1px solid var(--heat-line); border-radius: var(--r-sm);
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center; flex: none;
}
.rail h3 { font-size: var(--t-1); margin-bottom: var(--s-2); letter-spacing: -.02em; }
.rail p { max-width: 66ch; }
.deflist dd { max-width: 68ch; }
.kit span.d { max-width: 66ch; }

/* Vertical blueprint card */
.blueprint { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; }
.blueprint .tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .07em; padding: .22rem .5rem;
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted);
}
.tag-heat { color: var(--heat); border-color: var(--heat-line); background: var(--heat-soft); }
.tag-steel { color: var(--steel); border-color: rgba(127,169,204,.3); }

/* Call flow, a schematic transcript of what an agent actually does */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: .9375rem; }
.flow li {
  display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: var(--s-4); align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.flow li:last-child { border-bottom: 0; }
.flow .step-n { font-family: var(--font-mono); font-size: var(--t--2); color: var(--faint); }
.flow .act { color: var(--muted); }
.flow .sys { font-family: var(--font-mono); font-size: var(--t--2); color: var(--steel); }

/* Comparison, two honest columns */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.versus-col { padding: var(--s-6); }
.versus-col + .versus-col { border-left: 1px solid var(--rule); }
.versus-col.is-us { background: var(--heat-soft); }
.versus h3 { font-size: var(--t-1); margin-bottom: var(--s-4); }
.versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.versus li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s-3); align-items: baseline; font-size: .9375rem; color: var(--muted); }
.versus .mk { font-family: var(--font-mono); font-size: var(--t--2); }
.versus .mk-no { color: var(--faint); }
.versus .mk-yes { color: var(--heat); }
@media (max-width: 660px) {
  .versus { grid-template-columns: minmax(0,1fr); }
  .versus-col + .versus-col { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Proof strip */
.logo-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--s-5) var(--s-7);
}
.logo-item {
  display: inline-flex; align-items: center; gap: .5625rem;
  filter: grayscale(1); opacity: .72;
  transition: filter .25s ease, opacity .25s ease;
  min-height: 44px;
}
.logo-item:hover, .logo-item:focus-visible { filter: none; opacity: 1; }
.logo-item img { height: 30px; width: auto; }
.logo-item img.logo-lockup { height: 28px; }
.logo-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: var(--fg); white-space: nowrap; }
.logo-name .logo-tld { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .logo-item { transition: none; } }

/* Definition list for mechanics */
.deflist { display: grid; gap: var(--s-5); margin: 0; }
.deflist > div { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.deflist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist dt { font-weight: 600; color: var(--fg-strong); font-size: 1.0625rem; }
.deflist dd { margin: 0; color: var(--muted); font-size: .9375rem; }

/* Accordion */
.acc { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5) 0; min-height: 56px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.02em; color: var(--fg-strong);
}
.acc-btn:hover { color: var(--heat); }
.acc-ico { flex: none; color: var(--heat); transition: transform .22s ease; }
.acc-item.is-open .acc-ico { transform: rotate(45deg); }
.acc-panel { display: grid; grid-template-rows: 1fr; }
.js .acc-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .26s ease, visibility .26s ease; }
.js .acc-item.is-open .acc-panel { grid-template-rows: 1fr; visibility: visible; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { color: var(--muted); max-width: 68ch; padding-bottom: var(--s-5); font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .acc-ico, .js .acc-panel { transition: none; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
}
.form-head { padding: var(--s-6); border-bottom: 1px solid var(--rule); background: var(--bg-deep); }
.form-body { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: var(--s-5); }
.field-label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--s-2); color: var(--fg-strong); }
.field-hint { font-size: var(--t--1); color: var(--faint); margin-top: var(--s-2); }
.inp, .ta, .sel {
  width: 100%; padding: .8125rem 1rem;
  background: var(--bg-deep); color: var(--fg);
  border: 1px solid var(--border-hard); border-radius: var(--r);
  font-family: var(--font-sans); font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ta { min-height: 132px; max-height: 60vh; resize: vertical; line-height: 1.55; }
.sel { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2398A2AE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.inp::placeholder, .ta::placeholder { color: var(--faint); }
.inp:focus, .ta:focus, .sel:focus { outline: none; border-color: var(--heat); box-shadow: 0 0 0 3px var(--heat-soft); }
.inp[aria-invalid="true"], .ta[aria-invalid="true"], .sel[aria-invalid="true"] { border-color: var(--stop); }
.inp[aria-invalid="true"]:focus, .ta[aria-invalid="true"]:focus, .sel[aria-invalid="true"]:focus {
  border-color: var(--stop); box-shadow: 0 0 0 3px rgba(224,104,92,.24);
}
.field-err { color: var(--stop); font-size: var(--t--1); margin-top: var(--s-2); }
.form-submit { display: grid; gap: var(--s-3); }
.form-submit .btn { width: 100%; min-height: 54px; }

.form-done, .form-fallback { display: none; flex-direction: column; gap: var(--s-5); text-align: center; align-items: center; padding: clamp(1.5rem,3vw,2.5rem); }
.form-card.is-finished .form-body > :not(.form-done):not(.form-fallback) { display: none; }
.form-done.is-active, .form-fallback.is-active { display: flex; }
.done-mark {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--heat-soft); color: var(--heat); border: 1px solid var(--heat-line);
}
.cal-go { width: 100%; max-width: 24rem; }

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

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--rule); background: var(--bg-deep); padding-block: var(--s-8) var(--s-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: var(--s-7) var(--s-5); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
.footer h4 { font-family: var(--font-mono); font-size: var(--t--2); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-3); }
.footer-links { display: flex; flex-direction: column; gap: var(--s-1); }
.footer-links a { color: var(--muted); font-size: .9375rem; display: flex; align-items: center; min-height: 40px; }
.footer-links a:hover { color: var(--heat); }
.footer-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; color: var(--faint); font-size: var(--t--1); }

/* ==========================================================================
   Prose links, reveal, print
   ========================================================================== */
main p a, main li a, main dd a {
  color: var(--heat); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main p a:hover, main li a:hover, main dd a:hover { text-decoration-thickness: 2px; }
main p a.btn, main li a.btn { text-decoration: none; }

.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.js .reveal-d1.is-in { transition-delay: .06s; }
.js .reveal-d2.is-in { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* A page that cannot be printed is a page that does not exist for anyone
   saving it to PDF, which is exactly what a partner does with a proposal. */
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .nav, .nav-toggle, .skip, .footer-base { display: none !important; }
  body { background: #fff; color: #111; }
  .band, .band-deep, .card, .stackplan, .form-card { background: #fff !important; border-color: #ccc !important; }
  h1, h2, h3, .layer.is-ours .layer-name { color: #000 !important; }
  .sub, .lede, .layer-name, .muted { color: #333 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* Forced colours: keep every control and the heat hierarchy legible.
   Never set an explicit colour on a button here: the backplate makes a light
   value invisible. Weight carries the hierarchy instead. */
@media (forced-colors: active) {
  .btn:not(.btn-ghost):not(.btn-quiet) { border-width: 2px; }
  .layer.is-ours { border: 1px solid ButtonText; }
  .inp, .ta, .sel { border: 1px solid ButtonText; }
  .inp:focus-visible, .ta:focus-visible, .sel:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .logo-item { forced-color-adjust: none; }
}

/* ==========================================================================
   CRAFT LAYER
   Depth, heat and scroll feedback. Three rules govern everything below: the
   motion has to mean something (the stack assembles because that IS the
   product story), it has to be cheap on the GPU, and it has to disappear
   entirely under reduced motion without leaving a hole in the page.
   ========================================================================== */

/* --- Grain. The cheapest cure for the flat-vector look. ----------------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- The forge: layered light behind the hero, each on its own plane ----- */
.forge { position: relative; isolation: isolate; overflow: hidden; }
.forge > .wrap { position: relative; z-index: 2; }
.forge-glow, .forge-embers, .forge-horizon {
  position: absolute; pointer-events: none; z-index: 0;
}
.forge-glow {
  left: 46%; top: -30%;
  width: min(1700px, 165vw); aspect-ratio: 1.35;
  transform: translate3d(-50%, 0, 0);
  background:
    radial-gradient(ellipse 34% 40% at 34% 58%, rgba(214,118,62,.40), transparent 64%),
    radial-gradient(ellipse 30% 34% at 62% 44%, rgba(238,138,80,.20), transparent 66%),
    radial-gradient(ellipse 70% 62% at 46% 40%, rgba(44,76,110,.50), transparent 74%);
  filter: blur(34px);
  will-change: transform;
}
.forge-horizon {
  left: 0; right: 0; top: 44%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,112,58,.5) 20%, rgba(238,138,80,.9) 50%, rgba(210,112,58,.5) 80%, transparent);
  opacity: .45;
}
.forge-embers { inset: 0; width: 100%; height: 100%; opacity: .85; }

/* One flat accent, held across the page. A gradient on a headline is the
   most recognisable generated-design habit there is. */
.hot { color: var(--heat); }

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

/* Line reveal: a mask wipe rather than a fade, so it reads as deliberate. */
.js .lines > span { display: block; overflow: hidden; padding-bottom: .06em; }
.js .lines > span > span {
  display: block; transform: translateY(106%);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.js .lines.is-in > span > span { transform: none; }
.js .lines.is-in > span:nth-child(2) > span { transition-delay: .085s; }
.js .lines.is-in > span:nth-child(3) > span { transition-delay: .17s; }

/* --- Scroll progress: a hairline of heat under the sticky bar ------------ */
.nav { position: sticky; }
.nav::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--steel-deep), var(--heat));
}

/* --- The stack assembles as you reach it -------------------------------- */
.js .stackplan .layer {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * .055s);
}
.js .stackplan.is-in .layer { opacity: 1; transform: none; }
.layer.is-ours { position: relative; }
.layer.is-ours::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--heat-bright), var(--heat));
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * .055s + .12s);
}
.js .stackplan.is-in .layer.is-ours::before { transform: scaleY(1); }
.stackplan { transform: perspective(1500px) rotateX(1.5deg); transform-origin: 50% 0; }
@media (max-width: 980px) { .stackplan { transform: none; } }

/* --- The call flow runs, step by step ----------------------------------- */
.js .flow li {
  opacity: .3; transform: translate3d(-8px, 0, 0);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: calc(var(--i, 0) * .08s);
}
.js .flow.is-in li { opacity: 1; transform: none; }
.flow li .step-n { transition: color .4s ease; transition-delay: calc(var(--i, 0) * .08s); }
.js .flow.is-in li .step-n { color: var(--heat); }

/* --- Cards: an edge of heat, and lift on approach ----------------------- */
.card { position: relative; transition: border-color .3s ease, transform .3s ease; }
.card-heat::after, .card-lift::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--heat-line), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card-lift:hover { transform: translateY(-3px); border-color: var(--border-hard); }

/* --- Buttons: a sweep of light, not a colour change --------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.20) 50%, transparent 78%);
  transform: translateX(-125%);
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after { transform: translateX(125%); }
.btn > span, .btn > svg { position: relative; z-index: 1; }

/* --- Industry tags ignite on hover -------------------------------------- */
.tag { transition: color .2s ease, border-color .2s ease, background .2s ease; }
li.tag:hover { color: var(--heat); border-color: var(--heat-line); background: var(--heat-soft); }

/* --- A statement moment, to break the even section rhythm --------------- */
.statement {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.85rem, 4.2vw + .6rem, 3.7rem);
  line-height: 1.05; letter-spacing: -.038em; max-width: 20ch;
  color: var(--fg-strong);
}
.statement .dim { color: var(--faint); }

/* --- Asymmetry: pull a column off the grid ------------------------------ */
@media (min-width: 981px) {
  .offset-up { margin-top: -3.25rem; }
  .offset-down { margin-top: 2rem; }
}

/* --- Honest degradation ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .lines > span > span,
  .js .stackplan .layer,
  .js .flow li { transform: none !important; opacity: 1 !important; transition: none !important; }
  .js .stackplan .layer.is-ours::before { transform: scaleY(1); transition: none; }
  .js .flow li .step-n { color: var(--heat); }
  .btn::after { display: none; }
  .card-lift:hover { transform: none; }
}
@media print {
  body::after, .forge-glow, .forge-embers, .forge-horizon, .nav::after { display: none !important; }
  .js .lines > span > span,
  .js .stackplan .layer,
  .js .flow li { transform: none !important; opacity: 1 !important; }
  .stackplan { transform: none !important; }
}
@media (forced-colors: active) {
  body::after, .forge-glow, .forge-embers, .forge-horizon { display: none; }
  .js .stackplan .layer, .js .flow li { opacity: 1; transform: none; }
  .btn::after { display: none; }
}

/* ==========================================================================
   LAYERED HERO
   Five planes, each on its own depth, moving at its own rate. Back to front:
   the hall, the molten pool, the rig, the sparks and
   embers. This is the part that separates a rendered scene from a gradient.
   ========================================================================== */
.hero.forge {
  min-height: clamp(560px, 92vh, 940px);
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem);
}
.hero-copy { max-width: 37rem; }

/* plane 1: the hall. Furthest, so it moves least and sits darkest. */
.forge-hall {
  position: absolute; inset: -8% 0 -4%;
  z-index: 0;
  background-image: image-set(url("/assets/img/forge-hall.webp?v=4") 1x);
  background-image: url("/assets/img/forge-hall.webp?v=4");
  background-size: cover;
  background-position: 50% 42%;
  opacity: .86;
  will-change: transform;
}
/* fade it out at the edges so it reads as depth, not wallpaper */
.forge-hall::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(13,18,25,.24) 26%, rgba(13,18,25,.42) 62%, var(--bg) 97%),
    linear-gradient(to right, var(--bg) 0%, rgba(13,18,25,0) 34%, rgba(13,18,25,0) 70%, var(--bg) 100%);
}
@media (max-width: 700px) {
  .forge-hall { background-image: url("/assets/img/forge-hall-sm.webp?v=4"); background-position: 62% 46%; }
}


/* plane 5: sparks, screen-blended so the black carries nothing */
.forge-sparks {
  position: absolute; inset: 0; z-index: 2;
  background-image: url("/assets/img/sparks.webp?v=4");
  background-size: cover; background-position: 62% 64%;
  mix-blend-mode: screen;
  opacity: .5;
  pointer-events: none;
  will-change: transform;
  /* Keep the sparks off the copy column: legibility beats atmosphere. */
  mask-image: linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 48%, #000 68%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 48%, #000 68%);
}
@media (max-width: 980px) {
  .forge-sparks {
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 42%, #000 74%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 42%, #000 74%);
    opacity: .42;
  }
}
.forge-embers { z-index: 3; }
.forge .wrap { z-index: 4; }

/* the cue that says this page rewards scrolling */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(1.25rem, 3vw, 2.25rem);
  transform: translateX(-50%);
  z-index: 4;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, transparent, var(--border-hard));
  overflow: hidden;
}
.scroll-cue span {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--heat-bright));
  animation: cue 2.4s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 980px) { .scroll-cue { display: none; } }

/* The stack panel now has a section of its own and can breathe. */
#stack .stackplan { transform: perspective(1600px) rotateX(2deg) rotateY(-2deg); }
@media (max-width: 980px) { #stack .stackplan { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: .5; }
  .forge-hall, .forge-sparks { transform: none !important; }
}
@media print {
  .forge-hall, .forge-sparks, .scroll-cue { display: none !important; }
}
@media (forced-colors: active) {
  .forge-hall, .forge-sparks, .scroll-cue { display: none; }
}

/* ==========================================================================
   THE RIG
   Five plates built from one asset, driven apart by scroll. This is the site's
   one real animation and it is an argument, not decoration: the two cool
   plates at the bottom are bought in, the three that ignite are the work you
   are paying us for. Separation and heat are both a single scroll variable.
   ========================================================================== */
.rig {
  position: absolute; z-index: 1;
  right: clamp(-2rem, 3vw, 5rem);
  top: 50%;
  width: clamp(300px, 33vw, 500px);
  aspect-ratio: 1 / 1.22;
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
  --sep: 0;      /* 0 assembled, 1 fully exploded */
  --lift: 0px;   /* parallax offset from the shared rAF */
}
.rig .plate {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: auto;
  transition: filter .5s ease;
  will-change: transform;
}
/* Bottom to top. Each plate rises further than the one beneath it, so the
   stack fans open rather than sliding as a block. */
/* Each plate has a resting position so it always reads as a stack, and the
   scroll variable spreads them symmetrically about the middle plate. The rig
   therefore explodes in place instead of climbing out of the frame. */
.rig .plate { bottom: 6%; }
.rig .p1 { transform: translate3d(0, calc(var(--sep) * 13%  + var(--lift) * 0.2), 0); }
.rig .p2 { transform: translate3d(0, calc(-9%  + var(--sep) * 6.5% + var(--lift) * 0.4), 0); }
.rig .p3 { transform: translate3d(0, calc(-18% + var(--lift) * 0.6), 0); }
.rig .p4 { transform: translate3d(0, calc(-27% - var(--sep) * 6.5% + var(--lift) * 0.8), 0); }
.rig .p5 { transform: translate3d(0, calc(-36% - var(--sep) * 13%  + var(--lift) * 1), 0); }

/* The three we own take the heat. Built from the same steel plate so the
   lighting stays consistent; the colour is a filter, not a second asset. */
.rig .is-hot {
  /* Heated metal, not orange plastic: keep the brushed texture by holding
     saturation down and contrast up, and let the glow do the heat. */
  filter:
    sepia(.78) saturate(2.05) hue-rotate(-16deg) brightness(.88) contrast(1.22)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 calc(6px + var(--sep) * 22px) rgba(238, 138, 80, .5));
}
.rig .p1, .rig .p2 { filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); }

@media (max-width: 980px) {
  .rig {
    position: relative; right: auto; top: auto;
    width: min(74vw, 340px);
    margin: var(--s-7) auto 0;
    transform: none;
  }
  .hero.forge { display: block; }
  .hero-copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Show the idea at rest rather than animating it. */
  .rig { --sep: .72; --lift: 0px; }
  .rig .plate { transition: none; }
}
@media print {
  .rig { position: relative; transform: none; width: 240px; --sep: .7; }
}
@media (forced-colors: active) { .rig { display: none; } }