/* =========================================================
   Dux Technology Ltd — Stylesheet
   Static, dependency-free CSS. No frameworks.
   Colours derived from official Dux brand SVG assets.
   ========================================================= */

/* Montserrat — self-hosted variable font (weights 100–900),
   licensed under the SIL Open Font License 1.1 (see /fonts/OFL.txt).
   No Google Fonts, no external CDN. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable.woff2") format("woff2-variations"),
       url("../fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours (from supplied logo SVGs) */
  --c-orange: #e8510e;
  --c-orange-dark: #c04309;
  /* Accessible text/UI variants of the brand orange (WCAG AA 4.5:1+).
     The brand orange itself (--c-orange) is kept for icons, borders
     and decorative graphics, where the 3:1 non-text threshold applies. */
  --c-orange-text: #c04309;        /* for text/links on light backgrounds */
  --c-orange-text-dark: #ff6a3d;   /* for text/links on dark backgrounds  */
  --c-grey: #676767;
  --c-grey-light: #8d8d8d;
  --c-black: #1d1d1b;
  --c-white: #ffffff;

  /* Neutral UI colours */
  --c-bg: #fbfaf8;
  --c-bg-alt: #f2f0ed;
  --c-bg-dark: #1d1d1b;
  --c-bg-dark-alt: #262624;
  --c-border: #e3e0db;
  --c-border-dark: #38372f;
  --c-text: #232220;
  --c-text-muted: #5c5b57;
  --c-text-on-dark: #f4f3f1;
  --c-text-on-dark-muted: #b9b7b1;

  /* Type */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* System-only font stacks used inside the technical log terminal to
     give DOS/Windows-era and Unix/Linux-era commands a subtly
     different character, without loading any external/web font. */
  --font-mono-dos: Consolas, "Lucida Console", "Cascadia Mono", monospace;
  --font-mono-unix: Menlo, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;

  /* Layout */
  --max-width: 1180px;
  --radius: 3px;
  --gap: 1.5rem;

  /* Motion */
  --transition: 150ms ease;
}

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* -------------------- Focus states (accessibility) -------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-black);
  color: var(--c-white);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* -------------------- Layout helpers -------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.section-alt {
  background: var(--c-bg-alt);
}

.section-dark {
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
}

.section-head {
  max-width: 46rem;
  margin-bottom: 2.75rem;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-orange-text);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.section-dark .eyebrow { color: var(--c-orange-text-dark); }

/* -------------------- Typography -------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-black);
  letter-spacing: -0.01em;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--c-white); }

h1 { font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 2.4vw + 0.5rem, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.2vw + 0.6rem, 1.4rem); }
h4 { font-size: 1.05rem; }

p { color: var(--c-text-muted); }
.section-dark p { color: var(--c-text-on-dark-muted); }

.lede {
  font-size: clamp(1.05rem, 1vw + 0.6rem, 1.25rem);
  color: var(--c-text-muted);
  max-width: 42rem;
}
.section-dark .lede { color: var(--c-text-on-dark-muted); }

strong { color: var(--c-black); font-weight: 600; }
.section-dark strong { color: var(--c-white); }

.text-mono {
  font-family: var(--font-mono);
}

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-orange-text);
  color: var(--c-white);
}
.btn-primary:hover { background: #a03608; }

.btn-outline {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-black);
}
.btn-outline:hover { border-color: var(--c-orange); color: var(--c-orange-text); }

.section-dark .btn-outline {
  border-color: var(--c-border-dark);
  color: var(--c-white);
}
.section-dark .btn-outline:hover { border-color: var(--c-orange); color: var(--c-orange-text-dark); }

.btn-on-dark {
  border-color: var(--c-border-dark);
  color: var(--c-white);
}
.btn-on-dark:hover { border-color: var(--c-orange); color: var(--c-orange-text-dark); }

.link-accent {
  color: var(--c-orange-text);
  font-weight: 600;
}
.link-accent:hover { color: var(--c-orange-dark); }

.btn-arrow::after {
  content: "→";
  transition: transform var(--transition);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* -------------------- Header -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
/* Note: backdrop-filter is intentionally avoided here — it would
   create a new containing block for descendant position:fixed
   elements (the mobile nav overlay), breaking full-screen coverage. */

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand img {
  height: 40px;
  width: auto;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-text);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--c-orange-text);
  border-color: var(--c-orange);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  color: var(--c-black);
}
.menu-toggle svg { width: 26px; height: 26px; }

/* -------------------- Mobile nav -------------------- */
@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--c-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 0;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    overflow-y: auto;
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a {
    width: 100%;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid var(--c-border);
    font-size: 1.05rem;
  }
  .nav-cta .btn-outline { display: none; }
}

