/* ==========================================================================
   The Solid Shell — public/css/app.css
   --------------------------------------------------------------------------
   Hand-written, mobile-first CSS. No build step, no Node, no npm.

   Contents
   01. Design tokens (colour, type, spacing, radii, shadows)
   02. Reset and base
   03. Typography
   04. Layout primitives
   05. Buttons
   06. Header and navigation
   07. Footer
   08. Breadcrumbs
   09. Cards
   10. Hero
   11. Sections and grids
   12. Forms
   13. Alerts and flash messages
   14. FAQ accordion
   15. CTA banner
   16. Utilities
   17. Scroll reveal and motion
   18. Responsive breakpoints
   19. Reduced motion and print
   20. Course page layout
   21. Numbered process steps
   22. Map placeholder
   23. Hero enhancements
   24. Terminal component
   25. Home section enhancements
   26. Reveal stagger (extended)
   27. Hero responsive polish
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Brand palette — the ONLY colours used on this site outside of the
     terminal component's local theme.
     --------------------------------------------------------------------- */
  --color-primary:      #246747;
  --color-dark:         #143a31;
  --color-light-green:  #6e8781;
  --color-accent:       #f1f1f1;
  --color-bg:           #dde5e1;
  --color-white:        #ffffff;

  /* ---------------------------------------------------------------------
     Alpha overlays — brand dark green with transparency, used exclusively
     for shadows and translucent scrims. No other hue is introduced.
     --------------------------------------------------------------------- */
  --overlay-shadow:        rgba(20, 58, 49, 0.08);
  --overlay-shadow-strong: rgba(20, 58, 49, 0.16);
  --overlay-dark-70:       rgba(20, 58, 49, 0.70);
  --overlay-dark-85:       rgba(20, 58, 49, 0.85);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---------------------------------------------------------------------
     8px spacing scale
     --------------------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container:        1200px;
  --container-narrow: 820px;
  --container-wide:   1360px;
  --header-height:    68px;

  /* ---------------------------------------------------------------------
     Radii
     --------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     Shadows
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px var(--overlay-shadow);
  --shadow-md: 0 6px 18px var(--overlay-shadow);
  --shadow-lg: 0 14px 40px var(--overlay-shadow-strong);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition:      220ms ease;
  --transition-slow: 400ms ease;

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
  --z-skip:    999;
}

/* ==========================================================================
   02. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-display: swap;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

svg {
  flex-shrink: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-dark);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.on-dark a:focus-visible,
.on-dark button:focus-visible {
  outline-color: var(--color-white);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-light-green);
  margin: var(--space-5) 0;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-2);
  color: var(--color-white);
  text-decoration: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-2);
  color: var(--color-dark);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p {
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

small {
  font-size: var(--fs-sm);
}

.text-muted {
  color: var(--color-dark);
  opacity: 0.78;
}

.text-light {
  color: var(--color-light-green);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--color-dark);
  opacity: 0.9;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background-color: var(--color-accent);
  color: var(--color-dark);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section         { padding-block: var(--space-7); }
.section--tight  { padding-block: var(--space-5); }
.section--bg     { background-color: var(--color-bg); }
.section--accent { background-color: var(--color-accent); }
.section--white  { background-color: var(--color-white); }

.section--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

.section--dark p {
  color: var(--color-white);
  opacity: 0.92;
}

.section-heading {
  max-width: 720px;
  margin-bottom: var(--space-5);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2 { margin-bottom: var(--space-2); }
.section-heading p  { margin-bottom: 0; }

.stack > * + * { margin-top: var(--space-3); }

.grid    { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.75rem 1.5rem;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition),
              transform var(--transition-fast),
              box-shadow var(--transition);
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-light {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

.btn-light:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
}

.btn-outline-light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-outline-light:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

.btn-sm { padding: 0.5rem 1rem; min-height: 40px; font-size: var(--fs-sm); }
.btn-lg { padding: 0.9rem 1.9rem; min-height: 56px; font-size: var(--fs-md); }
.btn-block { width: 100%; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.btn-group--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.link-arrow:hover {
  color: var(--color-dark);
  text-decoration: none;
}

.link-arrow svg { transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   06. HEADER AND NAVIGATION
   --------------------------------------------------------------------------
   Two-tier header:
     - Slim status bar (desktop only) with live status indicator, tagline
       as a shell comment, and quick contact links.
     - Sticky white bar with logo, primary navigation, courses dropdown and
       the "Talk to us" CTA.

   The courses dropdown is a floating DARK terminal panel. Its rules live
   ONLY inside this section; a duplicate white-panel rule was removed from
   section 18 (RESPONSIVE BREAKPOINTS) because it overrode these.
   ========================================================================== */

/* --- Status bar (desktop only) ------------------------------------------ */

.header-status {
  display: none;
  background-color: var(--color-dark);
  color: var(--color-white);
  font-size: var(--fs-xs);
  line-height: 1;
}

.header-status__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 32px;
  padding-block: 0.35rem;
}

.header-status__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.header-status__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-white);
  opacity: 0.82;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}

.header-status__item:hover {
  opacity: 1;
  color: var(--color-white);
  text-decoration: none;
}

.header-status__item svg {
  color: var(--color-light-green);
  flex-shrink: 0;
}

.header-status__dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.header-status__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  opacity: 0.6;
  animation: header-status-pulse 2.4s ease-out infinite;
}

@keyframes header-status-pulse {
  0%   { transform: scale(0.8); opacity: 0.7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.header-status__comment {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-white);
  opacity: 0.6;
}

@media (min-width: 992px) {
  .header-status { display: block; }
}

/* --- Sticky header bar -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-accent);
  transition: box-shadow var(--transition), background-color var(--transition);
  /* No overflow: hidden — the courses dropdown must be allowed to extend
     below the header. The scanline is clipped by its own inset instead. */
  isolation: isolate;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    var(--color-primary) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  animation: header-scan 8s linear infinite;
  animation-delay: 1.2s;
  clip-path: inset(0 0 0 0);
}

@keyframes header-scan {
  0%   { background-position: 200% 0; opacity: 0; }
  8%   { opacity: 0.55; }
  92%  { opacity: 0.55; }
  100% { background-position: -100% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after {
    animation: none;
    opacity: 0;
  }
  .header-status__dot::after {
    animation: none;
    opacity: 0;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-height);
  position: relative;
}

/* --- Brand / logo lockup ------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-dark);
}

.brand:hover { text-decoration: none; }

.brand-logo {
  width: auto;
  height: 40px;
  transition: transform var(--transition);
}

.brand:hover .brand-logo { transform: translateY(-1px); }

.brand-pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
  margin-left: -0.15rem;
}

.brand-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  opacity: 0.55;
  animation: header-status-pulse 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brand-pulse::after {
    animation: none;
    opacity: 0;
  }
}

/* --- Hamburger --------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-light-green);
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.nav-toggle:hover {
  border-color: var(--color-primary);
  background-color: var(--color-accent);
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-dark);
  border-radius: var(--radius-pill);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Primary navigation (mobile panel; desktop rules in the 992px block) - */

.primary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.primary-nav.is-open { display: block; }

.nav-list {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.nav-list > li {
  border-bottom: 1px solid var(--color-accent);
}

.nav-list > li:last-child { border-bottom: 0; }

.nav-link,
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  color: var(--color-dark);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: left;
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.nav-link:hover,
.nav-dropdown-toggle:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.nav-link[aria-current='page'],
.nav-dropdown-toggle[aria-current='page'] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.nav-dropdown-toggle svg { transition: transform var(--transition); }
.has-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); }

/* --- Mobile dropdown list (light theme, inside the hamburger panel) ---- */

.nav-dropdown {
  display: none;
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0 0 var(--space-1) var(--space-2);
  border-left: 2px solid var(--color-accent);
}

.has-dropdown.is-open .nav-dropdown { display: block; }

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: var(--space-1) 0;
  color: var(--color-dark);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.nav-dropdown a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.nav-dropdown a[aria-current='page'] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.nav-dropdown__id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.nav-dropdown a[aria-current='page'] .nav-dropdown__id,
.nav-dropdown a:hover .nav-dropdown__id {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.nav-dropdown .nav-dropdown-all {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-accent);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.nav-cta { width: 100%; }

/* --- Desktop header (>= 992px) ----------------------------------------- */

@media (min-width: 992px) {
  :root { --header-height: 76px; }

  .header-inner { gap: var(--space-4); }
  .brand-logo   { height: 46px; }
  .nav-toggle   { display: none; }

  .primary-nav {
    display: flex !important;
    position: static;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
  }

  .nav-list > li {
    position: relative;
    border-bottom: 0;
  }

  /* Nav link with the '>' prompt glyph on hover. */
  .nav-link,
  .nav-dropdown-toggle {
    position: relative;
    width: auto;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }

  .nav-link::before,
  .nav-dropdown-toggle::before {
    content: '>';
    display: inline-block;
    width: 0;
    margin-right: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    opacity: 0;
    transform: translateX(-4px);
    transition: width var(--transition), opacity var(--transition),
                transform var(--transition), margin-right var(--transition);
  }

  .nav-link:hover::before,
  .nav-link:focus-visible::before,
  .nav-dropdown-toggle:hover::before,
  .nav-dropdown-toggle:focus-visible::before {
    width: 0.7em;
    margin-right: 0.35rem;
    opacity: 1;
    transform: translateX(0);
  }

  .nav-link:hover,
  .nav-dropdown-toggle:hover {
    background-color: var(--color-accent);
  }

  /* Blog nav tooltip: why visit the blog, shown on hover. */
  .nav-blog-item { position: relative; }

  .nav-blog-tip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 4px);
    width: max-content;
    max-width: 250px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    background-color: #143A31;
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
    z-index: 60;
  }

  .nav-blog-item:hover .nav-blog-tip,
  .nav-blog-item:focus-within .nav-blog-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* Active page: soft green underline with glow. */
  .nav-link[aria-current='page'],
  .nav-dropdown-toggle[aria-current='page'] {
    position: relative;
    color: var(--color-primary);
  }

  .nav-link[aria-current='page']::after,
  .nav-dropdown-toggle[aria-current='page']::after {
    content: '';
    display: block;
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.2rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(36, 103, 71, 0.55);
  }

  .site-header.is-scrolled .nav-link[aria-current='page']::after,
  .site-header.is-scrolled .nav-dropdown-toggle[aria-current='page']::after {
    bottom: 0.05rem;
  }

  /* --- Courses dropdown: floating DARK terminal panel ----------------- */
  /* These rules apply only on desktop. The mobile dropdown remains a
     light-themed nested list inside the hamburger panel. */

  .nav-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    display: block;
    width: max-content;
    min-width: 320px;
    max-width: 420px;
    margin: 0;
    padding: 0.4rem;
    list-style: none;

    background-color: var(--color-dark);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);

    box-shadow:
      0 22px 44px rgba(20, 58, 49, 0.35),
      0 4px 12px rgba(20, 58, 49, 0.28);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition),
                visibility var(--transition);
    z-index: 20;
  }

  .has-dropdown.is-open .nav-dropdown,
  .has-dropdown:hover .nav-dropdown,
  .has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--color-dark);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(-50%) rotate(45deg);
  }

  /* Force dark theme on every row — no light background can leak in. */
  .nav-dropdown li,
  .nav-dropdown li > a {
    background-color: transparent;
    color: var(--color-white);
  }

  .nav-dropdown li > a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-bottom: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .nav-dropdown li > a:hover,
  .nav-dropdown li > a:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    text-decoration: none;
  }

  .nav-dropdown li > a[aria-current='page'] {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    font-weight: var(--fw-semibold);
  }

  /* ID badge inside the dark panel. */
  .nav-dropdown .nav-dropdown__id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-light-green);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1.4;
  }

  .nav-dropdown li > a:hover .nav-dropdown__id,
  .nav-dropdown li > a:focus-visible .nav-dropdown__id,
  .nav-dropdown li > a[aria-current='page'] .nav-dropdown__id {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
  }

  /* "View all courses" row. */
  .nav-dropdown .nav-dropdown-all {
    margin-top: 0.3rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--color-light-green);
    font-weight: var(--fw-semibold);
  }

  .nav-dropdown .nav-dropdown-all:hover,
  .nav-dropdown .nav-dropdown-all:focus-visible {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* --- CTA ---------------------------------------------------------- */

  .nav-cta {
    width: auto;
    position: relative;
    padding-inline: 1.1rem;
    box-shadow:
      0 0 0 0 rgba(36, 103, 71, 0.35),
      var(--shadow-sm);
    transition: box-shadow var(--transition), background-color var(--transition),
                border-color var(--transition), transform var(--transition-fast);
  }

  .nav-cta::before {
    content: '$_';
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8em;
    opacity: 0.75;
    margin-right: 0.4rem;
    letter-spacing: -0.05em;
  }

  .nav-cta:hover {
    box-shadow:
      0 0 0 4px rgba(36, 103, 71, 0.15),
      0 6px 18px rgba(20, 58, 49, 0.18);
    transform: translateY(-1px);
  }
}

