/* Built Logic — Team training page (pass v5, 12 Sep 2026).
   Page-scoped plain CSS. Loaded after assets/bl-visual.css, which owns the
   shared hero grid, film variants, diagram panel and motion tokens.

   Six locked colours only. Every composition here reads completely with no
   JavaScript: motion is an added class, never the source of the content.

   The v2 left-column gap came from .tt-prod (288px sticky track) holding a
   .tt-sum block whose content was shorter than the detail column. That grid,
   its position:sticky and the old eight-week rail are gone rather than
   patched: the page is now two top-aligned offer cards and one delivery
   diagram, so there is no sticky summary left to misalign. */

/* ---------------------------------------------------------------- shell */

.fs-page main > .fs-section:first-of-type { padding-top: 132px; }
@media (max-width: 760px) { .fs-page main > .fs-section:first-of-type { padding-top: 108px; } }
.fs-page .pill-nav a { text-decoration: none; }

.tr-section--tint { background: #E5E5E2; }
.tr-h2-sans {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: #232A31;
}
.tr-kicker {
  margin: 0 0 10px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #586069;
}

/* ----------------------------------------------------------------- hero */
/* The 45:55 grid, its gap and its stacking breakpoint are the shared .bl-hero
   module in assets/bl-visual.css. Nothing here re-declares them: the only
   page-local job is the production state, where the build strips
   [data-staging-only] and the media track would otherwise sit empty. */

.tr-hero:not(:has(.tr-hero__media .bl-film)) { grid-template-columns: minmax(0, 1fr); }
.tr-hero:not(:has(.tr-hero__media .bl-film)) .tr-hero__media { display: none; }

/* --------------------------------------------------------- offer cards */
/* Top-aligned, natural height. Price sits with its own offer, never in a
   distant sidebar, and nothing here is hover-only. */

.tr-offers { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.tr-offer {
  display: flex;
  flex-direction: column;
  border: 1px solid #E5E5E2;
  border-radius: 12px;
  background: #FAFAF8;
  padding: 30px 30px 32px;
}
@media (prefers-reduced-motion: no-preference) {
  .tr-offer { transition: border-color 180ms cubic-bezier(.2,.6,.2,1), box-shadow 180ms cubic-bezier(.2,.6,.2,1); }
}
.tr-offer:hover, .tr-offer:focus-within {
  border-color: #1B3A5B;
}
.tr-offer__name {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #232A31;
}
.tr-offer__price {
  margin: 14px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #1B3A5B;
}
.tr-offer__meta {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #E5E5E2;
  font: 500 12px/1.5 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #586069;
}
.tr-offer__b { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: #232A31; }
.tr-offer__note { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #586069; }
.tr-offer .fs-cta { margin-top: 26px; align-self: flex-start; }

/* ------------------------------------------------------- topic graphic */

.tr-topics { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tr-topic {
  border: 1px solid rgba(35,42,49,.18);
  border-radius: 12px;
  background: #FAFAF8;
  padding: 24px 22px 26px;
}
.tr-topic__mark { display: block; width: 100%; height: auto; margin: 0 0 18px; }
.tr-topic__k { margin: 0; font: 500 12px/1.45 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #1B3A5B; }

/* ----------------------------------------------------- delivery cycle */
/* The panel, its desktop/mobile variants and the whole one-time entry
   sequence are the shared module in assets/bl-visual.css and
   assets/bl-visual.js. Nothing page-local may re-declare them. There is no
   Replay control: the sequence runs once on first entry and settles. */

/* A short section introduction is centred where it balances a full-width
   graphic below it. Body copy, prices and offer detail stay left-aligned. */
.tr-intro { max-width: 64ch; margin-left: auto; margin-right: auto; text-align: center; }
.tr-intro .fs-lead { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .tr-intro { text-align: left; margin-left: 0; } }

.tr-diagram__svg { display: block; width: 100%; height: auto; }

/* ---------------------------------------------- the working method panel */
/* Sits immediately below the delivery graphic and replaces the old worked
   summary table. Plain type and rules: three labelled details, no document
   chrome pretending to be a completed client record. */

.tr-method {
  margin: 26px 0 0;
  padding: 26px 28px 28px;
  border: 1px solid rgba(35,42,49,.24);
  border-radius: 12px;
  background: #FAFAF8;
  max-width: 62em;
}
.tr-method__h { margin: 0; font: 600 clamp(20px, 2vw, 24px)/1.25 'Source Sans 3', system-ui, sans-serif; letter-spacing: -.005em; color: #232A31; }
.tr-method__b { margin: 12px 0 0; font-size: 17px; line-height: 1.62; color: #586069; max-width: 58ch; }
.tr-method__list { margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.tr-method__row { border-top: 1px solid #E5E5E2; padding-top: 14px; }
.tr-method__row dt { margin: 0; font: 500 11px/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #1B3A5B; }
.tr-method__row dd { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #232A31; }

/* ------------------------------------------------ the one closing action */
/* Folded into the final useful section rather than given its own slab. The
   heading, supporting line and button are centred as one block (File 2 v5
   section 5); the FAQ rows above them stay left-aligned for reading. */

.tr-close { margin: 33px 0 0; padding-top: 30px; border-top: 1px solid #586069; max-width: 800px; margin-inline: auto; text-align: center; }
.tr-close__h { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.18; letter-spacing: -.015em; color: #232A31; }
.tr-close__b { margin: 16px auto 0; font-size: 17px; line-height: 1.62; color: #586069; max-width: 52ch; }
.tr-close__a { margin: 24px 0 0; }

/* Centred standalone section heading. Not inherited: only the heading moves. */
.tr-centre { text-align: center; }

/* ------------------------------------------------------------ modules */
/* One expandable module per supporting story or retained curriculum. The
   summary is a real control: visible focus, no hover-only information. */

.tr-mod { margin: 28px 0 0; border-top: 1px solid #586069; max-width: 58em; }
.tr-mod + .tr-mod { margin-top: 20px; }
.tr-mod__k { margin: 18px 0 0; font: 500 11px/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #586069; }
.tr-mod__h { margin: 10px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.015em; color: #232A31; }
.tr-mod__sum {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 16px 0 0;
  padding: 12px 2px;
  cursor: pointer;
  font: 600 16px/1.4 'Source Sans 3', system-ui, sans-serif;
  color: #1B3A5B;
  list-style: none;
}
.tr-mod__sum::-webkit-details-marker { display: none; }
.tr-mod__sum::after { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-right: 1.5px solid #1B3A5B; border-bottom: 1.5px solid #1B3A5B; transform: rotate(45deg) translateY(-2px); }
details[open] > .tr-mod__sum::after { transform: rotate(225deg) translateY(-2px); }
.tr-mod__d { margin: 0; }
.tr-mod__sum:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 2px; }
.tr-mod__body { padding: 4px 0 18px; }
.tr-mod__body p { font-size: 17px; line-height: 1.65; color: #232A31; margin: 0 0 14px; max-width: 58ch; }
.tr-mod__cap { margin: 18px 0 0; font: 500 11px/1.6 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #1B3A5B; }
.tr-mod__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.tr-mod__list > li { border-top: 1px solid #E5E5E2; padding-top: 12px; }
.tr-mod__lk { margin: 0 0 7px; font: 500 11px/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #1B3A5B; }
.tr-mod__lb { margin: 0; font-size: 16px; line-height: 1.6; color: #586069; }

/* --------------------------------------------------------------- FAQ */
/* A centred 800px reading container. Question and answer text stays
   left-aligned inside it (File 2 v5 section 5). */

.fs-acc { border-top: 1px solid #E5E5E2; max-width: 800px; margin: 18px auto 0; }
.fs-acc__item { border-bottom: 1px solid #E5E5E2; }
.fs-acc__h { margin: 0; font: inherit; }
.fs-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; background: none; border: none; padding: 18px 2px; text-align: left; font: 600 17px/1.4 'Source Sans 3', sans-serif; color: #232A31; cursor: pointer; }
.fs-acc__btn:hover { color: #1B3A5B; }
.fs-acc__btn:focus-visible { outline: 2px solid #1B3A5B; outline-offset: -2px; }
.fs-acc__icon { position: relative; flex: 0 0 14px; height: 14px; }
.fs-acc__icon::before, .fs-acc__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.fs-acc__icon::after { transform: translateY(-50%) rotate(90deg); }
.fs-acc__btn[aria-expanded="true"] .fs-acc__icon::after { transform: translateY(-50%) rotate(0deg); }
.fs-acc__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.fs-acc__panel[data-open] { grid-template-rows: 1fr; visibility: visible; }
.fs-acc__inner { overflow: hidden; }
.fs-acc__inner p { color: #586069; font-size: 16px; max-width: 46em; padding: 2px 2px 24px; margin: 0; }
.fs-acc__inner a { color: #1B3A5B; }
@media (prefers-reduced-motion: no-preference) {
  .fs-acc__panel { transition: grid-template-rows 260ms ease, visibility 260ms; }
  .fs-acc__icon::after { transition: transform 200ms ease; }
}

/* -------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .tr-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tr-offers { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tr-mod__list { grid-template-columns: minmax(0, 1fr); }
  .tr-method__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .tr-offer { padding: 24px 22px 26px; }
  .tr-method { padding: 22px 22px 24px; }
  /* 17px + 1px separator + 30px padding = the 48px mobile gap from the last FAQ
     row's bottom border to the closing heading. */
  .tr-close { margin-top: 17px; }
}

/* ------------------------------------ closing button to footer boundary */
/* The shared .footer-shell carries margin-top: -40px for the insights-teaser
   transition, which left only 24px (desktop) and 4px (mobile) between this
   page's closing button and the footer's dark background. Cancelling it here
   restores the section's own 64px/44px bottom padding as the visible gap, the
   same scoped correction pages-map.css and pages-study.css already use. */


/* ==================================================================
   AI Training refresh (24 Sep 2026). Buttons, icon tiles, the hero
   field, FAQ cards and hover rules are shared: see the "Service page
   refresh" block in assets/bl-visual.css (body.bl-refresh).
   ================================================================== */

/* Offer cards: equal height, soft lift and a Consulting Blue rail on hover */
.tr-page .tr-offers { align-items: stretch; }
.tr-page .tr-offer { position: relative; overflow: hidden; border: 1px solid rgba(35, 42, 49, 0.1); border-radius: 18px; transition: transform 250ms var(--bl-ease-out), box-shadow 250ms ease, border-color 250ms ease; }
.tr-page .tr-offer .bl-icon { margin-bottom: 20px; }
.tr-page .tr-offer--lead { background: var(--bl-tint); border-color: rgba(27, 58, 91, 0.16); }
.tr-page .tr-offer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #1B3A5B; transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--bl-ease-out); }
.tr-page .tr-offer .fs-cta { margin-top: auto; }
.tr-page .tr-offer__note { margin-bottom: 26px; }
.tr-page .tr-offer__meta { font-family: "Source Sans 3", system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #1B3A5B; }
.tr-page .tr-offer:focus-within { border-color: rgba(27, 58, 91, 0.3); }
.tr-tailored { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 20px 24px; border: 1px dashed rgba(27, 58, 91, 0.3); border-radius: 18px; }
.tr-tailored .tr-offer__note { margin: 0; flex: 1; color: #232A31; font-size: 16px; }

/* Work your teams recognise: a tinted rounded sheet, not a grey band */
.tr-page .tr-section--tint { background: var(--bl-tint); margin: 0 clamp(8px, 1.4vw, 20px); border-radius: clamp(20px, 3vw, 36px); }
.tr-page .tr-topic { border: 1px solid rgba(35, 42, 49, 0.08); border-radius: 18px; background: #FAFAF8; transition: transform 250ms var(--bl-ease-out), box-shadow 250ms ease; }
.tr-page .tr-topic__k { font: 600 17px/1.35 "Source Sans 3", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #232A31; }

/* How the training is delivered: four connected steps with icons, no numbers */
.tr-cycle { margin: 36px 0 0; }
.tr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tr-step { position: relative; padding: 24px 22px 26px; border: 1px solid rgba(35, 42, 49, 0.1); border-radius: 18px; background: #FAFAF8; }
.tr-step .bl-icon { margin-bottom: 18px; }
.tr-step__h { margin: 0 0 8px; font: 600 19px/1.3 "Source Sans 3", system-ui, sans-serif; color: #232A31; }
.tr-step p { margin: 0; font-size: 16px; line-height: 1.6; color: #586069; }
.tr-step:not(:last-child)::after { content: ''; position: absolute; top: 47px; right: -21px; width: 22px; height: 1.5px; background: #AFC4DD; }
.tr-step--accent { background: var(--bl-tint); border-color: rgba(27, 58, 91, 0.22); }
.tr-cycle.is-armed.is-live [data-step] { animation-duration: 280ms; animation-delay: calc(var(--i, 0) * 60ms); }
.tr-cycle__loop { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 14px 20px; border-radius: 14px; background: var(--bl-tint); font-size: 15px; line-height: 1.55; color: #232A31; }

/* The working method: a soft card, headings instead of mono labels */
.tr-page .tr-method { border: 1px solid rgba(35, 42, 49, 0.1); border-radius: 18px; background: #FAFAF8; }
.tr-page .tr-method__row { border-top: 2px solid #AFC4DD; }
.tr-page .tr-method__row dt { font: 600 17px/1.35 "Source Sans 3", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #232A31; }
.tr-page .tr-method__row dd { color: #586069; }
.tr-page .tr-mod { border: 1px solid #E5E5E2; border-radius: 14px; padding: 0 20px; max-width: none; }
.tr-page .tr-mod__lk { font: 600 16px/1.4 "Source Sans 3", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #232A31; }

/* Closing: a tinted panel instead of a rule */
.tr-page .tr-close { margin-top: clamp(40px, 5vw, 64px); padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 56px); border-top: 0; border-radius: clamp(20px, 3vw, 32px); background: var(--bl-tint); max-width: 56rem; }

@media (hover: hover) and (pointer: fine) {
  .tr-page .tr-offer:hover { transform: translateY(-6px); border-color: rgba(27, 58, 91, 0.2); }
  .tr-page .tr-offer:hover::before { transform: scaleX(1); }
  .tr-page .tr-topic:hover { transform: translateY(-4px); }
}
@media (max-width: 1000px) {
  .tr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-step:nth-child(2)::after { display: none; }
}
@media (max-width: 760px) {
  .tr-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tr-step::after { display: none; }
  .tr-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 18px; }
  .tr-step .bl-icon { margin: 0; width: 44px; height: 44px; }
  .tr-step__h { margin: 0; }
  .tr-step p { grid-column: 1 / -1; margin-top: 12px; }
  .tr-tailored { flex-direction: column; align-items: flex-start; }
  .tr-page .tr-offer .fs-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-page .tr-offer, .tr-page .tr-topic, .tr-page .tr-offer::before { transition: border-color 200ms ease; }
  .tr-page .tr-offer:hover, .tr-page .tr-topic:hover { transform: none; }
}