/* Wallin Technologies: derived from the "Industry" design system in Claude
   Design (steel-blue hue 210, Barlow Condensed over Barlow, blueprint frames
   with registration crosses), re-tuned to a dark band. */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/barlowcondensed-normal-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/barlowcondensed-normal-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/barlowcondensed-normal-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/barlow-normal-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/barlow-normal-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/barlow-normal-600.woff2") format("woff2"); }

:root {
  --color-bg: #0b1522;
  --color-surface: #11213a;
  --color-text: #e4ecf5;
  --color-accent: #ff5700;          /* the logo's orange: the one warm colour */
  --color-accent-strong: #ff7a33;
  --color-link: #a9cff2;            /* steel, from the Industry ramp, for running links */
  --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent);
  --color-mark: color-mix(in srgb, var(--color-text) 55%, transparent);
  --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent);
  --ink-80: color-mix(in srgb, var(--color-text) 80%, transparent);

  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --leading: 24px;
  --half: 12px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}

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

html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--color-bg);
  /* the drawing grid: hairlines on the 24px rhythm, barely there */
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px);
  background-size: var(--leading) var(--leading);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-strong); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.skip {
  position: absolute; left: var(--edge); top: -4rem; z-index: 10;
  padding: var(--half) var(--leading);
  background: var(--color-accent); color: var(--color-bg);
  font-size: 13px; text-decoration: none;
}
.skip:focus { top: var(--half); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — masthead — */
.nav {
  display: flex; align-items: center; gap: var(--leading);
  padding: var(--leading) max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
}
.nav-brand { margin-right: auto; display: block; color: var(--color-text); line-height: 0; }
.nav-brand svg { height: 36px; width: auto; display: block; }
.nav nav { display: flex; gap: var(--leading); }
.nav nav a { color: var(--ink-80); text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav nav a:hover { color: var(--color-accent); }

/* — buttons: the solid accent primary is the one filled object on the board — */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
  padding: 9px 16px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--color-divider); border-radius: 0;
  color: var(--color-text);
}
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-bg); }
.btn-primary:focus-visible { outline-color: var(--color-text); }
.btn-primary:active { background: var(--color-accent); }
.btn.blueprint { position: relative; }