@media (max-width: 380px) {
  .brand-logo  { height: 34px; }
  .brand-pulse { display: none; }
}

/* ==========================================================================
   07. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-block: var(--space-6) var(--space-3);
  margin-top: var(--space-7);
}

.site-footer h2,
.site-footer h3 {
  color: var(--color-white);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

.site-footer p,
.site-footer li,
.site-footer address {
  color: var(--color-white);
  opacity: 0.9;
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.site-footer a {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.site-footer a:hover {
  color: var(--color-white);
  opacity: 1;
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.footer-brand .brand-logo {
  height: 44px;
  margin-bottom: var(--space-2);
}

.footer-tagline {
  font-size: var(--fs-sm);
  opacity: 0.85;
  margin-bottom: var(--space-1);
}

.footer-institutions {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.7;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li + li { margin-top: var(--space-1); }

.footer-contact li {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
}

.footer-contact svg {
  margin-top: 4px;
  color: var(--color-light-green);
  flex-shrink: 0;
}

.footer-contact .label {
  display: block;
  font-size: var(--fs-xs);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--overlay-dark-70);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-xs);
}

.footer-bottom p {
  font-size: var(--fs-xs);
  opacity: 0.8;
  margin: 0;
}

/* ==========================================================================
   08. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  background-color: var(--color-accent);
  border-bottom: 1px solid var(--color-bg);
  padding-block: var(--space-1);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-dark);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: var(--color-light-green);
  margin-right: 0.375rem;
}

.breadcrumb-item a {
  color: var(--color-dark);
  opacity: 0.85;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--color-primary);
  opacity: 1;
  text-decoration: underline;
}

.breadcrumb-item span[aria-current='page'] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   09. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-light-green);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.card__title {
  margin-bottom: var(--space-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.card__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.card__title a:hover { color: var(--color-primary); }

.card__text {
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.85;
  margin-bottom: var(--space-2);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.badge--outline {
  background-color: transparent;
  border: 1px solid var(--color-light-green);
  color: var(--color-dark);
}

.badge--light {
  background-color: var(--color-white);
  color: var(--color-dark);
}

/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-block: var(--space-7) var(--space-8);
  overflow: hidden;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.hero p {
  color: var(--color-white);
  opacity: 0.92;
}

.hero__tagline {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-light-green);
}

.hero__lead {
  max-width: 640px;
  font-size: var(--fs-md);
}

.hero__actions { margin-top: var(--space-4); }

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__media { margin-top: var(--space-5); }

.hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.page-hero {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-block: var(--space-6) var(--space-6);
}

.page-hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.page-hero p {
  color: var(--color-white);
  opacity: 0.92;
  max-width: 720px;
  margin-bottom: 0;
}

.page-hero .badge {
  margin-bottom: var(--space-2);
  background-color: var(--color-white);
  color: var(--color-dark);
}

/* ==========================================================================
   11. SECTIONS AND GRIDS
   ========================================================================== */

.pillar {
  padding: var(--space-4);
  background-color: var(--color-white);
  border-radius: var(--radius);
  border-top: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.pillar h3 { margin-bottom: var(--space-2); }

.pillar ul {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.pillar li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
}

.pillar li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.icon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  height: 100%;
}

.icon-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.icon-item__title {
  margin: 0 0 0.25rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.icon-item__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.85;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* Numbered module list used for the course curriculum section. */
.module-list {
  list-style: none;
  counter-reset: module;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.module-list li {
  counter-increment: module;
  position: relative;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) * 2 + 28px);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  background: var(--color-surface, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}

.module-list li::before {
  content: counter(module, decimal-leading-zero);
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meta-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  background-color: var(--color-accent);
  border-radius: var(--radius);
}

.meta-list div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-bg);
  font-size: var(--fs-sm);
}

.meta-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.meta-list dt {
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.meta-list dd {
  margin: 0;
  color: var(--color-dark);
  opacity: 0.85;
}

.meta-list dd.meta-tbd {
  opacity: 0.6;
  font-style: italic;
}

.meta-fees-link {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.prose { max-width: 74ch; }

.prose h2 { margin-top: var(--space-5); }
.prose h2:first-child { margin-top: 0; }

.prose ul,
.prose ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
}

.prose li { margin-bottom: var(--space-1); }

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-3);
}

.form-row {
  display: grid;
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.form-label .required {
  color: var(--color-primary);
  margin-left: 2px;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-dark);
  opacity: 0.72;
  margin: 0;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  min-height: 48px;
  background-color: var(--color-white);
  border: 1px solid var(--color-light-green);
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-dark);
  opacity: 0.45;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--overlay-shadow-strong);
  outline: none;
}

.form-input[aria-invalid='true'],
.form-select[aria-invalid='true'],
.form-textarea[aria-invalid='true'] {
  border-color: var(--color-dark);
  border-width: 2px;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-bg);
  color: var(--color-dark);
  cursor: not-allowed;
  opacity: 0.85;
}

.form-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.form-error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-dark);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* The `hidden` attribute must win over the flex layout above, otherwise the
   "!" icon renders even when there is no error message yet. */
.form-error[hidden] {
  display: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.form-card {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   13. ALERTS AND FLASH MESSAGES
   ========================================================================== */

.alert {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

.alert svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.alert p { margin: 0; color: var(--color-dark); }

/* The alert box is always light — its title must stay dark even when the
   alert renders inside a dark section (whose h2 rule would force white). */
.alert .alert__title {
  color: var(--color-dark);
  font-size: var(--fs-md);
  margin-bottom: var(--space-1);
}
.alert--success { border-left-color: var(--color-primary); }
.alert--error   { border-left-color: var(--color-dark); }
.alert--error svg { color: var(--color-dark); }
.alert--info    { border-left-color: var(--color-light-green); }
.alert--info svg { color: var(--color-light-green); }

.alert ul {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-3);
}

/* display:flex above beats the UA [hidden] rule — restore it so empty/hidden
   alerts (e.g. the AJAX general-error slot) never render as an empty bar. */
.alert[hidden] {
  display: none;
}

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--space-2);
}

.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq-item.is-open { border-color: var(--color-light-green); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  color: var(--color-dark);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: left;
}

.faq-question:hover { color: var(--color-primary); }

.faq-question__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.faq-question__icon::before,
.faq-question__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}

.faq-question__icon::before { width: 14px; height: 2px; }
.faq-question__icon::after  { width: 2px; height: 14px; }

.faq-item.is-open .faq-question__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.35s;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

.faq-answer__inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--space-3) var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-item.is-open .faq-answer {
    transition: none;
  }
}

.faq-answer p {
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.88;
  margin-bottom: var(--space-2);
}

.faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   15. CTA BANNER
   ========================================================================== */

.cta-banner {
  position: relative;
  padding: var(--space-6) var(--space-3);
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.cta-banner p {
  color: var(--color-white);
  opacity: 0.94;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.cta-banner .btn-group { justify-content: center; }

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */

.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

.mx-auto { margin-inline: auto; }

.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }

.w-100 { width: 100%; }

.rounded    { border-radius: var(--radius); }
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }

.bg-white  { background-color: var(--color-white); }
.bg-accent { background-color: var(--color-accent); }
.bg-bg     { background-color: var(--color-bg); }

.border-top    { border-top: 1px solid var(--color-bg); }
.border-bottom { border-bottom: 1px solid var(--color-bg); }

.divider {
  height: 1px;
  background-color: var(--color-bg);
  border: 0;
  margin-block: var(--space-5);
}

/* ==========================================================================
   17. SCROLL REVEAL AND MOTION
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; }
.js .reveal-group > .reveal:nth-child(2) { transition-delay: 60ms; }
.js .reveal-group > .reveal:nth-child(3) { transition-delay: 120ms; }
.js .reveal-group > .reveal:nth-child(4) { transition-delay: 180ms; }
.js .reveal-group > .reveal:nth-child(5) { transition-delay: 240ms; }
.js .reveal-group > .reveal:nth-child(6) { transition-delay: 300ms; }

.reveal-ready .reveal {
  transition-property: opacity, transform;
}

/* ==========================================================================
   18. RESPONSIVE BREAKPOINTS
   --------------------------------------------------------------------------
   NOTE: The desktop dropdown panel styling lives in section 06 (HEADER).
   The old white-panel rules that used to live here were removed because
   they overrode the dark panel and made the course names invisible.
   ========================================================================== */

