/* ═══════════════════════════════════════════════════
   Digital Armor — Homepage
   Loads after main.css. Owns the alternating dark/light
   homepage sections introduced by the approved redesign.

   Section rhythm, top to bottom:
     hero      — ink   (--navy-deeper)
     services  — paper (--white)
     approach  — light (--off-white)
     industries— paper (--white)
     contact   — navy  (--navy)
     footer    — ink   (main.css)
═══════════════════════════════════════════════════ */

/* The shared stylesheet paints a dark page for the interior pages. The
   homepage reads light, so it re-bases the document surface here and each
   dark section paints itself back in. */
body {
  background: var(--white);
  color: var(--navy-deeper);
}

/* ── Shared section frame ─────────────────────────── */
.da-wrap {
  padding-left: max(5%, calc((100% - 1280px) / 2));
  padding-right: max(5%, calc((100% - 1280px) / 2));
}

.da-kicker {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-dim);
  line-height: 1.5;
}
.da-kicker::before {
  content: ''; flex-shrink: 0;
  width: 25px; height: 2px;
  background: currentColor;
}

.da-hero h1,
.da-services h2,
.da-about h2,
.da-industries h2,
.da-contact h2 {
  font-weight: 500;
  letter-spacing: -0.03em;
}

.da-textlink {
  display: inline-block;
  font-size: 0.875rem; font-weight: 700;
  padding: 0.5rem 0;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
}
.da-textlink:hover { color: var(--accent-bright); }
.da-textlink-dark { color: var(--accent-dim); }
.da-textlink-dark:hover { color: var(--navy-deeper); }

/* .inline-link in main.css is tuned for the dark surfaces. On the paper and
   light-neutral sections --accent-bright only reaches 2.8:1, so body links
   there step down to --accent-dim (6.0:1 on --white). */
.da-services .inline-link,
.da-about .inline-link,
.da-industries .inline-link { color: var(--accent-dim); }
.da-services .inline-link:hover,
.da-about .inline-link:hover,
.da-industries .inline-link:hover { color: var(--navy-deeper); }

/* ════════════════════════════════════════════════════
   HERO — ink
════════════════════════════════════════════════════ */
.da-hero {
  position: relative;
  background: var(--navy-deeper);
  color: var(--white);
  padding-top: calc(var(--nav-height) + 3.5rem);
  padding-bottom: 0;
}
.da-hero .da-kicker { color: var(--accent-bright); }

/* Decorative node field, restored from the original hero. Both layers are
   absolutely positioned, so they add the movement without contributing any
   height of their own, and neither takes pointer events. Drawing is bounded
   to this section — canvas.js measures this box and nothing else. */
#hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.72;
}
/* Navy wash, not a vignette. The earlier radial version cleared only the
   middle of the hero — which is exactly where the opaque diagram panel sits —
   and painted solid navy over the edges, so almost every visible line was
   covered. This settles the copy side with a light horizontal wash and a
   gentle fade at the top and bottom edges, leaving the network legible right
   across the section. */
.da-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(13, 31, 51, 0.45) 0%,
      rgba(13, 31, 51, 0) 18%,
      rgba(13, 31, 51, 0) 82%,
      rgba(13, 31, 51, 0.40) 100%),
    linear-gradient(90deg,
      rgba(13, 31, 51, 0.20) 0%,
      rgba(13, 31, 51, 0.10) 50%,
      rgba(13, 31, 51, 0.30) 100%);
}
.da-hero > .da-kicker,
.da-hero > .da-hero-grid,
.da-hero > .da-hero-footer {
  position: relative; z-index: 2;
}

.da-hero-grid {
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  align-items: center;
  gap: 3rem;
  margin: 2rem 0 3.5rem;
}

.da-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.9rem);
  line-height: 1.06;
  color: var(--white);
}
.da-hero h1 span {
  display: block;
  margin-top: 0.55rem;
  color: var(--accent-bright);
}

.da-lead {
  max-width: 27.5rem;
  margin-top: 1.6rem;
  font-size: 1rem; line-height: 1.8;
  color: var(--steel-light);
}

