/* ==========================================================================
   PAGE-SPECIFIC — hero, sections unique to the corporate landing page
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  overflow: hidden;
}
.hero .container{ display: grid; gap: var(--space-4); }
.hero-copy{ max-width: 42rem; }
.hero-copy h1{ margin-block: var(--space-2); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.hero-figure{
  position: relative;
  border: 1.5px solid var(--border);
  background: var(--white);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-figure img{ width: 100%; height: 100%; object-fit: cover; }
.hero-figure .corner{ position: absolute; width: 18px; height: 18px; border: 2px solid var(--blue); }
.hero-figure .corner.tl{ top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-figure .corner.tr{ top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hero-figure .corner.bl{ bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hero-figure .corner.br{ bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hero-figure figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(6,37,68,0.85); color: var(--white);
  font-family: var(--font-mono); font-size: var(--step-0);
  padding: 0.6rem 0.9rem; letter-spacing: 0.04em;
}

@media (min-width: 980px){
  .hero .container{ grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}

/* ---------- Reversed "blueprint sheet" section (navy, cyan lines) ---------- */
.section-navy{
  background: var(--blue-navy);
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  color: rgba(255,255,255,0.88);
}
.section-navy h2, .section-navy h3{ color: var(--white); }
.section-navy p{ color: rgba(255,255,255,0.72); }
.section-navy .mono-label{ color: #7fb4ee; }
.section-navy .dim{ color: #7fb4ee; }
.section-navy .dim::before, .section-navy .dim::after{ background: rgba(255,255,255,0.25); }
.section-navy .stat b{ color: var(--white); }
.section-navy .stat{ border-color: rgba(255,255,255,0.25); }
.section-navy .stat span{ color: rgba(255,255,255,0.6); }
.section-navy .crosshair{ color: rgba(255,255,255,0.45); }

/* Hero, when drawn as a navy blueprint panel: extra top/bottom padding so the
   grid backdrop reads as a full sheet rather than a cramped banner. */
.hero.section-navy{ padding-top: var(--space-6); padding-bottom: var(--space-6); }
.hero.section-navy .hero-figure{ border-color: rgba(255,255,255,0.35); }

/* ---------- Why-corporate grid ---------- */
.why-grid{ display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px){ .why-grid{ grid-template-columns: repeat(3, 1fr); } }
.why-item svg{ width: 30px; height: 30px; color: var(--blue-deep); margin-bottom: 0.6rem; }
.why-item h3{ font-size: var(--step-3); margin-bottom: 0.35rem; }
.why-item p{ font-size: var(--step-1); }

/* ---------- Two-col intro (used for "how it works" framing) ---------- */
.split{ display: grid; gap: var(--space-4); }
@media (min-width: 900px){ .split{ grid-template-columns: 0.8fr 1.2fr; } }

/* ---------- Logic marks (compass + crosshair, purely decorative, aria-hidden) ---------- */
.crosshair{ position: absolute; width: 26px; height: 26px; opacity: 0.35; color: var(--blue); pointer-events: none; }
.crosshair.top-right{ top: var(--space-3); right: var(--gutter); }
.crosshair.bottom-left{ bottom: var(--space-3); left: var(--gutter); }
@media (max-width: 719px){ .crosshair{ display: none; } }

/* ---------- Contact section ---------- */
.contact-grid{ display: grid; gap: var(--space-4); }
@media (min-width: 940px){ .contact-grid{ grid-template-columns: 1fr 1.1fr; } }
.contact-info .stat-row{ margin-top: var(--space-3); }