/**
 * Teamed Research - /research/ hub and report pages.
 *
 * Own file, NOT appended to custom.css (634KB). Loads only on research
 * screens, so a report page does not pay for the whole site's CSS.
 *
 * Every token is prefixed --tr- so nothing here can collide with the brand
 * variables already on the page.
 *
 * !! TEAL IS FOR ACTION ONLY. --tr-teal is reserved for links, buttons,
 * hover/focus/active and chart data series (series colour is functional
 * encoding, not decoration). Section eyebrows, the italic word in an H1 and
 * the 01-09 section numbers are deliberately NOT teal - the design system
 * changed eyebrows from teal to --mid under that rule. On the dark hero,
 * where --tr-mid would be invisible, light text does that job instead.
 */

:root {
  --tr-teal:#00A896; --tr-teal-dark:#007A6E; --tr-teal-light:#E6F7F5; --tr-teal-mid:#7FD3CA;
  --tr-ink:#1A2B2A; --tr-mid:#3D5250; --tr-gray:#6B7B7A;
  --tr-ground:#FFFFFF; --tr-surface:#F5F9F8; --tr-border:#E2EEEC; --tr-border-strong:#D0E0DD;
  --tr-danger:#C62828;
  --tr-hero:linear-gradient(160deg,#1A2B2A 0%,#2A3E3C 60%,#1E3230 100%);
  --tr-on-dark:#FFFFFF;
  --tr-display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --tr-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --tr-ease:cubic-bezier(.2,.8,.2,1);
}

/* ── shell ─────────────────────────────────────────────────────────────── */
.tr-page { font-family:var(--tr-sans); font-size:16px; line-height:1.65; color:var(--tr-mid);
  background:var(--tr-ground); }
.tr-in { max-width:1100px; margin:0 auto; padding-left:24px; padding-right:24px; }
.tr-page h1,.tr-page h2,.tr-page h3 { font-family:var(--tr-display); font-weight:400;
  color:var(--tr-ink); margin:0; text-wrap:balance; }
.tr-page p { margin:0 0 16px; }
.tr-page ul { margin:0 0 16px; padding-left:20px; }
.tr-page li { margin-bottom:9px; }
.tr-page strong { color:var(--tr-ink); font-weight:600; }
.tr-page a { color:var(--tr-teal-dark); text-decoration:none; transition:color .12s var(--tr-ease); }
.tr-page a:hover { color:var(--tr-teal); }
.tr-page a:focus-visible,.tr-page button:focus-visible { outline:2px solid var(--tr-teal); outline-offset:3px; border-radius:3px; }

.tr-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--tr-mid); display:block; }
.tr-sec { padding:80px 0; }
.tr-sec--alt { background:var(--tr-surface); }

/* ── dark hero ─────────────────────────────────────────────────────────── */
.tr-hero { position:relative; overflow:hidden; background:var(--tr-hero); color:var(--tr-on-dark); }
.tr-hero::after { content:""; position:absolute; right:-180px; top:-220px; width:640px; height:640px;
  background:radial-gradient(circle,rgba(0,168,150,.18) 0%,transparent 70%); pointer-events:none; }
.tr-hero > .tr-in { position:relative; z-index:1; }
.tr-hero .tr-eyebrow { color:rgba(255,255,255,.66); }
.tr-hero h1 { color:var(--tr-on-dark); font-size:clamp(34px,5.4vw,60px); line-height:1.08;
  letter-spacing:-.005em; max-width:820px; margin-top:14px; }
.tr-hero h1 em { font-style:italic; }
.tr-hero__sub { font-size:18px; line-height:1.6; color:rgba(255,255,255,.78); max-width:640px; margin-top:22px; }
.tr-hero--hub { padding:96px 0 88px; }
.tr-hero--report { padding:56px 0 72px; }
.tr-crumb { font-size:13px; color:rgba(255,255,255,.66); }
.tr-crumb a { color:rgba(255,255,255,.66); }
.tr-crumb a:hover { color:var(--tr-on-dark); }
.tr-hero--report .tr-eyebrow { margin-top:24px; }
.tr-hero__dek { font-size:19px; line-height:1.6; color:rgba(255,255,255,.82); max-width:720px; margin-top:20px; }
.tr-hero__src { font-size:13px; color:rgba(255,255,255,.60); margin-top:18px; }
.tr-hero__src span + span::before { content:"·"; margin:0 8px; opacity:.5; }