.da-actions {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 1.5rem;
  margin-top: 2rem;
}
.da-hero .da-textlink { color: var(--white); border-bottom-color: #566c82; }

/* Environment diagram — a static explanation of how the three parts of an
   environment depend on each other. It is not a status readout: nothing here
   reflects live state. The connecting rule and the node markers are drawn with
   pseudo-elements, so the connections stay out of the accessibility tree and
   the text alone carries the meaning. */
.da-diagram {
  min-width: 0;
  margin: 0;
  padding: 1.5rem 1.45rem 1.35rem;
  background: var(--navy-dark);
  border-top: 2px solid var(--accent);
}
.da-diagram figcaption {
  padding-bottom: 1rem;
  border-bottom: 1px solid #30465e;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--steel-light);
}
.da-diagram-flow { list-style: none; margin: 0; padding: 1.35rem 0 0; }
.da-diagram-node {
  position: relative;
  padding: 0 0 1.5rem 1.85rem;
}
.da-diagram-node:last-child { padding-bottom: 0; }
/* node marker */
.da-diagram-node::before {
  content: ''; position: absolute; left: 0; top: 0.3rem;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--accent-bright);
  background: var(--navy-dark);
}
/* connection down to the next part */
.da-diagram-node:not(:last-child)::after {
  content: ''; position: absolute;
  left: 5px; top: 1.15rem; bottom: 0.25rem;
  width: 1px; background: var(--accent-dim);
}
.da-diagram-node strong {
  display: block;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.45;
  color: var(--white);
}
.da-diagram-node > span {
  display: block; margin-top: 0.3rem;
  font-size: 0.8125rem; line-height: 1.6;
  color: var(--steel-light);
}
.da-diagram-node .da-diagram-outcome {
  margin-top: 0.45rem;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-bright);
}
.da-diagram-note {
  margin-top: 1.4rem; padding-top: 0.95rem;
  border-top: 1px solid var(--accent);
  font-size: 0.8125rem; line-height: 1.7;
  color: var(--steel-light);
}

.da-hero-footer {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 0.95rem;
  list-style: none; margin: 0; padding: 1.25rem 0;
  border-top: 1px solid #294056;
  font-size: 0.8125rem;
  color: var(--steel-light);
}
.da-hero-footer strong { font-weight: 600; color: var(--white); }
.da-motion-item { display: flex; align-items: center; }
.da-motion-toggle {
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid #45607d;
  border-radius: var(--radius-sm);
  font: inherit; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--steel-light);
  cursor: pointer;
}
.da-motion-toggle:hover {
  color: var(--white);
  border-color: var(--accent-bright);
}
.da-motion-toggle[hidden] { display: none; }

/* ════════════════════════════════════════════════════
   SERVICES — paper
════════════════════════════════════════════════════ */
.da-services {
  background: var(--white);
  padding-top: 5rem; padding-bottom: 4.75rem;
}

.da-section-head {
  max-width: 46rem;
  margin: 1.35rem 0 2.75rem;
}
.da-services h2,
.da-industries h2 { font-size: clamp(1.9rem, 3.8vw, 2.5rem); line-height: 1.14; }
.da-section-head p {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 0.9375rem; line-height: 1.8;
  color: #48627a;
}

/* Three equal-height cards. Each card is a flex column and the link takes
   margin-top:auto, so the links sit on one line across the row however the
   descriptions wrap — no fixed heights, nothing clipped. */
.da-service-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.da-service {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid #ccdae7;
  border-radius: var(--radius-md);
}
.da-service-top {
  margin-bottom: 1.1rem;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-dim);
}
.da-service h3 {
  font-size: 1.375rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em;
  color: var(--navy-deeper);
}
.da-service > p {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem; line-height: 1.8;
  color: #48627a;
}
.da-service-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  align-self: flex-start;
  margin-top: auto; padding-top: 1.5rem;
  font-size: 0.875rem; font-weight: 700;
  text-decoration: none;
  color: var(--accent-dim);
}
.da-service-link:hover {
  color: var(--navy-deeper);
  text-decoration: underline; text-underline-offset: 3px;
}

.da-service-note {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid #ccdae7;
  font-size: 0.9375rem; line-height: 1.8;
  color: #48627a;
}

/* ════════════════════════════════════════════════════
   COMPANY APPROACH — light neutral
════════════════════════════════════════════════════ */
.da-about {
  position: relative; /* containing block for .anchor-alias */
  display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  gap: 3.5rem;
  padding-top: 4.25rem; padding-bottom: 4.25rem;
  background: var(--off-white);
  border-top: 1px solid #d2deea;
  border-bottom: 1px solid #d2deea;
}
.da-practice {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 1.375rem;
  border-left: 3px solid var(--accent);
}
.da-practice strong {
  font-size: 1.75rem; font-weight: 500;
  line-height: 1.3; letter-spacing: -0.025em;
  color: var(--navy-deeper);
}
.da-about h2 {
  max-width: 32.5rem;
  margin-top: 1rem;
  font-size: clamp(1.625rem, 3.2vw, 2rem);
  line-height: 1.22;
}
.da-about p {
  margin-top: 1.05rem;
  font-size: 0.9375rem; line-height: 1.85;
  color: #48627a;
}
.da-about-more { margin-top: 1.1rem; }
/* Both children, including the unnamed div, and the two strings that set
   their intrinsic minimum: the practice line and the text link. */
