/* ==================================================================
   REFINEMENTS, loaded last on every page.
   1. Left-aligns everything (no centered text anywhere).
   2. Raises body type size and weight for readability.
   3. Raises contrast on secondary and faint text.
   ================================================================== */

/* ---------- 1. Contrast: darker secondary text tokens ---------- */

:root {
  --ink-soft: rgba(7, 7, 38, 0.82);
  --ink-faint: rgba(7, 7, 38, 0.62);
  --line: rgba(7, 7, 38, 0.2);
}

/* ---------- 2. Kill every centered block ---------- */

.ab-team h2,
.ab-team-intro,
.ab-cta,
.ab-hero,
.sch-book,
.ct-done,
.rd-hero,
.quiz-done,
.quiz-case-studies-label,
.sv-hero,
.sv-center,
.sv-services h2,
.sv-industries h2,
.wk-hero {
  text-align: left;
}

/* Blocks centred by auto margins INSIDE a .container: flush them left.
   Elements that carry .container themselves are left alone, zeroing their
   margin would kill the page gutter and run text to the viewport edge. */
.ab-team-intro,
.ab-hero-body,
.team-grid,
.sch-book p,
.ct-done p,
.rd-hero .eyebrow,
.rd-def,
.quiz-done p,
.sv-hero-body,
.wk-hero .eyebrow,
.wk-hero-body,
.stat-band-closer {
  margin-left: 0;
  margin-right: auto;
}

/* Headings that sit loose in a <section> with no .container wrapper had
   relied on auto margins to centre. Align their left edge to the container
   grid instead, so they line up with the cards below them. */
.rs-case-section > .ab-kicker,
.rs-case-heading,
.rs-case-sub,
.rs-case-closer,
.sv-services > .ab-kicker,
.sv-services > h2,
.sv-industries > .ab-kicker,
.sv-industries > h2 {
  margin-left: max(1.5rem, calc((100% - 1180px) / 2));
  margin-right: auto;
}

/* Confirmation checkmarks read as icons, not centred content */
.ct-done-mark,
.quiz-done-mark {
  margin-left: 0;
  margin-right: auto;
}

/* The gradient rule under the case-studies heading follows the text */
.rs-case-heading::after {
  margin-left: 0;
  margin-right: auto;
}

/* Loose kickers/headings keep a readable measure */
.rs-case-heading {
  max-width: 22ch;
}

.rs-case-sub,
.rs-case-closer {
  max-width: 62ch;
}

@media (max-width: 650px) {
  .ab-hero {
    text-align: left;
  }

  .ab-hero-body {
    margin-left: 0;
    margin-right: auto;
  }
}

/* ---------- 3. Type scale: larger, heavier body copy ---------- */

html {
  font-size: 17px;
}