.tr-corpus { display:flex; flex-wrap:wrap; gap:32px; margin-top:44px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.12); }
.tr-corpus b { display:block; font-family:var(--tr-display); font-size:30px; line-height:1.1; color:var(--tr-on-dark); }
.tr-corpus span { display:block; font-size:13px; color:rgba(255,255,255,.66); margin-top:4px; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.tr-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--tr-sans);
  font-size:14px; font-weight:600; border-radius:8px; padding:12px 22px; border:1px solid transparent;
  cursor:pointer; transition:background .15s var(--tr-ease),color .15s var(--tr-ease),border-color .15s var(--tr-ease);
  min-height:44px; }
.tr-btn--primary { background:var(--tr-teal); color:#fff; }
.tr-btn--primary:hover { background:var(--tr-teal-dark); color:#fff; }
.tr-btn--ondark { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); }
.tr-btn--ondark:hover { background:rgba(255,255,255,.16); color:#fff; }
.tr-btn--outline { background:transparent; color:var(--tr-teal-dark); border-color:var(--tr-border-strong); }
.tr-btn--outline:hover { background:var(--tr-teal); color:#fff; border-color:var(--tr-teal); }
.tr-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ── stat cards ────────────────────────────────────────────────────────── */
.tr-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.tr-stat { border:1px solid var(--tr-border); border-radius:14px; padding:24px; background:var(--tr-ground); }
.tr-stat em { display:block; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tr-mid); }
.tr-stat b { display:block; font-family:var(--tr-display); font-size:40px; line-height:1.05;
  color:var(--tr-ink); margin:10px 0 6px; font-variant-numeric:tabular-nums; }
.tr-stat span { display:block; font-size:14px; color:var(--tr-gray); line-height:1.5; }
.tr-band { border-bottom:1px solid var(--tr-border); padding:36px 0; background:var(--tr-ground); }
.tr-band .tr-stat { border:0; padding:0; }
.tr-band .tr-stat b { font-size:44px; }

/* ── hub: featured card ────────────────────────────────────────────────── */
.tr-sechead { display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:28px; }
.tr-sechead h2 { font-size:36px; line-height:1.2; }
.tr-sechead span { font-size:13px; color:var(--tr-gray); }

.tr-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  border:1px solid var(--tr-border); border-radius:14px; overflow:hidden; margin-bottom:24px;
  transition:transform .2s var(--tr-ease),border-color .2s var(--tr-ease),box-shadow .2s var(--tr-ease); }
.tr-feat:hover { transform:translateY(-2px); border-color:var(--tr-teal);
  box-shadow:0 8px 24px rgba(0,122,110,.10); }
.tr-feat__l { padding:40px; }
.tr-feat__meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tr-pill { display:inline-block; background:var(--tr-teal-light); color:var(--tr-teal-dark);
  border-radius:999px; padding:5px 12px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; }
.tr-feat__date { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tr-gray); }
.tr-feat h3 { font-size:34px; line-height:1.18; margin:16px 0 12px; }
.tr-feat__dek { font-size:16px; line-height:1.65; color:var(--tr-mid); }
.tr-feat__src { font-size:13px; color:var(--tr-gray); margin:0 0 20px; }
.tr-feat__cta { font-size:15px; font-weight:600; color:var(--tr-teal-dark); }
.tr-feat:hover .tr-feat__cta { color:var(--tr-teal); }
.tr-feat__r { background:var(--tr-surface); border-left:1px solid var(--tr-border); padding:40px;
  display:flex; flex-direction:column; justify-content:center; }
.tr-feat__big { font-family:var(--tr-display); font-size:64px; line-height:1; color:var(--tr-teal-dark);
  font-variant-numeric:tabular-nums; }
.tr-feat__cap { font-size:13px; color:var(--tr-gray); margin-top:8px; }
.tr-spark { margin-top:20px; height:150px; }
.tr-spark svg { width:100%; height:100%; display:block; overflow:visible; }
.tr-spark__ax { display:flex; justify-content:space-between; font-size:11px; color:var(--tr-gray); margin-top:8px; }

