/* l8on.works homepage. Built on the L8on Works design system (IBM Carbon v11, teal interactive roles). */

/* ---------- Brand mark (from the design system bundle) ---------- */
.l8on-mark { display: inline-block; color: var(--l8on-mark); min-height: var(--mark-min-height); }
.l8on-mark svg { display: block; height: 100%; width: auto; fill: currentColor; }
.l8on-gear-top { transform-origin: 128px 104px; }
.l8on-gear-bottom { transform-origin: 128px 296px; }
.l8on-mark--spin .l8on-gear-top, .l8on-mark--hover:hover .l8on-gear-top { animation: l8on-cw var(--mark-spin-top) linear infinite; }
.l8on-mark--spin .l8on-gear-bottom, .l8on-mark--hover:hover .l8on-gear-bottom { animation: l8on-ccw var(--mark-spin-bottom) linear infinite; }
@keyframes l8on-cw { to { transform: rotate(360deg); } }
@keyframes l8on-ccw { to { transform: rotate(-360deg); } }
.l8on-wordmark { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; color: var(--cds-text-primary); }
@media (prefers-reduced-motion: reduce) {
  .l8on-mark .l8on-gear-top, .l8on-mark .l8on-gear-bottom { animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--cds-link-primary); }
a:hover { color: var(--cds-link-primary-hover); }
:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.75rem 1rem; background: var(--cds-background); color: var(--cds-text-primary); }
.skip-link:focus { top: 0.5rem; }

/* ---------- Carbon 2x grid ---------- */
.wrap { max-width: 99rem; margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; }
@media (min-width: 42rem) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .wrap { padding: 0 2rem; } }
@media (min-width: 66rem) { .grid { grid-template-columns: repeat(16, minmax(0, 1fr)); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.site-header .wrap { display: flex; align-items: center; height: 4rem; gap: 1rem; }
.brand { display: inline-flex; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.nav { display: none; margin-inline-start: auto; height: 100%; }
.nav a {
  display: flex; align-items: center; height: 100%; padding: 0 1rem;
  font-size: 0.875rem; letter-spacing: 0.16px; text-decoration: none;
  color: var(--cds-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color 110ms cubic-bezier(0.2,0,0.38,0.9), background-color 110ms cubic-bezier(0.2,0,0.38,0.9);
}
.nav a:hover { color: var(--cds-text-primary); background: var(--cds-background-hover); }
@media (min-width: 42rem) { .nav { display: flex; } }
.icon-btn {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border: 0; background: transparent; cursor: pointer;
  color: var(--cds-icon-primary);
  transition: background-color 110ms cubic-bezier(0.2,0,0.38,0.9);
}
@media (min-width: 42rem) { .icon-btn { margin-inline-start: 0; } }
.icon-btn:hover { background: var(--cds-background-hover); }

/* ---------- Buttons (Carbon large) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 3rem; padding: calc(0.875rem - 1px) 1rem; min-width: 12rem;
  font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 70ms cubic-bezier(0,0,0.38,0.9), color 70ms cubic-bezier(0,0,0.38,0.9);
}
.btn svg { flex: none; }
.btn--primary { background: var(--cds-button-primary); color: var(--cds-text-on-color); }
.btn--primary:hover { background: var(--cds-button-primary-hover); color: var(--cds-text-on-color); }
.btn--primary:active { background: var(--cds-button-primary-active); }
.btn--ghost { background: transparent; color: var(--cds-link-primary); min-width: 0; }
.btn--ghost:hover { background: var(--cds-background-hover); color: var(--cds-link-primary-hover); }
.btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; box-shadow: inset 0 0 0 3px var(--cds-focus-inset); }

/* ---------- Hero ---------- */
.hero { padding: 4rem 0 5rem; border-bottom: 1px solid var(--cds-border-subtle-01); }
.hero-mark { grid-column: 1 / -1; margin-bottom: 2.5rem; height: 120px; }
.hero-mark .l8on-mark { height: 120px; }
.hero-copy { grid-column: 1 / -1; }
.hero h1 { font-size: 2.625rem; line-height: 1.199; font-weight: 300; max-width: 16ch; }
.hero .lede { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.4; color: var(--cds-text-secondary); max-width: 38rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 42rem) {
  .hero { padding: 6rem 0 7rem; }
  .hero h1 { font-size: 3.375rem; }
}
@media (min-width: 66rem) {
  .hero .grid { align-items: center; }
  .hero-copy { grid-column: 1 / span 10; grid-row: 1; }
  .hero-mark { grid-column: 12 / span 5; grid-row: 1; margin: 0; height: auto; display: flex; justify-content: center; }
  .hero-mark .l8on-mark { height: 320px; }
  .hero h1 { font-size: 4.25rem; line-height: 1.17; }
}

/* ---------- Sections ---------- */
.section { padding: 4rem 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
@media (min-width: 42rem) { .section { padding: 6rem 0; } }
.section-title { grid-column: 1 / -1; margin-bottom: 2rem; }
.section-title h2 { font-size: 1.75rem; line-height: 1.28572; font-weight: 400; }
.section-body { grid-column: 1 / -1; }
@media (min-width: 66rem) {
  .section-title { grid-column: 1 / span 4; margin-bottom: 0; }
  .section-body { grid-column: 5 / span 12; }
}
.prose p { font-size: 1.25rem; line-height: 1.5; max-width: 42rem; }
.prose p + p { margin-top: 1.5rem; }
.prose .muted { color: var(--cds-text-secondary); }
.equation { font-family: var(--font-mono); color: var(--cds-text-primary); white-space: nowrap; }
.equation b { color: var(--l8on-mark); font-weight: 600; }

/* Tiles */
.tiles { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--cds-border-subtle-01); border: 1px solid var(--cds-border-subtle-01); }
@media (min-width: 42rem) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--cds-layer-01); padding: 1.5rem 1rem 2rem; min-height: 14rem; display: flex; flex-direction: column; }
.tile-num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--cds-text-helper); }
.tile h3 { margin-top: 2.5rem; font-size: 1.25rem; line-height: 1.4; font-weight: 400; }
.tile p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--cds-text-secondary); }

