:root {
  --paper: #08090a;
  --paper-2: #0f1011;
  --paper-3: #191a1b;
  --paper-overlay: rgba(8, 9, 10, 0.82);
  --ink: #f7f8f8;
  --ink-2: #d0d6e0;
  --ink-3: #8a8f98;
  --ink-4: #62666d;
  --ink-line: rgba(255, 255, 255, 0.12);
  --ink-border: rgba(255, 255, 255, 0.08);
  --term: #050607;
  --term-2: #0f1011;
  --term-3: #191a1b;
  --term-border: rgba(255, 255, 255, 0.08);
  --term-line: rgba(255, 255, 255, 0.14);
  --term-fg: #f7f8f8;
  --term-fg-2: #d0d6e0;
  --term-fg-3: #8a8f98;
  --signal: #ff6840;
  --signal-press: #ff8a6c;
  --signal-soft: rgba(255, 104, 64, 0.13);
  --signal-glow: rgba(255, 104, 64, 0.24);
  --midnight: #08090a;
  --shadow-1: 0 0 0 1px var(--ink-border);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--ink-border);
  color-scheme: dark;
}

body::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 104, 64, 0.13),
      transparent 28rem
    ),
    radial-gradient(
      circle at 86% 10%,
      rgba(96, 112, 255, 0.12),
      transparent 32rem
    );
  background-size:
    44px 44px,
    44px 44px,
    auto,
    auto;
}

.site-shell::after {
  background: linear-gradient(180deg, transparent, rgba(8, 9, 10, 0.92));
}

.nav {
  background: linear-gradient(
    180deg,
    rgba(8, 9, 10, 0.96),
    rgba(8, 9, 10, 0.78)
  );
}

.brand {
  min-width: max-content;
}

.brand .brand-lockup {
  display: block;
  width: clamp(168px, 15vw, 198px);
  height: auto;
  max-height: 40px;
}

.minimal-footer .brand .brand-lockup {
  width: 190px;
  max-height: none;
}

.btn.primary {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

.btn.primary:hover {
  border-color: var(--signal-press);
  background: var(--signal-press);
}

.btn.secondary,
.nav-cta {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.02);
}

.btn.secondary:hover,
.nav-cta:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
}

.pain-list article,
.problem-system-grid article,
.proof-tile,
.project-card,
.capability-card,
.offer-grid article,
.trust-signal-list span,
.contact-form,
.trust-card,
.timeline article {
  background-color: rgba(255, 255, 255, 0.025);
}

.brand-wall article {
  background: rgba(255, 255, 255, 0.025);
}

.brand-wall-mark {
  border-color: rgba(255, 255, 255, 0.12);
  background: #f7f8f8;
}

.brand-wall-mark b {
  color: #111214;
}

.minimal-work,
.project-image {
  background: #0f1011;
}

.cookd-visual {
  background:
    radial-gradient(circle at 86% 15%, rgba(238, 85, 0, 0.19), transparent 38%),
    linear-gradient(145deg, #0b1020, #111d3c 58%, #0b0d12);
}

.cookd-control-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: clamp(18px, 3vw, 28px);
}

.cookd-inputs,
.cookd-outputs {
  display: grid;
  gap: 6px;
}

.cookd-inputs span,
.cookd-outputs span {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  padding: 7px 8px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  line-height: 1;
  text-align: center;
}

.cookd-outputs span {
  border-color: rgba(238, 85, 0, 0.36);
  background: rgba(238, 85, 0, 0.09);
  color: var(--ink);
}

.cookd-control-node {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #ff8b4a, #ee5500);
  box-shadow: 0 8px 26px rgba(238, 85, 0, 0.22);
  font-size: 0.92rem;
}

.cookd-status-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.08);
}

.cookd-status-line span {
  padding: 9px 4px;
  color: var(--ink-3);
  background: #0f1527;
  font-family: var(--font-mono);
  font-size: 0.59rem;
  text-align: center;
  text-transform: uppercase;
}

input,
textarea,
select {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: #0f1011;
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-4);
  opacity: 1;
}

select option {
  background: #0f1011;
  color: var(--ink);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px #0f1011 inset;
}

.form-microcopy a {
  color: var(--ink-2);
  text-underline-offset: 3px;
}

.form-microcopy a:hover {
  color: var(--signal-press);
}

.form-status:not(:empty) {
  border-left: 2px solid var(--signal);
  padding-left: 10px;
}

.contact-direct {
  align-content: center;
  min-height: 360px;
}

.contact-direct h3 {
  max-width: 560px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
}

.contact-direct > p:not(.kicker) {
  max-width: 580px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.62;
}

.contact-direct .btn {
  justify-self: start;
  margin-top: 8px;
}

.studio-panel .btn.primary,
.trust-cta[data-astro-cid-elhish5v] .btn[data-astro-cid-elhish5v].primary {
  border-color: var(--signal) !important;
  background: var(--signal) !important;
  color: #fff !important;
}

.studio-panel .btn.primary:hover,
.trust-cta[data-astro-cid-elhish5v]
  .btn[data-astro-cid-elhish5v].primary:hover {
  border-color: var(--signal-press) !important;
  background: var(--signal-press) !important;
}

.case-cta .btn.primary {
  border-color: var(--signal) !important;
  background: var(--signal) !important;
  color: #fff !important;
}

.case-cta .btn.primary:hover {
  border-color: var(--signal-press) !important;
  background: var(--signal-press) !important;
}

::selection {
  background: rgba(255, 104, 64, 0.32);
  color: #fff;
}

@media (max-width: 1120px) {
  .brand .brand-lockup {
    width: 168px;
  }
}

@media (max-width: 620px) {
  .brand .brand-lockup {
    width: 165px;
    max-height: 36px;
  }

  .minimal-footer .brand .brand-lockup {
    width: 178px;
  }

  .cookd-control-board {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 8px;
    padding: 16px 12px;
  }

  .cookd-inputs span,
  .cookd-outputs span {
    padding: 7px 4px;
    font-size: 0.6rem;
  }

  .cookd-control-node {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 0.78rem;
  }

  .cookd-status-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}