/* -------------------- Hero -------------------- */
.hero {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 1.25rem; }
.hero .lede { margin-bottom: 2rem; }

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-art {
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-inline: auto;
}

/* -------------------- Stat / meta strip -------------------- */
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
}
.meta-strip dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  margin-bottom: 0.35rem;
}
.meta-strip dd {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-black);
  margin: 0;
}

/* -------------------- Cards / grids -------------------- */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.card:hover {
  border-color: var(--c-orange);
  box-shadow: 0 6px 24px rgba(29, 29, 27, 0.06);
}
.icon, .detail-icon {
  display: inline-block;
  line-height: 0;
}
.icon svg, .detail-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.card .icon {
  width: 40px;
  height: 40px;
  color: var(--c-orange);
  margin-bottom: 0.25rem;
}
.card h3 { margin-bottom: 0.1rem; }
.card p { font-size: 0.95rem; margin: 0; }
.card a.card-link {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-orange-text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.card a.card-link::after { content: "→"; transition: transform var(--transition); }
.card a.card-link:hover::after { transform: translateX(3px); }

.card-list {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.card-list li {
  font-size: 0.88rem;
  color: var(--c-text-muted);
  padding-left: 1.1rem;
  position: relative;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--c-orange);
  border-radius: 1px;
}

/* -------------------- Anchor sub-nav (Services / About / Experience pages) -------------------- */
.subnav-wrap {
  position: sticky;
  top: 76px;
  z-index: 400;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.subnav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.9rem;
  scrollbar-width: thin;
}
.subnav a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-text-muted);
  padding: 0.5rem 0.9rem;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid var(--c-border);
  transition: all var(--transition);
}
.subnav a:hover, .subnav a.is-active {
  color: var(--c-white);
  background: var(--c-black);
  border-color: var(--c-black);
}

/* -------------------- Content blocks (Services/Solutions detail) -------------------- */
.detail-block {
  padding-block: 3rem;
  border-top: 1px solid var(--c-border);
  scroll-margin-top: 150px;
}
.detail-block:first-of-type { border-top: none; padding-top: 0.5rem; }
/* Symmetrically, the last block on a page tightens its own trailing
   space to match — the CTA section below adds its own top padding,
   so without this the block's full 3rem bottom padding would stack
   underneath it, making the visible gap above the CTA box bigger
   than the gap below it. */
.detail-block:last-of-type { padding-bottom: 0.5rem; }

.detail-block-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
}
@media (max-width: 860px) {
  .detail-block-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.detail-icon {
  width: 46px;
  height: 46px;
  color: var(--c-orange);
  margin-bottom: 1rem;
}

.detail-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1.5rem;
}
@media (max-width: 560px) {
  .detail-items { grid-template-columns: 1fr; }
}
.detail-items li {
  font-size: 0.94rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.detail-items li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--c-orange);
  flex: none;
  transform: translateY(-2px);
}

/* -------------------- Diagram panel -------------------- */
.diagram-panel {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-dark .diagram-panel {
  background: var(--c-bg-dark-alt);
  border-color: var(--c-border-dark);
}
.diagram-panel svg { width: 100%; height: auto; }

/* -------------------- Approach / numbered steps -------------------- */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--c-border);
}
.section-dark .step { border-color: var(--c-border-dark); }
.step:first-child { border-top: none; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--c-orange-text);
  font-weight: 600;
}

/* -------------------- Quote / callout -------------------- */
.callout {
  border-left: 3px solid var(--c-orange);
  padding: 1.25rem 1.5rem;
  background: var(--c-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.section-dark .callout { background: var(--c-bg-dark-alt); }
.callout p { margin: 0; color: var(--c-text); font-size: 0.98rem; }
.section-dark .callout p { color: var(--c-text-on-dark); }

/* -------------------- CTA band -------------------- */
.cta-band {
  background: var(--c-black);
  color: var(--c-white);
  border-radius: var(--radius);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--c-white); margin-bottom: 0.5rem; }
.cta-band p { color: var(--c-text-on-dark-muted); margin: 0; }
.cta-band-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* -------------------- Contact page -------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-info-item .icon {
  width: 22px;
  height: 22px;
  color: var(--c-orange);
  flex: none;
  margin-top: 0.2rem;
}
.contact-info-item dt,
.contact-info-item .contact-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  margin-bottom: 0.2rem;
}
.contact-info-item dd,
.contact-info-item .contact-value {
  margin: 0;
  font-weight: 600;
  color: var(--c-black);
  display: block;
}
.contact-info-item .contact-label { display: block; }
.contact-info-list li::marker { content: ""; }
.contact-info-item a:hover { color: var(--c-orange-text); }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-black);
}
.form-field .hint {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  font-weight: 400;
}
.form-field input,
.form-field textarea,
.form-field select {
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: var(--c-white);
  color: var(--c-text);
  width: 100%;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--c-orange);
  outline: none;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-note {
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-top: 0.75rem;
}

