/* ============================================================
   Morley Management Group — Dual-audience layer

   Added when the brief clarified that the site serves two
   audiences: organizations buying delivery and PMO work, and
   organizations sending people to the Morley Learning Lab.

   Also carries the livelier use of copper. The gradient is already
   the brand's own (it is the logo wordmark treatment), so leaning
   on it keeps the palette on-guide while stopping navy and cream
   from reading flat.
   ============================================================ */

/* ---- Copper gradient text --------------------------------- */
.grad {
  background: linear-gradient(104deg, #F7CFAE 0%, var(--copper-300) 38%, var(--copper-400) 78%, var(--copper-300) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradShift 9s ease-in-out infinite alternate;
}
/* On light surfaces the gradient runs deeper, to hold contrast */
.section--warm .grad,
.section--page .grad {
  background-image: linear-gradient(104deg, var(--copper-400) 0%, var(--copper-500) 42%, var(--copper-700) 100%);
}
@keyframes gradShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ---- Reading progress ------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--z-sticky) + 1);
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--copper-600), var(--copper-400) 45%, var(--copper-300));
  box-shadow: 0 0 12px rgba(241, 157, 106, 0.55);
  transition: width 90ms linear;
}

/* ---- Hero additions --------------------------------------- */
.hero__aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 42% at 76% 16%, rgba(241, 157, 106, 0.20) 0%, transparent 68%),
    radial-gradient(30% 34% at 14% 78%, rgba(13, 67, 107, 0.55) 0%, transparent 70%),
    radial-gradient(26% 30% at 52% 4%,  rgba(206, 117, 68, 0.14) 0%, transparent 72%);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}

/* ---- Two paths chooser ------------------------------------ */
.paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
/* Gradient rule that grows across the top on hover */
.path::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-copper);
  transform: scaleX(0.16);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.path:hover,
.path:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(177, 83, 38, 0.4);
  color: inherit;
}
.path:hover::before,
.path:focus-visible::before { transform: scaleX(1); }

.path--academy { background: var(--sand-50); }

.path__num {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--sand-200);
  transition: color var(--duration-base) var(--ease-standard);
}
.path--academy .path__num { color: var(--sand-300); }
.path:hover .path__num { color: var(--copper-300); }

.path__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-600);
  margin: 0 0 var(--space-3);
}
.path h3 {
  font-size: var(--step-3);
  font-weight: var(--weight-extra);
  margin: 0 0 var(--space-3);
}
.path__body > p:not(.path__label) {
  font-size: var(--step-0);
  color: var(--text-body);
  margin: 0 0 var(--space-5);
}
.path__list { display: flex; flex-direction: column; gap: var(--space-2); }
.path__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
}
.path__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper-600);
}
.path__go svg { transition: transform var(--duration-base) var(--ease-standard); }
.path:hover .path__go svg { transform: translateX(5px); }

.paths__note {
  margin: var(--space-7) 0 0;
  font-size: var(--step-0);
  color: var(--text-muted);
  max-width: 62ch;
}

/* ---- Progression ladder ------------------------------------ */
.ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-7) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.ladder li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--navy-800);
  white-space: nowrap;
}
/* Chevron drawn from borders, so nothing is read aloud */
.ladder li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-top: 2px solid var(--copper-400);
  border-right: 2px solid var(--copper-400);
  transform: rotate(45deg);
}
/* The payoff step carries the accent */
.ladder li:last-child { color: var(--copper-600); }

/* Each step arrives after the one before it */
.js .ladder li { opacity: 0; }
.js .ladder.is-visible li {
  opacity: 1;
  animation: ladderStep 460ms var(--ease-out) backwards;
}
.js .ladder.is-visible li:nth-child(1) { animation-delay: 60ms; }
.js .ladder.is-visible li:nth-child(2) { animation-delay: 180ms; }
.js .ladder.is-visible li:nth-child(3) { animation-delay: 300ms; }
.js .ladder.is-visible li:nth-child(4) { animation-delay: 420ms; }
.js .ladder.is-visible li:nth-child(5) { animation-delay: 540ms; }
@keyframes ladderStep {
  from { opacity: 0; transform: translateX(-10px); }
}

@media (max-width: 640px) {
  .ladder { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ladder li:not(:last-child)::after { transform: rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ladder li { opacity: 1; animation: none; }
}

/* Whole-card link overlay, so a card is clickable without nesting
   interactive elements inside an anchor. (.card is already
   position:relative in base.css, which is what this anchors to.) */
.card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card__link:focus-visible { outline-offset: -4px; }

/* ---- Learning Lab (class names still read "academy", the internal
       hook was left alone when the brand name changed) ---------- */
.academy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
}
.academy-card {
  position: relative;
  padding: var(--space-7) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.academy-card::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--gradient-copper);
  transition: width var(--duration-slow) var(--ease-standard);
}
.academy-card:hover::after { width: 80px; }
.academy-card__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--copper-300);
  margin-bottom: var(--space-3);
}
.academy-card h3 {
  font-size: var(--step-2);
  font-weight: var(--weight-extra);
  color: #fff;
  margin: 0 0 var(--space-3);
}
/* Plain paragraphs only. `.academy-card p` would otherwise
   out-specify the classed .academy-card__who line below it. */
.academy-card p:not([class]) {
  font-size: var(--step-0);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-3);
}
.academy-card__who {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.academy__cta {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---- Featured membership tier ------------------------------ */
.tier--featured {
  border-color: rgba(177, 83, 38, 0.45);
  box-shadow: var(--shadow-md);
}
.tier__flag {
  position: absolute;
  top: 0; right: var(--space-5);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--copper-500);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  box-shadow: var(--shadow-sm);
}

/* ---- Select, matched to the text inputs -------------------- */
.field select {
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--navy-900);
  background-color: var(--sand-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 40px 12px 14px;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%2397441C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.field select:hover { border-color: var(--border-strong); }
.field select:focus {
  background-color: #fff;
  border-color: var(--copper-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(177, 83, 38, 0.14);
}

/* ---- Parallax --------------------------------------------- */
[data-parallax] { overflow: hidden; }
[data-parallax] img { will-change: transform; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .paths__grid { grid-template-columns: minmax(0, 1fr); }
  .academy__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .path { padding: var(--space-6); }
  .path__num { font-size: var(--step-4); }
  .academy__cta .btn { flex: 1 1 100%; }
  .tier--featured { margin-top: var(--space-6); }
}

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .grad, .hero__aurora { animation: none; }
  .path::before { transform: scaleX(1); }
  .progress span { transition: none; }
}

@media print {
  .progress, .hero__aurora { display: none; }
  .grad { -webkit-text-fill-color: currentColor; color: #000; }
}