@media (min-width: 600px) {
  :root {
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.875rem;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .meta-list div { flex-wrap: nowrap; }
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-8); }

  .hero { padding-block: var(--space-8) var(--space-9); }

  .container { padding-inline: var(--space-4); }

  .grid { gap: var(--space-4); }

  .card { padding: var(--space-4); }
  .form-card { padding: var(--space-5); }

  .breadcrumbs { padding-block: var(--space-2); }
}

@media (min-width: 992px) {
  :root {
    --header-height: 80px;
    --fs-2xl: 2.5rem;
    --fs-3xl: 3.25rem;
  }

  .header-inner { gap: var(--space-4); }
  .brand-logo   { height: 48px; }
  .nav-toggle   { display: none; }

  /* The primary-nav, nav-list, dropdown panel and CTA rules for desktop
     are all defined inside section 06 (HEADER AND NAVIGATION) to keep the
     header self-contained. Nothing header-related is defined here. */

  /* Grids */
  .grid--3,
  .icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero--split .hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-6);
    align-items: center;
  }

  .hero--split .hero__media { margin-top: 0; }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 0.9fr 0.8fr 1.2fr;
    gap: var(--space-4);
  }

  .site-footer {
    padding-block: var(--space-7) var(--space-4);
  }
}

@media (min-width: 1200px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero { padding-block: var(--space-9) var(--space-9); }
}

/* ==========================================================================
   19. REDUCED MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .card:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .cta-banner,
  .breadcrumbs,
  .skip-link {
    display: none !important;
  }

  body {
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 12pt;
  }

  a {
    color: var(--color-dark);
    text-decoration: underline;
  }

  .card,
  .form-card {
    box-shadow: none;
    border: 1px solid var(--color-light-green);
    break-inside: avoid;
  }
}

/* ==========================================================================
   20. COURSE PAGE LAYOUT
   ========================================================================== */

.course-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.course-content h2 {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-bg);
}

.course-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.course-content p { max-width: 72ch; }

.course-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.course-sidebar .form-card { padding: var(--space-3); }
.course-sidebar .meta-list { padding: var(--space-2); }
.course-sidebar .meta-list div { flex-wrap: wrap; }
.course-sidebar .badge { font-size: 0.75rem; }

@media (min-width: 992px) {
  .course-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-6);
    align-items: start;
  }

  .course-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-3));
  }
}

@media (min-width: 1200px) {
  .course-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

/* ==========================================================================
   21. NUMBERED PROCESS STEPS
   ========================================================================== */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}

.step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.step__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.step__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.88;
  line-height: var(--lh-base);
}

@media (min-width: 768px) {
  .step { padding: var(--space-4); gap: var(--space-4); }
  .step__number { width: 52px; height: 52px; font-size: var(--fs-lg); }
}

/* ==========================================================================
   22. MAP PLACEHOLDER
   ========================================================================== */

.map-placeholder {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
}

.map-placeholder__inner {
  padding: var(--space-6) var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-placeholder__inner .card__icon { margin-bottom: 0; }

.map-placeholder iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ==========================================================================
   23. HERO ENHANCEMENTS
   ========================================================================== */

.hero--rich {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-8);
  background-color: var(--color-dark);
  color: var(--color-white);
}

.hero--rich::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at 30% 20%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, black 30%, transparent 75%);
  opacity: 0.7;
  z-index: 1;
}

.hero--rich::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 55%;
  height: 90%;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(36, 103, 71, 0.55) 0%,
    rgba(36, 103, 71, 0.15) 40%,
    transparent 70%
  );
  filter: blur(30px);
  z-index: 1;
}

.hero--rich .container {
  position: relative;
  z-index: 2;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-split__text  { max-width: 620px; }
.hero-split__media { position: relative; }

.hero-headline {
  font-size: var(--fs-2xl);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: var(--color-white);
}

.hero-headline__muted {
  display: block;
  color: var(--color-light-green);
  font-weight: var(--fw-semibold);
}

.hero-headline__primary {
  display: block;
  color: var(--color-white);
}

.hero-subline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  opacity: 0.92;
  margin-bottom: var(--space-4);
}

.hero-subline__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}

.hero-subline__tag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(36, 103, 71, 0.35);
  animation: hero-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero-stat__value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-stat__value .hero-stat__accent { color: var(--color-light-green); }

.hero-stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  opacity: 0.72;
}

@media (min-width: 768px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .hero--rich { padding-block: var(--space-9) var(--space-9); }

  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* ==========================================================================
   24. TERMINAL COMPONENT — macOS Terminal.app theme
   --------------------------------------------------------------------------
   Local theme, scoped to `.terminal` only. The rest of the site uses the
   brand palette defined in section 01.
   ========================================================================== */

.terminal {
  --term-bg:        #1e1e1e;
  --term-chrome:    #2b2b2b;
  --term-chrome-b:  #3a3a3a;
  --term-fg:        #d4d4d4;
  --term-fg-dim:    #8a8a8a;
  --term-fg-strong: #e6e6e6;

  --term-dot-red:    #ff5f56;
  --term-dot-amber:  #ffbd2e;
  --term-dot-green:  #27c93f;

  --term-cmd:        #a8cc8c;
  --term-flag:       #de935f;
  --term-arg:        #f0c674;
  --term-string:     #b5bd68;
  --term-comment:    #8a8a8a;
  --term-prompt-u:   #b5bd68;
  --term-prompt-p:   #81a2be;
  --term-cursor:     #d4d4d4;

  --terminal-min-height: 340px;

  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--term-bg);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
}

.terminal__chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.85rem;
  background-color: var(--term-chrome);
  border-bottom: 1px solid var(--term-chrome-b);
  flex-shrink: 0;
}

.terminal__dots {
  display: inline-flex;
  gap: 8px;
}

.terminal__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.terminal__dot:nth-child(1) { background-color: var(--term-dot-red); }
.terminal__dot:nth-child(2) { background-color: var(--term-dot-amber); }
.terminal__dot:nth-child(3) { background-color: var(--term-dot-green); }

.terminal__title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--term-fg-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminal__replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--term-fg-dim);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.terminal__replay:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--term-fg-strong);
}

.terminal__replay svg { transition: transform var(--transition); }
.terminal__replay:hover svg { transform: rotate(-90deg); }

.terminal__body {
  position: relative;
  flex: 1 1 auto;
  height: var(--terminal-min-height);
  max-height: var(--terminal-min-height);
  margin: 0;
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--term-fg);
  overflow: hidden;
  white-space: pre;
}

.terminal__body code {
  display: block;
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  position: absolute;
  inset: var(--space-3);
  overflow: hidden;
}

.terminal__line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.7em;
}

.terminal__line--output  { color: var(--term-fg-strong); }
.terminal__line--ok      { color: var(--term-string); }
.terminal__line--warn    { color: var(--term-flag); }
.terminal__line--comment { color: var(--term-comment); }

.terminal__line--prompt {
  color: var(--term-fg);
  font-weight: var(--fw-regular);
}

.terminal__user {
  color: var(--term-prompt-u);
  font-weight: var(--fw-semibold);
}

.terminal__path {
  color: var(--term-prompt-p);
  font-weight: var(--fw-semibold);
}

.terminal__prompt-symbol {
  color: var(--term-fg-dim);
  font-weight: var(--fw-regular);
}

.terminal__cmd {
  color: var(--term-cmd);
  font-weight: var(--fw-semibold);
}

.terminal__flag { color: var(--term-flag); }
.terminal__arg  { color: var(--term-arg); }

.terminal__cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background-color: var(--term-cursor);
  animation: terminal-blink 1s steps(2, start) infinite;
}

@keyframes terminal-blink {
  to { opacity: 0; }
}

@media (max-width: 480px) {
  .terminal { --terminal-min-height: 260px; }

  .terminal__body {
    font-size: 12px;
    padding: var(--space-2);
  }

  .terminal__body code { inset: var(--space-2); }

  .terminal__chrome { padding: 0.5rem 0.7rem; }

  .terminal__dot { width: 10px; height: 10px; }
}

@media (min-width: 481px) and (max-width: 991px) {
  .terminal { --terminal-min-height: 300px; }
}