/* ── hub: how we work + list ───────────────────────────────────────────── */
.tr-cards3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:32px; }
.tr-card3 { background:var(--tr-ground); border:1px solid var(--tr-border); border-radius:14px; padding:28px; }
.tr-card3 h3 { font-size:22px; line-height:1.3; margin-bottom:10px; }
.tr-card3 p { font-size:15px; line-height:1.6; margin:0; }
.tr-lede { font-size:17px; line-height:1.65; max-width:68ch; margin-top:14px; }

.tr-list { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.tr-card { display:block; border:1px solid var(--tr-border); border-radius:14px; padding:24px;
  background:var(--tr-ground); transition:transform .2s var(--tr-ease),border-color .2s var(--tr-ease),box-shadow .2s var(--tr-ease); }
.tr-card:hover { transform:translateY(-2px); border-color:var(--tr-teal); box-shadow:0 8px 24px rgba(0,122,110,.10); }
.tr-card h3 { font-size:24px; margin:8px 0; }
.tr-card p { color:var(--tr-mid); margin:0; font-size:15px; }
.tr-empty { color:var(--tr-gray); }

/* ── blog columns ──────────────────────────────────────────────────────── */
.tr-cols2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:48px; margin-top:32px; }
.tr-cols2 .tr-eyebrow { margin-bottom:12px; }
.tr-blogrow { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--tr-border); font-family:var(--tr-display);
  font-size:20px; line-height:1.3; color:var(--tr-ink); transition:color .12s var(--tr-ease); }
a.tr-blogrow:hover { color:var(--tr-teal-dark); }
.tr-blogrow i { font-style:normal; color:var(--tr-teal-dark); flex:none; }
.tr-blogrow--soon { color:var(--tr-gray); }
.tr-blogrow--soon i { color:var(--tr-border-strong); }

/* ── report body ───────────────────────────────────────────────────────── */
.tr-body { display:flex; gap:64px; align-items:flex-start; padding:64px 0 80px; }
.tr-toc { width:220px; flex:none; position:sticky; top:100px; }
.tr-toc ol { list-style:none; margin:14px 0 0; padding:0; }
.tr-toc li { margin:0; }
.tr-toc a { display:block; font-size:13px; line-height:1.4; padding:7px 0 7px 12px;
  border-left:2px solid var(--tr-border); color:var(--tr-gray); }
.tr-toc a:hover { color:var(--tr-mid); }
.tr-toc a.is-active { border-left-color:var(--tr-teal); color:var(--tr-ink); font-weight:600; }
.tr-article { max-width:720px; flex:1 1 auto; min-width:0; }
.tr-article > section { margin-bottom:72px; }
.tr-article > section:last-child { margin-bottom:0; }
.tr-num { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--tr-gray); display:block; margin-bottom:10px; }
.tr-article h2 { font-size:clamp(27px,3.6vw,36px); line-height:1.2; margin-bottom:18px; }
.tr-article h3 { font-size:20px; margin:28px 0 10px; }
.tr-article p,.tr-article li { font-size:17px; line-height:1.7; }

/* ── figures ───────────────────────────────────────────────────────────── */
.tr-fig { margin:28px 0 0; border:1px solid var(--tr-border); border-radius:14px; padding:28px;
  display:flex; flex-direction:column; gap:20px; background:var(--tr-ground); }
