/* ==========================================================================
   dd-skin.css — Dellyman palette + typography applied to the existing site.

   Dellyman's design language, taken from dellyman.com:
     maroon  #0a1329   primary   (headings, buttons, banners, CTA strips)
     orange  #dc2626   accent    (rules, highlighted words, secondary buttons)
     maroon-light #233152        (buttons on maroon, links on light)
     salmon  #dbe6f7             (nav pill)
     cream   #f2f9fe             (banner helper text)
     light   #f4f6fa             (alternating section background)
     ink     #212529             (body text — Bootstrap default)
     footer  #060b18             (footer background)

   Dellyman loads no webfonts: it uses Bootstrap 4's system stack, so the
   display and body fonts are both set to that stack here.

   Everything else in the build is untouched — this file only overrides.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* the original palette variables, re-pointed at Dellyman values so every
     rule in dd-style.css inherits the new scheme */
  --navy-950: #ffffff;              /* page background */
  --navy-900: #f4f6fa;              /* alternating section background */
  --navy-850: #ffffff;              /* card surface (gradient end) */
  --navy-800: #f4f6fa;
  --navy-700: #ffffff;              /* card surface (gradient start) */
  --navy-600: #e6ecf5;

  --red-600: #0a1329;               /* primary maroon */
  --red-500: #0a1329;
  --red-400: #16233f;               /* links and accent text on light */
  --red-300: #233152;               /* secondary maroon */
  --plum: #e8eef9;                  /* light maroon tint */

  --blue-700: #101c3a;
  --blue-500: #1c2539;
  --blue-400: #233152;              /* the old scheme's blues become maroon */

  --slate-100: #212529;             /* body text */
  --slate-300: #495057;
  --slate-400: #6c757d;             /* muted text */
  --slate-500: #868e96;

  --line: rgba(10, 19, 41, .14);
  --line-strong: rgba(10, 19, 41, .26);

  /* Dellyman's font stack (Bootstrap 4.1.3 default — the site uses no webfonts) */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* named tokens for the new theme */
  --dd-maroon: #0a1329;
  --dd-maroon-dark: #060b18;
  --dd-maroon-light: #233152;
  --dd-maroon-deep: #08152b;
  --dd-orange: #dc2626;
  --dd-orange-hover: #e35151;
  --dd-cream: #f2f9fe;
  --dd-salmon: #dbe6f7;
  --dd-surface: #ffffff;
  --dd-surface-alt: #f4f6fa;
  --dd-ink: #212529;
  --dd-footer: #060b18;
  --dd-panel: #0a1329;              /* dark panels (3D stage, console) */
  --dd-panel-2: #060b18;

  --shadow-card: 0 2px 10px rgba(6, 11, 24, .07);
  --glow-red: none;
}

/* ---------------------------------------------------------------- 2. base */
body {
  background: var(--dd-surface);
  color: var(--dd-ink);
  font-size: 16px;
}