@media (min-width: 992px) {
  .terminal { --terminal-min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal__cursor {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   25. HOME SECTION ENHANCEMENTS
   ========================================================================== */

.reason {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.reason:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-light-green);
}

.reason__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.reason__body h3 {
  font-size: var(--fs-base);
  margin: 0 0 0.25rem;
}

.reason__body p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.85;
}

.highlight-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg,
      var(--color-primary) 0%,
      var(--color-dark) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.highlight-strip h2,
.highlight-strip h3 {
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.highlight-strip p {
  color: var(--color-white);
  opacity: 0.92;
  margin: 0;
}

.highlight-strip .btn-group { justify-content: flex-start; }

@media (min-width: 768px) {
  .highlight-strip {
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
  }

  .highlight-strip .btn-group {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

.pillar--accent {
  border-top-width: 4px;
  border-top-color: var(--color-primary);
}

.pillar--on-dark {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 4px solid var(--color-primary);
}

.pillar--on-dark h3,
.pillar--on-dark p,
.pillar--on-dark li {
  color: var(--color-white);
}

.pillar--on-dark li::before {
  background-color: var(--color-light-green);
}

/* ==========================================================================
   26. REVEAL STAGGER (extended)
   ========================================================================== */

.js .reveal-group > .reveal:nth-child(7)  { transition-delay: 360ms; }
.js .reveal-group > .reveal:nth-child(8)  { transition-delay: 420ms; }
.js .reveal-group > .reveal:nth-child(9)  { transition-delay: 480ms; }
.js .reveal-group > .reveal:nth-child(10) { transition-delay: 540ms; }
.js .reveal-group > .reveal:nth-child(11) { transition-delay: 600ms; }
.js .reveal-group > .reveal:nth-child(12) { transition-delay: 660ms; }

.hero-trust {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  color: var(--color-white);
  opacity: 0.78;
  line-height: 1.6;
  max-width: 560px;
}
/* ---------- Service area strip (local SEO) ---------- */
.service-area-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.service-area {
  margin: 0;
  padding: 18px 24px;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--overlay-shadow-strong);
  border-radius: var(--radius-lg);
}

.service-area strong {
  color: var(--color-primary);
}


@media (max-width: 480px) {
  .hero-trust { font-size: var(--fs-xs); }
}

/* ==========================================================================
   27. HERO RESPONSIVE POLISH
   ========================================================================== */

@media (max-width: 991px) {
  .hero--rich { padding-block: var(--space-6) var(--space-7); }

  .hero--rich::after {
    width: 80%;
    right: -30%;
    top: 0;
    height: 70%;
  }

  .hero-split { gap: var(--space-5); }
}

@media (max-width: 767px) {
  .hero--rich { padding-block: var(--space-5) var(--space-6); }

  .hero-headline {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .hero-subline {
    font-size: var(--fs-base);
    gap: 0.35rem;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    margin-top: var(--space-3);
  }

  .hero__actions .btn { width: 100%; }

  .hero-trust {
    margin-top: var(--space-4);
    padding-top: var(--space-2);
  }
}

@media (max-width: 480px) {
  .hero--rich { padding-block: var(--space-5) var(--space-6); }

  .hero-headline { font-size: 1.5rem; }

  .hero-split { gap: var(--space-4); }

  .hero--rich::after { display: none; }

  .hero--rich::before {
    background-size: 28px 28px;
    opacity: 0.5;
  }
}

/* ==========================================================================
   28. CVE TICKER
   --------------------------------------------------------------------------
   A rotating CVE feed displayed in the header status bar. The ticker is
   only shown at desktop widths (the status bar itself is hidden below
   992px, so the ticker inherits that visibility).

   Layout notes
   ------------
   The ticker sits inside .header-status__group--ticker, which is a flex
   container with `flex: 1 1 auto` and `min-width: 0`. The ticker itself is
   a flex container with the heading pill fixed and the viewport flexible.

   The viewport MUST be allowed to occupy a real width. If it is allowed to
   shrink to zero (which `min-width: 0` permits), the absolutely positioned
   entries inside the rotated layout take zero width and become invisible
   even though their opacity is 1. To prevent that, the viewport has a
   concrete `min-width` at every width where the ticker is visible.
   ========================================================================== */

.header-status__group--ticker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.cve-ticker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 380px;       /* reserve real space in the status bar */
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}

/* --- Label --------------------------------------------------------------- */

.cve-ticker__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--color-white);
  text-transform: uppercase;
  flex-shrink: 0;
}

.cve-ticker__heading-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(36, 103, 71, 0.35);
  animation: header-status-pulse 2.4s ease-out infinite;
}

.cve-ticker__sample {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background-color: var(--color-light-green);
  color: var(--color-dark);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

/* --- Viewport and entries ------------------------------------------------ */

.cve-ticker__viewport {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 260px;       /* real minimum — never collapses to zero */
  height: 16px;
  overflow: hidden;
}

/* Default (no-JS) state: entries are visible and the fixed-height viewport
   clips the display to the first entry. */
.cve-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 16px;
  height: 16px;
}

/* Once JS has confirmed it is running by adding `.js-rotating` to the
   viewport, entries are stacked absolutely and only `.is-active` is
   visible. */
.cve-ticker__viewport.js-rotating .cve-ticker__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.cve-ticker__viewport.js-rotating .cve-ticker__item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- Severity badge ------------------------------------------------------ */

.cve-ticker__severity {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1.4;
  border: 1px solid transparent;
}

.cve-ticker__severity--critical {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cve-ticker__severity--high {
  background-color: rgba(110, 135, 129, 0.25);
  color: var(--color-light-green);
  border-color: var(--color-light-green);
}

.cve-ticker__severity--medium {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.cve-ticker__severity--low {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0.75;
}

/* --- Entry pieces -------------------------------------------------------- */

.cve-ticker__id {
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-decoration: none;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

a.cve-ticker__id:hover,
a.cve-ticker__id:focus-visible {
  color: var(--color-light-green);
  text-decoration: underline;
}

.cve-ticker__sep {
  color: var(--color-white);
  opacity: 0.35;
  flex-shrink: 0;
}

.cve-ticker__product {
  color: var(--color-white);
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cve-ticker__score {
  color: var(--color-white);
  opacity: 0.78;
  flex-shrink: 0;
}

.cve-ticker__score strong {
  color: var(--color-white);
  font-weight: var(--fw-bold);
}

.cve-ticker__note {
  color: var(--color-white);
  opacity: 0.62;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On mid-desktop widths, hide the note so the ticker fits comfortably. */
@media (min-width: 992px) and (max-width: 1199px) {
  .cve-ticker__note,
  .cve-ticker__sep--note {
    display: none;
  }

  .cve-ticker {
    min-width: 320px;
  }
}

/* On narrower desktops, hide the tagline comment first — the ticker is
   more valuable than the tagline, and the tagline is repeated in the
   footer anyway. */
@media (min-width: 992px) and (max-width: 1099px) {
  .header-status__comment {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cve-ticker__item {
    transition: none;
  }

  .cve-ticker__heading-dot {
    animation: none;
  }
}

/* ==========================================================================
   29. COURSES PAGE
   --------------------------------------------------------------------------
   Visual components used on /courses:
     - Enriched hero (page-hero--rich)
     - Animated learning path diagram
     - Enhanced course cards with illustration area
     - Persona panels
     - Four-stage timeline
     - Outcome strip
   ========================================================================== */

/* --- Enriched page hero ------------------------------------------------- */

.page-hero--rich {
  position: relative;
  overflow: hidden;
}

.page-hero--rich::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 20% 10%, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 20% 10%, black 40%, transparent 80%);
  opacity: 0.8;
  z-index: 1;
}

.page-hero--rich::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -15%;
  width: 45%;
  height: 140%;
  background: radial-gradient(
    circle at center,
    rgba(36, 103, 71, 0.55) 0%,
    rgba(36, 103, 71, 0.12) 45%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}

.page-hero--rich .container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Course path diagram
   --------------------------------------------------------------------------
   Vertical on mobile, horizontal on desktop. A grey line runs behind the
   nodes; a green fill animates across it when the path scrolls into view.
   ========================================================================== */

.course-path {
  position: relative;
  padding-block: var(--space-4);
}

.course-path__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background-color: var(--color-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.course-path__line-fill {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0%,
    var(--color-light-green) 100%
  );
  transition: height 1400ms ease-out;
}

.course-path.is-visible .course-path__line-fill {
  height: 100%;
}

.course-path__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  position: relative;
}

.course-path__node {
  position: relative;
  padding-left: 52px;
}

.course-path__link {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.course-path__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-light-green);
  text-decoration: none;
}

/* Small connector dot on the line. */
.course-path__node::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-bg);
  z-index: 1;
}

.course-path__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.course-path__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.course-path__label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.course-path__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  line-height: var(--lh-snug);
}

.course-path__sub {
  font-size: var(--fs-xs);
  color: var(--color-dark);
  opacity: 0.7;
}

/* Desktop: horizontal path with the line across the top. */
@media (min-width: 992px) {
  .course-path {
    padding-block: var(--space-5) var(--space-6);
  }

  .course-path__line {
    top: 40px;
    bottom: auto;
    left: 8%;
    right: 8%;
    width: auto;
    height: 2px;
  }

  .course-path__line-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(
      to right,
      var(--color-primary) 0%,
      var(--color-light-green) 100%
    );
    transition: width 1600ms ease-out;
  }

  .course-path.is-visible .course-path__line-fill {
    width: 100%;
    height: 100%;
  }

  .course-path__nodes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .course-path__node {
    padding-left: 0;
    padding-top: 72px;
    text-align: center;
  }

  .course-path__node::before {
    left: 50%;
    top: 32px;
    transform: translateX(-50%);
  }

  .course-path__link {
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
    text-align: center;
    padding: var(--space-3) var(--space-2);
  }

  .course-path__body {
    align-items: center;
  }

  .course-path__title {
    font-size: var(--fs-sm);
    line-height: 1.3;
  }

  .course-path__sub {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-path__line-fill {
    transition: none;
  }

  .course-path .course-path__line-fill {
    height: 100%;
    width: 100%;
  }
}

/* ==========================================================================
   Enhanced course card
   ========================================================================== */

.course-grid {
  /* Slightly larger gap than the default grid so the illustrated cards breathe. */
  gap: var(--space-4);
}

.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-light-green);
}

/* --- Media area --------------------------------------------------------- */

.course-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--color-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-card__glyph {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  opacity: 0.95;
}

/* Decorative pattern overlay behind the glyph. */
.course-card__pattern {
  position: absolute;
  inset: 0;
  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;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  z-index: 1;
}

/* Six accent gradients — one per course ID. */
.course-card__media--shield {
  background:
    radial-gradient(circle at 30% 20%, rgba(110, 135, 129, 0.35), transparent 60%),
    linear-gradient(135deg, #246747 0%, #143a31 100%);
}

.course-card__media--code {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(135deg, #143a31 0%, #246747 100%);
}

.course-card__media--network {
  background:
    radial-gradient(circle at 20% 80%, rgba(36, 103, 71, 0.5), transparent 60%),
    linear-gradient(135deg, #143a31 0%, #0e2a24 100%);
}

.course-card__media--cpu {
  background:
    radial-gradient(circle at 80% 20%, rgba(110, 135, 129, 0.4), transparent 55%),
    linear-gradient(160deg, #246747 0%, #143a31 100%);
}

.course-card__media--terminal {
  background:
    radial-gradient(circle at 25% 25%, rgba(110, 135, 129, 0.35), transparent 60%),
    linear-gradient(135deg, #0e2a24 0%, #246747 100%);
}

.course-card__media--server {
  background:
    radial-gradient(circle at 70% 70%, rgba(36, 103, 71, 0.55), transparent 60%),
    linear-gradient(135deg, #143a31 0%, #246747 100%);
}

/* --- Card body ---------------------------------------------------------- */

.course-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-3);
}

.course-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.course-card__short {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.course-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.course-card__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.course-card__title a:hover {
  color: var(--color-primary);
}

.course-card__text {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.85;
}

.course-card__footer {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-bg);
}

/* ==========================================================================
   Persona panels
   ========================================================================== */

.persona-grid {
  gap: var(--space-4);
}

.persona {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.persona:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-light-green);
}

.persona__media {
  position: relative;
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #143a31 0%, #0e2a24 100%);
}

.persona__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.persona__media--terminal {
  background:
    radial-gradient(circle at 30% 30%, rgba(36, 103, 71, 0.4), transparent 60%),
    linear-gradient(135deg, #143a31 0%, #0e2a24 100%);
}

.persona__media--code {
  background:
    radial-gradient(circle at 70% 40%, rgba(110, 135, 129, 0.35), transparent 60%),
    linear-gradient(135deg, #246747 0%, #143a31 100%);
}

.persona__media--network {
  background:
    radial-gradient(circle at 40% 70%, rgba(110, 135, 129, 0.4), transparent 60%),
    linear-gradient(135deg, #143a31 0%, #246747 100%);
}

.persona__glyph {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  opacity: 0.9;
}

.persona__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 75%);
  z-index: 1;
}

.persona__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.persona__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.persona__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.88;
  line-height: var(--lh-base);
}

.persona__lead {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-bg);
  font-size: var(--fs-sm);
  color: var(--color-dark);
}

.persona__lead a {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* ==========================================================================
   Four-stage timeline
   ========================================================================== */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  position: relative;
}

.timeline__step {
  position: relative;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.timeline__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.timeline__dot {
  display: none;
}

.timeline__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.timeline__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.85;
  line-height: var(--lh-base);
}

@media (min-width: 768px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    padding-top: 28px;
  }

  /* Connector line behind the dots. */
  .timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(
      to right,
      var(--color-primary) 0%,
      var(--color-light-green) 100%
    );
    opacity: 0.35;
    border-radius: var(--radius-pill);
  }

  .timeline__step {
    text-align: center;
  }

  .timeline__dot {
    display: block;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-accent);
  }
}

