/* ============================================================
   WinSYS Public Site — design refinement layer   (v1.207.0)
   Loaded after site.css, so it refines rather than replaces.

   Three problems this fixes:
     1. The type scale had a hole in it — h2 reached 2.2rem but h3
        dropped to a flat 1.15rem and never scaled, so the middle of
        the hierarchy collapsed and long pages read flat.
     2. Every section used the same 76px padding, which is generous
        on a desktop and far too much on a phone.
     3. The outcome statistics — the most persuasive content on the
        page — were set smaller than a heading.

   Signature device: the "trace". WinSYS teaches networking and
   cyber security, so section labels and dividers are drawn as a
   node on a line, the way a link is drawn on a network diagram.
   It is the one decorative idea on the page, used sparingly.
   ============================================================ */

/* ---------- 1. A complete type scale ----------
   Every step scales with the viewport, and the gaps between steps
   are even, so headings stay in proportion at any screen size. */
:root {
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);   /* body      */
  --step-1: clamp(1.08rem, 1.02rem + 0.3vw, 1.3rem);     /* lead      */
  --step-2: clamp(1.25rem, 1.14rem + 0.55vw, 1.6rem);    /* h3        */
  --step-3: clamp(1.55rem, 1.34rem + 1.05vw, 2.2rem);    /* h2        */
  --step-4: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);         /* h1        */

  /* Vertical rhythm — one scale, used everywhere */
  --space-s: clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --space-m: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --space-l: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --space-xl: clamp(3rem, 2rem + 5vw, 5.5rem);
}

h3 { font-size: var(--step-2); letter-spacing: -.005em; }
h4 { font-size: var(--step-1); letter-spacing: 0; }

/* Body copy: a comfortable measure. Long lines are the single most
   common reason a page feels tiring to read. */
.section p, .lead, .prose p { max-width: 68ch; }
.lead { font-size: var(--step-1); line-height: 1.6; }

/* ---------- 2. Section rhythm that adapts ---------- */
.section { padding: var(--space-xl) 0; }
.section > .wrap > h2,
.section > .wrap > .sec-head { margin-bottom: var(--space-m); }

/* ---------- Signature: the trace ----------
   A section label drawn as a node on a link — the vernacular of a
   network diagram, which is what WinSYS actually teaches. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .6em;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px;
  background: currentColor; opacity: .55;
}
.eyebrow::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* A divider that reads as a link between two nodes. Used between
   major sections only — never more than a few times per page. */
.trace-rule {
  border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--gold) 40%, transparent), transparent);
}

/* ---------- 3. Statistics that carry their weight ----------
   These are the numbers that persuade, so they are the largest
   type on the page after the hero. */
.stat strong {
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat span, .stat small {
  display: block;
  font-size: .92rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  max-width: 22ch;
  margin-inline: auto;
}
.stats { gap: var(--space-m); }

/* ---------- Cards: quieter borders, clearer lift ---------- */
.card, .course-card, .row-card, .why-card, .offer-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover, .course-card:hover, .row-card:hover,
.why-card:hover, .offer-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
}

/* ---------- Buttons: one confident primary ---------- */
.btn, .btn-gold, .cta {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ---------- Quality floor ---------- */

/* Keyboard focus must always be visible — several interactive
   elements previously relied on the browser default, which is
   invisible against a dark navy background. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Images reserve their space so the page doesn't jump while
   loading — the most common cause of a page feeling "janky". */
img { height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .course-card:hover, .row-card:hover { transform: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .section { padding: var(--space-l) 0; }
  .hero { min-height: 62vh; }          /* 78vh pushed content off screen */
  .hero-sub { font-size: var(--step-0); }
  .stat strong { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .stat span, .stat small { max-width: none; }
  .eyebrow { font-size: .72rem; letter-spacing: .12em; }
  /* Anything that scrolls sideways should do so deliberately */
  .clients, .gal-grid { -webkit-overflow-scrolling: touch; }
}