/* -------------------- Footer -------------------- */
.site-footer {
  background: var(--c-black);
  color: var(--c-text-on-dark-muted);
  padding-block: 3.5rem 2rem;
}
/* The global `p { color: var(--c-text-muted) }` rule targets <p> tags
   directly and would otherwise win over inheritance from .site-footer,
   leaving footer paragraphs too dark against the near-black background. */
.site-footer p { color: var(--c-text-on-dark-muted); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-border-dark);
}
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand img { height: 40px; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.82rem; font-style: italic; max-width: 26rem; }
.footer-col h4 {
  color: var(--c-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { font-size: 0.92rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--c-orange-text-dark); }

/* Three items on one row: copyright (left), the "made in" note
   (true centre of the row), Privacy & Cookies (right). The centre
   item is taken out of normal flow and centred with absolute
   positioning — flexbox/grid centring of a middle item is only ever
   as centred as the two side items happen to be equal-width, and
   copyright text and "Privacy & Cookies" are quite different
   lengths, so this guarantees it sits at the row's true midpoint
   regardless. align-items:center on the flex row (for the other two
   items) also keeps all three on one consistent baseline, since
   they no longer inherit differing vertical positions from being
   nested at different levels. */
.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.76rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom .made-in-uk {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 0.76rem; }
.footer-bottom-links a:hover { color: var(--c-orange-text-dark); }

@media (max-width: 620px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom .made-in-uk {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    white-space: normal;
  }
}

/* -------------------- Misc pages (privacy, 404) -------------------- */
.prose { max-width: 42rem; }
.prose-page { margin-top: 2rem; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1rem; }
.prose li { position: relative; padding-left: 1.2rem; margin-bottom: 0.4rem; color: var(--c-text-muted); }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--c-orange);
}

/* -------------------- Utility -------------------- */
/* -------------------- Spacing utilities (replace one-off inline styles) -------------------- */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 1rem; }
.pt-1-5 { padding-top: 1.5rem; }
.pt-2-5 { padding-top: 2.5rem; }

/* The section wrapping the closing CTA band sits directly after a
   content section that already ends with its own bottom padding.
   Using the section's default (symmetric) top padding here would
   stack on top of that and make the gap above the CTA box visibly
   larger than the gap below it (before the footer). Overriding just
   the top padding to match the footer's own top padding (3.5rem)
   makes both gaps equal, since both sides then resolve to
   "one section's default padding + one fixed 3.5rem", regardless of
   viewport width. */
.section-cta { padding-top: 3rem; }
/* index.html's closing CTA follows a two-column grid (text + diagram)
   rather than a .detail-block; CSS Grid's default row-stretch means
   reducing the diagram panel's own trailing padding has no effect
   (the shorter column is stretched to match the taller text column,
   which has no equivalent reduction), so this instance needs the
   extra 0.5rem added back directly. */
.section-cta-wide { padding-top: 3.5rem; }

/* Applied to whichever element is the final visible content before a
   closing CTA band (a .callout or .diagram-panel in this position, on
   pages that don't end in a .detail-block), so the same "tight
   trailing space" logic above applies there too. */
.content-end { padding-bottom: 0.5rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-1-5 { padding-bottom: 1.5rem; }
.pb-2 { padding-bottom: 2rem; }
.mt-2-5 { margin-top: 2.5rem; }

.hero-art-panel { background: none; border: none; padding: 0; }

.card-on-dark {
  background: var(--c-bg-dark-alt);
  border-color: var(--c-border-dark);
}

.grid-center-gap-lg { align-items: center; gap: 3rem; }

.badge-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.label-mono-muted {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-grey);
  margin-bottom: 0.6rem;
}

.step-desc { margin: 0.3rem 0 0; font-size: 0.92rem; }

/* -------------------- Interactive technical log (About page) --------------------
   A small, real command-line component — not a retro/CRT terminal.
   Deliberately dark (reusing the site's own existing dark tokens,
   the same ones already used for the footer and CTA bands) against
   the page's light theme, the way a terminal window looks inside an
   otherwise light-themed OS or documentation site. Monospace type is
   scoped entirely to this component and never leaks into the rest of
   the page. Historical technical references (past platforms,
   connection speeds, the "today" summary and the 09.09.1997 date)
   live ONLY inside this component's command output — nothing here
   is printed on the page until a visitor types a command.

   Commands are grouped into three quiet "cultures", each with its
   own system font stack and prompt style — a detail a visitor who
   remembers DOS, Windows NT and Unix/Linux terminals may notice,
   and one that a visitor who doesn't will simply read as normal
   monospace text:
     .is-dos  — Consolas/Lucida Console, "C:\DUX>" prompt
     .is-unix — Menlo/DejaVu Sans Mono, "dux@engineering:~$" prompt
     .is-dux  — the site's own default --font-mono (modern commands) */