/* ==========================================================================
   Outcome strip
   ========================================================================== */

.outcome-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.outcome-strip__text h2 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

.outcome-strip__text p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.88;
}

.outcome-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.outcome-strip__list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.outcome-strip__list li svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .outcome-strip {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    align-items: center;
  }

  .outcome-strip__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   30. BACKGROUND MOTION
   --------------------------------------------------------------------------
   A fixed, decorative layer behind the entire page:
     - A drifting grid overlay
     - A slowly sweeping diagonal beam
     - A set of floating monospace glyphs

   Everything is CSS-driven. No JavaScript, no canvas, no rendering loop.
   Under prefers-reduced-motion, all motion is stopped and the layers are
   either hidden (the beam and glyphs) or shown statically (the grid).

   The layer is fixed at z-index 0, with pointer-events: none, so it never
   intercepts clicks and never competes with content.
   ========================================================================== */

.bg-motion {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* The layer fades in over the first moment of page load so it does not
     flash into view before fonts and layout settle. */
  animation: bg-motion-enter 1200ms ease-out both;
}

@keyframes bg-motion-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Grid ---------------------------------------------------------------- */

.bg-motion__grid {
  position: absolute;
  inset: -10%; /* oversize so the drift never exposes an edge */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0;
  /* On very light section backgrounds this would be invisible; on the
     page background (#dde5e1) it shows as a subtle structural texture. */
  mix-blend-mode: multiply;
  opacity: 0.9;
  animation: bg-motion-grid-drift 90s linear infinite;
}

@keyframes bg-motion-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(60px, 60px, 0); }
}

/* --- Beam ---------------------------------------------------------------- */

.bg-motion__beam {
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -40%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(36, 103, 71, 0.06) 40%,
    rgba(36, 103, 71, 0.1) 50%,
    rgba(36, 103, 71, 0.06) 60%,
    transparent 100%
  );
  transform: rotate(18deg);
  animation: bg-motion-beam-sweep 28s linear infinite;
  animation-delay: 2s;
  opacity: 0.9;
}

@keyframes bg-motion-beam-sweep {
  from { transform: translate3d(0, 0, 0) rotate(18deg); }
  to   { transform: translate3d(240vw, 0, 0) rotate(18deg); }
}

/* --- Glyphs -------------------------------------------------------------- */

.bg-motion__glyphs {
  position: absolute;
  inset: 0;
}

.bg-motion__glyph {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  color: var(--color-dark);
  /* Opacity is set inline per glyph (3%–9%). The animation drifts the
     glyph upward and adds a slow horizontal sway. */
  animation-name: bg-motion-glyph-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  user-select: none;
}

@keyframes bg-motion-glyph-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(14px, -40vh, 0);
  }
  100% {
    transform: translate3d(0, -80vh, 0);
  }
}

/* ==========================================================================
   Ensure page content sits above the background layer
   ========================================================================== */

/* The site footer and header already have their own stacking contexts.
   The main content needs a z-index above the background but below the
   sticky header (which uses --z-header). */
body > main,
body > .site-footer {
  position: relative;
  z-index: 1;
}

/* The skip link is at z-index 999 already and sits above everything. */

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bg-motion__grid,
  .bg-motion__beam,
  .bg-motion__glyph {
    animation: none;
  }

  /* Keep the grid as a static texture; hide the beam and glyphs entirely
     to avoid visual noise when motion is disabled. */
  .bg-motion__beam,
  .bg-motion__glyphs {
    display: none;
  }
}
/* ==========================================================================
   Demo lecture CTA button — the tempting button on the Courses page hero
   ========================================================================== */

.btn-demo {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.85rem 1.6rem;
  position: relative;
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: 0 0 0 2px var(--color-white), 0 8px 24px rgba(255, 255, 255, 0.25);
  animation: demo-pulse 2.4s ease-in-out infinite;
}

.btn-demo:hover {
  box-shadow: 0 0 0 2px var(--color-white), 0 12px 32px rgba(255, 255, 255, 0.35);
}

.btn-demo__label {
  font-size: var(--fs-md);
  font-weight: 700;
}

.btn-demo__sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  opacity: 0.75;
}

@keyframes demo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-demo { animation: none; }
}

/* ==========================================================================
   Demo lectures page — schedule cards
   ========================================================================== */

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.demo-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 12px;
  padding: var(--space-5);
  box-shadow: 0 2px 12px var(--overlay-shadow);
  border-top: 4px solid var(--color-primary);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--overlay-shadow-strong);
}

.demo-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.demo-card__mode {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-bg);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

.demo-card__seats {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-dark);
}

.demo-card__seats--full {
  color: #a33;
}

.demo-card__title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-dark);
}

.demo-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-light-green);
  margin: 0 0 var(--space-4);
  flex: 1;
}

.demo-card__meta {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-accent);
  border-radius: 8px;
  font-size: var(--fs-sm);
}

.demo-card__meta > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-2);
}

.demo-card__meta dt {
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.demo-card__meta dd {
  margin: 0;
  color: var(--color-dark);
}

.demo-card__cta {
  align-self: stretch;
  justify-content: center;
}

.demo-note {
  color: var(--color-light-green);
  font-size: var(--fs-sm);
}

.text-center { text-align: center; }

/* ==========================================================================
   Brochure download popup
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(14, 26, 22, 0.72);
  backdrop-filter: blur(4px);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

/* The scrollable region sits INSIDE the card so the absolutely-positioned
   close button never scrolls away or gets clipped by overflow. */
.modal-scroll {
  overflow-y: auto;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: inherit;
}

.modal-card h3 {
  margin: 0 0 0.5rem;
  color: var(--color-dark);
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: var(--color-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-light-green);
  color: var(--color-white);
}

.modal-sub {
  margin: 0 0 1.25rem;
  color: var(--color-dark);
  opacity: 0.8;
  font-size: var(--fs-sm);
}

.modal-card .form-field {
  margin-bottom: 1rem;
}

.modal-note {
  margin: 1rem 0 0;
  font-size: var(--fs-xs);
  color: var(--color-dark);
  opacity: 0.65;
  text-align: center;
}

.modal-card .btn[disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* DPDPA consent checkbox (brochure popup) */
.form-consent {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0 0 0.25rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.form-consent input[type='checkbox'] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-consent label {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-dark);
  cursor: pointer;
}

.form-consent label a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Cookie consent banner (DPDP-aligned) */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  background: #0e1a16;
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.cookie-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #e8f0ec;
}

.cookie-banner__text a {
  color: #7fd6a8;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   College session request — AJAX success panel
   ========================================================================== */

/* .form sets display:grid, which beats the UA [hidden] rule — restore it. */
.form[hidden] {
  display: none;
}

.college-success {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.college-success[hidden] {
  display: none;
}

.college-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background-color: var(--color-light-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.college-success h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-dark);
  animation: fade-up 0.45s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.college-success p {
  margin: 0;
  color: var(--color-dark);
  opacity: 0.85;
  animation: fade-up 0.45s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .college-success__icon,
  .college-success h3,
  .college-success p {
    animation: none;
  }
}

/* ==========================================================================
   27. INSTITUTIONS PAGE
   --------------------------------------------------------------------------
   Eye-catching, animated landing for colleges: glowing hero with drifting
   orbs, topic marquee, pain-point cards, premium offer cards, practitioner
   statement band, animated partnership timeline and a closing contact CTA.
   ========================================================================== */

/* ---------- Hero ---------- */
.inst-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(46, 139, 87, 0.28), transparent 60%),
    radial-gradient(900px 480px at 8% 110%, rgba(36, 103, 71, 0.32), transparent 60%),
    linear-gradient(160deg, #0b1412 0%, #0e1a16 55%, #12241d 100%);
  color: var(--color-white);
  padding-block: var(--space-7) var(--space-6);
}

.inst-hero::before {
  /* faint grid texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}

.inst-hero__orbs { position: absolute; inset: 0; pointer-events: none; }

.inst-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: inst-orb-drift 14s ease-in-out infinite alternate;
}

.inst-hero__orb--one {
  width: 340px; height: 340px;
  top: -90px; right: 6%;
  background: #2e8b57;
}

.inst-hero__orb--two {
  width: 260px; height: 260px;
  bottom: -70px; left: 4%;
  background: #1d5c3c;
  animation-delay: -5s;
}

.inst-hero__orb--three {
  width: 180px; height: 180px;
  top: 38%; left: 44%;
  background: #3aa66b;
  opacity: 0.28;
  animation-delay: -9s;
}

@keyframes inst-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-46px, 38px) scale(1.12); }
}

.inst-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.inst-hero .badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  backdrop-filter: blur(6px);
}

.inst-hero__title {
  color: var(--color-white);
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.inst-hero__lead {
  color: var(--color-white);
  opacity: 0.9;
  font-size: var(--fs-md);
  max-width: 640px;
  margin-bottom: var(--space-4);
}

.inst-hero__chips {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.inst-hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  backdrop-filter: blur(6px);
}

.inst-hero__chips svg { color: #7fd6a4; flex-shrink: 0; }

/* staggered hero entrance (works with the existing .reveal system) */
.js .hero-d1 { transition-delay: 60ms; }
.js .hero-d2 { transition-delay: 160ms; }
.js .hero-d3 { transition-delay: 260ms; }
.js .hero-d4 { transition-delay: 360ms; }
.js .hero-d5 { transition-delay: 460ms; }

/* scroll cue */
.inst-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  z-index: 1;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  display: block;
}

.inst-hero__scroll span {
  display: block;
  width: 4px;
  height: 8px;
  margin: 7px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  animation: inst-scroll-dot 1.8s ease-in-out infinite;
}

@keyframes inst-scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Topic marquee ---------- */
.topic-marquee {
  overflow: hidden;
  background: var(--color-dark);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-2);
}

.topic-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: max-content;
  animation: inst-marquee 32s linear infinite;
}