/* Chain: how the work connects */
.chain { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.chain li { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--cds-border-subtle-01); font-size: 1rem; }
.chain li:last-child { border-bottom: 1px solid var(--cds-border-subtle-01); }
.chain .step { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cds-text-helper); width: 1.5rem; }
.chain li.end { color: var(--cds-text-primary); font-weight: 600; }
.chain li.end .dot { display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--l8on-mark); vertical-align: middle; }
.chain .step { line-height: 1rem; }
@media (min-width: 66rem) {
  .chain { grid-template-columns: repeat(4, 1fr); }
  .chain li { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 1rem 1rem 1.5rem 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
  .chain li + li { padding-left: 1rem; border-left: 1px solid var(--cds-border-subtle-01); }
}

/* Principles list */
.principles { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 42rem) { .principles { grid-template-columns: repeat(2, 1fr); } }
.principle { border-top: 2px solid var(--l8on-mark); padding-top: 1rem; }
.principle h3 { font-size: 1rem; line-height: 1.5; font-weight: 600; }
.principle p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--cds-text-secondary); max-width: 32rem; }

/* Contact */
.contact { background: var(--cds-layer-01); }
.contact h2 { font-size: 2.625rem; line-height: 1.199; font-weight: 300; max-width: 18ch; }
.contact p { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.4; color: var(--cds-text-secondary); max-width: 38rem; }
.contact .actions { margin-top: 2.5rem; }
@media (min-width: 66rem) { .contact .section-body { grid-column: 1 / span 12; } }

/* Footer */
.site-footer { padding: 3rem 0 4rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.site-footer small { display: block; font-size: 0.75rem; line-height: 1.33333; letter-spacing: 0.32px; color: var(--cds-text-helper); }
.site-footer small + small { margin-top: 0.25rem; }