/* ==========================================================================
   PPM Academy — Design tokens

   Values below are working defaults per the rebuild brief: confirmed brand
   colour (coral) is real; everything else (fonts, exact palette, spacing/
   component rules) is a placeholder until the Claude Design system file is
   pulled in. Every colour and font in this file routes through these
   variables so swapping the real design system in later is an edit here,
   not a rebuild.
   ========================================================================== */

/* Smooth cross-page navigation. This is a static multi-page site (every
   nav click is a full document load), so without this the browser just
   hard-cuts from one page to the next. Chromium/Edge support cross-document
   view transitions natively from a single CSS declaration; browsers that
   don't support it (Safari/Firefox, as of writing) just fall back to the
   instant swap they already do — this is a pure progressive enhancement,
   nothing to feature-detect or polyfill. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: ease-out;
}

/* Keep the header from re-fading on every navigation — it's visually
   identical across pages, so morph it in place instead of crossfading it
   along with the rest of the content. */
.site-header { view-transition-name: site-header; }

:root {
  /* Brand colour — confirmed, carry forward from the live site */
  --color-coral: #FF7171;
  --color-coral-dark: #E85D5D;
  --color-coral-light: #FFEAEA;

  /* Ink / neutrals — warm cream ground instead of stark white, closer to
     the modern mood reference, with pure white reserved for surface cards
     so they lift off the page. */
  --color-ink: #171412;
  --color-ink-soft: #55504C;
  --color-paper: #F7F2EA;
  --color-paper-alt: #EFE6D8;
  --color-surface: #FFFFFF;
  --color-border: #E3D9C9;

  /* Typography — Poppins is the incumbent default per the brief; swap
     --font-heading/--font-body to change typeface sitewide. */
  --font-heading: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.9rem, 1.5rem + 1.75vw, 2.75rem);
  --step-3: clamp(2.75rem, 1.9rem + 4vw, 5.25rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1180px;
  --shadow-soft: 0 12px 32px rgba(23, 20, 18, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--step-3); font-weight: 700; line-height: 1.03; letter-spacing: -0.03em; }
h2 { font-size: var(--step-2); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-2); color: var(--color-ink-soft); }
.lede { font-size: var(--step-1); color: var(--color-ink); }

/* Article section titles. Some articles use <h2> for every in-body
   section heading (numbered "1. Why Bother?" style), others use <h3>
   for sub-sections and reserve <h2> for just FAQ/Key Takeaways —
   inconsistent from the original migration. Sizing article-body h2
   the same as h3 makes every article's section titles read at the
   same scale regardless of which tag the source content used. */
.article-body h2 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }

/* Highlighter-style mark. Uses text-decoration rather than an absolutely
   positioned ::after so it renders correctly per line if the marked
   phrase wraps — a hyphenated compound like "High-Performing" or a
   two-word phrase can't fit on one line at every viewport width, and
   the old nowrap + absolute-bar approach caused it to overflow off the
   edge of the screen on narrow phones instead of wrapping. */
.mark {
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 113, 113, 0.45);
  text-decoration-thickness: 0.32em;
  text-underline-offset: -0.08em;
  text-decoration-skip-ink: none;
}

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

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
@media (max-width: 700px) {
  .section { padding-block: var(--space-5); }
  .section--tight { padding-block: var(--space-4); }
}
.section--alt { background: var(--color-paper-alt); }
.section--dark { background: var(--color-ink); color: var(--color-paper); }
.section--dark p { color: #C9C2BB; }
.section--dark h2, .section--dark h3 { color: var(--color-paper); }
.section--dark .eyebrow { color: var(--color-paper); }
.section--dark .lede { color: var(--color-paper); }
.section--dark .lede strong { color: var(--color-coral); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-coral);
  flex-shrink: 0;
}

/* Underlined arrow-style secondary link, alt to a full button */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-coral);
  text-decoration-thickness: 2px;
  color: var(--color-ink);
}
.link-arrow::after { content: '\2197'; transition: transform 0.15s ease; }
.link-arrow:hover::after { transform: translate(2px, -2px); }

.rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-5);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-coral); color: #1A1A1A; }
.btn--primary:hover { background: var(--color-coral-dark); box-shadow: var(--shadow-soft); }
.btn--dark { background: var(--color-ink); color: var(--color-paper); }
.btn--dark:hover { box-shadow: var(--shadow-soft); }
.btn--outline { background: transparent; border-color: currentColor; }
.btn--outline:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); box-shadow: var(--shadow-soft); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { height: 28px; width: auto; }
.brand span { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-coral);
}
.nav-cta { display: flex; align-items: center; gap: var(--space-2); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }

.hide-desktop { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .hide-desktop { display: block; }
  /* Logo + "Book a call" + hamburger get tight on narrow phones —
     trim the logo and tighten spacing so the button never wraps. */
  .brand img { height: 22px; }
  .nav-cta { gap: 0.5rem; }
  .nav-cta .btn--sm { padding: 0.55rem 0.85rem; font-size: 0.8rem; }
  .nav-links {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--color-paper);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3);
    gap: var(--space-2);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* Hero */
.hero {
  padding-block: var(--space-6) var(--space-5);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.logo-strip {
  margin-top: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3) var(--space-4);
}
.logo-strip-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}
.logo-strip-viewport { position: relative; overflow: hidden; }
.logo-strip-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-5);
  overflow-x: hidden;
}
.logo-strip-grid img {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  flex-shrink: 0;
}
.logo-strip-arrow {
  display: none;
}
@media (max-width: 700px) {
  .logo-strip { padding: var(--space-3); margin-inline: calc(var(--space-3) * -1); border-left: none; border-right: none; border-radius: 0; }
  .logo-strip-label { padding-inline: var(--space-3); }
  .logo-strip-viewport { overflow: visible; }
  .logo-strip-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: var(--space-4);
    padding-inline: var(--space-3);
  }
  .logo-strip-grid img { height: 38px; scroll-snap-align: start; }
  .logo-strip-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    color: var(--color-ink);
    font-size: 1.2rem;
    line-height: 1;
    z-index: 2;
  }
  .logo-strip-arrow--prev { left: 2px; }
  .logo-strip-arrow--next { right: 2px; }
}
.hero-media { position: relative; }
.hero-media-clip {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.hero-parallax-img {
  width: 100%;
  height: 130%;
  margin-top: -15%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.stat-row .stat {
  flex: 1;
  min-width: 150px;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
  transition: transform 0.2s ease;
}
.stat-row .stat:first-child {
  padding-left: 0;
  border-left: none;
}
.stat-row .stat:hover { transform: translateY(-4px); }
.stat-row .stat b {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-coral-dark);
}
.stat-row .stat span {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .stat-row { gap: var(--space-2); }
  .stat-row .stat {
    border-left: none;
    padding-left: 0;
    flex: 0 0 100%;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
  }
  .stat-row .stat:first-child { padding-top: 0; border-top: none; }
}

/* Cards / grids */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* Photo + bio-copy split (Meet Ben sections on Home/HPPM/Coaching).
   Plain inline grid-template-columns can't respond to a media query, so
   on narrow screens this used to squash into two unreadable slivers
   instead of stacking. Collapses to one column and moves the photo
   below the copy (centred, capped width) rather than fighting for
   space beside it. */
.bio-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 700px) {
  .bio-grid { grid-template-columns: 1fr; }
  .bio-grid > *:first-child { order: 2; max-width: 260px; margin-inline: auto; }
  .bio-grid > *:last-child { order: 1; text-align: left; }
}

/* Course/training detail pages: main copy + "The logistics" card.
   Same plain-inline-grid problem as .bio-grid above — squashed both
   columns into narrow slivers on mobile, and the sticky positioning
   on the aside meant it could render cut off once the column was
   that narrow. Stacks to one column and drops the sticky behaviour
   below the desktop breakpoint. */
.course-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: var(--space-5);
  align-items: start;
}
.course-detail-grid aside {
  position: sticky;
  top: 96px;
}
@media (max-width: 860px) {
  .course-detail-grid { grid-template-columns: 1fr; }
  .course-detail-grid aside { position: static; top: auto; }
}

.w-richtext-figure-type-video {
  position: relative;
  height: 0;
}
.w-richtext-figure-type-video > div,
.w-richtext-figure-type-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.card--flush { padding: 0; overflow: hidden; }
.card--elevated { box-shadow: var(--shadow-soft); border: none; }