.topic-marquee:hover .topic-marquee__track { animation-play-state: paused; }

.topic-marquee__item {
  color: var(--color-white);
  opacity: 0.85;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topic-marquee__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

@keyframes inst-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Gap section: split + pain cards ---------- */
.inst-split {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.inst-split__intro h2 { margin-bottom: var(--space-2); }

.pain-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.pain-card {
  position: relative;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(11, 20, 18, 0.05);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 20, 18, 0.1);
}

.pain-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.pain-card h3 {
  margin: 0 0 0.35rem;
  font-size: var(--fs-base);
}

.pain-card p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.85;
}

.inst-closer {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-md);
  padding: var(--space-4);
  background: var(--color-accent);
  border-radius: var(--radius-lg);
}

.inst-closer em { font-style: normal; font-weight: var(--fw-semibold); }

/* ---------- Offer cards: premium treatment ---------- */
.icon-grid--offer .icon-item {
  position: relative;
  overflow: hidden;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.icon-grid--offer .icon-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), #3aa66b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms ease;
}

.icon-grid--offer .icon-item:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 139, 87, 0.35);
  box-shadow: 0 18px 36px rgba(11, 20, 18, 0.12);
}

.icon-grid--offer .icon-item:hover::before { transform: scaleX(1); }

.icon-grid--offer .icon-item__icon {
  background: linear-gradient(135deg, var(--color-primary), #1d5c3c);
  color: var(--color-white);
  box-shadow: 0 6px 14px rgba(46, 139, 87, 0.35);
}

/* ---------- Practitioner statement band ---------- */
.inst-statement {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 320px at 50% 120%, rgba(46, 139, 87, 0.35), transparent 65%),
    linear-gradient(150deg, #0b1412, #12241d);
  padding-block: var(--space-7);
  text-align: center;
}

.inst-statement blockquote {
  margin: 0 auto;
  max-width: 820px;
  position: relative;
  z-index: 1;
}

.inst-statement blockquote p {
  color: var(--color-white);
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  line-height: 1.35;
  font-weight: var(--fw-medium);
  text-wrap: balance;
  margin: 0;
}

.inst-statement blockquote strong {
  color: #7fd6a4;
  font-weight: var(--fw-bold);
}

.inst-statement blockquote::before {
  content: "\201C";
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.7;
  margin-bottom: var(--space-1);
}

/* ---------- Partnership timeline ---------- */
.steps-timeline {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  position: relative;
}

.step-node {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + 6px);
  box-shadow: 0 2px 10px rgba(11, 20, 18, 0.05);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.step-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11, 20, 18, 0.1);
}

.step-node__marker {
  position: absolute;
  top: -22px;
  left: var(--space-4);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #1d5c3c);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  box-shadow: 0 8px 18px rgba(46, 139, 87, 0.4);
}

.step-node__pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.step-node__title {
  margin: 0 0 0.4rem;
  font-size: var(--fs-md);
}

.step-node__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-dark);
  opacity: 0.88;
}

/* ---------- Closing CTA ---------- */
.inst-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(800px 380px at 90% 0%, rgba(46, 139, 87, 0.35), transparent 60%),
    linear-gradient(155deg, #0b1412 0%, #10231b 60%, #143325 100%);
  color: var(--color-white);
  padding: var(--space-6) var(--space-3);
}

.inst-cta__orbs { position: absolute; inset: 0; pointer-events: none; }

.inst-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: inst-orb-drift 16s ease-in-out infinite alternate;
}

.inst-cta__orb--one {
  width: 300px; height: 300px;
  top: -100px; right: -40px;
  background: #2e8b57;
}

.inst-cta__orb--two {
  width: 220px; height: 220px;
  bottom: -80px; left: -30px;
  background: #1d5c3c;
  animation-delay: -7s;
}

.inst-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.inst-cta__eyebrow { color: #7fd6a4; }

.inst-cta h2 {
  color: var(--color-white);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  text-wrap: balance;
}

.inst-cta .lead {
  color: var(--color-white);
  opacity: 0.9;
  margin-bottom: var(--space-4);
}

.inst-cta__contacts {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  text-align: left;
}

.inst-cta__contacts a,
.inst-cta__static {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.inst-cta__contacts a:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.inst-cta__contacts svg {
  color: #7fd6a4;
  flex-shrink: 0;
  margin-top: 2px;
}

.inst-cta__contacts .label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 0.15rem;
}

.inst-cta__contacts address { font-style: normal; }

/* ---------- Institutions: responsive ---------- */
@media (min-width: 700px) {
  .pain-grid { grid-template-columns: repeat(3, 1fr); }

  .inst-split { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .inst-split__intro { position: sticky; top: var(--space-4); }

  .inst-cta { padding: var(--space-7) var(--space-6); }
  .inst-cta__contacts { grid-template-columns: repeat(3, 1fr); }
  .inst-cta__contacts a,
  .inst-cta__static { flex-direction: column; }
}

@media (min-width: 960px) {
  /* horizontal timeline with a line that draws itself on reveal */
  .steps-timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    padding-top: var(--space-4);
  }

  .steps-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    right: 6%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), #3aa66b);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1200ms ease 200ms;
  }

  .steps-timeline.reveal.is-visible::before { transform: scaleX(1); }

  .step-node__marker {
    top: calc(-1 * var(--space-4) - 22px + 3px);
    left: var(--space-3);
  }
}

/* ---------- Institutions: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .inst-hero__orb,
  .inst-cta__orb { animation: none; }
  .inst-hero__scroll span { animation: none; opacity: 0.85; }
  .topic-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .steps-timeline::before { transform: none; transition: none; }
  .pain-card:hover,
  .step-node:hover,
  .icon-grid--offer .icon-item:hover,
  .inst-cta__contacts a:hover { transform: none; }
}

/* ==========================================================================
   28. ADMIN PANEL
   --------------------------------------------------------------------------
   Back-office styles. Modern, dense, professional — dark-green sidebar,
   white topbar, card-based content. The admin uses its own layout
   (layouts/admin.blade.php) and never loads public-site components.
   ========================================================================== */

body.admin {
  background: #edf1ef;
  color: #1b2b25;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.admin-sidebar {
  width: 268px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0e231d 0%, #0a1a15 100%);
  color: #c9ddd4;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.admin-brand__mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f8a5c 0%, #1c5c3c 100%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(47, 138, 92, 0.35);
}

.admin-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.admin-brand__text strong {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.admin-brand__text small {
  font-size: 11px;
  color: #8fae9f;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admin-nav {
  padding: 16px 14px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav__heading {
  margin: 16px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7d9a8c;
}

.admin-nav__heading:first-child {
  margin-top: 2px;
}

.admin-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #c9ddd4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}

.admin-nav__link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.75;
}

.admin-nav__link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  text-decoration: none;
}

.admin-nav__link.is-active {
  background: linear-gradient(135deg, #2f8a5c 0%, #226844 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(47, 138, 92, 0.3);
}

.admin-nav__link.is-active svg {
  opacity: 1;
}

.admin-nav__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.7;
}

.admin-nav__link.is-active .admin-nav__count {
  background: rgba(255, 255, 255, 0.22);
}

.admin-sidebar__footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.admin-user__avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f8a5c, #143a31);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.admin-user__name {
  font-size: 13.5px;
  color: #e6f0eb;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-logout {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f0c9c9;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.admin-logout:hover {
  background: rgba(179, 55, 55, 0.25);
  color: #fff;
}

/* ---------- Main / topbar ---------- */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e9e6;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-topbar__title {
  font-size: 17px;
  font-weight: 700;
  color: #143a31;
  margin: 0;
  letter-spacing: -0.01em;
}

.admin-topbar__date {
  font-size: 13px;
  color: #7a8f8b;
}

.admin-topbar__spacer {
  flex: 1;
}

.admin-content, .admin-login-form {
  padding: 28px 32px 56px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Page head / typography ---------- */
.admin-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.admin-pagehead h1,
.admin-title {
  font-size: 24px;
  margin: 0 0 4px;
  color: #143a31;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.admin-pagehead p {
  margin: 0;
  color: #5f7470;
  font-size: 14px;
}

.admin-muted {
  color: #7a8f8b;
  font-size: 13.5px;
}

.admin-hr {
  border: none;
  border-top: 1px solid #e2e9e6;
  margin: 24px 0;
}

.admin-link {
  color: #246747;
  text-decoration: none;
  font-weight: 600;
}

.admin-link:hover {
  text-decoration: underline;
  color: #1c5c3c;
}

/* ---------- Cards & grids ---------- */
.admin-card {
  background: #fff;
  border: 1px solid #e3eae7;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(20, 58, 49, 0.06);
}

.admin-card--flush {
  padding: 0;
  overflow: hidden;
}

.admin-card--narrow {
  max-width: 720px;
}

.admin-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.admin-card__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #143a31;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-card__head .admin-card__title {
  margin-bottom: 0;
}

.admin-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.admin-grid--detail {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

/* ---------- Stat cards ---------- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.admin-stat {
  background: #fff;
  border: 1px solid #e3eae7;
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 58, 49, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 58, 49, 0.10);
}

.admin-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2f8a5c, #143a31);
}

.admin-stat--alert::before {
  background: linear-gradient(180deg, #e0a63c, #b37a1f);
}

.admin-stat__value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: #143a31;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.admin-stat__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1b2b25;
  margin-top: 4px;
}

.admin-stat__hint {
  display: block;
  font-size: 12px;
  color: #8a9d98;
  margin-top: 2px;
}

.admin-stat__sub {
  display: block;
  font-size: 12px;
  color: #8a9d98;
  margin-top: 2px;
}

/* ---------- Tables ---------- */
.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a8f8b;
  border-bottom: 1px solid #e3eae7;
  background: #f7faf8;
  white-space: nowrap;
}

.admin-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #eef2f1;
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr {
  transition: background 0.12s ease;
}

.admin-table tbody tr:hover {
  background: #f6faf8;
}

.admin-table .cell-title {
  font-weight: 600;
  color: #1b2b25;
}

