/* ════════════════════════════════════════════════════════════════
   SHEFFY ADEY — INNER PAGE HUD SKIN
   Carries the homepage's "command deck" language (bracket-corner
   panels, mono kickers, cyan→green gradient accents, circuit-node
   dividers) into every inner page. Loaded after each page's own
   inline <style> block, so it only ADDS to existing component
   systems — it never restructures markup or removes an existing
   effect. Every selector below was checked against each page's
   inline styles for pseudo-element collisions before being added.
════════════════════════════════════════════════════════════════ */

:root {
  --grn:      #38f0a8;
  --grn-dim:  rgba(56,240,168,.10);
  --grn-bd:   rgba(56,240,168,.22);
  --aqua:     #7fffd4;
  --grad:     linear-gradient(100deg, var(--cy) 0%, var(--aqua) 48%, var(--grn) 100%);
  --hud-line: rgba(0,212,242,.16);
}

/* ── Eyebrow → HUD kicker ──────────────────────────────────────── */
.eyebrow::before { content: "["; color: var(--tx-3); margin-right: .3em; }
.eyebrow::after  { content: "]"; color: var(--tx-3); margin-left: .3em; }
.eyebrow-dot.pulse { background: var(--grn); box-shadow: 0 0 8px var(--grn); }

/* ── Page hero — bracket frame + lab label ───────────────────────
   Some page-heroes (services.html, about.html) also carry the
   .bg-photo-section class from styles.css, which already claims
   BOTH ::before and ::after on that exact element for its photo
   layer and dark-gradient overlay. Targeting .page-hero::before/
   ::after directly would collide with those declarations property
   by property — including inheriting their unset inset:0 — and
   paint an opaque box over the hero content. Every page-hero instead
   carries its own `.hero-grid` div (already present, purely
   decorative, zero existing pseudo-element usage anywhere), so the
   frame and label are anchored there instead — fully collision-safe. */
.page-hero .hero-grid::before {
  content: "";
  position: absolute;
  top: 88px;
  left: clamp(14px, 2.2vw, 30px);
  right: clamp(14px, 2.2vw, 30px);
  bottom: 28px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--hud-line);
  -webkit-mask:
    linear-gradient(#000,#000) top left / 30px 30px no-repeat,
    linear-gradient(#000,#000) top right / 30px 30px no-repeat,
    linear-gradient(#000,#000) bottom left / 30px 30px no-repeat,
    linear-gradient(#000,#000) bottom right / 30px 30px no-repeat;
          mask:
    linear-gradient(#000,#000) top left / 30px 30px no-repeat,
    linear-gradient(#000,#000) top right / 30px 30px no-repeat,
    linear-gradient(#000,#000) bottom left / 30px 30px no-repeat,
    linear-gradient(#000,#000) bottom right / 30px 30px no-repeat;
}
.page-hero .hero-grid::after {
  content: "SHEFFY ADEY // LAB";
  position: absolute;
  top: 78px;
  left: 52px;
  z-index: 0;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-3);
  background: var(--bg);
  padding: 0 .5rem;
}
@media (max-width: 640px) {
  .page-hero .hero-grid::before, .page-hero .hero-grid::after { display: none; }
}

/* ── Breakout emphasis — gradient <em> in page titles + closing CTA ─ */
.page-title em,
.cta-hl em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Circuit-node section dividers ───────────────────────────────
   A thin trace + node at the seam between stacked sections, echoing
   the logo's circuit-trace mark. .section has no existing pseudo
   usage anywhere in the inner pages. */
.page-hero + .section,
.section + .section,
.section + #cta {
  position: relative;
}
.page-hero + .section::before,
.section + .section::before,
.section + #cta::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--cy), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ── Card systems — bracket-corner reveal ────────────────────────
   Grouped across every page's bespoke card class. Each was checked
   against that page's inline <style> for ::before/::after collisions:
   gov-card, tm-card and tm-founder already use ::before, so this
   claims the free ::after slot on them; every other class here has
   no existing pseudo-element at all. */
.info-card, .svc-group, .cs-header, .cs-evidence, .gov-card,
.trust-card, .tm-card, .tm-founder, .value-card, .guide-card,
.resource-card, .buyer-card, .glossary-item, .contact-form-card,
.side-card, .form-card, .faq-item {
  position: relative;
}
.info-card::after, .svc-group::after, .cs-header::after, .cs-evidence::after,
.gov-card::after, .trust-card::after, .tm-card::after, .tm-founder::after,
.value-card::after, .guide-card::after, .resource-card::after,
.buyer-card::after, .glossary-item::after, .contact-form-card::after,
.side-card::after, .form-card::after, .faq-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .35s var(--ease);
  -webkit-mask:
    linear-gradient(#000,#000) top left / 14px 14px no-repeat,
    linear-gradient(#000,#000) top right / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom left / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom right / 14px 14px no-repeat;
          mask:
    linear-gradient(#000,#000) top left / 14px 14px no-repeat,
    linear-gradient(#000,#000) top right / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom left / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom right / 14px 14px no-repeat;
}
.info-card:hover::after, .svc-group:hover::after, .cs-header:hover::after,
.cs-evidence:hover::after, .gov-card:hover::after, .trust-card:hover::after,
.tm-card:hover::after, .tm-founder:hover::after, .value-card:hover::after,
.guide-card:hover::after, .resource-card:hover::after, .buyer-card:hover::after,
.glossary-item:hover::after, .contact-form-card:hover::after,
.side-card:hover::after, .form-card:hover::after, .faq-item:hover::after {
  border-color: var(--grn-bd);
}

/* Static readout panel (hero stat panel on every inner page) reads
   the bracket at rest, cyan — it is informational, not interactive. */
.page-stat-panel { position: relative; }
.page-stat-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--cy-bd);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000,#000) top left / 14px 14px no-repeat,
    linear-gradient(#000,#000) top right / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom left / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom right / 14px 14px no-repeat;
          mask:
    linear-gradient(#000,#000) top left / 14px 14px no-repeat,
    linear-gradient(#000,#000) top right / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom left / 14px 14px no-repeat,
    linear-gradient(#000,#000) bottom right / 14px 14px no-repeat;
}

/* ── Chips / tags — green hover accent ───────────────────────────*/
.stack-chip { transition: border-color .2s var(--ease), color .2s var(--ease); }
.stack-chip:hover { border-color: var(--grn-bd); color: var(--grn); }

@media (prefers-reduced-motion: reduce) {
  .info-card::after, .svc-group::after, .cs-header::after, .cs-evidence::after,
  .gov-card::after, .trust-card::after, .tm-card::after, .tm-founder::after,
  .value-card::after, .guide-card::after, .resource-card::after,
  .buyer-card::after, .glossary-item::after, .contact-form-card::after,
  .side-card::after, .form-card::after, .faq-item::after,
  .stack-chip { transition: none; }
}