::selection { background: var(--dd-maroon); color: #fff; }

h1, h2, h3, h4 { color: var(--dd-maroon); }

.h-display {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.h-section {
  font-size: clamp(1.75rem, 3.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.005em;
}
.h-card {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
}
.lead { font-size: 1.05rem; line-height: 1.7; }

/* Dellyman's orange rule under section headings (their .b-linee: 160×4px) */
.section-head .h-section { padding-bottom: 0; }
.section-head .h-section::after {
  content: "";
  display: block;
  width: 160px;
  height: 4px;
  background: var(--dd-orange);
  margin: 18px auto 0;
}
.section-head:not(.section-head--center) .h-section::after { margin-left: 0; }
.section-head { max-width: 780px; }

/* the eyebrow keeps its dash, now orange instead of red */
.eyebrow {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dd-maroon);
  margin-bottom: 10px;
}
.eyebrow::before {
  width: 34px;
  height: 3px;
  background: linear-gradient(90deg, var(--dd-orange), transparent);
}
.eyebrow--light { color: #cddcf5; }

/* ---------------------------------------------------------------- 3. nav
   Dellyman: maroon bar, salmon pill holding the links, orange CTA */
.nav { padding: 14px 0; }
.nav.scrolled {
  background: rgba(10, 19, 41, .96);
  border-bottom-color: rgba(255, 255, 255, .16);
  box-shadow: 0 2px 14px rgba(6, 11, 24, .18);
}
.brand-logo { background: #fff; box-shadow: 0 2px 8px rgba(6, 11, 24, .22); border-radius: 10px; }
.brand-name { font-size: 1.05rem; font-weight: 800; letter-spacing: 0; color: #fff; }
.brand-sub { font-size: .68rem; font-weight: 600; letter-spacing: .18em; color: var(--dd-salmon); }

.nav-links {
  background: var(--dd-salmon);
  border-radius: 10px;
  padding: 6px 10px;
  gap: 2px;
}
.nav-link {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #212529;
  padding: 8px 12px;
  border-radius: 7px;
}
.nav-link:hover { color: var(--dd-maroon); background: rgba(255, 255, 255, .55); }
.nav-link.active { color: #fff; background: var(--dd-maroon); }
.nav-link.active::after { display: none; }
.nav-link::after { display: none; }

.nav-cta {
  background: var(--dd-orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: none;
}
.nav-cta:hover { background: var(--dd-orange-hover); transform: none; }
.nav-burger { color: #fff; }

.mobile-menu { background: rgba(10, 19, 41, .98); }
.mobile-menu .nav-link {
  background: var(--dd-salmon);
  margin-bottom: 8px;
  justify-content: center;
  text-align: center;
}
.mobile-menu .btn-primary { background: var(--dd-orange); }

/* ---------------------------------------------------------------- 4. hero
   Dellyman's banner: deep maroon with warm highlights and orange/white type */
.hero {
  background:
    radial-gradient(ellipse 52% 42% at 76% 28%, rgba(220, 38, 38, .18), transparent 70%),
    radial-gradient(ellipse 38% 32% at 6% 90%, rgba(147, 197, 253, .12), transparent 70%),
    linear-gradient(160deg, #0a1329 0%, #0d1830 55%, #08152b 100%);
  min-height: 92vh;
}
.hero .eyebrow { color: #cddcf5; }
.hero .h-display { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .85); }
.hero-route-bg path { stroke: rgba(147, 197, 253, .3); }

.hero .btn-primary {
  background: var(--dd-orange);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(6, 11, 24, .35);
}
.hero .btn-primary:hover { background: var(--dd-orange-hover); transform: translateY(-2px); }
.hero .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.hero .chip {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.hero .chip .dot { background: var(--dd-orange); box-shadow: none; }

/* Dellyman uses orange for the highlighted words in large headings */
.text-red-grad,
.text-blue-grad {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--dd-maroon);
}
.hero .text-red-grad,
.hero .text-blue-grad,
.page-hero .text-red-grad,
.page-hero .text-blue-grad,
.cta .text-red-grad,
.cta .text-blue-grad { color: var(--dd-orange); }

/* sub-page headers: same maroon banner treatment, shorter */
.page-hero {
  min-height: auto;
  padding: 132px 0 84px;
  background:
    radial-gradient(ellipse 55% 55% at 80% 20%, rgba(220, 38, 38, .16), transparent 70%),
    linear-gradient(160deg, #0a1329 0%, #101c3a 60%, #08152b 100%);
}
.page-hero .h-display { color: #fff; }
.page-hero .lead { color: rgba(255, 255, 255, .85); }
.page-hero .eyebrow { color: #cddcf5; }
.page-hero .chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.page-hero .chip .dot { background: var(--dd-orange); box-shadow: none; }
.page-hero::after { background: linear-gradient(to bottom, transparent, #ffffff); }

/* ---------------------------------------------------------------- 5. buttons */
.btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 26px;
  border-radius: 5px;
}
.btn::after { display: none; }               /* no shine sweep */
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--dd-maroon);
  color: #fff;
  border-color: var(--dd-maroon);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--dd-maroon-light);
  border-color: var(--dd-maroon-light);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-ghost {
  background: #fff;
  border: 2px solid var(--dd-maroon);
  color: var(--dd-maroon);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--dd-maroon);
  border-color: var(--dd-maroon);
  color: #fff;
  box-shadow: none;
}
.btn-light { background: #fff; color: var(--dd-maroon); box-shadow: none; }
.btn-light:hover { background: var(--dd-salmon); }
.btn-sm { padding: 10px 18px; font-size: .92rem; border-radius: 5px; }

.chip {
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--dd-surface-alt);
  border: 1px solid var(--line);
  color: #495057;
  border-radius: 6px;
  padding: 7px 12px;
}
.chip .dot { background: var(--dd-orange); box-shadow: none; animation: none; }
.chip--red .dot { background: var(--dd-maroon); box-shadow: none; }

/* ---------------------------------------------------------------- 6. sections + cards */
.section--alt { background: var(--dd-surface-alt); }
.section--deep { background: #fff; }

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(6, 11, 24, .06);
}
.card::before { display: none; }             /* no neon top highlight */
.tilt-glare { display: none; }
.cap-card h3 { transform: none; }
.cap-card p,
.commit-card p,
.contact-detail-card p { color: var(--dd-ink); transform: none; }
.cap-card .card-link,
.card-link { color: var(--dd-maroon); font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: .95rem; }
.blockquote,
.quote-card blockquote { color: var(--dd-ink); transform: none; }
.quote-card blockquote b { color: var(--dd-maroon); }

/* icon plates: flat maroon tint instead of the plum glow */
.cap-icon-plate,
.cd-icon,
.commit-icon,
.chc .chc-icon {
  background: #f4f7fc;
  border: 1px solid #c9d8f2;
  box-shadow: none;
  color: var(--dd-maroon);
}
.cap-icon-shadow { display: none; }
.cap-num { color: transparent; -webkit-text-stroke: 1px rgba(10, 19, 41, .18); }
.cap-card:hover .cap-num { color: rgba(220, 38, 38, .22); -webkit-text-stroke-color: rgba(10, 19, 41, .35); }
.avatar { background: var(--dd-maroon); color: #fff; box-shadow: none; }
.avatar--blue { background: var(--dd-maroon-light); box-shadow: none; }

/* step cards (how it works + services workflow) */
.step-card .card-body { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(6, 11, 24, .06); }
.step-num {
  background: #fff;
  border-color: #dfe6f0;
  color: var(--dd-maroon);
  box-shadow: 0 2px 8px rgba(6, 11, 24, .08);
}
.step-card:hover .step-num {
  border-color: var(--dd-orange);
  box-shadow: 0 0 0 6px #fff, 0 6px 16px rgba(6, 11, 24, .12);
}
.step-icon,
.workflow-rail .step-icon { color: var(--dd-orange); }
.workflow-rail::before { background: repeating-linear-gradient(90deg, rgba(10, 19, 41, .35) 0 14px, transparent 14px 26px); opacity: .6; }

/* ---------------------------------------------------------------- 7. stats
   (the number band that used to live in the hero) */
.hero-stats { border-top: 1px solid #e2e8f0; margin-top: 0; padding-top: 34px; }
.stat-num { color: var(--dd-maroon); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; }
.stat-num em { color: var(--dd-orange); }
.stat-label { font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--dd-ink); }
.stat { border-color: #e2e8f0; }
.stat-card { padding: 28px 24px; }
.stat-card .stat-num { font-size: clamp(2rem, 3.4vw, 2.9rem); transform: none; }
.stat-card .stat-label { transform: none; }
.stat-icon { color: var(--dd-maroon); }

/* ---------------------------------------------------------------- 8. corridor rows + book panel */
.book-panel .h-card { color: var(--dd-maroon); }
.corridor-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.corridor-row:hover { background: #f7f9fc; border-color: rgba(10, 19, 41, .35); }
.corridor-code { color: var(--dd-maroon); font-weight: 800; letter-spacing: .02em; }
.corridor-code em { color: var(--dd-orange); }
.corridor-name { color: var(--dd-ink); }
.corridor-freq { color: #868e96; font-size: .78rem; letter-spacing: 0; text-transform: none; }
.book-actions .btn { font-size: .95rem; }

/* ---------------------------------------------------------------- 9. partners (flip cards) */
.flip-face { background: #fff; border: 1px solid #e2e8f0; }
.flip-face--rest { background: var(--dd-surface-alt); }
.flip-face--rest::before { display: none; }
.flip-face--info { background: #fff; }
.flip-name { color: var(--dd-maroon); font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.flip-logo { background: #fff; box-shadow: 0 2px 10px rgba(6, 11, 24, .12); border-radius: 8px; }
.flip-card--red .flip-logo { box-shadow: 0 2px 10px rgba(6, 11, 24, .12); }
.flip-label { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.flip-label--red { color: var(--dd-maroon); }
.flip-label--blue { color: var(--dd-maroon-light); }
.flip-desc {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--dd-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.flip-badge {
  background: #f4f7fc;
  border: 1px solid #c9d8f2;
  color: var(--dd-maroon);
  font-family: var(--font-body);
  letter-spacing: .04em;
  text-transform: none;
  font-size: .74rem;
}
.flip-hint { font-family: var(--font-body); letter-spacing: 0; text-transform: none; color: #868e96; }
.flip-orb { background: var(--dd-orange); }
.flip-orb--blue { background: var(--dd-maroon-light); }
.partners .chip { background: #fff; }

/* ---------------------------------------------------------------- 10. testimonials */
.rings-wrap { opacity: .9; }
.ring-word { font-family: var(--font-body); font-size: 1.8rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: rgba(10, 19, 41, .28); }
.ring-word--hot { color: var(--dd-orange); -webkit-text-stroke: 0; text-shadow: none; }
.quote-mark { color: rgba(10, 19, 41, .18); }
.quote-stars svg { color: var(--dd-orange); }
.quote-who b { color: var(--dd-ink); }
.quote-who span span { color: #6c757d; }

/* ---------------------------------------------------------------- 11. dark panels
   The 3D fleet stage and the dispatch console stay dark (they are lit
   renders), so their text colours are re-asserted here. */
.console,
.map-panel,
.fleet-stage {
  background: linear-gradient(170deg, var(--dd-panel), var(--dd-panel-2) 70%);
  border: 1px solid rgba(10, 19, 41, .35);
  box-shadow: 0 6px 24px rgba(6, 11, 24, .18);
}
.console-head { background: rgba(255, 255, 255, .03); border-bottom-color: rgba(255, 255, 255, .1); }
.console-body { border-color: rgba(255, 255, 255, .08); }
.console-radar-wrap { border-color: rgba(255, 255, 255, .08); }
.console-chart-wrap { border-top-color: rgba(255, 255, 255, .1); }
.console-title { color: #d3dced; font-family: var(--font-body); letter-spacing: .04em; text-transform: none; font-size: .85rem; }
.console-clock { color: var(--dd-orange); }
.console-chart-label { color: #9aa5b5; font-family: var(--font-body); letter-spacing: .02em; text-transform: none; }
.console-dots i { background: #2a3a56; }
.console-dots i:nth-child(1) { background: var(--dd-maroon-light); }
.console-dots i:nth-child(2) { background: var(--dd-orange); }
.conrow { background: rgba(255, 255, 255, .04); }
.conrow .cid { color: #dee5f0; font-family: var(--font-body); letter-spacing: .02em; }
.conrow .crt { color: #9aa5b5; }
.conrow .crt b { color: #fff; }
.conrow.flash { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .4); }
.cst--dock { color: #cddcf5; background: rgba(220, 38, 38, .14); border-color: rgba(220, 38, 38, .4); }
.cst--on { color: #a8e6bd; background: rgba(74, 164, 97, .16); border-color: rgba(74, 164, 97, .4); }
.cst--route { color: #a9c2ea; background: rgba(35, 49, 82, .18); border-color: rgba(35, 49, 82, .45); }

/* fleet HUD + switcher sit on the dark stage */
.fleet-hud .chip { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .18); color: #fff; }
.fleet-btn { font-family: var(--font-body); letter-spacing: .02em; text-transform: none; font-size: .88rem; color: #d3dced; }
.fleet-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.fleet-btn.active { color: #fff; background: var(--dd-maroon); box-shadow: none; }
.fleet-spec { background: rgba(255, 255, 255, .04); }
.fleet-spec b { color: #fff; font-size: 1.35rem; }
.fleet-spec span { color: #9aa5b5; letter-spacing: .02em; text-transform: none; font-size: .84rem; }
.fleet-drag-hint { color: #9aa5b5; letter-spacing: .02em; text-transform: none; }
.fleet-fallback { color: #d3dced; font-family: var(--font-body); letter-spacing: .02em; text-transform: none; }
.fleet-drag-hint svg { color: var(--dd-orange); }
.map-legend span { color: #9aa5b5; letter-spacing: .02em; text-transform: none; }
.map-legend .l-hq { background: var(--dd-orange); box-shadow: none; }
.map-legend .l-hub { background: #fff; }
.map-legend .l-route { border-top-color: var(--dd-orange); }

/* globe labels float over the maroon hero */
.globe-label {
  font-family: var(--font-body);
  letter-spacing: .02em;
  text-transform: none;
  color: #c8d8f2;
  background: rgba(6, 11, 24, .55);
  border-color: rgba(147, 197, 253, .3);
}
.globe-label b { color: #fff; }
.globe-label:hover,
.globe-label:focus-visible { color: #fff; border-color: var(--dd-orange); box-shadow: 0 0 14px rgba(220, 38, 38, .35); }
.globe-label--hq { color: #fff; border-color: rgba(220, 38, 38, .7); box-shadow: none; }
.globe-chip { background: rgba(6, 11, 24, .9); border-color: rgba(147, 197, 253, .35); }
.globe-chip b { color: #fff; font-family: var(--font-body); }
.globe-chip span { color: #cddcf5; letter-spacing: .02em; text-transform: none; }
.globe-hint { color: #dbe7f8; letter-spacing: .02em; text-transform: none; }
.globe-fallback {
  background: radial-gradient(circle at 34% 30%, rgba(220, 38, 38, .35), transparent 55%),
              radial-gradient(circle at 50% 50%, rgba(6, 11, 24, .9), #04070f 70%);
}

/* ---------------------------------------------------------------- 12. CTA bands
   Dellyman's "Still have questions" strip: maroon with an orange heading */
.cta--blue,
.cta--red {
  background:
    radial-gradient(ellipse 60% 70% at 50% 115%, rgba(70, 8, 8, .5), transparent 70%),
    linear-gradient(160deg, #0a1329, #101c3a 60%, #08152b 100%);
}
.cta h2 { color: #f05252; }                  /* Dellyman's exact strip heading colour */
.cta p { color: rgba(255, 255, 255, .88); }
.cta .eyebrow { color: #cddcf5; }
.cta .btn-primary { background: var(--dd-maroon-light); border-color: var(--dd-maroon-light); }
.cta .btn-primary:hover { background: #2c3e5f; border-color: #2c3e5f; }
.cta .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .75); color: #fff; }
.cta .btn-ghost:hover { background: #fff; color: var(--dd-maroon); border-color: #fff; }

/* ---------------------------------------------------------------- 13. forms
   Dellyman inputs: white, 2px maroon border, 5px radius */
.form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(6, 11, 24, .07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.form-field label {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dd-ink);
}
.form-field input,
.form-field textarea,
.form-field select,
.auth-check input[type="text"],
.auth-check input[type="email"] {
  background: #fff;
  border: 2px solid var(--dd-maroon);
  border-radius: 5px;
  color: var(--dd-ink);
  font-family: var(--font-body);
  font-size: .98rem;
  padding: 12px 14px;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9aa0a6; }
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover { background: #fffdfc; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--dd-orange);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .2);
  background: #fff;
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1329' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-field input.field-error,
.form-field textarea.field-error,
.form-field select.field-error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }
.form-note { color: #6c757d; font-size: .88rem; }
.form-note a { color: var(--dd-maroon); }
.form-success {
  background: #eef7f0;
  border: 1px solid #b6dcc2;
  color: #1f6b3b;
  border-radius: 6px;
}
.form-success svg { color: #2f7d4f; }
.form-success a { color: var(--dd-maroon); }
.form-3d-scene { perspective: 1400px; }

/* ---------------------------------------------------------------- 14. FAQ */
.faq-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 1px 6px rgba(6, 11, 24, .05); }
.faq-item:hover { border-color: rgba(10, 19, 41, .3); }
.faq-item[open] { background: #fff; border-color: rgba(10, 19, 41, .4); }
.faq-item summary { color: var(--dd-maroon); font-family: var(--font-body); font-size: 1.06rem; font-weight: 700; letter-spacing: 0; }
.faq-answer p { color: var(--dd-ink); }
.faq-mark::before, .faq-mark::after { background: var(--dd-orange); }
.faq-title { color: var(--dd-maroon); font-size: 1.2rem; font-weight: 800; }

/* ---------------------------------------------------------------- 15. tracking */
.tracker-card { background: #fff; }
.tracker-result {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(6, 11, 24, .07);
}
.tracker-status { color: var(--dd-maroon); font-family: var(--font-body); letter-spacing: .04em; text-transform: none; font-size: .9rem; }
.tracker-note { color: var(--dd-ink); }
.tracker-note a { color: var(--dd-maroon); }
.tracker-hint { color: #6c757d; }
.tracker-result .chip { background: var(--dd-surface-alt); }

/* ---------------------------------------------------------------- 16. accounts */
.auth-card { background: #fff; }
.auth-sub { color: var(--dd-ink); }
.auth-note { color: #6c757d; }
.auth-note a { color: var(--dd-maroon); }
.auth-check { color: var(--dd-ink); }
.auth-check a { color: var(--dd-maroon); }
.choose-card p { color: var(--dd-ink); }

/* ---------------------------------------------------------------- 17. developers */
.dev-notice,
.draft-notice {
  background: #f4f7fc;
  border: 1px solid #bcd0ee;
  color: #08152b;
}
.dev-notice strong,
.draft-notice strong { color: var(--dd-maroon-dark); }
.dev-list li { color: var(--dd-ink); }
.dev-list li::before { background: var(--dd-orange); box-shadow: none; }
.dev-list code,
.endpoint-head code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--dd-surface-alt);
  border: 1px solid #e2e8f0;
  color: var(--dd-maroon);
}
.dev-card { background: #fff; }
.endpoint-card p { color: var(--dd-ink); }
.code-block {
  background: var(--dd-footer);
  border: 1px solid #060b18;
  border-radius: 6px;
  color: #eef2f8;
}
.endpoint-card h3 { color: var(--dd-maroon); }
.method { font-family: var(--font-body); letter-spacing: .04em; font-size: .74rem; border-radius: 4px; }
.method--get { background: var(--dd-maroon); }
.method--post { background: var(--dd-orange); }

/* ---------------------------------------------------------------- 18. legal */
.legal-body h2.legal-h { color: var(--dd-maroon); font-family: var(--font-body); font-size: 1.25rem; font-weight: 800; letter-spacing: 0; }
.legal-body p { color: var(--dd-ink); }
.legal-meta { border-top-color: #e2e8f0; color: #6c757d; }
.legal-meta a { color: var(--dd-maroon); }

/* ---------------------------------------------------------------- 19. footer
   Dellyman's footer is #060b18 with white text and a maroon rule */
.footer { background: var(--dd-footer); border-top: none; }
.footer::before { display: none; }
.footer-h {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.footer-links a { color: rgba(255, 255, 255, .78); font-size: .95rem; }
.footer-links a::before { background: var(--dd-orange); }
.footer-links a:hover { color: #fff; }
.footer-contact svg { color: var(--dd-orange); }
.footer-contact a { color: rgba(255, 255, 255, .82); }
.footer-contact span { color: rgba(255, 255, 255, .78); }
.footer-brand p { color: rgba(255, 255, 255, .78); }
.footer-brand .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.footer-bottom { border-top: 6px solid var(--dd-maroon); color: rgba(255, 255, 255, .7); padding-top: 26px; }
.footer-tag { font-family: var(--font-body); letter-spacing: .02em; text-transform: none; color: #cddcf5; }
.footer-social .footer-h { color: #fff; }
.social-card .sc-background { background: linear-gradient(120deg, var(--dd-maroon), var(--dd-orange)); }
.social-card .sc-box { background: #060b18; }
.social-card .sc-box:hover { background: var(--dd-maroon); }

/* ---------------------------------------------------------------- 20. misc chrome */
.preloader { background: var(--dd-maroon); }
.loader-text { font-family: var(--font-body); letter-spacing: .16em; text-transform: none; color: #cddcf5; font-weight: 600; }
.loader-bar, .loader-cube-wrap .loader-cube { background: var(--dd-orange); }
.loader-cube { background: var(--dd-orange); }

.cursor-glow {
  background: radial-gradient(circle, rgba(220, 38, 38, .07), rgba(10, 19, 41, .05) 45%, transparent 70%);
}
.to-top {
  background: var(--dd-maroon);
  border-color: var(--dd-maroon);
  border-radius: 6px;
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 3px 12px rgba(6, 11, 24, .22);
}
.to-top:hover { background: var(--dd-orange); border-color: var(--dd-orange); }

.dd-toast {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 5px solid var(--dd-maroon);
  color: var(--dd-ink);
  box-shadow: 0 6px 22px rgba(6, 11, 24, .16);
  border-radius: 6px;
}
.dd-toast button { color: #6c757d; }
.dd-toast button:hover { color: var(--dd-maroon); }
.dd-toast a { color: var(--dd-maroon); }

.plane { color: var(--dd-orange); }
.nav-open .cursor-glow { opacity: 0; }

/* scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--dd-surface-alt); }
::-webkit-scrollbar-thumb { background: rgba(10, 19, 41, .35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10, 19, 41, .55); }

/* ---------------------------------------------------------------- 21. small screens */
@media (max-width: 860px) {
  .nav-links { background: transparent; padding: 0; }
  .page-hero { padding: 116px 0 64px; }
  .hero { min-height: auto; }
  .section-head .h-section::after { margin-left: auto; }
}

/* preloader cube (Dellyman has no equivalent — maroon ground, orange cube) */
.preloader .loader-cube .face {
  border-color: var(--dd-orange);
  background: rgba(220, 38, 38, .1);
  box-shadow: 0 0 22px rgba(220, 38, 38, .3) inset;
}
.preloader .loader-bar { background: rgba(255, 255, 255, .22); }
.preloader .loader-bar i { background: linear-gradient(90deg, transparent, var(--dd-orange), transparent); }

/* ================================================================ 22. fixes
   corrections found by the contrast audit */

/* the fleet spec band: was white-on-pink after the token swap */
.fleet-specs { background: #ffffff; border-color: #e2e8f0; }
.fleet-spec { background: #fffdfc; }
.fleet-spec b { color: var(--dd-maroon); }
.fleet-spec span { color: #6c757d; }

/* testimonial avatars: initials in white on the maroon disc */
.avatar { color: #fff; background: var(--dd-maroon); }
.avatar--blue { background: var(--dd-maroon-dark); }
.avatar--plum { background: var(--dd-panel); }

/* partner-card hint, small text that was too faint on white */
.flip-hint { color: #495057; }

/* selects lost their background-repeat/size when the shorthand above reset
   them — put the chevron back as a single image on the right */
.form-field select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1329' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 46px;
}

/* white button on the maroon page heroes */
.btn-light { background: #fff; color: var(--dd-maroon); border: 2px solid #fff; box-shadow: none; }
.btn-light:hover { background: #fff; color: var(--dd-maroon-dark); border-color: #fff; }

/* ================================================================ 23. audit pass 2
   Dellyman's own orange CTA (.getstart / .jobseekbtn in their style.css) keeps
   white text; on our warmer backgrounds the deep maroon reads better, so the
   orange fills carry it while the accent orange stays #dc2626. */
.hero .btn-primary,
.page-hero .btn-primary,
.cta .btn-primary,
.mobile-menu .btn-primary,
.console .btn-primary,
#estimate .btn-primary,
.book .btn-primary {
  background: var(--dd-orange);
  color: var(--dd-maroon-deep);
  border-color: var(--dd-orange);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(6, 11, 24, .28);
}
.hero .btn-primary:hover,
.page-hero .btn-primary:hover,
.cta .btn-primary:hover,
.mobile-menu .btn-primary:hover,
.console .btn-primary:hover,
#estimate .btn-primary:hover,
.book .btn-primary:hover {
  background: var(--dd-orange-hover);
  border-color: var(--dd-orange-hover);
  color: var(--dd-maroon-deep);
}

/* corridor board arrows + frequency, both sat on a white card */
.corridor-code em { color: var(--dd-maroon); }
.corridor-freq { color: #6c757d; }

/* the testimonial avatar colour was beaten by `.quote-who span` */
.quote-who .avatar,
.quote-who .avatar--blue,
.quote-who .avatar--plum { color: #fff; }

/* ================================================================ 24. audit pass 3 */

/* hero + page-hero chips: Dellyman's own .bannerbtn treatment (salmon chip, dark
   type) instead of translucent white with white type */
.hero .chip,
.page-hero .chip {
  background: var(--dd-salmon);
  border-color: transparent;
  color: #212529;
}
.hero .chip .dot,
.page-hero .chip .dot { background: var(--dd-maroon); box-shadow: none; }
.hero .chip--red .dot,
.page-hero .chip--red .dot { background: var(--dd-orange); box-shadow: none; }

/* body copy on the light sections needs a touch more weight */
.lead { color: #5f676e; }

/* contact page: detail cards are white cards now, hero cards are glass on maroon */
.contact-detail-card .cd-value,
.contact-detail-card .cd-value a { color: var(--dd-maroon); }
.contact-detail-card .cd-value a:hover { color: var(--dd-maroon-light); }
.chc { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); }
.chc:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); }
.chc span { color: rgba(255, 255, 255, .84); }
.chc .chc-icon { color: var(--dd-orange); }

/* the corridor map panel is dark, so its label goes light */
.map-title { color: #b9c4d6; }

/* both CTA bands carry light type; the heading keeps Dellyman's orange */
.cta--blue .h-section,
.cta--red .h-section { color: #f05252; }
.cta--blue .lead,
.cta--red .lead { color: rgba(255, 255, 255, .86); }
.cta--blue .eyebrow,
.cta--red .eyebrow { color: #cddcf5; }
.cta--blue .eyebrow::before,
.cta--red .eyebrow::before { background: linear-gradient(90deg, var(--dd-orange), transparent); }

/* testimonial corridor chip + the 3D ring words sit on light cards */
.t-corridor {
  color: var(--dd-maroon);
  background: rgba(10, 19, 41, .08);
  border-color: rgba(10, 19, 41, .24);
}
.ring-word--hot { color: var(--dd-maroon-light); }

/* developer method badges */
.method--post { color: var(--dd-maroon-deep); }

/* small print inside the dark panels */
.fleet-hud, .fleet-drag-hint, .globe-hint, .console-chart-label { color: #a0a5b0; }

/* ==========================================================================
   dd-skin-dd.css — mode patch for DD_SKIN=dellyman-dd

   Dellyman's layout and components, painted in DOCHUMA & DPENSE colours.
   Everything above this file is the Dellyman layer with its palette swapped
   (see DD_FROM_DEL in build.py); this file holds the handful of adjustments
   that swap needs on top, and is only appended in this mode.
   ========================================================================== */

/* Dellyman's orange CTA used deep maroon text. The brand red wants white text
   (which is what the company site does on its own red buttons). */
.hero .btn-primary,
.page-hero .btn-primary,
.cta .btn-primary,
.mobile-menu .btn-primary,
.console .btn-primary,
#estimate .btn-primary,
.book .btn-primary {
  color: #fff;
  text-shadow: 0 1px 0 rgba(6, 11, 24, .18);
}

/* The highlighted words in the big headings: Dellyman uses orange there, which
   the swap turns into the brand red — on the navy hero bands that needs to be
   the lighter red the company's own site uses for emphasis. */
.hero .text-red-grad,
.hero .text-blue-grad,
.page-hero .text-red-grad,
.page-hero .text-blue-grad,
.cta .text-red-grad,
.cta .text-blue-grad,
.cta--red .text-red-grad,
.cta--blue .text-red-grad,
.cta--red .text-blue-grad,
.cta--blue .text-blue-grad { color: #f05252; }

/* method badges: white type on the red, as the company site does */
.method--post { color: #fff; }

/* the live clock sits on the dark dispatch console */
.console-clock { color: #ff8b8b; }