.admin-table .cell-sub {
  font-size: 12.5px;
  color: #7a8f8b;
}

.admin-table__actions {
  text-align: right;
  white-space: nowrap;
}

/* ---------- Status badges ---------- */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.admin-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.admin-badge--new {
  background: #e3f2e9;
  color: #1e6b3f;
}

.admin-badge--contacted {
  background: #e4edf9;
  color: #2b5f9e;
}

.admin-badge--converted {
  background: #dcf3e2;
  color: #177233;
}

.admin-badge--closed {
  background: #eef0ef;
  color: #6b7a75;
}

/* legacy alias */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.status-pill--new { background: #e3f2e9; color: #1e6b3f; }
.status-pill--contacted { background: #e4edf9; color: #2b5f9e; }
.status-pill--converted { background: #dcf3e2; color: #177233; }
.status-pill--closed { background: #eef0ef; color: #6b7a75; }

/* ---------- Filters ---------- */
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid #e3eae7;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(20, 58, 49, 0.06);
}

.admin-filters .form-control {
  width: auto;
}

.admin-filters .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-filters label {
  font-size: 11px;
  font-weight: 700;
  color: #5f7470;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.admin-filters__search {
  min-width: 240px;
  flex: 1;
}

/* Modern select dropdowns with custom chevron. */
.admin-content select.form-control, .admin-login-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f7470' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.admin-content select.form-control:hover, .admin-login-form select.form-control:hover {
  border-color: #a9beb6;
}

/* Date inputs: consistent height and cleaner calendar indicator. */
.admin-content input[type='date'].form-control, .admin-login-form input[type='date'].form-control {
  min-height: 42px;
  color-scheme: light;
}

.admin-content input[type='date'].form-control::-webkit-calendar-picker-indicator, .admin-login-form input[type='date'].form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}

/* ---------- Detail view ---------- */
.admin-detail {
  margin: 0;
  padding: 0;
}

.admin-detail__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 11px 0;
  border-bottom: 1px solid #eef2f1;
  font-size: 14px;
}

.admin-detail__row:last-child {
  border-bottom: none;
}

.admin-detail__row dt {
  color: #7a8f8b;
  font-weight: 600;
  font-size: 13px;
}

.admin-detail__row dd {
  margin: 0;
  color: #1b2b25;
  word-break: break-word;
}

.admin-detail--compact .admin-detail__row {
  padding: 8px 0;
  grid-template-columns: 150px minmax(0, 1fr);
}

/* ---------- Forms (admin scope) ---------- */
.admin-content .form-group, .admin-login-form .form-group {
  margin-bottom: 16px;
}

.admin-content .form-label, .admin-login-form .form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1b2b25;
  margin-bottom: 6px;
}

.admin-content .form-control, .admin-login-form .form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #ccd8d3;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: #1b2b25;
  font-family: inherit;
  line-height: 1.45;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-content .form-control:focus, .admin-login-form .form-control:focus {
  outline: none;
  border-color: #2f8a5c;
  box-shadow: 0 0 0 3px rgba(47, 138, 92, 0.15);
}

.admin-content .form-control.is-invalid, .admin-login-form .form-control.is-invalid {
  border-color: #b33737;
}

.admin-content .form-control.is-invalid:focus, .admin-login-form .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(179, 55, 55, 0.12);
}

.admin-content textarea.form-control, .admin-login-form textarea.form-control {
  resize: vertical;
  min-height: 110px;
}

.admin-content .form-hint, .admin-login-form .form-hint {
  font-size: 12.5px;
  color: #7a8f8b;
  margin: 5px 0 0;
}

.admin-content .form-error, .admin-login-form .form-error {
  font-size: 12.5px;
  color: #b33737;
  margin: 5px 0 0;
  font-weight: 600;
}

.admin-content .form-row, .admin-login-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.admin-content .form-row--3, .admin-login-form .form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.admin-content .form-actions, .admin-login-form .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-content .form-check, .admin-login-form .form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #1b2b25;
  margin: 4px 0 16px;
  cursor: pointer;
}

.admin-content .form-check input[type='checkbox'], .admin-login-form .form-check input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #246747;
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------- Buttons (admin scope) ---------- */
.admin-content .btn, .admin-login-form .btn,
.admin-filters .btn,
.admin-topbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.admin-content .btn:active, .admin-login-form .btn:active,
.admin-filters .btn:active {
  transform: translateY(1px);
}