/* — blueprint frame: square, hairline, registration crosses at the corners — */
.blueprint { position: relative; border: 1px solid var(--color-divider); }
.blueprint > .corner { position: absolute; width: 15px; height: 15px; color: var(--color-mark); pointer-events: none; }
.blueprint > .corner::before { content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.blueprint > .corner::after  { content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.blueprint > .corner.tl { top: -8px; left: -8px; }
.blueprint > .corner.tr { top: -8px; right: -8px; }
.blueprint > .corner.bl { bottom: -8px; left: -8px; }
.blueprint > .corner.br { bottom: -8px; right: -8px; }

/* — caption rules: a kicker above a drawn 1px rule, content seated below — */
.kicker {
  display: block; margin: 0 0 var(--half);
  font-size: 13px; line-height: var(--half); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent);
  font-feature-settings: "tnum" 1;
}
.caption-rule { height: 1px; border: 0; margin: 0 0 var(--leading); background: var(--color-divider); }

/* — hero — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.display {
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin-left: -0.05em;
}
.display .line { display: block; }
.display .line.accent { color: var(--color-accent); }
.hero .sub { max-width: var(--measure); margin: calc(1.5 * var(--leading)) 0 0; font-size: 17px; color: var(--ink-80); }
.hero .row { display: flex; gap: var(--half); flex-wrap: wrap; margin-top: var(--leading); }

/* — the company sheet: the one drawn plate, sheet 01 of the set — */
.sheet { padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.plate { background: color-mix(in srgb, var(--color-surface) 55%, transparent); }
.title-block {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-bottom: 1px solid var(--color-divider);
}
.title-block > span {
  padding: var(--half) var(--leading);
  font-size: 13px; line-height: var(--leading); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-feature-settings: "tnum" 1;
}
.tb-title { flex: 1; min-width: 16ch; }
.tb-cell { border-left: 1px solid var(--color-divider); white-space: nowrap; color: var(--ink-70); }

.spec { margin: 0; counter-reset: row; }
.spec > div {
  display: grid; grid-template-columns: calc(3 * var(--leading)) minmax(10ch, 28%) 1fr;
  align-items: baseline; counter-increment: row;
  padding: var(--half) var(--leading) var(--half) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.spec > div:last-child { border-bottom: 0; }
.spec dt {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / 3;
  font-size: 15px; color: var(--ink-80);
}
.spec dt::before {
  content: counter(row, decimal-leading-zero);
  padding-left: var(--leading);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent); font-feature-settings: "tnum" 1;
}
.spec dd {
  margin: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; letter-spacing: 0.02em; line-height: var(--leading);
  font-feature-settings: "tnum" 1;
}
.spec dd a { color: var(--color-text); text-decoration-color: var(--color-link); }
.spec dd a:hover { color: var(--color-accent-strong); }
.sheet-note {
  margin: 0; padding: var(--half) var(--leading);
  border-top: 1px solid var(--color-divider);
  font-size: 13px; color: var(--ink-70);
}

/* — numbered sections — */
.section { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.section > .caption-rule { margin-bottom: calc(var(--leading) + 8px); }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.cells-2 { grid-template-columns: repeat(2, 1fr); }
.cell { padding: var(--leading); }
.cell h2 { font-size: 24px; line-height: var(--leading); }
.cell h2 a { color: var(--color-text); text-decoration: none; }
.cell h2 a:hover { color: var(--color-accent-strong); text-decoration: underline; text-decoration-thickness: 1px; }
.cell p { margin: var(--half) 0 0; font-size: 15px; color: var(--ink-80); }
.cell .label {
  display: block; margin: 0 0 var(--half);
  font-size: 13px; line-height: var(--half); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
}
.cell .more { margin-top: var(--leading); font-size: 15px; }
.cell .more a { font-weight: 500; }

/* — contact — */
.contact h2 { font-size: clamp(28px, 3vw, 40px); max-width: 24ch; }
.contact .sub { max-width: var(--measure); margin: var(--half) 0 0; color: var(--ink-80); }
.contact .row { display: flex; gap: var(--leading); align-items: center; flex-wrap: wrap; margin-top: var(--leading); }
.contact .row .plain { font-size: 15px; }

/* — footer — */
.foot {
  margin-top: calc(2 * var(--leading));
  border-top: 1px solid var(--color-divider);
  padding: var(--leading) max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))) calc(2 * var(--leading));
  display: flex; justify-content: space-between; gap: var(--half) var(--leading); flex-wrap: wrap;
  font-size: 13px; color: var(--ink-70);
}
.foot p { margin: 0; }
.foot a { color: var(--ink-80); }
.foot a:hover { color: var(--color-accent); }

/* — responsive collapse — */
@media (max-width: 880px) {
  .cells, .cells-2 { grid-template-columns: 1fr; gap: calc(var(--leading) + 16px); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .nav nav { display: none; }
  .tb-title { flex-basis: 100%; border-bottom: 1px solid var(--color-divider); }
  .title-block > .tb-cell { flex: 1 0 auto; padding-inline: var(--half); }
  .tb-title + .tb-cell { border-left: 0; padding-left: var(--leading); }
  .spec > div { grid-template-columns: calc(2 * var(--leading)) 1fr; row-gap: 4px; padding-left: 0; }
  .spec dt { grid-column: 1 / -1; }
  .spec dd { grid-column: 2; font-size: 20px; }
}
@media (max-width: 480px) {
  .nav { gap: var(--half); }
  .nav-brand svg { height: 30px; }
  .nav .btn { font-size: 13px; padding: 7px 10px; }
}