.dux-terminal {
  margin-top: 0;
  max-width: 44rem;
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius);
  background: var(--c-bg-dark-alt);
  overflow: hidden;
}
/* The terminal sits in its own slot between "Why Dux?" and "Our
   Approach" (not nested inside a two-column .detail-block-grid), so
   it needs its own explicit border/padding rather than the generic
   .detail-block:first-of-type / :last-of-type rules — those select
   by element type, and since this wrapper is the only <div> among
   <article> siblings, it would otherwise incorrectly match BOTH
   pseudo-classes at once (as the sole div, it's trivially "first"
   and "last" of its own type) and lose its top border and normal
   padding. This rule restores the same rhythm as its <article>
   siblings. Width is capped well short of the container so the
   terminal reads as a contained component, roughly text-width,
   rather than a full-width section. */
.about-terminal-block {
  border-top: 1px solid var(--c-border);
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.dux-terminal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--c-border-dark);
  background: var(--c-black);
}
.dux-terminal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-orange);
  flex: none;
}
.dux-terminal-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey-light);
}
.dux-terminal-output {
  max-height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--c-text-on-dark-muted);
}
.dux-terminal-output:empty::before {
  content: "Type “help” and press Enter.";
  color: var(--c-grey-light);
  font-style: normal;
}
.dux-terminal-entry { margin-bottom: 0.9rem; }
.dux-terminal-entry:last-child { margin-bottom: 0; }
.dux-terminal-entry-cmd {
  color: var(--c-text-on-dark);
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dux-terminal-entry-cmd.is-dos { font-family: var(--font-mono-dos); }
.dux-terminal-entry-cmd.is-unix { font-family: var(--font-mono-unix); }
.dux-terminal-entry-cmd .dux-terminal-prompt-inline {
  color: var(--c-orange-text-dark);
  margin-right: 0.4rem;
}
.dux-terminal-entry-resp {
  margin-top: 0.15rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dux-terminal-entry-resp.is-dos { font-family: var(--font-mono-dos); }
.dux-terminal-entry-resp.is-unix { font-family: var(--font-mono-unix); }
.dux-terminal-entry-resp.is-accent { color: var(--c-orange-text-dark); font-weight: 600; }
.dux-terminal-inputline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--c-border-dark);
  background: var(--c-bg-dark-alt);
  cursor: text;
}
.dux-terminal-prompt {
  font-family: var(--font-mono-dos);
  font-size: 0.78rem;
  color: var(--c-orange-text-dark);
  font-weight: 600;
  flex: none;
}
.dux-terminal-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--c-text-on-dark);
  caret-color: var(--c-orange-text-dark);
  padding: 0.15rem 0;
  /* Overrides browser default form-control chrome (light background,
     dark text, system appearance) so the input reads as part of the
     dark terminal rather than a standard light form field. */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.dux-terminal-input:focus { outline: none; }
.dux-terminal-input::placeholder { color: var(--c-grey-light); }
/* Autofill / password-manager backgrounds are one of the few things
   `background: transparent` cannot override in some browsers; this
   forces the internal autofill layer back to the terminal's own
   dark colour instead of the browser's default light yellow/white. */
.dux-terminal-input:-webkit-autofill,
.dux-terminal-input:-webkit-autofill:hover,
.dux-terminal-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text-on-dark);
  -webkit-box-shadow: 0 0 0px 1000px var(--c-bg-dark-alt) inset;
  transition: background-color 9999s ease-in-out 0s;
}
/* Keep the global focus-visible ring on the whole widget when the
   input is focused via keyboard, since the input itself has its
   native outline suppressed above in favour of this. */
.dux-terminal:focus-within {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .dux-terminal-output { max-height: 12rem; font-size: 0.74rem; }
  .dux-terminal-input, .dux-terminal-prompt { font-size: 0.74rem; }
}

/* -------------------- 404 terminal-style caption -------------------- */
.notfound-terminal {
  display: inline-block;
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--c-text-muted);
  line-height: 1.7;
  text-align: left;
}

/* -------------------- Footer "made in" detail -------------------- */
.made-in-uk {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-on-dark-muted);
}

.mt-0 { margin-top: 0; }
.center { text-align: center; }
.lede-center { margin-inline: auto; }
.text-muted { color: var(--c-text-muted); }
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  color: var(--c-grey);
}