.da-about > * { min-width: 0; }
.da-practice strong,
.da-about .da-textlink { overflow-wrap: break-word; }
.da-about .da-textlink { max-width: 100%; }

/* ════════════════════════════════════════════════════
   INDUSTRIES — paper
════════════════════════════════════════════════════ */
.da-industries {
  display: grid; grid-template-columns: 1fr 1.2fr;
  align-items: center; gap: 3rem;
  padding-top: 4.25rem; padding-bottom: 4.25rem;
  background: var(--white);
}
.da-industries-note {
  max-width: 24rem;
  margin-top: 1rem;
  font-size: 0.9375rem; line-height: 1.8;
  color: #48627a;
}
.da-industry-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.da-industry-list li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid #bccddd;
  font-size: 0.9375rem; font-weight: 600;
}
.da-industry-list svg {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: var(--accent-dim); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.da-industry-list a {
  color: var(--navy-deeper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.da-industry-list a:hover {
  color: var(--accent-dim);
  border-bottom-color: currentColor;
}

/* ════════════════════════════════════════════════════
   ASSESSMENT & CONTACT — navy
════════════════════════════════════════════════════ */
.da-contact {
  position: relative; /* containing block for .anchor-alias */
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: start; gap: 3.5rem;
  padding-top: 4.5rem; padding-bottom: 4.5rem;
  background: var(--navy);
  color: var(--white);
}
/* --accent-bright on --navy is only 3.95:1; the label text uses steel-light
   (7.3:1) and the bright blue stays on the decorative rule. */
.da-contact .da-kicker { color: var(--steel-light); }
.da-contact .da-kicker::before { background: var(--accent-bright); }
.da-contact h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.75rem, 3.4vw, 2.1875rem);
  line-height: 1.2;
  color: var(--white);
}
.da-contact > div > p {
  margin-top: 1.05rem;
  font-size: 0.9375rem; line-height: 1.8;
  color: var(--steel-light);
}
.da-deliverables {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  font-size: 0.9375rem; color: var(--off-white);
}
.da-deliverables li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #45607d;
}
.da-deliverables svg {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: var(--accent-bright); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.da-contact-note {
  margin-top: 1rem;
  font-size: 0.8125rem; line-height: 1.7;
  color: var(--steel-light);
}
.da-contact-form .form-card {
  background: var(--navy-dark);
  border-color: var(--border-mid);
}

/* ════════════════════════════════════════════════════
   NARROW VIEWPORT WITH ENLARGED TEXT
   At 360px with 200% root text the hero copy column measured wider than the
   viewport: its min-content came from the longest headline word and from the
   nowrap primary button. Grid and flex children default to min-width:auto,
   so the column could not get under that. Type keeps its size; the word is
   allowed to break and the column is allowed to shrink.
════════════════════════════════════════════════════ */
.da-hero-copy,
.da-hero-footer li,
.da-section-head,
.da-service,
.da-industry-list li,
.da-industry-list a,
.da-contact-copy,
.da-contact-form,
.da-practice,
.da-diagram,
.da-diagram-node,
.da-deliverables li {
  min-width: 0;
}
.da-hero h1 { hyphens: auto; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .da-service-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .da-service-link { padding-top: 1.25rem; }
}

@media (max-width: 900px) {
  .da-hero-grid { grid-template-columns: 1.15fr 1fr; gap: 1.6rem; }
  .da-about { gap: 1.9rem; }
  .da-contact { grid-template-columns: 1fr; gap: 2.25rem; }
}

@media (max-width: 768px) {
  .da-wrap { padding-left: 7%; padding-right: 7%; }
  .da-hero { padding-top: calc(var(--nav-height) + 2rem); }
  .da-hero-grid,
  .da-about,
  .da-industries { grid-template-columns: minmax(0, 1fr); }
  .da-hero-grid { gap: 2.2rem; margin-bottom: 2rem; }
  .da-hero-footer { flex-direction: column; gap: 0.5rem; }
  .da-service-top { margin-bottom: 0.85rem; }
  .da-about, .da-industries { gap: 1.9rem; }
  .da-services { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .da-about, .da-industries { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .da-contact { padding-top: 3.25rem; padding-bottom: 3.5rem; }
  .da-practice { padding-left: 1rem; }
}

@media (max-width: 480px) {
  .da-industry-list { grid-template-columns: 1fr; }
  .da-actions { align-items: stretch; flex-direction: column; gap: 1rem; }
  .da-actions .btn { justify-content: center; }
  .da-diagram { padding: 1.2rem 1.1rem; }
  .da-service { padding: 1.4rem 1.25rem; }
  .da-wrap { padding-left: 1rem; padding-right: 1rem; }
  .form-card { padding: 1.5rem 1.15rem; }
}