/* Redwall Technologies — site stylesheet */

:root {
  --ink: #14171c;
  --panel: #1b1f27;
  --paper: #ffffff;
  --paper-alt: #f4f5f7;
  --line: #e3e5ea;
  --text: #23262d;
  --text-muted: #5b6070;
  --accent: #941100;
  --accent-bright: #d4222b;
  --on-dark: #e9eaed;
  --on-dark-muted: #a7abb6;
  --radius: 10px;
  --maxw: 1120px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 .6em;
  color: var(--ink);
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }

.text-center { text-align: center; }
.muted { color: var(--text-muted); }

/* ---------- Header / nav ---------- */
header.site-header {
  background: var(--ink);
  color: var(--on-dark);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #000;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 6px 20px;
  /* Wider than the content max-width: the nav needs more room to lay out
     7 links plus the logo and CTA on one line without crowding. Content
     sections still read at var(--maxw) via their own .wrap. */
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Belt-and-suspenders: if the nav ever needs more width than the viewport
   provides, let it scroll horizontally instead of silently overflowing
   into unclickable space. Should not trigger given the sizing above, but
   guarantees every item stays reachable either way. */
nav.primary-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
nav.primary-nav::-webkit-scrollbar { display: none; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--on-dark);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand img { height: 60px; width: auto; }
.brand:hover { text-decoration: none; }
/* Between the hamburger breakpoint and ~1240px there isn't room for the
   full wordmark next to 7 nav links + CTA. Drop to icon-only there; the
   full "Redwall Technologies" wordmark returns once there's real room. */
@media (max-width: 1240px) {
  .brand-text { display: none; }
  .brand { gap: 0; }
}

nav.primary-nav { display: flex; }
nav.primary-nav > ul {
  list-style: none;
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 0;
}
nav.primary-nav > ul > li { position: relative; z-index: 1; }
nav.primary-nav > ul > li > a,
nav.primary-nav > ul > li > span.top-label {
  display: block;
  padding: 8px 8px;
  color: var(--on-dark);
  font-size: .85rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
nav.primary-nav > ul > li > a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
nav.primary-nav > ul > li.current > a { color: var(--accent-bright); }

nav.primary-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--panel);
  border: 1px solid #000;
  border-radius: 8px;
  min-width: 200px;
  padding: 6px;
  list-style: none;
  /* No gap between the trigger and the dropdown: any margin here creates
     dead space the pointer has to cross, and it loses hover before
     reaching the submenu. */
  margin: 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
nav.primary-nav li:hover > .submenu,
nav.primary-nav li > .submenu:hover { display: block; }
nav.primary-nav .submenu li a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--on-dark);
  font-size: .92rem;
  font-weight: 500;
}
nav.primary-nav .submenu li a:hover { background: rgba(255,255,255,.08); text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #444;
  color: var(--on-dark);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  nav.primary-nav { display: none; }
  .nav-toggle { display: inline-block; }
  body.nav-open nav.primary-nav {
    display: block;
    position: fixed;
    inset: 60px 0 0 0;
    background: var(--ink);
    overflow-y: auto;
    padding: 10px 20px 40px;
    z-index: 45;
    pointer-events: auto;
  }
  body.nav-open nav.primary-nav > ul { flex-direction: column; gap: 0; }
  body.nav-open nav.primary-nav > ul > li > a { display: block; padding: 12px 10px; font-size: 1rem; }
  nav.primary-nav .submenu { position: static; box-shadow: none; display: block; border: none; padding-left: 12px; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--ink) 0%, #23150f 100%);
  color: var(--on-dark);
  padding: 72px 24px 64px;
}
.hero img.hero-logo { max-height: 90px; margin: 0 auto 20px; }
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.hero-copy { flex: 1 1 480px; max-width: 620px; }
.hero .eyebrow {
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  font-weight: 700;
  margin: 0 0 .8em;
}
.hero h1 { color: #fff; font-size: 2.6rem; margin: 0 0 .4em; }
.hero p.lede { color: var(--on-dark-muted); font-size: 1.15rem; max-width: 620px; margin: 0; text-wrap: balance; }
.hero .hero-ctas { margin-top: 28px; }
.hero .hero-ctas .btn { margin: 0 12px 0 0; }
.hero-visual { flex: 0 0 260px; display: flex; justify-content: center; }
.hero-visual-card {
  background: transparent;
  width: 240px;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
.hero-visual-card img { width: 100%; height: auto; display: block; }
.hero-visual-caption {
  text-align: center;
  font-size: .78rem;
  color: var(--on-dark-muted);
  margin: 10px 0 0;
  letter-spacing: .02em;
}
@media (max-width: 780px) {
  .hero-grid { flex-direction: column; text-align: center; }
  .hero-copy { max-width: 100%; }
  .hero p.lede { margin: 0 auto; }
  .hero .hero-ctas .btn { margin: 0 6px; }
  .hero-visual { order: -1; }
  .hero-visual-card { width: 170px; padding: 16px; }
}

.nav-cta {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 14px;
  font-size: .85rem;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}
@media (max-width: 1024px) { .nav-cta { display: none; } }
/* While the page's own hero CTA is on screen, hide the sticky header's
   duplicate "Request a Briefing" button so only one is visible at a time.
   JS toggles .nav-cta-hidden on the header; falls back to always-visible
   if JS never runs. */
header.site-header.nav-cta-hidden .nav-cta { opacity: 0; pointer-events: none; }
.page-hero {
  background: var(--ink);
  color: var(--on-dark);
  padding: 40px 24px;
}
.page-hero .wrap { text-align: center; }
.page-hero h1 { color: #fff; margin: 0; }
.page-hero p {
  color: var(--on-dark-muted);
  margin: .5em auto 0;
  max-width: 800px;
  text-wrap: balance;
}
.page-hero-visual {
  max-width: 900px;
  margin: 28px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.page-hero-visual img { width: 100%; height: auto; display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
.btn:hover { background: var(--accent-bright); text-decoration: none; }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn.ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* On dark backgrounds (e.g. the hero), red-on-near-black reads poorly, so
   these use crisp white instead of the muted gray for real presence. */
.hero .btn.ghost,
.dyk .btn.ghost,
.page-hero .btn.ghost {
  border-color: #fff;
  color: #fff;
}
.hero .btn.ghost:hover,
.dyk .btn.ghost:hover,
.page-hero .btn.ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* ---------- Sections ---------- */
main { display: block; }
.section { padding: 68px 24px; }
.section.alt { background: var(--paper-alt); }
.section-head { max-width: 720px; margin: 0 0 40px; }
.section-head.center { margin: 0 auto 40px; text-align: center; }
.section-head h2 { margin-bottom: .4em; }

.grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.mission-chips .chip { text-align: center; padding: 22px 14px; }
.mission-chips .chip .fa { display: block; font-size: 1.3rem; color: var(--accent); margin-bottom: .5em; }
.mission-chips .chip p { margin: 0; font-weight: 600; color: var(--ink); }

.honest-frame { max-width: 720px; text-align: center; margin: 0 auto; }

.track-record { text-align: center; max-width: 720px; margin: 0 auto; }

.cta-band h2 { margin-bottom: .3em; }

.isolation-summary {
  max-width: 560px;
  margin: 36px auto 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.practice-text {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Compare table ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: .95rem;
}
.compare-table thead th {
  color: var(--ink);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--ink);
}
.compare-table thead th:first-child { color: var(--text-muted); }
.compare-table tbody th[scope="row"] {
  color: var(--ink);
  font-weight: 700;
  width: 22%;
}
.compare-table tbody td:nth-child(2) { color: var(--text); background: var(--paper-alt); }
.compare-table tbody td:nth-child(3) { color: var(--text-muted); }

@media (max-width: 700px) {
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table th, .compare-table td, .compare-table tr {
    display: block;
  }
  .compare-table thead { display: none; }
  .compare-table tr { border-bottom: 2px solid var(--line); padding: 12px 0; }
  .compare-table th[scope="row"] { border-bottom: none; padding-bottom: 4px; }
  .compare-table td { border-bottom: none; padding-top: 4px; padding-bottom: 4px; }
  .compare-table td:nth-child(2)::before { content: "Redwall Mobile: "; font-weight: 700; color: var(--ink); }
  .compare-table td:nth-child(3)::before { content: "Typical alternatives: "; font-weight: 700; color: var(--text-muted); }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.card h6, .card h5 {
  margin: 0 0 .4em;
  color: var(--ink);
  font-size: 1.05rem;
}
.card p:last-child { margin-bottom: 0; }
.pillar .fa { color: var(--accent); font-size: 1.4rem; margin-bottom: .4em; display: block; }
.pillar-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  border: 2px solid var(--accent);
}
.pillar-photo.device {
  width: 56px;
  height: 100px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 8px;
}
.pillar-visual {
  display: block;
  max-height: 180px;
  width: auto;
  margin: 0 0 16px;
}
.mode-card-img {
  display: block;
  max-height: 96px;
  width: auto;
  margin: 0 0 14px;
}
.mobile-hero-shot { text-align: center; margin: 0 0 32px; }
.mobile-hero-shot img { max-height: 320px; width: auto; margin: 0 auto; }
.mobile-hero-shot img.wide-diagram { max-height: none; width: 100%; max-width: 820px; }

.usecase { text-align: center; }
.usecase img { margin: 0 auto 14px; border-radius: 8px; }
.usecase h5 { font-size: 1.1rem; margin-bottom: .3em; }

/* ---------- Bio cards ---------- */
.bio-card { text-align: center; }
.bio-card img { border-radius: 50%; width: 140px; height: 140px; object-fit: cover; margin: 0 auto 16px; }
.bio-card .role { color: var(--text-muted); font-size: .92rem; margin-bottom: .6em; }
.bio-full { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.bio-full img { border-radius: 50%; width: 180px; height: 180px; object-fit: cover; }
.bio-full .bio-text { flex: 1; min-width: 260px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item h3 { font-size: 1.05rem; margin: 0 0 .4em; color: var(--ink); }
.faq-item .faq-answer { color: var(--text); }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Downloads ---------- */
.download-list { list-style: none; padding: 0; margin: 0; }
.download-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.download-list .fa { color: var(--accent); }
.download-list .desc { color: var(--text-muted); }

/* ---------- Co-brand / partner hardware ---------- */
.co-brand-band { padding: 20px 24px 4px; }
.co-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-radius: 999px;
  max-width: 260px;
  margin: 0 auto;
}
.co-brand img { height: 18px; width: auto; }
.co-brand img.co-brand-zebra { filter: brightness(0) invert(1); }
.co-brand .co-brand-x { color: var(--on-dark-muted); font-size: .9rem; font-weight: 300; }

.device-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
.device-card { width: 170px; text-align: center; }
.device-card img { max-height: 130px; width: auto; margin: 0 auto 12px; }
.device-card p { margin: 0; font-weight: 600; color: var(--ink); font-size: .9rem; }
.device-card .spec { margin: .3em 0 0; font-weight: 400; color: var(--text-muted); font-size: .78rem; }

.zebra-banner { border-radius: var(--radius); overflow: hidden; }
.zebra-banner img { width: 100%; height: auto; display: block; }

footer.site-footer .foot-zebra {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .55;
  margin-top: 10px;
}

/* ---------- Tables (partners) ---------- */
.partner-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }
.partner-row img { max-height: 70px; width: auto; }
.partner-row .partner-copy { flex: 1; min-width: 260px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; align-items: center; }
.logo-grid .card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo-grid img { max-height: 46px; width: auto; }

/* ---------- Did you know strip ---------- */
.dyk { background: var(--panel); color: var(--on-dark); padding: 40px 24px; }
.dyk h4 { color: var(--accent-bright); }
.dyk ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dyk li { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--on-dark-muted); }
.honest-frame p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.map-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; }
.map-row iframe { width: 100%; height: 240px; border: 0; border-radius: var(--radius); }
.map-row p { text-align: center; margin-top: 8px; color: var(--text-muted); font-size: .9rem; }

/* ---------- Contact / briefing form ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 760px) {
  .contact-layout { grid-template-columns: 1fr; }
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-weight: 400;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--paper);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.contact-form button.btn { align-self: flex-start; border: none; cursor: pointer; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-direct { text-align: left; }
.contact-direct .fa { color: var(--accent); width: 18px; text-align: center; margin-right: 6px; }

.form-success, .form-error {
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.form-success { background: var(--paper-alt); border: 1px solid var(--line); }
.form-error { background: #fdecec; border: 1px solid #f3b9b9; }

/* ---------- Legal text ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { margin-top: 1.4em; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--on-dark-muted);
  padding: 40px 24px 24px;
}
footer.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
footer.site-footer .foot-brand img { height: 30px; margin-bottom: 10px; }
footer.site-footer a { color: var(--on-dark-muted); }
footer.site-footer a:hover { color: #fff; }
footer.site-footer .social a { font-size: 1.3rem; margin-right: 14px; }
.copyright {
  text-align: center;
  font-size: .82rem;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 28px;
  padding-top: 18px;
}

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: 90px 24px; }
.error-page .fa { font-size: 3rem; color: var(--accent); margin-bottom: .3em; }