/* ── site tabs (owner, 6 Nov 2026: "make tabs again: software, hardware, firmware, products and apps") ──
   One header on every main page: wordmark (home) · six tabs (Websites added 11 Nov) · phone · Contact (or Buy on THE ORB).
   Desktop: one row. Phones: wordmark + phone on top, the tabs in one strip under it that scrolls sideways
   when it doesn't fit (it used to wrap into a 220px block). Loaded last so it wins over the page sheets. */

.site-head__in { gap: 12px 24px; }

.tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-right: auto;
  margin-left: 12px;
}

.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: rgba(244, 246, 247, 0.78);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms linear, border-color 120ms linear;
}

.tabs a:hover { color: var(--paper, #F4F6F7); border-bottom-color: rgba(255, 176, 59, 0.55); }

.tabs a[aria-current="page"],
.tabs a[aria-current="true"] {
  color: var(--paper, #F4F6F7);
  border-bottom-color: var(--amber, #FFB03B);
}

.site-head__act {
  display: flex;
  align-items: center;
  gap: 18px;
}

.head-call {
  color: var(--amber, #FFB03B);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}

.head-call:hover { color: var(--paper, #F4F6F7); }

.head-cta {
  display: inline-block;
  background: var(--amber, #FFB03B);
  color: var(--ink, #0E1215);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.head-cta:hover { opacity: 0.86; color: var(--ink, #0E1215); }

.tabs a:focus-visible,
.head-call:focus-visible,
.head-cta:focus-visible {
  outline: 2px solid var(--amber, #FFB03B);
  outline-offset: 2px;
}

@media (max-width: 1080px) {
  .tabs a { padding: 0 9px; }
  .site-head__act { gap: 14px; }
}

/* phones and small tablets: tabs drop to their own strip */
@media (max-width: 900px) {
  .site-head__in { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .site-head__act { margin-left: auto; }
  .tabs {
    order: 3;
    flex: 1 0 100%;
    margin: 8px calc(var(--pad, 20px) * -1) 0;
    padding: 0 var(--pad, 20px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-top: 1px solid rgba(244, 246, 247, 0.08);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 0 10px; font-size: 15px; }
  .tabs a:first-child { padding-left: 0; }
}

@media (max-width: 420px) {
  .tabs a { padding: 0 8px; font-size: 14px; }
  .head-cta { display: none; }          /* the phone stays (owner, 30 Oct: get people ringing); Contact is the Software tab's form */
}

/* THE ORB keeps its sticky one-row header with Buy on phones; the logo goes home and the footer carries the rest */
@media (max-width: 900px) {
  /* /privacy/ borrows the ORB styles (orb.css makes the header row nowrap); give it the normal two-row header */
  .orb-page.site-page .site-head__in { flex-wrap: wrap; padding-bottom: 0; }
  .orb-page:not(.site-page) .tabs { display: none; }
  .orb-page:not(.site-page) .site-head__in { flex-wrap: nowrap; padding-bottom: 10px; }
}

@media (max-width: 420px) {
  .orb-page:not(.site-page) .head-cta { display: inline-block; padding-inline: 12px; }
}