.tr-fig__h { display:flex; flex-direction:column; gap:4px; }
.tr-fig__title { font-size:16px; font-weight:600; color:var(--tr-ink); line-height:1.35; }
.tr-fig__sub { font-size:13px; color:var(--tr-gray); }
.tr-fig figcaption { font-size:13px; color:var(--tr-gray); border-top:1px solid var(--tr-border); padding-top:14px; }
.tr-legend { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:var(--tr-mid); }
.tr-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:8px; vertical-align:-1px; }
.tr-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tr-svg { width:100%; height:auto; display:block; overflow:visible; }
.tr-svg .gl { stroke:var(--tr-border); stroke-width:1; }
.tr-svg .ax { fill:var(--tr-gray); font-size:12px; font-family:var(--tr-sans); }
.tr-svg .ln { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.tr-svg .hit { fill:transparent; cursor:crosshair; }
.tr-svg .guide { stroke:var(--tr-border-strong); stroke-width:1; stroke-dasharray:4 4; opacity:0; }

/* data-table alternative: the accessibility answer and a citation aid */
.tr-fig__toggle { align-self:flex-start; background:none; border:0; padding:6px 0; cursor:pointer;
  font-family:var(--tr-sans); font-size:13px; font-weight:600; color:var(--tr-teal-dark); min-height:auto; }
.tr-fig__toggle:hover { color:var(--tr-teal); }
.tr-data { overflow-x:auto; }
.tr-data table { border-collapse:collapse; width:100%; font-size:13px; }
.tr-data th,.tr-data td { border:1px solid var(--tr-border); padding:7px 10px; text-align:left;
  font-variant-numeric:tabular-nums; }
.tr-data th { background:var(--tr-surface); color:var(--tr-ink); font-weight:600; }
.tr-data td { color:var(--tr-mid); }
.tr-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── bars / ladders / columns ──────────────────────────────────────────── */
.tr-bars { display:flex; flex-direction:column; gap:12px; }
.tr-bar { display:grid; grid-template-columns:minmax(120px,190px) 1fr 44px; align-items:center; gap:14px; }
.tr-bar__l { font-size:13px; color:var(--tr-mid); line-height:1.35; }
.tr-bar__t { height:14px; background:var(--tr-surface); border-radius:4px; overflow:hidden; }
.tr-bar__f { height:100%; border-radius:4px; background:var(--tr-border-strong); }
.tr-bar__v { font-size:13px; font-weight:600; color:var(--tr-ink); text-align:right; font-variant-numeric:tabular-nums; }

.tr-lad { display:flex; flex-direction:column; gap:14px; }
.tr-lad__r b { display:block; font-size:13px; color:var(--tr-mid); font-weight:400; margin-bottom:6px; }
.tr-lad__b { display:flex; gap:2px; height:44px; }
.tr-lad__s { display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
  min-width:0; overflow:hidden; white-space:nowrap; }
.tr-lad__s:first-child { border-radius:8px 0 0 8px; }
.tr-lad__s:last-child { border-radius:0 8px 8px 0; }

.tr-grp { display:grid; grid-template-columns:minmax(130px,34%) 1fr; gap:16px; align-items:center;
  padding:10px 12px; border-radius:8px; }
.tr-grp--hi { background:var(--tr-teal-light); }
.tr-grp__l { font-size:13px; color:var(--tr-ink); font-weight:500; }
.tr-grp__l em { display:block; font-style:normal; font-size:11px; color:var(--tr-gray); font-weight:400; margin-top:2px; }
.tr-grp__bars { display:flex; flex-direction:column; gap:4px; }
.tr-grp__row { display:grid; grid-template-columns:1fr 40px; align-items:center; gap:10px; }
.tr-grp__t { height:8px; background:var(--tr-surface); border-radius:3px; overflow:hidden; }
.tr-grp__f { height:100%; border-radius:3px; }
.tr-grp__v { font-size:11px; color:var(--tr-gray); text-align:right; font-variant-numeric:tabular-nums; }

.tr-cols { display:flex; align-items:flex-end; gap:12px; height:220px; }
.tr-col { flex:1 1 0; max-width:56px; margin:0 auto; display:flex; flex-direction:column;
  justify-content:flex-end; height:100%; }
.tr-colwrap { flex:1 1 0; display:flex; flex-direction:column; align-items:center; height:100%; }
.tr-col__v { font-size:12px; font-weight:600; color:var(--tr-ink); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.tr-col__b { width:100%; max-width:56px; background:var(--tr-border-strong); border-radius:4px 4px 0 0; }
.tr-col__l { font-size:12px; color:var(--tr-mid); margin-top:10px; text-align:center; line-height:1.3; }
.tr-col__l em { display:block; font-style:normal; font-size:11px; color:var(--tr-gray); }

.tr-dumb { display:flex; flex-direction:column; gap:18px; }
.tr-dumb__r { display:grid; grid-template-columns:minmax(130px,200px) 1fr 64px; align-items:center; gap:16px; }
.tr-dumb__l { font-size:13px; color:var(--tr-mid); }
.tr-dumb__t { position:relative; height:16px; }
.tr-dumb__line { position:absolute; top:7px; height:2px; background:var(--tr-border-strong); }
.tr-dumb__d { position:absolute; top:1px; width:14px; height:14px; border-radius:50%; margin-left:-7px; }
.tr-dumb__d--a { background:var(--tr-ink); }
.tr-dumb__d--b { background:#fff; border:2px solid var(--tr-teal); }
.tr-dumb__v { font-size:13px; font-weight:600; color:var(--tr-mid); text-align:right; font-variant-numeric:tabular-nums; }

.tr-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-top:28px; }
.tr-tile { border:1px solid var(--tr-border); border-radius:14px; padding:24px; text-align:left; }
.tr-tile--hi { border:2px solid var(--tr-teal); background:var(--tr-teal-light); }
.tr-tile b { display:block; font-family:var(--tr-display); font-size:44px; line-height:1.05; color:var(--tr-ink);
  font-variant-numeric:tabular-nums; }
.tr-tile span { display:block; font-size:14px; color:var(--tr-gray); margin-top:8px; line-height:1.45; }

/* ── callouts, method, citation ────────────────────────────────────────── */
.tr-call { background:var(--tr-teal-light); border-radius:14px; padding:28px; margin:28px 0 0; }
.tr-call .tr-eyebrow { margin-bottom:10px; }
.tr-call q,.tr-call__q { display:block; font-family:var(--tr-display); font-size:24px; line-height:1.35;
  color:var(--tr-ink); quotes:none; }
.tr-call p:last-child { margin-bottom:0; }
.tr-call--note { background:var(--tr-surface); border:1px solid var(--tr-border); }
.tr-call--note p { font-size:16px; }

.tr-method { background:var(--tr-surface); border:1px solid var(--tr-border); border-radius:14px; padding:36px; }
.tr-method h2 { font-size:clamp(25px,3.2vw,32px); margin:10px 0 16px; }
.tr-cite { border:1px solid var(--tr-border); border-radius:14px; padding:28px; margin-top:24px; }
.tr-cite__t { font-size:15px; line-height:1.7; color:var(--tr-ink); }
.tr-cite__t em { font-style:italic; }
.tr-cite__n { font-size:13px; color:var(--tr-gray); margin:14px 0 18px; }

.tr-tip { position:fixed; pointer-events:none; background:var(--tr-ink); color:#fff; font-size:12px;
  padding:10px 12px; border-radius:8px; line-height:1.5; opacity:0; transition:opacity .12s;
  z-index:60; font-variant-numeric:tabular-nums; max-width:240px;
  box-shadow:0 12px 32px rgba(26,43,42,.12); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .tr-body { flex-direction:column; gap:32px; padding-top:40px; }
  .tr-toc { position:static; width:100%; }
  .tr-toc ol { display:flex; flex-wrap:wrap; gap:4px 0; }
  .tr-toc a { padding:8px 12px; border-left:0; border-bottom:2px solid var(--tr-border); min-height:44px; }
  .tr-toc a.is-active { border-left:0; border-bottom-color:var(--tr-teal); }
}
@media (max-width:768px) {
  .tr-in { padding-left:20px; padding-right:20px; }
  .tr-sec { padding:48px 0; }
  .tr-hero--hub { padding:56px 0 48px; }
  .tr-hero--report { padding:32px 0 48px; }
  .tr-feat__l,.tr-feat__r { padding:28px; }
  .tr-feat__r { border-left:0; border-top:1px solid var(--tr-border); }
  .tr-fig,.tr-method { padding:20px; }
  .tr-article > section { margin-bottom:48px; }
  .tr-cols2 { gap:32px; }
  .tr-btn { width:100%; justify-content:center; }
  .tr-bar { grid-template-columns:1fr; gap:6px; }
  .tr-bar__v { text-align:left; }
  .tr-grp,.tr-dumb__r { grid-template-columns:1fr; gap:8px; }
  .tr-dumb__v { text-align:left; }
}
@media (max-width:480px) { .tr-in { padding-left:16px; padding-right:16px; } .tr-sec { padding:40px 0; } }

@media (prefers-reduced-motion: reduce) {
  .tr-page *,.tr-tip { transition:none !important; }
  .tr-feat:hover,.tr-card:hover { transform:none; }
  html { scroll-behavior:auto !important; }
}

@media print {
  .tr-btn,.tr-tip,.tr-toc,.tr-fig__toggle { display:none; }
  .tr-hero { background:none !important; color:var(--tr-ink); }
  .tr-hero h1,.tr-hero .tr-eyebrow,.tr-hero__dek,.tr-hero__src,.tr-crumb { color:var(--tr-ink) !important; }
  .tr-hero::after { display:none; }
  .tr-fig,.tr-stat,.tr-call,.tr-method,.tr-tile { break-inside:avoid; }
  .tr-data { display:block !important; }
  .tr-body { display:block; }
}