/* =========================================================
   TechniCollege Method Roadmap (approved English version, 24 Oct 2026)
   Source: TechniCollege_Roadmap_English.html — styles moved here unchanged
   in look, but scoped under .tc-roadmap so they can't affect the rest of
   the site, and without an inline <style> block (the site's CSP blocks it).
   Heading levels are shifted (h1→h2, h2→h3, h3→h4) because the page
   already has its own h1; their sizes are kept by class.
   ========================================================= */
.tc-roadmap{
  --forest: #203c35; --green: #3b6454; --gold: #b08a58; --paper: #f5f2ea; --muted: #596b60; --line: #c2b8a5;
  background: #e8e7e1; color: var(--forest);
  font-family: 'DM Sans', Arial, sans-serif; line-height: 1.48;
  padding: 25px 0;
}
.tc-roadmap *{ box-sizing: border-box; }
.tc-roadmap .sheet{ max-width: 1320px; margin: 0 auto; background: var(--paper); overflow: hidden; box-shadow: 0 22px 80px #1d352520; }
.tc-roadmap .top-line{ height: 7px; background: linear-gradient(90deg, #27473e, #b89566, #27473e); }
.tc-roadmap .rm-header{ padding: 56px 7% 36px; text-align: center; background: radial-gradient(ellipse at 50% -80%, #d5c7ac 0, transparent 70%); border-bottom: 1px solid #ddd6c9; }
.tc-roadmap .brand{ font-size: 0.8125rem; letter-spacing: .23em; font-weight: 800; color: var(--gold); }
.tc-roadmap .rm-title{ font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; color: var(--forest); font-size: clamp(1.75rem, calc(3.4vw * var(--font-scale)), 3rem); line-height: 1.12; max-width: 980px; margin: 15px auto 12px; letter-spacing: -.035em; }
.tc-roadmap .intro{ font-size: 1.0625rem; max-width: 900px; margin: 0 auto; color: #55695d; }
.tc-roadmap .intro strong{ color: var(--forest); }

.tc-roadmap .route{ position: relative; padding: 72px 6% 45px; isolation: isolate; }
.tc-roadmap .route::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #e2dacb; z-index: -2; }
.tc-roadmap .route-svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
.tc-roadmap .route-svg path{ fill: none; stroke: #a5b3a6; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 14; }
.tc-roadmap .start, .tc-roadmap .finish{ position: relative; z-index: 2; text-align: center; margin: 0 auto 42px; width: max-content; max-width: 100%; background: var(--forest); color: #fff; border-radius: 40px; padding: 13px 29px; font-size: 0.875rem; font-weight: 800; letter-spacing: .04em; }
.tc-roadmap .finish{ margin: 24px auto 0; }

.tc-roadmap .stations{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 13%; row-gap: 42px; direction: ltr; list-style: none; margin: 0; padding: 0; }
.tc-roadmap .station{ position: relative; min-width: 0; direction: ltr; background: #fffefb; border: 1px solid #ddd8cd; border-radius: 20px; padding: 24px 25px 24px; box-shadow: 0 12px 30px #3a4d3410; }
.tc-roadmap .station:nth-child(4n+1), .tc-roadmap .station:nth-child(4n+4){ grid-column: 1; }
.tc-roadmap .station:nth-child(4n+2), .tc-roadmap .station:nth-child(4n+3){ grid-column: 2; }
.tc-roadmap .station{ grid-column: auto !important; }
.tc-roadmap .station:nth-child(odd){ transform: translateY(-4px); }
.tc-roadmap .station:nth-child(even){ transform: translateY(24px); }
.tc-roadmap .pin{ position: absolute; top: -27px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--forest); color: #fff; border: 5px solid var(--paper); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--gold); }
.tc-roadmap .pin-num{ font-weight: 800; font-size: 1.0625rem; }
.tc-roadmap .pin-icon{ position: absolute; top: 41px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 1.125rem; }
.tc-roadmap .station-copy{ padding-top: 12px; }
.tc-roadmap .rm-eyebrow{ color: #80613a; /* darker than the source #9d7b4f for 4.5:1 contrast (WCAG AA) */ font-weight: 800; font-size: 0.75rem; letter-spacing: .13em; }
.tc-roadmap .rm-station-title{ font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; color: var(--forest); font-size: clamp(1.25rem, calc(2vw * var(--font-scale)), 1.6875rem); line-height: 1.18; margin: 7px 0 16px; letter-spacing: normal; }
.tc-roadmap .rm-learn-title{ font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; font-size: 0.9375rem; margin: 0 0 8px; color: var(--green); }
.tc-roadmap .learn ul{ list-style: disc; margin: 0; padding-inline-start: 22px; font-size: 0.9375rem; line-height: 1.55; color: var(--forest); }
.tc-roadmap .learn li{ padding-bottom: 5px; }
.tc-roadmap .learn li::marker{ color: #ae895b; }
.tc-roadmap .value{ background: #edf1eb; border-inline-start: 4px solid #b08a58; padding: 13px 16px; margin-top: 17px; border-radius: 8px; }
.tc-roadmap .value-title{ font-size: 0.9375rem; font-weight: 800; color: #2b5646; }
.tc-roadmap .diamond{ color: #a47d47; }
.tc-roadmap .value p{ margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.58; color: var(--forest); }

.tc-roadmap .core{ margin: 12px 6% 25px; background: var(--forest); color: #fff; padding: 33px 38px; border-radius: 20px; text-align: center; }
.tc-roadmap .rm-core-title{ font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; color: #e2c69a; font-size: 1.625rem; margin: 0; }
.tc-roadmap .core p{ font-size: 1.1875rem; max-width: 970px; margin: 12px auto; color: #fff; }

@media (min-width: 850px){
  .tc-roadmap .stations{ grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .tc-roadmap .station:nth-child(4n+2){ margin-top: 90px; }
  /* Source had -50px here, which made stations 3 and 7 overlap 1 and 5 (their number pins covered the card above). */
  .tc-roadmap .station:nth-child(4n+3){ margin-top: 12px; }
  .tc-roadmap .station:nth-child(4n+4){ margin-top: 35px; }
}
@media (max-width: 849px){
  .tc-roadmap{ padding: 0; }
  .tc-roadmap .sheet{ margin: 0; }
  .tc-roadmap .rm-header{ padding: 34px 5% 26px; }
  .tc-roadmap .route{ padding: 40px 6% 30px; }
  .tc-roadmap .stations{ grid-template-columns: 1fr; gap: 40px; }
  .tc-roadmap .station:nth-child(n){ transform: none; margin: 0; }
  .tc-roadmap .station{ padding: 24px 18px 19px; }
  .tc-roadmap .route-svg{ display: none; }
  .tc-roadmap .route::before{ left: 50%; background: repeating-linear-gradient(to bottom, #9faf9f 0 6px, transparent 6px 15px); }
  .tc-roadmap .start{ margin-bottom: 45px; }
  .tc-roadmap .core{ margin: 12px 4% 22px; padding: 23px; }
}
@media print{
  .tc-roadmap{ background: #fff; }
  .tc-roadmap .sheet{ max-width: none; margin: 0; box-shadow: none; }
  .tc-roadmap .station{ break-inside: avoid; box-shadow: none; }
  .tc-roadmap .station:nth-child(n){ transform: none; margin: 0; }
}

/* Site additions (outside the approved map content) */
.tc-roadmap :focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }
.tc-roadmap-after{ padding: 36px 0 56px; background: #e8e7e1; }
.tc-roadmap-after .container{ display: grid; gap: 24px; }
.tc-roadmap-after .au-notes{ max-width: 1320px; background: #fffefb; border: 1px solid #ddd8cd; border-radius: 16px; padding: 22px 24px; }
.tc-roadmap-after .au-notes h3{ font-family: var(--font-sans); font-size: .78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #8a6a3f; margin: 0 0 10px; }
.tc-roadmap-after .au-notes ul{ list-style: disc; padding-inline-start: 20px; display: grid; gap: 6px; }
.tc-roadmap-after .au-notes li{ font-size: .95rem; color: #203c35; }
.tc-roadmap-after .au-notes strong{ color: #203c35; }
.tc-roadmap-after .rm-cta{ text-align: center; }
body.a11y-contrast .tc-roadmap, body.a11y-contrast .tc-roadmap .sheet, body.a11y-contrast .tc-roadmap .station, body.a11y-contrast .tc-roadmap .value, body.a11y-contrast .tc-roadmap-after{ background: #000 !important; color: #fff !important; }
body.a11y-contrast .tc-roadmap .rm-title, body.a11y-contrast .tc-roadmap .rm-station-title, body.a11y-contrast .tc-roadmap .learn ul, body.a11y-contrast .tc-roadmap .value p, body.a11y-contrast .tc-roadmap .intro{ color: #fff !important; }