.admin-content .btn-primary, .admin-login-form .btn-primary,
.admin-filters .btn-primary {
  background: linear-gradient(135deg, #2f8a5c 0%, #226844 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(47, 138, 92, 0.28);
}

.admin-content .btn-primary:hover, .admin-login-form .btn-primary:hover,
.admin-filters .btn-primary:hover {
  background: linear-gradient(135deg, #359a66 0%, #246747 100%);
  color: #fff;
  text-decoration: none;
}

.admin-content .btn-outline, .admin-login-form .btn-outline,
.admin-filters .btn-outline {
  background: #fff;
  border-color: #ccd8d3;
  color: #1b2b25;
}

.admin-content .btn-outline:hover, .admin-login-form .btn-outline:hover,
.admin-filters .btn-outline:hover {
  border-color: #2f8a5c;
  color: #246747;
  text-decoration: none;
}

.admin-content .btn-ghost, .admin-login-form .btn-ghost,
.admin-filters .btn-ghost {
  background: transparent;
  color: #5f7470;
}

.admin-content .btn-ghost:hover, .admin-login-form .btn-ghost:hover,
.admin-filters .btn-ghost:hover {
  background: #eef2f0;
  color: #1b2b25;
  text-decoration: none;
}

.admin-content .btn-danger-outline, .admin-login-form .btn-danger-outline {
  background: #fff;
  border-color: #e3b6b6;
  color: #b33737;
}

.admin-content .btn-danger-outline:hover, .admin-login-form .btn-danger-outline:hover {
  background: #fdf1f1;
  border-color: #b33737;
  color: #b33737;
}

.admin-content .btn-sm, .admin-login-form .btn-sm,
.admin-filters .btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

.admin-content .btn-lg, .admin-login-form .btn-lg {
  padding: 12px 28px;
  font-size: 15px;
}

.admin-content .btn-block, .admin-login-form .btn-block {
  width: 100%;
}

/* ---------- Login ---------- */
.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(47, 138, 92, 0.25), transparent 60%),
    linear-gradient(160deg, #0e231d 0%, #08120f 100%);
  padding: 24px;
}

.admin-login-card {
  display: grid;
  grid-template-columns: 380px minmax(0, 420px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.admin-login-card__brand {
  background: linear-gradient(165deg, #143a31 0%, #0b1f1a 100%);
  color: #d7e7de;
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.admin-login-card__brand::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 199, 155, 0.22), transparent 70%);
}

.admin-login-card__brand .admin-brand__mark {
  width: 52px;
  height: 52px;
  font-size: 18px;
  border-radius: 14px;
  margin-bottom: 26px;
}

.admin-login-card__brand h2 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.admin-login-card__brand p {
  font-size: 14px;
  color: #9db8ae;
  margin: 0 0 26px;
  line-height: 1.6;
}

.admin-login-points {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.admin-login-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: #c9ddd4;
}

.admin-login-points li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7bc79b;
  margin-top: 6px;
  flex-shrink: 0;
}

.admin-login-form {
  padding: 44px 42px;
}

.admin-login-form h1 {
  font-size: 22px;
  color: #143a31;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

/* ---------- Chart ---------- */
.admin-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding: 12px 4px 0;
}

.admin-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.admin-chart__bar {
  width: 100%;
  max-width: 34px;
  background: linear-gradient(180deg, #3aa06a 0%, #1e6b3f 100%);
  border-radius: 6px 6px 3px 3px;
  min-height: 5px;
  opacity: 0.9;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-chart__bar:hover {
  opacity: 1;
  transform: scaleY(1.02);
}

.admin-chart__label {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #9db0aa;
  white-space: nowrap;
}

/* ---------- Activity list ---------- */
.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-list__item {
  padding: 12px 0;
  border-bottom: 1px solid #eef2f1;
  font-size: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.admin-list__item:last-child {
  border-bottom: none;
}

.admin-list__item a {
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1;
}

.admin-list__item a:hover strong {
  color: #246747;
}

.admin-list__item strong {
  display: block;
  color: #1b2b25;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-list__item small {
  display: block;
  color: #7a8f8b;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-list__item .admin-badge {
  flex-shrink: 0;
}

/* ---------- Empty state ---------- */
.admin-empty {
  text-align: center;
  padding: 56px 24px;
  color: #7a8f8b;
}

.admin-empty::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: #eef2f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237a8f8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.admin-empty p {
  margin: 0;
  font-size: 15px;
}

/* ---------- Pagination ---------- */
.admin-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pgn {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pgn__link,
.pgn__current,
.pgn__disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e3eae7;
  background: #fff;
  color: #1b2b25;
}

a.pgn__link:hover {
  border-color: #2f8a5c;
  color: #246747;
  text-decoration: none;
}

.pgn__current {
  background: linear-gradient(135deg, #2f8a5c, #226844);
  border-color: transparent;
  color: #fff;
}

.pgn__disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .admin-grid--detail {
    grid-template-columns: 1fr;
  }

  .admin-grid--2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-sidebar {
    width: 224px;
  }

  .admin-topbar,
  .admin-content, .admin-login-form {
    padding-left: 20px;
    padding-right: 20px;
  }

  .admin-content .form-row,
  .admin-login-form .form-row,
  .admin-content .form-row--3,
  .admin-login-form .form-row--3 {
    grid-template-columns: 1fr;
  }

  .admin-login-card {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .admin-login-card__brand {
    padding: 32px 30px;
  }

  .admin-login-points {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-shell {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100%;
    height: auto;
    position: static;
  }

  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
  }

  .admin-nav__heading {
    width: 100%;
    margin: 8px 8px 2px;
  }

  .admin-nav__link {
    padding: 8px 12px;
    font-size: 13px;
  }

  .admin-topbar {
    padding: 12px 16px;
  }

  .admin-topbar__date {
    display: none;
  }

  .admin-content, .admin-login-form {
    padding: 20px 16px 44px;
  }

  .admin-sidebar__footer {
    display: none;
  }

  .admin-detail__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .admin-pagehead {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ==========================================================================
   29. CORPORATE PAGE — pentest urgency theme
   --------------------------------------------------------------------------
   Dark, high-impact styles for /corporate-solutions. Built to create urgency
   around timely penetration testing: attack visualization, kill-chain
   animation, versus comparison, and FOMO sections.
   ========================================================================== */

/* ---------- Dark section ---------- */
.section--dark {
  background: #0e1a16;
  color: #dde5e1;
}

.section--dark h2,
.section--dark h3 {
  color: #ffffff;
}

.section-heading--dark .eyebrow {
  color: #7bc79b;
}

.section-heading--dark h2 {
  color: #ffffff;
}

.section-heading--dark .lead {
  color: #9db8ae;
}

/* ---------- Buttons ---------- */
.btn-danger {
  background: #c0392b;
  color: #ffffff;
  border: 1px solid #c0392b;
}

.btn-danger:hover {
  background: #a93226;
  border-color: #a93226;
  color: #ffffff;
}

.section--dark .eyebrow {
  color: #7bc79b;
}

.text-dim {
  color: #9db8ae;
}

/* ---------- Corporate hero ---------- */
.corp-hero {
  background: linear-gradient(135deg, #0e1a16 0%, #143a31 60%, #0e1a16 100%);
  color: #dde5e1;
  padding: 80px 0 64px;
  position: relative;
  overflow: hidden;
}

.corp-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(36, 103, 71, 0.14), transparent),
    radial-gradient(ellipse 500px 350px at 80% 70%, rgba(36, 103, 71, 0.12), transparent);
  pointer-events: none;
}

.corp-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.corp-hero h1 {
  color: #ffffff;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.15;
  margin: 16px 0 20px;
  letter-spacing: -0.02em;
}

.corp-hero .lead {
  color: #b8cdc6;
  font-size: 18px;
}

.corp-hero__note {
  margin-top: 16px;
  font-size: 14px;
  color: #9db8ae;
}

.corp-hero__terminal {
  min-width: 0;
}

.terminal-caption {
  margin-top: 12px;
  font-size: 13px;
  color: #7a8f8b;
  text-align: center;
}

/* ---------- Threat ticker ---------- */
.threat-ticker {
  background: #143a31;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
}

.threat-ticker__track {
  display: inline-block;
  animation: threat-scroll 30s linear infinite;
}

.threat-ticker__item {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 8px;
}

.threat-ticker__sep {
  opacity: 0.5;
  padding: 0 8px;
}

@keyframes threat-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .threat-ticker__track {
    animation: none;
  }
}

/* ---------- Attack chain ---------- */
.attack-chain {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  position: relative;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.attack-chain::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: #1e4a40;
}

.attack-chain__stage {
  position: relative;
  padding: 0 0 36px 72px;
  opacity: 0.25;
  transform: translateX(-12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.attack-chain__stage:last-child {
  padding-bottom: 0;
}

.attack-chain__stage.is-active {
  opacity: 1;
  transform: translateX(0);
}

.attack-chain__node {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #1e4a40;
  border: 2px solid #2a5a4e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9db8ae;
  transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}

.attack-chain__stage.is-active .attack-chain__node {
  background: #246747;
  border-color: #7bc79b;
  color: #ffffff;
  box-shadow: 0 0 24px rgba(36, 103, 71, 0.55);
  animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(36, 103, 71, 0.45); }
  50% { box-shadow: 0 0 32px rgba(36, 103, 71, 0.75); }
}

.attack-chain__step {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #7bc79b;
  font-weight: 700;
}

.attack-chain__stage h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.attack-chain__stage p {
  margin: 0 0 8px;
  color: #b8cdc6;
  font-size: 15px;
}

.attack-chain__time {
  font-size: 13px;
  color: #7a8f8b;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .attack-chain__stage {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .attack-chain__stage.is-active .attack-chain__node {
    animation: none;
  }
}

/* ---------- Versus grid ---------- */
.versus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.versus-card {
  border-radius: 16px;
  padding: 32px;
  border: 2px solid;
}

.versus-card--bad {
  background: #f2f4f3;
  border-color: #c3cfcb;
}

.versus-card--good {
  background: #f0f7f2;
  border-color: #a3c9b3;
}

.versus-card__label {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
}

.versus-card--bad .versus-card__label {
  color: #4a5a55;
}

.versus-card--good .versus-card__label {
  color: #246747;
}

.versus-card h3 {
  margin: 0 0 16px;
  font-size: 22px;
  color: #143a31;
}

.versus-card ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.versus-card li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 15px;
  color: #2c3e3a;
  border-bottom: 1px solid rgba(20, 58, 49, 0.08);
}

.versus-card li:last-child {
  border-bottom: none;
}

.versus-card--bad li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #4a5a55;
  font-weight: 700;
}

.versus-card--good li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #246747;
  font-weight: 700;
}

.versus-card__verdict {
  margin: 0;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}

.versus-card--bad .versus-card__verdict {
  background: rgba(20, 58, 49, 0.08);
  color: #33433e;
}

.versus-card--good .versus-card__verdict {
  background: rgba(36, 103, 71, 0.10);
  color: #1e5a3a;
}

/* ---------- FOMO section ---------- */
.fomo__title {
  font-size: clamp(28px, 3.5vw, 40px);
  margin: 16px 0 32px;
  letter-spacing: -0.01em;
}

.fomo__points {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

.fomo__point {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  align-items: flex-start;
}

.fomo__point svg {
  flex-shrink: 0;
  color: #7bc79b;
  margin-top: 2px;
}

.fomo__point p {
  margin: 0;
  color: #b8cdc6;
  font-size: 15px;
}

.fomo__point strong {
  color: #ffffff;
}

.fomo__cta {
  text-align: center;
  padding: 32px;
  background: rgba(36, 103, 71, 0.10);
  border: 1px solid rgba(36, 103, 71, 0.30);
  border-radius: 16px;
}

.fomo__cta p {
  margin: 0 0 20px;
  font-size: 17px;
  color: #dde5e1;
}

/* ---------- Corporate form ---------- */
.form-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #7bc79b;
  margin: 32px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(123, 199, 155, 0.25);
}

.form-section-title:first-of-type {
  margin-top: 0;
}

.form-card--dark {
  background: #143a31;
  border: 1px solid #1e4a40;
}

.form-card--dark .form-label {
  color: #ffffff;
}

.form-card--dark .form-label .required {
  color: #7bc79b;
}

.form-card--dark .form-hint {
  color: #b8cdc6;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  font-size: 14px;
  color: #b8cdc6;
}

.form-check input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #246747;
  flex-shrink: 0;
}

.form-check label {
  cursor: pointer;
}

.form-card--dark .form-consent {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: 20px;
}

.form-card--dark .form-consent label {
  color: #dde5e1;
}

/* ---------- Final CTA ---------- */
.corp-final-cta {
  background: linear-gradient(135deg, #143a31 0%, #246747 100%);
  color: #ffffff;
  padding: 72px 0;
}

.corp-final-cta h2 {
  color: #ffffff;
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.corp-final-cta .lead {
  color: rgba(255, 255, 255, 0.90);
  font-size: 18px;
  margin-bottom: 32px;
}

.corp-final-cta .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.corp-final-cta .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .corp-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .versus-grid {
    grid-template-columns: 1fr;
  }

  .attack-chain::before {
    left: 19px;
  }

  .attack-chain__node {
    width: 40px;
    height: 40px;
  }

  .attack-chain__stage {
    padding-left: 60px;
  }
}

@media (max-width: 640px) {
  .corp-hero {
    padding: 56px 0 48px;
  }

  .versus-card {
    padding: 24px 20px;
  }

  .fomo__cta {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Admission enquiry — captcha block
   --------------------------------------------------------------------------
   Image captcha beside its refresh button, then the answer field below.
   Scoped to the dark admission form card.
   ========================================================================== */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
}

.captcha-image {
  display: block;
  width: 180px;
  height: 60px;
  border: 1px solid #1e4a40;
  border-radius: 8px;
  background: #0e1a16;
}

.form-card--dark .form-hint {
  color: #8fb3a7;
}

@media (max-width: 480px) {
  .captcha-row {
    gap: 12px;
  }
}

/* ==========================================================================
   About page — visual rhythm: split hero, stats strip, framed imagery,
   pull quote, dark mission cards. Brand palette only.
   ========================================================================== */
.about-hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(36, 103, 71, 0.35), transparent 60%),
    linear-gradient(160deg, #0e1a16 0%, var(--color-dark) 70%, #0e1a16 100%);
  color: var(--color-white);
  padding-block: var(--space-7) var(--space-6);
  overflow: hidden;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}

.about-hero__copy .badge {
  margin-bottom: var(--space-3);
}

.about-hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.about-hero .lead {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
}

.about-hero__media {
  position: relative;
}

/* Stats strip */
.about-stats {
  background: var(--color-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-5);
}

.about-stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.about-stats__list strong {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.02em;
}

.about-stats__list span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-light-green);
}

/* Framed imagery */
.about-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(20, 58, 49, 0.25);
  box-shadow: 0 24px 60px -24px rgba(20, 58, 49, 0.45);
}

.about-hero .about-img {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.6);
}

.about-img--wide {
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

.about-img__caption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-light-green);
  text-align: center;
}

/* Pull quote */
.about-quote {
  margin: var(--space-6) auto;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--color-primary);
  background: var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.about-quote p {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.5;
}

/* Dark mission / vision cards */
.about-dark {
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(36, 103, 71, 0.28), transparent 60%),
    linear-gradient(165deg, #0e1a16 0%, var(--color-dark) 75%, #0e1a16 100%);
  color: var(--color-white);
}

.about-dark .section-heading--dark {
  margin-bottom: var(--space-5);
}

.about-dark__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.about-dark__card .card__icon {
  background: rgba(36, 103, 71, 0.35);
  color: var(--color-white);
}

.about-dark__card .card__title {
  color: var(--color-white);
}

.about-dark__card .card__text {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
  }

  .about-stats__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-3);
  }

  .about-img--wide {
    aspect-ratio: 16 / 9;
  }
}

/* Session agenda — 60-minute breakdown timeline (college sessions). */
.agenda {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.agenda__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
}

.agenda__time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-dark);
  background: var(--color-light-green);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
  margin-top: 0.15rem;
}

.agenda__title {
  margin: 0 0 0.25rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

.agenda__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-white);
  opacity: 0.8;
}

@media (min-width: 640px) {
  .agenda__item {
    padding: var(--space-4);
  }
}

/* Larger checklist variant for outcome lists. */
.checklist--large li {
  font-size: var(--fs-base);
  margin-bottom: var(--space-3);
  padding-left: calc(var(--space-4) + 0.5rem);
}

.checklist--large li::before {
  width: 24px;
  height: 24px;
  background-size: 14px 14px;
  top: 0.2em;
}