/* Outlined card for use on dark sections — Mitchy-style feature tile */
.card--on-dark {
  background: transparent;
  border: 1px solid rgba(247, 242, 234, 0.18);
  color: var(--color-paper);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card--on-dark:hover {
  transform: translateY(-6px);
  background: rgba(247, 242, 234, 0.05);
  border-color: rgba(255, 113, 113, 0.5);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}
.card--on-dark p { color: #C9C2BB; }
.card--on-dark .icon-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(247, 242, 234, 0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card--on-dark:hover .icon-badge {
  transform: scale(1.1);
  border-color: var(--color-coral);
}

/* Floating stat badge — overlaid on a hero/photo corner */
.floating-badge {
  position: absolute;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-heading);
}
.floating-badge b { display: block; font-size: 1.4rem; font-weight: 700; }
.floating-badge span { display: block; font-size: 0.75rem; color: #C9C2BB; font-weight: 400; }

.course-card { display: flex; flex-direction: column; height: 100%; }
.course-card .course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-1);
}
.course-card h3 { margin-bottom: var(--space-1); }
.course-card p { flex: 1; }
.pill {
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--color-coral-light);
  color: var(--color-coral-dark);
  margin-bottom: var(--space-1);
}

/* Testimonials — varied presentation, not another checkmark list */
.quote-block {
  border-left: 3px solid var(--color-coral);
  padding-left: var(--space-3);
}
.quote-block p { font-size: 1.05rem; color: var(--color-ink); }
.quote-block cite { font-style: normal; display: block; margin-top: var(--space-2); font-weight: 600; }
.quote-block cite span { display: block; font-weight: 400; color: var(--color-ink-soft); font-size: 0.9rem; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-grid .card p { color: var(--color-ink); }
.card cite {
  font-style: normal;
  display: block;
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-ink);
}
.card cite span { display: block; font-weight: 400; color: var(--color-ink-soft); font-size: 0.9rem; }

/* Numbered / iconed feature rows — alternative to checkmark bullet lists */
.feature-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  margin-bottom: var(--space-3);
}
.feature-row .num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-coral-dark);
  background: var(--color-coral-light);
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.feature-row h4 { margin-bottom: 0.25rem; }
.feature-row p { margin: 0; }

.icon-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.icon-row img { width: 40px; height: 40px; flex-shrink: 0; }
.icon-row h4 { margin-bottom: 0.25rem; }
.icon-row p { margin: 0; }

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-2);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--color-coral-dark); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin-top: var(--space-2); }

/* Pricing */
.price-card { text-align: center; }
.price-card .amount { font-family: var(--font-heading); font-size: var(--step-3); font-weight: 700; }
.price-card .amount small { font-size: 1rem; font-weight: 400; color: var(--color-ink-soft); }

/* Split banner card — text + single CTA, used for the AI training and
   newsletter callouts. Collapses to one column on narrow viewports. */
.banner-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
@media (max-width: 700px) {
  .banner-split { grid-template-columns: 1fr; }
  .banner-split .btn { width: 100%; justify-content: center; }
}

.archive-banner {
  display: grid;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.archive-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(23, 20, 18, 0.12);
  border-color: var(--color-coral);
}
.archive-banner .btn { pointer-events: none; }

/* CTA banner */
.cta-banner {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
}
.cta-banner h2 { color: var(--color-paper); }
.cta-banner p { color: #D9D3D0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
  background: var(--color-paper-alt);
}
.footer-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-social {
  display: inline-flex;
  margin-top: var(--space-3);
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.footer-social:hover { opacity: 1; transform: translateY(-1px); }
.footer-social img { width: 26px; height: 26px; border-radius: 6px; }
.footer-fine { margin-top: var(--space-3); font-size: 0.85rem; color: var(--color-ink-soft); text-align: center; }

/* Placeholder banner used on the AI Training page */
.placeholder-note {
  background: var(--color-coral-light);
  border: 1px dashed var(--color-coral);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  color: var(--color-coral-dark);
}

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.narrow { max-width: 760px; }
.mx-auto { margin-inline: auto; }