/* ============================================================
   subpage.css — shared chrome for inner pages
   page header band · CTA band · generic button
   Used by: academic, commercial, general-training, equipment
   (the homepage has its own hero/CTA in index.css)
   ============================================================ */

  /* ---- page head (dark band with grid) ---- */
  .pagehead{background:var(--steel-dark);color:#e6eee9;position:relative;overflow:hidden;padding:84px 0 72px;border-bottom:1px solid var(--line)}
  .pagehead::before{content:"";position:absolute;inset:0;background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:54px 54px}
  .pagehead .wrap{position:relative;z-index:2}
  .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fbcaa;display:flex;gap:10px;align-items:center;margin-bottom:26px;flex-wrap:wrap}
  .crumb a:hover{color:#fff}
  .pagehead h1{color:#fff;font-weight:800;letter-spacing:-.015em;line-height:1.02;font-size:clamp(38px,5vw,68px)}
  .pagehead p{color:#aec4ba;font-size:clamp(15px,1.4vw,18px);max-width:64ch;margin-top:24px;line-height:1.65}

  /* ---- generic button ---- */
  .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:transform .2s,background .2s,color .2s}
  .btn svg{width:16px;height:16px}

  /* ---- CTA block (spans the container width, not the full page) ---- */
  .cta{padding:40px 0}
  .cta .wrap{position:relative;overflow:hidden;background:var(--steel);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:50px;padding:84px 64px}
  .cta .wrap::before{content:"";position:absolute;inset:0;background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;opacity:.6}
  .cta .wrap > *{position:relative;z-index:1}
  .cta h2{font-size:clamp(26px,3.2vw,42px);font-weight:800;line-height:1.06;max-width:18ch;letter-spacing:-.01em}
  .cta p{margin-top:16px;color:rgba(255,255,255,.85);font-size:16px;max-width:48ch;line-height:1.6}
  .cta .btn{background:#fff;color:var(--steel-dark)}
  .cta .btn svg{stroke:var(--steel-dark)}
  .cta .btn:hover{background:var(--steel-dark);color:#fff;transform:translateY(-2px)}
  .cta .btn:hover svg{stroke:#fff}
  @media(max-width:860px){.cta{padding:28px 0}.cta .wrap{flex-direction:column;align-items:flex-start;gap:28px;padding:48px 32px}}