@font-face {
  font-family: Sora;
  src: url("fonts/sora-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f3f1ee;
  --muted: #b8b8b8;
  --paper: #2b2b2b;
  --paper-light: #353535;
  --line: #5c5c5c;
  --dark: #2b2b2b;
  --dark-deep: #1e1e1e;
  --accent: #f05a28;
  --accent-dark: #ff875f;
}

body { font-family: Sora, Arial, Helvetica, sans-serif; }
::selection { background: var(--accent); color: #202020; }
:focus-visible { outline-color: var(--accent); }
.eyebrow { color: var(--accent-dark); }
.section-index { color: #a7a7a7; }

.site-header { background: #222; border-bottom-color: #555; }
.wordmark { display: inline-flex; align-items: center; gap: 4px; color: #f3f1ee; }
.brand-icon { display: block; flex: none; width: 48px; height: 48px; object-fit: contain; }
.brand-word { position: relative; display: block; flex: none; width: 210px; height: 50px; overflow: hidden; }
.brand-word img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-word img.brand-word-accent { position: absolute; inset: 0; filter: brightness(0) saturate(100%) invert(48%) sepia(81%) saturate(1884%) hue-rotate(338deg) brightness(101%) contrast(89%); clip-path: inset(0 0 0 43%); }
.header-descriptor { color: #a7a7a7; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.site-header nav a:hover, .footer-right a:hover, .text-link:hover { color: var(--accent-dark); }
.site-header nav .nav-contact { border-left-color: #555; }

.hero { background: radial-gradient(circle at 77% 40%, #45484a 0, #313131 33%, #2b2b2b 75%); }
.hero::before { opacity: .18; background-image: linear-gradient(to right, #a7a7a7 1px, transparent 1px), linear-gradient(to bottom, #a7a7a7 1px, transparent 1px); }
.hero h1 { color: #f3f1ee; }
.hero h1 em { color: #f3f1ee; }
.hero h1 em span { color: var(--accent); }
.hero-intro { color: #cecece; }
.hero-aside { color: #b4b4b4; }
.hero-baseline { border-top-color: #666; color: #b1b1b1; }
.hero-baseline span:not(:last-child)::after { color: var(--accent); }
.button-primary { background: var(--accent); color: #202020; }
.button-primary:hover { background: #ff774b; }
.text-link { color: #f3f1ee; }
.hero-proof { border: 1px solid #666; color: #f3f1ee; background: #393939; box-shadow: 15px 15px 0 rgba(0, 0, 0, .22); }
.panel-topline { color: #bcbcbc; }
.panel-mark { color: var(--accent); }
.hero-proof-kicker, .hero-proof-link span { color: var(--accent); }
.hero-proof-description, .hero-proof-result span { color: #c5c5c5; }

.services { background: #303030; }
.service-card { background: #353535; }
.service-symbol { color: #a7a7a7; }
.work { background: #252525; }
.proof-card, .case { background: #353535; }
.case-kicker, .case-foot span { color: var(--accent-dark); }
.case-copy > p:not(.case-kicker):not(.case-foot) { color: #c2c2c2; }
.case-foot { border-top-color: #626262; color: #b8b8b8; }
.case-measure { border-block-color: #626262; }
.case-measure strong { color: #f3f1ee; }
.case-measure span { color: #b8b8b8; }
.visual-label { color: #d1d1d1; }

.autoro-visual { background: radial-gradient(circle at 50% 45%, #555b5e, #34383a 70%); }
.autoro-sheet { border-color: #a7a7a7; color: #efefef; background: #242728; box-shadow: 15px 17px 0 #1e2021; }
.autoro-sheet-top, .autoro-sheet-body div, .autoro-sheet-bottom { border-color: #62676a; }
.autoro-sheet-top span:first-child, .autoro-flow b, .autoro-sheet-body div span { color: var(--accent); }
.autoro-sheet-top span:last-child, .autoro-flow, .autoro-sheet-body div, .autoro-sheet-bottom { color: #bcbcbc; }
.autoro-flow span { border-color: #82878a; }
.autoro-flow span:last-child { border-color: var(--accent); color: #ff9b78; }
.autoro-sheet-body i { background: #777c7e; }

.case-shop .case-visual, .proof-shop .case-visual { background: #414548; }
.workflow-board { border-color: #a7a7a7; color: #efefef; background: #323638; box-shadow: 16px 19px 0 #282b2d; }
.board-heading, .board-bottom { border-color: #707579; }
.board-heading span:last-child { color: var(--accent); }
.board-grid > div + div { border-left-color: #656a6d; }
.board-grid i { background: #a7a7a7; }
.board-grid i.accent { background: var(--accent); }
.board-bottom { color: #c0c0c0; }

.case-ovrland .case-visual, .proof-ovrland .case-visual { background: #3c4144; }
.telemetry-visual { background-image: radial-gradient(circle at 50% 46%, #53595b 0, #34383b 58%); }
.telemetry-screen { border-color: #a7a7a7; color: #ededed; background: #1b1e20; box-shadow: 0 0 0 8px #2b2e30, 0 18px 30px rgba(0, 0, 0, .3); }
.screen-header, .screen-bottom { border-color: #5c6265; }
.screen-header span:first-child, .screen-bottom span:first-child, .compass b { color: var(--accent); }
.compass { border-color: #858b8e; box-shadow: inset 0 0 0 16px #24282a, inset 0 0 0 17px #5a6063; }
.compass span, .readouts small, .screen-bottom { color: #bababa; }
.readouts > div { border-color: #5f6668; }
.readouts strong { color: #f3f1ee; }

.software-visual { background: #74797c; }
.software-visual .visual-label { color: #f3f1ee; }
.tool-window { border-color: #595f62; color: #2b2b2b; background: #dedede; box-shadow: 14px 16px 0 #54595c; }
.tool-title, .tool-sidebar { border-color: #94999b; }
.tool-title span:last-child, .tool-content > span { color: #bd3f17; }
.tool-sidebar { background: #c7c7c7; }
.tool-sidebar i { border-color: #8b9092; }
.tool-sidebar i:first-child { border-color: #c54b22; background: #f05a28; }
.tool-content i { background: #a7a7a7; }
.tool-action { color: #f3f1ee; background: #4e5459; }

.taktro-visual { background: #3b3e40; }
.taktro-terminal { border-color: #a7a7a7; color: #ececec; background: #1c1f20; box-shadow: 14px 16px 0 #292c2e; }
.terminal-top, .terminal-line { border-color: #545a5d; }
.terminal-top, .terminal-line b { color: var(--accent); }
.terminal-top span:last-child, .terminal-line em { color: #b7b7b7; }

.sensing-visual { background: #454b4e; }
.sensor-panel { border-color: #a7a7a7; color: #ececec; background: #1e2224; box-shadow: 13px 16px 0 #303538; }
.sensor-top, .sensor-bottom { border-color: #5c6265; }
.sensor-top { color: var(--accent); }
.sensor-top span:last-child, .sensor-bottom { color: #bcbcbc; }
.sensor-panel svg path:first-child { stroke: #5d6366; }
.sensor-panel svg path:last-child { stroke: var(--accent); }

.case-parts .case-visual, .proof-parts .case-visual { background: #767c7f; }
.case-parts .visual-label, .proof-parts .visual-label { color: #f3f1ee; }
.part-drawings { border-color: #5d6366; color: #4e5459; background: #d6d6d6; box-shadow: 14px 17px 0 #555b5e; }

.approach { color: #f3f1ee; background: #1f1f1f; }
.approach .eyebrow, .approach .section-index { color: var(--accent-dark); }
.approach-method, .approach-claim, .steps p { color: #c1c1c1; }
.steps li { border-top-color: #5c5c5c; }
.step-number { color: var(--accent); }

.contact { background: #2b2b2b; }
.contact-intro > p:not(.eyebrow):not(.contact-note), .contact-note { color: #c2c2c2; }
.form-shell { border-color: #696969; background: #383838; box-shadow: 11px 11px 0 #1f1f1f; }
.form-header, .form-footer { border-color: #696969; color: #b8b8b8; }
.form-header span:last-child { color: var(--accent); }
.field label { color: #f3f1ee; }
.field label span { color: var(--accent); }
.field input, .field select, .field textarea { color-scheme: light; border-color: #a7a7a7; color: #2b2b2b; background: #f3f1ee; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent); }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--accent); }
.field textarea::placeholder { color: #6e7376; }
.form-help { color: #b8b8b8; }
.form-status { color: #f3f1ee; }
.form-status.error { color: var(--accent-dark); }

.site-footer { color: #bcbcbc; background: #181818; }
.footer-wordmark { color: #f3f1ee; }
.footer-right small { color: #a7a7a7; }
.footer-right small span { color: var(--accent); }
.thanks-page { background: #2b2b2b; }
.thanks-card { border-color: #666; background: #383838; box-shadow: 12px 12px 0 #1f1f1f; }
.thanks-card > p:not(.eyebrow) { color: #c2c2c2; }

@media (max-width: 640px) {
  .brand-icon { width: 42px; height: 42px; }
  .brand-word { width: 185px; height: 44px; }
  .compass { box-shadow: inset 0 0 0 10px #24282a, inset 0 0 0 11px #5a6063; }
}