/* QA remediation overrides for responsive layout and image-based branding. */
:root {
  --header-height: 80px;
  --accent: #00AEEF;
  --accent-dark: #0D2E55;
}
body { min-width: 0; overflow-x: clip; }

/*
 * Brand color alignment.
 * The official Reclaimer Technology brand repository is
 * benji-king/reclaimer-technology-brand-assets. The flat RT shield companion
 * uses #00AEEF for the electric cyan-blue accent and #071A35/#0D2E55 for its
 * navy treatments. Keep site accent treatments in that family rather than the
 * earlier mint-green remediation palette.
 */
.skip-link { color: #071A35; }
.brand-mark { filter: drop-shadow(0 0 14px rgba(0, 174, 239, .2)); }
.button {
  border-color: rgba(0, 174, 239, .55);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071A35;
  box-shadow: 0 12px 34px rgba(0, 174, 239, .18);
}
.button:hover { box-shadow: 0 16px 42px rgba(0, 174, 239, .24); }
.hero-glow-one { background: radial-gradient(circle, rgba(0, 174, 239, .13), transparent 68%); }
.orbit-two { border-color: rgba(0, 174, 239, .34); }
.orbit-center {
  border-color: rgba(0, 174, 239, .5);
  box-shadow: 0 0 40px rgba(0, 174, 239, .12);
}
.service-card:hover,
.engagement-card:hover { border-color: rgba(0, 174, 239, .34); }
.service-card::after { border-color: rgba(0, 174, 239, .12); }
.engagement-card::before {
  border-color: rgba(0, 174, 239, .35);
  background: linear-gradient(135deg, rgba(0, 174, 239, .18), rgba(126, 166, 255, .08));
}
.about-visual { background: radial-gradient(circle at center, rgba(0, 174, 239, .12), transparent 38%), #0a1627; }
.about-badge {
  border-color: rgba(0, 174, 239, .35);
  box-shadow: 0 0 70px rgba(0, 174, 239, .12);
}
input:focus,
textarea:focus,
select:focus { box-shadow: 0 0 0 3px rgba(0, 174, 239, .1); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container > *,
.hero-grid > *,
.approach-grid > *,
.about-grid > *,
.contact-grid > *,
.card-grid > *,
.footer-grid > * { min-width: 0; }

.nav-wrap { min-height: var(--header-height); }
.brand { min-width: 0; }
.brand-image { flex: 0 1 285px; }
.brand-logo {
  width: clamp(190px, 24vw, 265px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.footer-brand .brand-logo { width: clamp(180px, 20vw, 235px); }
.nav-toggle { flex: 0 0 auto; }

h1, h2, h3 { overflow-wrap: break-word; }
.eyebrow { overflow-wrap: anywhere; }
.button { max-width: 100%; text-align: center; }

.orbit-logo,
.about-logo {
  width: 64%;
  height: 64%;
  object-fit: contain;
}

/* Keep the About graphic level across iPhone, iPad, and desktop layouts. */
.about-badge { transform: none; }

.orbit-node { z-index: 2; max-width: 44%; white-space: nowrap; }
.panel-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-metrics div { min-width: 0; }
.panel-metrics span { overflow-wrap: break-word; }

.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.engagement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-list li { grid-template-columns: 58px minmax(0, 1fr); }
.contact-form, label { min-width: 0; }
input, textarea, select { min-width: 0; max-width: 100%; }
.contact-details a, .service-card li, .about-points span { overflow-wrap: anywhere; }
.footer-grid { grid-template-columns: auto minmax(0, 1fr) auto; }
.footer-links { flex-wrap: wrap; }

/* Keep static content readable if JavaScript fails or is blocked. */
.reveal { opacity: 1 !important; transform: none !important; }

@media (max-width: 1000px) {
  .hero-grid, .approach-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-panel, .about-visual { max-width: 700px; width: 100%; margin-inline: auto; }
}

@media (max-width: 760px) {
  :root { --header-height: 72px; }
  .section { padding: 4.75rem 0; }
  .nav-wrap { gap: 1rem; }
  .brand-image { flex-basis: 210px; }
  .brand-logo { width: min(205px, 58vw); }

  .primary-nav {
    inset: var(--header-height) 0 auto 0;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  h1 { font-size: clamp(2.45rem, 11.5vw, 4rem); line-height: 1; letter-spacing: -.045em; }
  h2 { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.035em; }
  .hero { min-height: auto; padding-top: 3.5rem; }
  .hero-grid { gap: 2.75rem; }
  .hero-actions { align-items: stretch; gap: 1rem; }
  .hero-actions .button { width: 100%; }

  .hero-panel { min-height: 0; border-radius: 24px; padding-bottom: 1rem; }
  .solution-orbit { width: min(390px, 94%); margin-top: .5rem; }
  .orbit-node { font-size: .7rem; padding: .42rem .58rem; }
  .panel-metrics {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    margin: .75rem 1rem 0;
  }
  .panel-metrics div { display: block !important; padding: .85rem 1rem; }
  .panel-metrics span { font-size: .76rem; }

  .services-grid, .engagement-grid, .field-row, .proof-grid { grid-template-columns: 1fr; }
  .proof-grid div { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-grid div:last-child { border-bottom: 0; }
  .process-list li { grid-template-columns: 42px minmax(0, 1fr); gap: .75rem; padding: 1.1rem; }
  .about-visual { min-height: 340px; }
  .contact-form { padding: 1.2rem; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-brand .brand-logo { width: min(220px, 70vw); }
  .copyright { grid-column: auto; }
}

@media (max-width: 430px) {
  .container { width: min(calc(100% - 1.5rem), var(--container)); }
  .section { padding: 4rem 0; }
  .brand-image { flex-basis: 185px; }
  .brand-logo { width: min(180px, 56vw); }
  .hero { padding-top: 2.75rem; }
  h1 { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  h2 { font-size: clamp(1.85rem, 8.8vw, 2.65rem); }
  .eyebrow { font-size: .69rem; letter-spacing: .16em; }
  .hero-lead, .section-heading > p:not(.eyebrow) { font-size: 1rem; }
  .solution-orbit { width: 100%; }
  .orbit-node { font-size: .64rem; padding: .38rem .48rem; }
  .contact-form { padding: 1rem; }
}

@media (max-width: 360px) {
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .brand-image { flex-basis: 160px; }
  .brand-logo { width: min(155px, 52vw); }
  .nav-toggle { width: 42px; height: 42px; }
  h1 { font-size: clamp(2.05rem, 10.8vw, 2.7rem); }
  h2 { font-size: clamp(1.75rem, 8.5vw, 2.25rem); }
  .orbit-node { font-size: .6rem; }
  .process-list li { grid-template-columns: 36px minmax(0, 1fr); }
}