/* ForceOps Solutions — joinery on console */
:root {
  --console: #101312;
  --console-deep: #0B0D0C;
  --panel: #181C1B;
  --panel-2: #141817;
  --rule: #2A302E;
  --rule-strong: #3A413E;
  --readout: #E7E4DC;
  --body: #C4C8C3;
  --graphite: #9BA39E;
  --signal: #E3A33B;
  --nominal: #86B991;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 5.5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--console);
  color: var(--readout);
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--readout); }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--console); }
img, svg { display: block; max-width: 100%; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1440px; margin: 0 auto; }
.label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}
.mono { font-family: var(--mono); font-weight: 400; }
.condensed { font-stretch: 72%; font-weight: 700; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--signal); color: var(--console); padding: 8px 12px; z-index: 10; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.brand span { font-size: 20px; font-weight: 700; font-stretch: 72%; letter-spacing: 0.12em; color: var(--readout); }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; }
.site-nav a { text-decoration: none; }
.site-nav .cta { background: var(--signal); color: var(--console); padding: 10px 14px; font-weight: 500; }
.site-nav .cta:hover { background: var(--readout); color: var(--console); }
@media (max-width: 720px) { .site-nav .secondary { display: none; } }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; padding-top: clamp(48px, 6vw, 72px); padding-bottom: 48px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { margin: 0; font-size: clamp(72px, 9.4vw, 136px); font-weight: 700; font-stretch: 70%; line-height: 0.9; letter-spacing: -0.01em; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .lede { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--body); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.button { display: inline-block; background: var(--signal); color: var(--console); text-decoration: none; padding: 16px 24px; font-size: 16px; font-weight: 600; }
.button:hover { background: var(--readout); color: var(--console); }
.text-link { font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; text-decoration: none; }
.drawing { display: flex; justify-content: center; }
.drawing svg { width: 100%; max-width: 600px; height: auto; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .drawing svg { max-width: 460px; }
}

/* Title block */
.titleblock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule-strong); background: var(--panel-2); }
.titleblock > div { padding: 18px 20px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 6px; }
.titleblock > div:last-child { border-right: 0; }
.titleblock dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--graphite); }
.titleblock dd { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.titleblock .status { color: var(--nominal); }
@media (max-width: 1000px) {
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock > div:nth-child(2) { border-right: 0; }
  .titleblock > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-strong); }
}
@media (max-width: 560px) {
  .titleblock { grid-template-columns: 1fr; }
  .titleblock > div { border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .titleblock > div:last-child { border-bottom: 0; }
}

/* Method */
.method .wrap { padding-top: clamp(64px, 8vw, 96px); padding-bottom: 80px; display: flex; flex-direction: column; gap: 48px; }
.section-head { display: flex; flex-direction: column; gap: 16px; }
h2 { margin: 0; font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; font-stretch: 72%; line-height: 1; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--readout); margin: 0; padding: 0; list-style: none; }
.steps li { padding: 28px 28px 0; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.steps li:first-child { padding-left: 0; border-left: 0; }
.steps li:last-child { padding-right: 0; }
.steps .num { font-family: var(--mono); font-size: 14px; color: var(--signal); }
.steps li:last-child .num { color: var(--nominal); }
.steps h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.steps p { margin: 0; font-size: 16px; color: var(--body); }
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li { padding: 28px 28px 28px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .steps li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li:nth-child(even) { padding: 24px 0; border-left: 0; }
}

/* Work types */
.work .wrap { padding-bottom: clamp(64px, 8vw, 96px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.work-card { padding: clamp(28px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 20px; border: 1px solid var(--rule-strong); }
.work-card.filled { background: var(--panel); border-color: var(--rule); }
.work-card h3 { margin: 0; font-size: clamp(36px, 3.2vw, 44px); font-weight: 700; font-stretch: 72%; line-height: 1.05; }
.work-card p { margin: 0; font-size: 18px; color: var(--body); }
.findings { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; }
.findings li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.findings li:last-child { border-bottom: 0; }
.findings .before { color: var(--signal); }
.findings .after { color: var(--nominal); text-align: right; }
.work-card .label, .doc .label { font-size: 13px; color: var(--signal); margin: 0; }
.work-card .state { margin-top: auto; font-family: var(--mono); font-size: 13px; color: var(--nominal); }
@media (max-width: 900px) { .work .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .findings li { flex-direction: column; gap: 2px; } .findings .after { text-align: left; } }

/* Record */
.record { display: flex; flex-wrap: wrap; gap: 16px 56px; align-items: baseline; padding: 40px 0; border-top: 1.5px solid var(--readout); border-bottom: 1px solid var(--rule); }
.record ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 20px; font-weight: 600; }
.record .note { font-weight: 300; color: var(--graphite); }
.record .current { color: var(--signal); }

/* Footer / contact */
.contact .wrap { padding-top: clamp(64px, 8vw, 96px); padding-bottom: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; }
.contact h2 { font-size: clamp(48px, 5.4vw, 80px); font-stretch: 70%; line-height: 0.95; }
.contact h2 em { font-style: normal; color: var(--signal); }
.contact-copy { display: flex; flex-direction: column; gap: 20px; }
.email { font-family: var(--mono); font-size: clamp(16px, 1.4vw, 18px); overflow-wrap: anywhere; }
.colophon { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.colophon svg { width: 40px; height: 40px; }
.colophon p { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--graphite); text-align: right; line-height: 1.8; text-transform: uppercase; }
.colophon a { color: var(--graphite); }
.colophon a:hover { color: var(--signal); }
@media (max-width: 640px) { .colophon { align-items: flex-start; } .colophon p { text-align: left; } }

/* Document pages (privacy) */
.doc .wrap { max-width: 860px; padding-top: clamp(48px, 7vw, 88px); padding-bottom: 80px; }
.doc h1 { margin: 16px 0 8px; font-size: clamp(48px, 6vw, 80px); font-weight: 700; font-stretch: 70%; line-height: 0.95; }
.doc .meta { font-family: var(--mono); font-size: 13px; color: var(--graphite); margin: 0 0 40px; }
.doc h2 { font-size: 28px; font-stretch: 72%; margin: 44px 0 12px; }
.doc p { color: var(--body); margin: 0 0 16px; }
.doc a { color: var(--signal); }