body {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

p,
li {
  line-height: 1.65;
}

/* Lead and body paragraphs on light backgrounds */
.ab-hero-body,
.sv-hero-body,
.wk-hero-body,
.ct-hero-body,
.rd-hero-body {
  font-size: clamp(1.12rem, 1.9vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Home hero sits on dark video: keep it white, just bigger and bolder */
.subhead {
  font-size: clamp(1.12rem, 1.7vw, 1.28rem);
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  max-width: 52ch;
  text-shadow: 0 2px 18px rgba(7, 7, 38, 0.85), 0 0 40px rgba(7, 7, 38, 0.6);
}

/* Card and box copy: was 0.88–0.98rem, too small */
.rs-more-case p,
.rs-box-list a,
.rs-box-list li span:first-child,
.sv-course-list a,
.stat-body,
.rs-teaser p,
.pros-risk-card p,
.tm-bio,
.tm-fact,
.sv-industry p,
.sv-service-card p {
  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
}

.rs-more-case h3,
.pros-risk-card h3,
.rs-box h3,
.rs-teaser h3,
.sv-industry h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
}

.rs-more-case h3 {
  font-size: 1.1rem;
}

/* Section headings */
.sv-services h2,
.sv-industries h2,
.ab-team h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
}

/* Kickers and tags: small by design, so make them darker and bolder */
.ab-kicker,
.rs-more-case-tag,
.rs-badge,
.stat-source,
.diag-stat-source,
.tm-role {
  font-weight: 700;
}

.ab-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.rs-more-case-tag,
.rs-badge {
  font-size: 0.74rem;
}

.stat-source,
.diag-stat-source {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* Team roles: blue labels like every other label (orange small text
   failed contrast) */
.tm-role {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
}

/* Links inside cards need to read as links */
.rs-case-link,
.rs-box-link,
.sv-service-link {
  font-size: 0.9rem;
  font-weight: 700;
}

/* Navigation and footer */
.main-nav a {
  font-size: 1rem;
  color: var(--ink);
}

.nav-dropdown a {
  font-size: 0.98rem;
  font-weight: 700;
}

.footer-col a {
  font-size: 1rem;
}

.footer-col h3 {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}

/* Buttons */
.btn {
  font-size: 1rem;
  font-weight: 700;
}

/* ---------- 4. Contrast fixes on colored surfaces ---------- */

.rs-case-card p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.05rem;
  font-weight: 400;
}

.rs-case-tag {
  background: rgba(255, 255, 255, 0.28);
  font-size: 0.74rem;
}

.rs-teaser-yellow p {
  color: rgba(7, 7, 38, 0.86);
}

.rs-teaser-lilac p {
  color: rgba(7, 7, 38, 0.88);
}

/* Card backgrounds were translucent, which muddied the text behind them */
.rs-more-case,
.rs-box,
.pros-risk-card,
.sv-service-card {
  background: #fff;
}

/* ---------- 5. Left-align remaining centered groups ---------- */

.ab-cta-actions,
.quiz-inner {
  justify-content: flex-start;
}

/* The four risk boxes lost their 01–04 labels; keep the label prominent */
.pros-risk-num {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

/* ---------- 6. Hero/CTA inner blocks align to the container grid ----------
   These carry .container but set a narrower max-width, so `margin: 0 auto`
   re-centred them inside the gutter. Pin their left edge to the same offset
   .container uses, so they line up with every section heading below. */

.ab-hero-inner,
.rd-hero-inner,
.sv-hero-inner,
.wk-hero-inner {
  margin-left: max(1.5rem, calc((100% - 1180px) / 2));
  margin-right: auto;
}

/* Phones: .container's gutter shrinks to 0.7rem, so the pin has to follow
   or these blocks overhang the viewport */
@media (max-width: 650px) {
  .ab-hero-inner,
  .rd-hero-inner,
  .sv-hero-inner,
    .wk-hero-inner {
    margin-left: 0.7rem;
  }
}

/* ==================================================================
   7. COLOR, richer, more saturated cards
   ================================================================== */

/* ---------- Case study cards: gradient bodies, accent pills ---------- */

.rs-case-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rs-case-card-orange {
  background: var(--accent);
}

.rs-case-card-blue {
  background: var(--accent-blue);
}

/* Was near-black; now the brand yellow with ink type for contrast */
.rs-case-card-sun {
  background: var(--accent-yellow);
  box-shadow: 0 20px 40px rgba(7, 7, 38, 0.28);
}

.rs-case-card-sun h3,
.rs-case-card-sun .rs-case-link {
  color: var(--ink);
}

.rs-case-card-sun p {
  color: rgba(7, 7, 38, 0.82);
}

.rs-case-card-sun .rs-case-tag {
  background: var(--ink);
  color: var(--accent-yellow);
}

.rs-case-card-sun:hover {
  box-shadow: 0 28px 52px rgba(7, 7, 38, 0.38);
}

/* Accent pills pop against the saturated fills */
.rs-case-card-orange .rs-case-tag,
.rs-case-card-blue .rs-case-tag {
  background: var(--accent-yellow);
  color: var(--ink);
}

/* Yellow reads well on the dark blue, but not on orange, too little
   luminance difference for small mono type, so that one stays white. */
.rs-case-card-blue .rs-case-link {
  color: var(--accent-yellow);
}

.rs-case-card-orange .rs-case-link {
  color: #fff;
}

/* ---------- Workshop format cards ---------- */

.sv-format {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  background: #fff;
}

/* ---------- Service cards ---------- */

.sv-service-card {
  position: relative;
  overflow: hidden;
}

.sv-service-card > * {
  position: relative;
  z-index: 1;
}

/* Service card labels and links: brand blue (orange small text failed contrast) */
.sv-service-card .ab-kicker,
.sv-service-card .sv-service-link {
  color: var(--accent-blue);
}

/* Under 1000px the hero unstacks onto the light page background and
   styles.css switches the subhead to dark ink. This file loads last, so
   it has to repeat that or the copy goes white-on-cream. */
@media (max-width: 1000px) {
  .subhead {
    color: var(--ink-soft);
    text-shadow: none;
    max-width: 62ch;
  }
}

/* ==================================================================
   8. RRA band + "why training fails" band (homepage)
   ================================================================== */

/* ---------- Split: heading left, text right (home page sections) ----------
   Headings take the narrow column; text fills the wide one, so every
   block ends on the same right edge as the cards below it while body
   lines stay at a readable length. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.split > h2 {
  margin: 0;
  max-width: none;
}

.split-body {
  padding-top: 0.45rem;
}

/* Short heading beside a longer paragraph: center it on the text */
.split-center {
  align-items: center;
}

.split-center > .split-body {
  padding-top: 0;
}

.split-body > p:last-child {
  margin-bottom: 0;
}

.split .rra-body,
.split .training-body {
  max-width: none;
}

/* Narrow screens: heading on top, text under it, both full width. Same
   breakpoint as the closing CTA band (.ab-cta-inner), which uses this
   split too; below 900px the heading column gets too narrow. */
@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .split-body {
    padding-top: 0;
  }
}

/* Stat-band closer: one statement spanning the card row */
.stat-band-closer {
  max-width: none;
  margin: 2.2rem 0 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.stat-band-closer p {
  margin: 0;
}

.stat-band-closer strong {
  color: var(--ink);
}

/* ---------- Case study proof (home page) ---------- */

.proof {
  padding: 4rem 0;
}

.proof-lead {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.proof-sub {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.4rem;
}

.proof-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.proof-card:hover {
  border-color: var(--accent-blue);
}

.proof-tag {
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.proof-card h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.proof-card:hover h3 {
  color: var(--accent-blue);
}

.proof-card p {
  margin: 0 0 1.3rem;
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.proof-link {
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.proof-actions {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }
}

.rra-band {
  padding: 3.8rem 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rra-lead {
  margin: 0.4rem 0 1.1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
}

.rra-body {
  margin: 0 0 1.1rem;
  max-width: 64ch;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
}


/* ---------- Why most training fails ---------- */

.training-band {
  padding: 3.6rem 0;
  background: var(--dark-surface);
}

.training-lead {
  margin: 0.4rem 0 1.1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 28ch;
}

.training-band .ab-kicker {
  color: var(--accent-yellow);
}

.training-body {
  margin: 0 0 1.1rem;
  max-width: 64ch;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.training-actions {
  margin-top: 0.5rem;
}

.training-source {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.training-source a {
  color: var(--accent-yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(234, 254, 83, 0.5);
}

.training-source a:hover {
  border-bottom-color: var(--accent-yellow);
}

/* Intro paragraph under a section heading */
.sv-list-intro {
  margin-left: max(1.5rem, calc((100% - 1180px) / 2));
  margin-right: auto;
  margin-top: -1.2rem;
  margin-bottom: 2.2rem;
  max-width: 62ch;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- About hero: human hand vs robot hand, statement on the paper ----------
   The sheet of paper in the photo sits at roughly 35%–64.5% of the width and
   12%–87% of the height; the copy block is pinned inside it in percentages so it
   scales with the image, and the type is vw-based for the same reason. The pen
   tip and the robot fingertip both reach the paper's edges at mid-height, so
   the block is inset from both sides. Under 900px the paper is too small to
   hold a headline, so the copy drops below the photo onto a white panel. */
.ab-hero-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

/* Cropped top and bottom to 40% of the photo's height (a 60% cut), keeping
   the band from about 32% to 72% where the pen and the robot finger meet the
   paper. The paper then runs the full height of the band. */
.ab-hero-photo .ab-hero-media {
  width: 100%;
  aspect-ratio: 5504 / 1229;
}

.ab-hero-photo .ab-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 53%;
}

.ab-hero-paper {
  position: absolute;
  top: 6%;
  left: 38.5%;
  width: 21.5%;
  height: 88%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.ab-hero-paper .ab-statement {
  margin: 0 0 0.7em;
}

/* One phrase per line; sized so the longest ("Not a grammar check.")
   stays on one line inside the paper, clear of the pen and the finger */
.ab-hero-paper .ab-lead,
.ab-hero-paper .ab-sub {
  font-size: clamp(1rem, 1.7vw, 2.3rem);
  line-height: 1.15;
  white-space: nowrap;
}

.ab-hero-paper .ab-statement {
  margin: 0;
}

.ab-hero-paper .ab-hero-body {
  max-width: none;
  font-size: clamp(0.85rem, 1.12vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 900px) {
  .ab-hero-photo .ab-hero-media {
    aspect-ratio: 3 / 1;
  }

  /* Same side gutter as .container, so the copy lines up with the page */
  .ab-hero-paper {
    position: static;
    width: auto;
    height: auto;
    padding: 1.6rem 1.5rem 2rem;
  }

  .ab-hero-paper .ab-lead,
  .ab-hero-paper .ab-sub {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    white-space: normal;
  }

  .ab-hero-paper .ab-hero-body {
    font-size: 1.08rem;
    max-width: 56ch;
  }
}

@media (max-width: 650px) {
  .ab-hero-paper {
    padding-inline: 0.7rem;
  }
}

/* ---------- Newsletter page ---------- */
.nl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.nl-webinar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.nl-video {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.nl-video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--ink);
}

.nl-video-body {
  padding: 1.1rem 1.4rem 1.4rem;
}

.nl-video h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}

.nl-video p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.nl-webinar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin: 1.4rem 0 0;
}

.nl-webinar-links a {
  font-weight: 700;
  color: var(--accent-blue);
  text-decoration: none;
}

.nl-webinar-links a:hover {
  text-decoration: underline;
}

@media (max-width: 800px) {
  .nl-webinar-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   Links and cards: one hover behavior across the site
   ================================================================== */

/* Every text link underlines on hover (and keyboard focus), same
   weight and offset everywhere. Buttons keep their own hover; links that
   wrap a whole card are handled below instead, so the whole card's text
   doesn't underline. The Reviews.io widget sits outside these regions. */
:is(.site-header, main, .site-footer)
  a:not(.btn, .skip-link, .brand, .proof-card, .team-card, .dict-card, .rs-case-card, .rs-more-case, .post-card-link, .post-feature-link):is(:hover, :focus-visible) {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.footer-social a:is(:hover, :focus-visible) {
  text-decoration: none;
}

/* Cards: hovering anywhere on the card underlines its action line
   (or its title, when the card has no action line). */
.proof-card:is(:hover, :focus-visible) .proof-link,
.team-card:is(:hover, :focus-visible) .team-cta,
.dict-card:is(:hover, :focus-visible) .dict-cta,
.rs-case-card:is(:hover, :focus-visible) .rs-case-link,
.rs-more-case:is(:hover, :focus-visible) h3,
.post-card-link:is(:hover, :focus-visible) .post-card-title,
.post-feature-link:is(:hover, :focus-visible) .post-feature-title,
.post-feature-link:is(:hover, :focus-visible) .post-feature-cta,
.rs-box:hover .rs-box-link,
.rs-teaser:hover .rs-case-link,
.sv-service-card:hover .sv-service-link {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

/* ---------- Resources: podcast, white papers, newsletter boxes ----------
   Same treatment as the case study and service cards: tag eyebrows and
   the lift on hover. The boxes stay white, so each tag takes its box's
   accent; the newsletter is yellow, so its tag is ink like the cards. */
.rs-box .ab-kicker,
.rs-teaser .ab-kicker {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.rs-box .ab-kicker + h3,
.rs-teaser .ab-kicker + h3 {
  margin-top: 0;
}

.rs-box-orange .ab-kicker {
  background: var(--accent);
  color: var(--ink);
}

.rs-box-blue .ab-kicker {
  background: var(--accent-blue);
  color: #fff;
}

.rs-teaser-yellow .ab-kicker {
  background: var(--ink);
  color: var(--accent-yellow);
}

.rs-box,
.rs-teaser {
  box-shadow: 0 20px 40px rgba(7, 7, 38, 0.1);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.rs-box:hover,
.rs-teaser:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 28px 52px rgba(7, 7, 38, 0.18);
}

.rs-teaser-yellow {
  box-shadow: 0 20px 40px rgba(7, 7, 38, 0.28);
}

.rs-teaser-yellow:hover {
  box-shadow: 0 28px 52px rgba(7, 7, 38, 0.38);
}

/* Episode and paper links: a real underline instead of the old border */
.rs-box-list a {
  border-bottom: 0;
}

/* No lift for people who turn motion off */
@media (prefers-reduced-motion: reduce) {
  .rs-box:hover,
  .rs-teaser:hover,
  .rs-case-card:hover,
  .sv-service-card:hover {
    transform: none;
  }
}