:root {
  --ink: #070b0f;
  --ink2: #111820;
  --gold: #08a9ee;
  --gold2: #59d4ff;
  --paper: #f5f8fa;
  --muted: #66717c;
  --line: #d9e2e8;
}

.brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  flex: 0 0 auto;
}

.header-brand {
  gap: 13px;
  min-width: 220px;
}

.brand-wordmark {
  display: grid;
  gap: 5px;
  line-height: 1;
}

.brand-wordmark strong {
  color: #fff;
  font: 800 20px/1 Manrope, sans-serif;
  letter-spacing: .015em;
}

.brand-wordmark small {
  color: var(--gold2);
  font: 700 10px/1 Manrope, sans-serif;
  letter-spacing: .28em;
}

.footer-logo {
  width: 172px;
  height: 172px;
  border-radius: 24px;
}

.site-header {
  border-bottom-color: rgba(8, 169, 238, .32);
}

.hero {
  background-image: linear-gradient(90deg, rgba(7, 11, 15, .98) 0%, rgba(7, 11, 15, .88) 44%, rgba(8, 169, 238, .16) 100%), url('/images/hero.webp?v=3');
}

.eyebrow,
.post-meta {
  color: #057cad;
}

.services-section .eyebrow,
.service-card .num,
.service-card .arrow {
  color: var(--gold2);
}

.process-step strong {
  color: #37bdf4;
}

.page-hero::after {
  border-color: rgba(8, 169, 238, .28);
}

.quote-section {
  color: #031017;
  background: linear-gradient(135deg, #08a9ee, #65d9ff);
}

.case-link {
  color: var(--gold2);
  font-weight: 700;
  margin-top: 4px;
}

.article-hero-image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 45px;
}

.notice.show {
  display: block;
}

.work-card:focus-visible,
.service-card:focus-visible,
.btn:focus-visible,
.site-header a:focus-visible {
  outline: 3px solid var(--gold2);
  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .brand-logo { width: 56px; height: 56px; }
  .header-brand { min-width: 0; }
  .brand-wordmark strong { font-size: 18px; }
  .brand-wordmark small { font-size: 9px; }
  .footer-logo { width: 156px; height: 156px; }
}

@media (max-width: 420px) {
  .brand-logo { width: 50px; height: 50px; }
  .header-brand { gap: 10px; }
  .brand-wordmark strong { font-size: 15px; }
  .brand-wordmark small { font-size: 8px; letter-spacing: .2em; }
  .footer-logo { width: 144px; height: 144px; }
}