:root {
  --tim-content-width: 1280px;
  --tim-page-gutter: clamp(20px, 3vw, 32px);
}

/* Full-width surfaces retain their backgrounds; their contents share one grid. */
[data-tim-container] {
  width: 100%;
  max-width: var(--tim-content-width) !important;
  box-sizing: border-box;
  padding-inline: var(--tim-page-gutter) !important;
}

/* The /blog listing fills the page; shared navigation and article widths stay scoped separately. */
[data-screen-label='Playbook'] > [data-tim-container] {
  max-width: none !important;
}

[data-screen-label] h1,
.blog-article h1 {
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid #cc9e00 !important;
  outline-offset: 5px;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 200;
  background: #cc9e00;
  color: #101010;
  padding: 12px 18px;
}
.skip-link:focus {
  top: 12px;
}
.enquiry-status {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(90vw, 620px);
  padding: 18px 24px;
  background: #172d3f;
  color: #f6f6f6;
  border: 1px solid #cc9e00;
  font:
    400 16px/1.5 Poppins,
    sans-serif;
  box-shadow: 0 8px 30px #0008;
}
/* Keep the design's block layout when navigation divs become semantic links. */
.tim-nav-item > a,
.tim-nav-menu > [data-tim-navmenuitem] {
  display: block;
}
.tim-nav-item > a:hover {
  color: #f6f6f6 !important;
}
.tim-nav-menu > [data-tim-navmenuitem]:hover,
.tim-nav-menu > [data-tim-navmenuitem]:focus-visible {
  color: #f6f6f6 !important;
  background: rgba(154, 206, 214, 0.18) !important;
}
.tim-nav-item:focus-within .tim-nav-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  transition:
    opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-tim-theme='light'] .tim-nav-item > a:hover {
  color: #101010 !important;
}
html[data-tim-theme='light'] .tim-nav-menu > [data-tim-navmenuitem]:hover,
html[data-tim-theme='light'] .tim-nav-menu > [data-tim-navmenuitem]:focus-visible {
  color: #101010 !important;
  background: rgba(40, 89, 97, 0.14) !important;
}
image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
image-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
input,
select,
textarea {
  scroll-margin-top: 100px;
}
[data-screen-label] {
  outline: none;
}
[data-tim-splinewrap] {
  background: #141414 !important;
}

@media (max-width: 1000px) {
  .tim-nav-item {
    padding: 8px 0 !important;
  }
  /* Gear is a button rather than a link, so it is named here too, or it keeps
     the design's 10px while the other items grow to 14px. */
  .tim-nav-item > a,
  .tim-nav-item > div:first-child {
    font-size: 14px !important;
  }
  #main-content > div > div:has(> .tim-nav-item) {
    flex-wrap: wrap !important;
  }
  #main-content > div > div:has([data-tim-navcta]) > div {
    height: auto !important;
    min-height: 80px;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  #main-content > div > div:has([data-tim-navcta]) > div > div:has(.tim-nav-item) {
    order: 3;
    flex-basis: 100% !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  [data-tim-navcta] {
    margin-left: auto;
    padding: 12px !important;
  }
}
@media (max-width: 640px) {
  [data-screen-label] [style*='grid-template-columns:repeat(3'],
  [data-screen-label] [style*='grid-template-columns:repeat(2'],
  [data-screen-label] [style*='grid-template-columns:1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }
  [data-screen-label] h1 {
    overflow-wrap: anywhere;
  }
  .tim-contact-card > div {
    padding: 24px 18px !important;
  }
  table {
    display: block;
    max-width: 100%;
    overflow: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive content grids: minimum tracks must fit their container. */
[style*='grid-template-columns:repeat(auto-fit,minmax(180px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(210px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(220px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(240px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(260px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(280px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(300px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(340px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
}
[style*='grid-template-columns:repeat(auto-fit,minmax(440px'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) !important;
}

#main-content img,
#main-content video,
#main-content iframe {
  max-width: 100%;
}
#main-content [style*='display:grid'] > * {
  min-width: 0;
}
@media (max-width: 1000px) {
  [data-screen-label] [style*='grid-template-columns:minmax(280px'],
  [data-screen-label] [style*='grid-template-columns:minmax(240px'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tim-nav-menu {
    max-width: calc(100vw - 32px);
    max-height: 65vh;
    overflow-y: auto;
  }
}
@media (max-width: 760px) {
  [data-screen-label] [style*='grid-template-columns:repeat(6'],
  [data-screen-label] [style*='grid-template-columns:repeat(5'],
  [data-screen-label] [style*='grid-template-columns:repeat(4'],
  [data-screen-label] [style*='grid-template-columns:repeat(3'],
  [data-screen-label] [style*='grid-template-columns:minmax(0,360px)'],
  [data-screen-label] [style*='grid-template-columns:repeat(2'],
  [data-screen-label] [style*='grid-template-columns:1fr 1fr'],
  [data-screen-label] [style*='grid-template-columns:1.15fr'],
  [data-screen-label] [style*='grid-template-columns:1.1fr'],
  [data-screen-label] [style*='grid-template-columns:1.05fr'],
  [data-screen-label] [style*='grid-template-columns:1.6fr'],
  [data-screen-label] [style*='grid-template-columns:2fr'] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }
  [data-screen-label] [style*='grid-template-columns:repeat(6'] > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px;
  }
  /* These are the side-by-side halves of the design's wide rows. On a phone
     each takes the full row: without the basis, a half keeps flex:1's zero
     basis and two halves share one line at a third of the screen each. */
  [data-screen-label] [style*='min-width:320px'],
  [data-screen-label] [style*='min-width:340px'] {
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
  /* The article header's title and picture are the same kind of half, built
     by the article component rather than the design, so the rule above cannot
     rely on their inline style text. */
  .blog-article-lead > * {
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
  [data-screen-label] input:not([type='checkbox']),
  [data-screen-label] select,
  [data-screen-label] textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }
  [data-screen-label] h1,
  [data-screen-label] h2 {
    overflow-wrap: anywhere;
  }
  .tim-nav-item > a,
  [data-tim-navmenuitem] {
    min-height: 44px;
    box-sizing: border-box;
  }
  .cookie-panel {
    box-sizing: border-box;
    max-height: calc(100dvh - 24px);
  }
  .cookie-actions button {
    min-width: 0;
    min-height: 44px;
  }
}

/* The article, set the way the design sets its own article screens. A post
   migrated from the old site arrives as plain tags, its styling stripped, so
   the design's type is applied here instead of leaving it to the browser. */
.blog-article {
  background: #141414;
  color: #f6f6f6;
  font-family: Poppins, sans-serif;
}
.blog-article-head {
  max-width: var(--tim-content-width);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 60px) var(--tim-page-gutter);
  box-sizing: border-box;
}
.blog-article-body {
  max-width: var(--tim-content-width);
  margin: 0 auto;
  padding: 0 var(--tim-page-gutter) 60px;
  box-sizing: border-box;
  font:
    300 17px/1.8 Poppins,
    sans-serif;
  color: #c9c9c9;
  overflow-wrap: anywhere;
}
/* Plain posts keep the same left edge as the header. Constrain prose itself,
   rather than centering a narrow body independently of the page grid. Tables,
   figures and composed content retain the available width. */
.blog-article-body:not(:has(> .post-design)) > :is(p, ul, ol, blockquote, pre) {
  max-width: 72ch;
}
.blog-article-body > :first-child {
  margin-top: 0;
}
.blog-article-body p {
  /* The design system clamps every paragraph to 68ch and strips its margin.
     The design's own article body overrides both, so this does too. */
  margin: 18px 0 0;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}
.blog-article-body h2 {
  font:
    italic 800 clamp(22px, 2.4vw, 32px) / 1.25 Poppins,
    sans-serif;
  letter-spacing: -0.02em;
  color: #f6f6f6;
  margin: 52px 0 0;
}
.blog-article-body h3 {
  font:
    italic 800 clamp(18px, 1.8vw, 24px) / 1.3 Poppins,
    sans-serif;
  letter-spacing: -0.02em;
  color: #f6f6f6;
  margin: 40px 0 0;
}
.blog-article-body h4,
.blog-article-body h5,
.blog-article-body h6 {
  font:
    600 17px/1.4 Poppins,
    sans-serif;
  color: #f6f6f6;
  margin: 32px 0 0;
}
.blog-article-body ul,
.blog-article-body ol {
  margin: 18px 0 0;
  padding-left: 22px;
}
.blog-article-body li {
  margin: 8px 0 0;
}
.blog-article-body blockquote {
  margin: 32px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid #cc9e00;
  font:
    italic 400 19px/1.7 Poppins,
    sans-serif;
  color: #f6f6f6;
}
.blog-article-body figure {
  margin: 32px 0 0;
}
.blog-article-body figcaption {
  font:
    500 11px 'JetBrains Mono',
    monospace;
  letter-spacing: 0.1em;
  color: #8f8f8f;
  margin-top: 10px;
  text-transform: uppercase;
}
.blog-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #151515;
  margin: 32px 0 0;
}
.blog-article-body a {
  color: #cc9e00;
}
.blog-article-body strong {
  color: #f6f6f6;
  font-weight: 600;
}
.blog-article-body hr {
  border: 0;
  border-top: 1px solid rgba(246, 246, 246, 0.12);
  margin: 44px 0 0;
}
.blog-article-body table {
  display: block;
  overflow-x: auto;
  margin: 32px 0 0;
}
.blog-article-body pre {
  white-space: pre-wrap;
  margin: 32px 0 0;
}
/* A post drawn in the design (lib/blog-content.js, designPostStyles): its own
   rules set its spacing, type and pictures, so the plain article styling above
   stands aside. The design sets its own gutter, the phone one included. */
.blog-article-body:has(> .post-design) {
  max-width: var(--tim-content-width);
  padding: 0;
}
/* Authored posts carry database CSS with viewport-sized gutters. Align their
   outer root to the article header without changing stored content or grids. */
#main-content .blog-article-body > .post-design > :first-child {
  padding-inline: var(--tim-page-gutter);
}
.post-design p,
.post-design h2,
.post-design h3,
.post-design img {
  margin: 0;
}
/* The design system's paragraph, as the design has it: held to 68ch unless
   the post's own rules give it a width. */
.post-design p {
  width: auto;
  max-width: 68ch;
}
.post-design img {
  background: none;
  border-radius: 0;
}

/* Word review: mobile navigation and Machine page flow. */
[data-tim-menutoggle] {
  display: none;
}
@media (max-width: 760px) {
  [data-tim-navbar] {
    height: auto !important;
    min-height: 72px;
    display: grid !important;
    grid-template-columns: auto minmax(72px, 1fr) auto;
    gap: 12px !important;
    padding: 12px 18px !important;
  }
  [data-tim-menutoggle] {
    display: block;
    justify-self: center;
    min-height: 44px;
    padding: 10px 14px !important;
  }
  [data-tim-navlinks] {
    display: none !important;
    grid-column: 1/-1;
    width: 100%;
    padding: 8px 0 16px;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-navlinks] {
    display: flex !important;
  }
  /* The open menu takes over the screen. The header's pinned wrapper becomes
     the full-screen layer (its blur would trap a fixed layer inside it), the
     menu scrolls within it, the page behind is held still, and the menu
     button becomes a close button. */
  div:has(> [data-tim-navbar][data-mobile-open='true']) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 300 !important;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #141414 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html.tim-menu-open,
  html.tim-menu-open body {
    overflow: hidden !important;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-menutoggle] {
    position: relative;
    width: 46px;
    height: 46px;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-menutoggle] svg {
    visibility: hidden;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-menutoggle]::before,
  [data-tim-navbar][data-mobile-open='true'] [data-tim-menutoggle]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-menutoggle]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-menutoggle]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  /* Build, Create and Grow: the capability cards sit outside the labelled
     screen the grid rules above are scoped to, so they stayed three across. */
  div:has(> .tim-uno) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* The Players: the heading is 17% of the screen wide per letter and does not
     wrap, so on a phone it ran past both edges. 15% fits at every width. */
  [data-screen-label] [style*='clamp(64px,17vw,280px)'] {
    font-size: 15vw !important;
  }
  /* Start: the form sat inside the page margin, the card's padding and its own,
     leaving its fields two thirds of the screen wide. */
  [data-screen-label] div:has(> .tim-contact-card) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tim-contact-card > div {
    padding: 16px 12px !important;
  }
  .tim-contact-card > div > div:has(> form) {
    padding: 24px 16px !important;
    border-left: 0 !important;
  }
  [data-tim-navbar] .tim-nav-item {
    width: 100%;
    padding: 0 !important;
  }
  [data-tim-navbar] .tim-nav-item > a,
  [data-tim-navbar] .tim-nav-item > div:first-child {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 10px 4px !important;
  }
  [data-tim-navbar] .tim-nav-menu {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100%;
    margin: 0 0 8px;
  }
  [data-tim-navcta] {
    padding: 10px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  /* Only the hero's picture layer: on The Players the first child holds the
     heading, which was faded with it. */
  [data-tim-pagehero] > div:first-child:not(:has(h1)) {
    width: 100% !important;
    opacity: 0.52;
    background-position: center bottom !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 28%,
      #000 76%,
      transparent
    ) !important;
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 76%, transparent) !important;
  }
  [data-tim-accordion] {
    min-height: auto !important;
    padding: 24px 18px 48px !important;
  }
  [data-tim-accordion] > div {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  [data-tim-accordion] [data-tim-stack] {
    height: auto !important;
    overflow: visible !important;
    display: grid !important;
    gap: 22px !important;
  }
  [data-tim-accordion] [data-tim-card] {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    clip-path: none !important;
    border: 1px solid rgba(204, 159, 0, 0.28) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  [data-tim-accordion] [data-tim-card] > div:first-child {
    padding: 26px 22px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  [data-tim-accordion] [data-tim-card] > div:nth-child(2) {
    min-height: clamp(260px, 78vw, 420px) !important;
  }
}

/* Native homepage banner: WebGL canvas owned by src/machine-banner.js. */
[data-tim-machine-scene] {
  contain: strict;
}
[data-tim-machine-scene] canvas {
  touch-action: pan-y;
}

/* Client review items, September 2026. */

/* Mobile navigation uses a hamburger icon rather than the word "Menu". */
[data-tim-menutoggle] svg {
  display: block;
}
@media (max-width: 760px) {
  [data-tim-menutoggle] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
  }
}

/* Playbook discovery: a stable reading order with measured masonry row spans. */
.blog-search,
.blog-archive {
  --blog-surface: #151515;
  --blog-ink: #f6f6f6;
  --blog-muted: #b3cce6;
  --blog-line: #4a535c;
  color: var(--blog-ink);
}
html[data-tim-theme='light'] .blog-search,
html[data-tim-theme='light'] .blog-archive {
  --blog-surface: #fff;
  --blog-ink: #101010;
  --blog-muted: #34536b;
  --blog-line: #75818b;
}
.blog-search {
  margin-top: 28px;
  width: 100%;
}
.blog-search label {
  display: block;
  font:
    500 13px/1.5 Poppins,
    sans-serif;
  margin-bottom: 8px;
}
.blog-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--blog-line);
}
.blog-search-field svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--blog-muted);
  stroke-width: 1.6;
}
.blog-search input {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  color: var(--blog-ink);
  caret-color: #cc9e00;
  border: 0;
  border-radius: 0;
  font:
    400 14px/1.5 Poppins,
    sans-serif;
}
.blog-search input:focus {
  outline: 0 !important;
}
.blog-search-field:focus-within {
  border-bottom-color: #cc9e00;
  box-shadow: 0 2px 0 #cc9e00;
}
.blog-search-field:focus-within svg {
  stroke: #cc9e00;
}
.blog-search input::placeholder {
  color: var(--blog-muted);
  opacity: 1;
}
.blog-search input::-webkit-search-cancel-button {
  display: none;
}
.blog-search button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--blog-muted);
  font:
    500 12px/1.5 Poppins,
    sans-serif;
  cursor: pointer;
}
.blog-result-count {
  margin: 24px 0 20px;
  font:
    400 13px/1.6 Poppins,
    sans-serif;
  color: var(--blog-muted);
  overflow-wrap: anywhere;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.blog-grid .blog-card {
  display: block;
  min-width: 0;
  color: var(--blog-ink);
  text-decoration: none;
}
.blog-grid .blog-card[hidden] {
  display: none;
}
.blog-card-content {
  background: var(--blog-surface);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-card-content:not([data-has-image]) {
  background: #172d3f;
  --blog-ink: #f6f6f6;
  --blog-muted: #b3cce6;
  color: var(--blog-ink);
}
#main-content .blog-card-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.blog-card-copy {
  position: relative;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-meta,
.blog-card-author {
  margin: 0;
  font:
    500 11px/1.7 'JetBrains Mono',
    monospace;
  letter-spacing: 0.1em;
  color: var(--blog-muted);
  text-transform: uppercase;
}
#main-content .blog-card-title {
  margin: 12px 0 0;
  font:
    italic 800 clamp(1.2rem, 1.7vw, 1.65rem)/1.2 Poppins,
    sans-serif;
  color: var(--blog-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.blog-card-excerpt {
  margin: 14px 0 0;
  font:
    400 14px/1.65 Poppins,
    sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--blog-muted);
}
.blog-card-author {
  margin-top: 18px;
}
.blog-card-read {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font:
    600 13px/1.5 Poppins,
    sans-serif;
  color: var(--blog-muted);
}
.blog-card:hover .blog-card-read {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.blog-more button,
.blog-empty button {
  border: 1px solid var(--blog-line);
  background: transparent;
  color: var(--blog-ink);
  font:
    600 12px/1.5 Poppins,
    sans-serif;
  padding: 13px 26px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}
.blog-more button:hover,
.blog-empty button:hover {
  border-color: #cc9e00;
}
.blog-empty {
  padding: 40px 0 48px;
  max-width: 52ch;
}
.blog-empty h2 {
  margin: 0 0 12px;
  font:
    700 24px/1.3 Poppins,
    sans-serif;
  color: var(--blog-ink);
}
.blog-empty p {
  margin: 0 0 24px;
  font:
    400 16px/1.6 Poppins,
    sans-serif;
  color: var(--blog-muted);
}
@media (max-width: 1023px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-card-copy {
    padding: 22px;
  }
}
/* Client review, October: The Machine's stacked cards. Each card slides down
   by its stacking offset (--card-y) inside a panel that clips at its bottom,
   while the card's content stays centred on the whole panel, so the lower
   part of the Create and Grow cards, where their buttons are, fell below the
   fold. Padding the content by the card's own offset centres it in the part
   of the panel the card can actually show. */
/* Wider screens only: on a phone the cards are not stacked but laid out one
   after another, and padding them by the stacking offset left each one a
   screen-tall empty box. */
@media (min-width: 1200px) and (pointer: fine), (min-width: 1367px) {
  [data-tim-card] > * {
    padding-bottom: var(--card-y, 0px) !important;
  }
}
/* Client review, October: the case studies.
   Card text runs the full width of its card. The design system clamps every
   paragraph to 68ch; the design overrides that inline where it meant to, and
   these pages' cards did not, so they read narrow. An inline max-width still
   wins, so straplines the design narrowed on purpose keep their measure. */
[data-screen-label^='Case '] p {
  max-width: none;
}
/* EO Ignite: the eight-step row ran to six tracks with two steps orphaned on
   a second line. Four tracks give two even rows. */
[data-screen-label='Case EO Ignite'] [style*='repeat(auto-fit,minmax(220px,1fr))'] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* EO Ignite: "One studio. Three ways to contribute." shares that style, so its
   three cards sat in four columns with one left empty. Three cards, three
   columns across the full width, from tablet up; a phone keeps one. */
@media (min-width: 601px) {
  [data-screen-label='Case EO Ignite']
    [style*='repeat(auto-fit,minmax(220px,1fr))']:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* EO Ignite: the studio gallery ran to as many small tiles as the screen
   would take, seven on a wide one. Six to a row, two even rows of the twelve,
   each as wide as the row allows, as the client asked. */
[data-screen-label='Case EO Ignite'] [style*='repeat(auto-fill,minmax(220px,1fr))'] {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
/* Isn't It Incredible: the eight-step row goes from six tracks to four, the
   six-card journey from four to three (two even rows rather than four and
   two), and the five image cards stretch to fill the line instead of leaving
   empty auto-fill tracks on the right. */
[data-screen-label='Case Isnt It Incredible'] [style*='repeat(auto-fit,minmax(220px,1fr))'] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Desktop only: this selector outranks the phone and tablet collapse below. */
@media (min-width: 1024px) {
  [data-screen-label='Case Isnt It Incredible']
    [style*='repeat(auto-fit,minmax(220px,1fr))']:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
[data-screen-label='Case Isnt It Incredible'] [style*='repeat(auto-fill,minmax(180px,1fr))'] {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
/* The fixed counts above are for wide screens; phones and tablets keep the
   responsive collapse the rest of the site has. */
@media (max-width: 1023px) {
  [data-screen-label='Case EO Ignite'] [style*='repeat(auto-fit,minmax(220px,1fr))'],
  [data-screen-label='Case Isnt It Incredible'] [style*='repeat(auto-fit,minmax(220px,1fr))'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-screen-label='Case EO Ignite'] [style*='repeat(auto-fill,minmax(220px,1fr))'] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  [data-screen-label='Case EO Ignite'] [style*='repeat(auto-fit,minmax(220px,1fr))'],
  [data-screen-label='Case Isnt It Incredible'] [style*='repeat(auto-fit,minmax(220px,1fr))'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen-label='Case EO Ignite'] [style*='repeat(auto-fill,minmax(220px,1fr))'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* FAQ answers are in the page for search engines and shown on a click; the
   hidden attribute must win over any display rule the design gives them. */
[data-tim-faqanswer][hidden] {
  display: none;
}
/* FAQ rows: larger play/stop icons with a brand glow. The design ships them as
   PNGs at 14-15px; the client asked for them bigger with a glow. */
[data-tim-faqicon] img,
[data-tim-faqicon] svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 7px rgba(204, 158, 0, 0.6));
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}
[data-tim-faqicon]:hover img,
[data-tim-faqicon]:hover svg {
  filter: drop-shadow(0 0 11px rgba(204, 158, 0, 0.95));
  transform: scale(1.06);
}

/* "What we can combine": the elastic strip becomes a scrollable row on
   narrow screens, where the hover-to-expand interaction cannot work. */
@media (max-width: 760px) {
  [data-tim-caps] {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    overflow: visible !important;
  }
  [data-tim-caps] > * {
    flex: none !important;
    min-height: clamp(160px, 42vw, 240px);
  }
}

/* Carousels respond to a horizontal drag or swipe; keep vertical scrolling. */
[data-screen-label='The Players'],
[data-screen-label='Levels'] {
  touch-action: pan-y;
}

/* The design clips full-bleed page art on its own wrapper, but the September
   export moved the page blocks outside that wrapper, so oversized decorative
   art (the Players portrait and display type) could scroll the page sideways
   on narrow screens. `clip` is used rather than `hidden` because it does not
   create a scroll container, so the sticky navigation keeps working. */
#main-content {
  overflow-x: clip;
}

/* iOS zooms the page when a focused field is under 16px. The page forms are
   already covered; this also catches the newsletter field in the footer. */
@media (max-width: 760px) {
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Clickable divs in the design become real links. Without this they pick up
   the stylesheet's gold link colour instead of the colour the design gave
   them, which turned the whole footer gold. */
a[data-tim-navlink] {
  color: inherit;
  text-decoration: none;
}

/* Client review: the footer must run full width on desktop. Its grid is
   auto-fit with a full-width newsletter row spanning 1 / -1, which stops
   auto-fit collapsing empty tracks, so on wide screens the four columns
   bunched to the left of up to seven tracks. Fix the desktop column count. */
@media (min-width: 761px) {
  [data-tim-footergrid] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Client review: level pages on mobile. On phones the header's two buttons
   squeezed the logo to nothing and ran off the right edge. Row one keeps the
   logo, Start the Machine and the menu button; Book a Slot moves into the
   opened menu, where both buttons share a full-width row. */
@media (max-width: 760px) {
  [data-tim-navbar] {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    column-gap: 10px !important;
  }
  [data-tim-navbar] > :first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: max-content;
  }
  [data-tim-navctas] {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0 !important;
  }
  [data-tim-menutoggle] {
    grid-column: 4;
    grid-row: 1;
    justify-self: end !important;
  }
  [data-tim-navlinks] {
    grid-row: 2;
  }
  [data-tim-navctas] [data-tim-navcta2] {
    display: none !important;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-navctas] {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-bottom: 16px;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-navctas] > * {
    display: block !important;
    flex: 1 1 0;
    text-align: center;
  }
  /* Top contact bar: tighter on phones so it does not crowd the header. */
  [data-tim-topbar] {
    padding: 8px 18px !important;
    row-gap: 6px !important;
    justify-content: center !important;
  }
}
@media (max-width: 380px) {
  [data-tim-navcta] {
    padding: 10px 10px !important;
    letter-spacing: 0.06em !important;
  }
}

/* Client review: level pages on mobile. The package comparison (feature,
   package A, package B) keeps its three labelled columns on phones instead of
   stacking values with no column to say which package they belong to. */
@media (max-width: 760px) {
  [data-screen-label] [style*='grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)'] {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }
}

/* Client review: on phones the "One machine. Three ways to grow." cards stacked
   as Create, Build, Grow, following the order the desktop grid needs. They now
   read in the machine's own order, each with the copy card that follows it. */
@media (max-width: 760px) {
  [data-tim-why] > :nth-child(1) {
    order: 0;
  }
  [data-tim-why] > :nth-child(4) {
    order: 1;
  }
  [data-tim-why] > :nth-child(3) {
    order: 2;
  }
  [data-tim-why] > :nth-child(2) {
    order: 3;
  }
  [data-tim-why] > :nth-child(5) {
    order: 4;
  }
  [data-tim-why] > :nth-child(6) {
    order: 5;
  }
}

/* Start and the level sign-up: the design draws the submit as a full-width
   bar. The build makes it a real button, which sizes to its text, and with
   the design's padding of 14px 0 the words touched its border. It takes the
   form's full width again, with room either side. */
button[style*='padding:14px 0;border-radius:6px'] {
  display: block;
  width: 100%;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* The video pop-ups, on the home page and Wins, share one television. On a
   phone its knobs kept their 96px column beside the screen, leaving the
   screen a narrow strip with the video in its top third. The screen takes the
   full width and the knobs and close button run in a row beneath it. */
@media (max-width: 760px) {
  div:has(> [style*='linear-gradient(150deg,#2B2723,#1A1715)']) {
    width: 100% !important;
  }
  [style*='position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.86)'] {
    padding: 16px !important;
  }
  [style*='linear-gradient(150deg,#2B2723,#1A1715)'] {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  [style*='linear-gradient(150deg,#2B2723,#1A1715)'] > div:first-child {
    border-radius: 14px !important;
  }
  [style*='linear-gradient(150deg,#2B2723,#1A1715)'] > div:last-child {
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 4px !important;
  }
  [style*='linear-gradient(150deg,#2B2723,#1A1715)'] > div:last-child > div:nth-child(2) {
    flex-direction: row !important;
    gap: 14px !important;
  }
  [style*='linear-gradient(150deg,#2B2723,#1A1715)'] > div:last-child > div:nth-child(2) > div {
    transform: scale(0.75);
  }
}

/* Client review V7: phones only. Every rule here is inside the phone
   breakpoint, so tablet and desktop layouts are untouched. */
@media (max-width: 760px) {
  /* Header: email and phone as icons, on one line with the social icons. */
  [data-tim-topbar] {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  [data-tim-topbar] > div:first-child {
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  [data-tim-topbar] > div:first-child a {
    font-size: 0 !important;
    gap: 0 !important;
  }
  [data-tim-topbar] > div:first-child a svg {
    width: 18px;
    height: 18px;
  }

  /* Menu takeover: Start the Machine sits at the top, under the logo row. */
  [data-tim-navbar][data-mobile-open='true'] [data-tim-navctas] {
    grid-row: 2 !important;
    padding: 4px 0 8px !important;
  }
  [data-tim-navbar][data-mobile-open='true'] [data-tim-navlinks] {
    grid-row: 3 !important;
  }

  /* Footer: centred. */
  [data-tim-footergrid] > *,
  [data-tim-footergrid] > * * {
    text-align: center !important;
  }
  [data-tim-footergrid] > * [style*='display:flex'],
  [data-tim-footergrid] > * [style*='display:grid'] {
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
  }
  [data-tim-footergrid] [style*='padding-left'] {
    padding-left: 0 !important;
  }
  [data-tim-footergrid] ~ div,
  div:has(> [data-tim-footergrid]) > div:last-child {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Spacing: the design's sections are 60px above and below, which stacks
     to a 120px gap on a phone. */
  [data-screen-label] [style*='padding:60px 32px 60px'] {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }
  [data-screen-label] [style*='padding:60px 32px 0'] {
    padding-top: 28px !important;
  }
  [data-screen-label] [style$='padding:60px 32px'],
  [data-screen-label] [style*='padding:60px 32px;'] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* A padded section inside another padded section doubled the side margin. */
  [data-screen-label] [style*='padding:60px 32px'] [style*='padding:60px 32px'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* The heading tile of a six-column grid, home "Why work with TIM" and the
     Playbook's Featured heading, keeps its own height. */
  [data-screen-label] [style*='grid-column:1 / 3;grid-row:1 /'] {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Umbraco services: text cards, not picture tiles, so no tile height. */
  [data-screen-label] [style*='grid-template-columns:repeat(6,minmax(0,1fr));gap:24px'] > * {
    min-height: 0 !important;
  }
  /* Logo rows (Build, Wins, case studies) sit closer to what follows. */
  [data-screen-label] [style='padding:0 0 60px'] {
    padding-bottom: 24px !important;
  }
  [data-screen-label] [style*='margin-top:60px;padding:60px 0;background:linear-gradient'] {
    margin-top: 0 !important;
  }
  /* Level pages: the Book button and the FAQ. */
  [data-screen-label] [style*='max-width:640px;margin:0 auto;padding:60px 32px 72px'] {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }
  [data-screen-label] [style*='max-width:840px;margin:0 auto;padding:60px 32px'] {
    padding-top: 28px !important;
  }

  /* Home: hero buttons centred. */
  [data-screen-label='Home'] [style*='display:flex;flex-wrap:wrap;gap:12px;margin-top:30px'] {
    justify-content: center !important;
  }
  /* Home showreel: a smaller play button, less space under the video. */
  [data-screen-label] [style*='width:104px;height:104px;border-radius:50%;background:#CC9E00'] {
    width: 64px !important;
    height: 64px !important;
  }
  [data-screen-label] [style*='width:104px;height:104px;border-radius:50%;background:#CC9E00'] img {
    width: 24px !important;
    height: 24px !important;
  }
  [data-screen-label]
    [style*='position:relative;max-width:none;margin:0 auto;padding:0 32px 60px'] {
    padding-bottom: 24px !important;
  }

  /* The closing call to action: left aligned and shorter. */
  [style*='min-height:clamp(440px,58vh,640px);padding:100px 32px 120px'] {
    min-height: 0 !important;
    padding: 56px 24px 64px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* The Machine: the rig picture moves below the heading, clear of the text. */
  [style*="background-image:url('assets/machine-hero-rig"] {
    top: auto !important;
    height: 200px !important;
    width: 100% !important;
    background-position: center bottom !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  [style*="background-image:url('assets/machine-hero-rig"] ~ [style*='z-index:2;max-width:none'] {
    padding-bottom: 220px !important;
  }
  /* The Machine's build path: Go live fits inside its panel. */
  [data-screen-label] a[style*='left:73.8%;top:77.8%'] {
    padding: 8px 11px !important;
    gap: 5px !important;
    font-size: 10px !important;
  }

  /* Wins: the awards two to a row. */
  [data-screen-label='Wins']
    [style*='grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  [data-screen-label='Wins']
    [style*='grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px']
    [style*='padding:24px'] {
    padding: 14px !important;
  }

  /* Isn't It Incredible: the journey cards two to a row, and the picture
     after them, above the Ditch the Lump button. */
  [data-screen-label='Case Isnt It Incredible']
    [style*='grid-template-columns:minmax(0,1fr) minmax(0,2fr)'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen-label='Case Isnt It Incredible']
    [style*='grid-template-columns:minmax(0,1fr) minmax(0,2fr)']
    > :first-child {
    order: 2;
  }
  [data-screen-label='Case Isnt It Incredible']
    [style*='grid-template-columns:minmax(0,1fr) minmax(0,2fr)']
    [style*='repeat(auto-fit,minmax(220px,1fr))'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  [data-screen-label='Case Isnt It Incredible']
    [style*='grid-template-columns:minmax(0,1fr) minmax(0,2fr)']
    [style*='padding:24px'] {
    padding: 16px !important;
  }

  /* Levels: the cards sit under the heading, and Choose your level below
     them rather than over them. */
  [data-screen-label] [style*='display:flex;flex-direction:column;width:100%;min-height:100vh'] {
    min-height: 0 !important;
  }
  [data-screen-label] [style*='position:relative;flex:1;min-height:clamp(540px,60vh,700px)'] {
    flex: none !important;
    min-height: 600px !important;
  }
  [data-screen-label] [style*='position:absolute;left:50%;top:50%;width:min(440px,82vw)'] {
    top: 200px !important;
  }

  /* Custom Build: plain cards, two to a row, nothing to tap. */
  [data-screen-label] [style*='display:flex;gap:8px;height:clamp(360px,42vw,460px)'] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
  }
  [data-screen-label] [style*='display:flex;gap:8px;height:clamp(360px,42vw,460px)'] > * {
    flex: none !important;
    height: 170px !important;
    pointer-events: none;
  }
  [data-screen-label] [style*='display:flex;gap:8px;height:clamp(360px,42vw,460px)'] > * * {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    opacity: 1;
  }
  [data-screen-label]
    [style*='display:flex;gap:8px;height:clamp(360px,42vw,460px)']
    > *
    > :last-child {
    padding: 14px !important;
  }

  /* The Players: the heading above its glow; the logo on the story line. */
  [data-screen-label='The Players'] h1 {
    position: relative;
    z-index: 1;
  }
  [data-screen-label='The Players'] h2[style*='flex-wrap:wrap'] {
    flex-wrap: nowrap !important;
    font-size: 21px !important;
    white-space: nowrap;
  }

  /* Playbook: subject buttons centred and smaller, in three or four lines. */
  [data-screen-label='Playbook'] [style*='display:flex;flex-wrap:wrap;gap:10px;margin-top:44px'] {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 24px !important;
  }
  [data-screen-label='Playbook'] [style*='display:flex;flex-wrap:wrap;gap:10px;margin-top:44px'] a {
    padding: 8px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  /* Start: the social icons in two rows of four. */
  [data-screen-label] [style*='display:flex;gap:18px;align-items:center;flex-wrap:wrap'] {
    display: grid !important;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 18px 30px !important;
  }

  /* Page headings sized so a long word, Johannesburg or Revolutionising,
     stays whole. */
  [data-screen-label] h1[style*='clamp(40px,7vw,96px)'] {
    font-size: min(40px, 8.4vw) !important;
    overflow-wrap: normal !important;
  }

  /* TIM Academy: How you learn centred, the courses two to a row. */
  [data-screen-label='Academy']
    [style*='repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:30px']
    > * {
    text-align: center !important;
  }
  [data-screen-label='Academy']
    [style*='repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:30px']
    > *
    > [style*='display:flex;align-items:center'] {
    justify-content: center !important;
  }
  [data-screen-label='Academy'] [style*='repeat(auto-fit,minmax(230px,1fr));gap:14px'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  [data-screen-label='Academy'] [style*='repeat(auto-fit,minmax(230px,1fr));gap:14px'] > * {
    padding: 16px !important;
  }
}

/* Client review V8: tablets. A tablet here is any screen 761px to 1199px wide,
   and a touch screen up to 1366px (an iPad Pro on its side). A laptop or
   desktop with a mouse at 1200px or wider matches neither, so desktop layouts
   are untouched. */
@media (min-width: 761px) and (max-width: 1199px),
  (min-width: 761px) and (max-width: 1366px) and (pointer: coarse) {
  /* Home: the hero no longer fills a tall screen, which pushed its text out of
     view on a tablet held upright. */
  [style*='min-height:calc(100vh - 80px);display:flex;align-items:center'] {
    min-height: min(calc(100vh - 80px), 640px) !important;
  }
  /* The closing call to action: shorter. */
  [style*='min-height:clamp(440px,58vh,640px);padding:100px 32px 120px'] {
    min-height: 0 !important;
    padding: 72px 32px 80px !important;
  }

  /* The Machine: the cards one after another, as on a phone. The pinned,
     scroll-driven panel does not hold on a tablet. */
  [data-tim-accordion] {
    min-height: auto !important;
    padding: 32px 32px 56px !important;
  }
  [data-tim-accordion] > div {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  [data-tim-accordion] [data-tim-stack] {
    height: auto !important;
    overflow: visible !important;
    display: grid !important;
    gap: 24px !important;
  }
  [data-tim-accordion] [data-tim-card] {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    clip-path: none !important;
    border: 1px solid rgba(204, 159, 0, 0.28) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  [data-tim-accordion] [data-tim-card] > div:first-child {
    padding: 32px 28px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  [data-tim-accordion] [data-tim-card] > div:nth-child(2) {
    min-height: 380px !important;
  }

  /* Wins: the logo row closer to Podcasts we've worked on, and the case
     studies two rows of two. */
  [data-screen-label] [style='padding:0 0 60px'] {
    padding-bottom: 28px !important;
  }
  [data-screen-label] [style*='margin-top:60px;padding:60px 0;background:linear-gradient'] {
    margin-top: 0 !important;
  }
  [data-screen-label='Wins']
    [style*='repeat(auto-fit,minmax(240px,1fr));gap:18px;padding-bottom:60px'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Ditch the Lump: the six results three to a row. */
  [data-screen-label='Case Ditch the Lump']
    [style*='repeat(auto-fit,minmax(200px,1fr))']:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* The Incredible Machines: the five results on one line. */
  [data-screen-label='Case TIM Podcast']
    [style*='repeat(auto-fit,minmax(200px,1fr))']:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Levels: the cards under the heading, Choose your level closer below. */
  [data-screen-label] [style*='display:flex;flex-direction:column;width:100%;min-height:100vh'] {
    min-height: 0 !important;
  }
  [data-screen-label] [style*='position:relative;flex:1;min-height:clamp(540px,60vh,700px)'] {
    flex: none !important;
    min-height: 640px !important;
  }
  [data-screen-label] [style*='position:absolute;left:50%;top:50%;width:min(440px,82vw)'] {
    top: 230px !important;
  }

  /* The Players: the stage is no taller than three quarters of its width, so
     the characters stand about as tall as on a desktop. */
  [style*='cursor:grab;touch-action:pan-y'][style*='height:100vh'] {
    height: min(100vh, 72vw) !important;
  }
}

/* Umbraco on wider tablets: 04 and 05 take the same width as 01 to 03, so 05
   sits next to 04 instead of halfway across. Below 900px the design stacks
   these cards in one column, which this leaves alone. */
@media (min-width: 901px) and (max-width: 1199px),
  (min-width: 901px) and (max-width: 1366px) and (pointer: coarse) {
  [data-screen-label]
    [style*='grid-template-columns:repeat(6,minmax(0,1fr));gap:24px']
    > [style*='grid-column:span 3'] {
    grid-column: span 2 !important;
  }
}

/* The thank-you pages each enquiry form lands on (src/ThankYou.js). Every rule
   is scoped to .tim-thanks, so no other page changes. */
.tim-thanks-inner {
  max-width: var(--tim-content-width);
  box-sizing: border-box;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--tim-page-gutter);
}
.tim-thanks-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tim-thanks-links a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: #f6f6f6;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 22px 24px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.tim-thanks-links a:hover,
.tim-thanks-links a:focus-visible {
  color: #f6f6f6;
  border-color: #cc9e00;
  background: #1e1e1e;
}
.tim-thanks-links strong {
  display: block;
  font:
    italic 800 1.25rem/1.15 Poppins,
    sans-serif;
  text-transform: uppercase;
}
.tim-thanks-links small {
  display: block;
  font:
    400 0.9rem/1.5 Poppins,
    sans-serif;
  color: #9c9c9c;
  margin-top: 8px;
}
@media (max-width: 1199px) {
  .tim-thanks-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .tim-thanks-inner {
    padding: 48px 16px;
  }
  .tim-thanks-links {
    grid-template-columns: 1fr;
  }
}
.tim-thanks-back:hover,
.tim-thanks-back:focus-visible {
  border-color: #cc9e00 !important;
  color: #f6f6f6;
}

/* TIM-015: the service cards' corner badge is a real button that flips the
   card. It keeps the badge's look (design.css .tim-uno-badge) without the
   browser's button styling. */
button.tim-uno-badge {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
/* Sponsor a Podcast: the links to the form land it below the sticky header. */
#sp-form {
  scroll-margin-top: 100px;
}

/* ---------- Light and dark themes ----------
   The design carries both themes; <html data-tim-theme> chooses. Pages are
   built dark, and lib/theme.js applies a visitor's light choice before the
   first paint. In light mode gold is a fill only (buttons, cards, bands),
   never the colour of text, links or headings on a light ground: there it
   falls below readable contrast. Text accents use the brand blues instead,
   navy #172D3F (13:1 on #F6F6F6) and teal #285961 (7:1). */

/* The switch, top right of the header, before Start the Machine. */
[data-tim-themetoggle] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(246, 246, 246, 0.28);
  border-radius: 6px;
  background: transparent;
  color: #f6f6f6;
  cursor: pointer;
  transition:
    background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-tim-themetoggle]:hover {
  border-color: rgba(246, 246, 246, 0.6);
  background: rgba(246, 246, 246, 0.08);
}
[data-tim-themetoggle] svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-tim-themetoggle] [data-tim-theme-moon],
html[data-tim-theme='light'] [data-tim-themetoggle] [data-tim-theme-sun] {
  display: none;
}
html[data-tim-theme='light'] [data-tim-themetoggle] [data-tim-theme-moon] {
  display: block;
}
html[data-tim-theme='light'] [data-tim-themetoggle] {
  border-color: rgba(23, 45, 63, 0.32);
  color: #172d3f;
}
html[data-tim-theme='light'] [data-tim-themetoggle]:hover {
  border-color: #172d3f;
  background: rgba(23, 45, 63, 0.08);
}
@media (pointer: coarse) {
  [data-tim-themetoggle] {
    width: 44px;
    height: 44px;
  }
}
/* In the open phone menu the header buttons share a full-width row; the
   switch keeps its square shape beside them. */
@media (max-width: 760px) {
  [data-tim-navbar][data-mobile-open='true'] [data-tim-navctas] > [data-tim-themetoggle] {
    display: inline-flex !important;
    flex: none;
  }
  /* The open menu covers the page; the design's translucent light header
     would let the page show through it. */
  html[data-tim-theme='light'] div:has(> [data-tim-navbar][data-mobile-open='true'])[style] {
    background: #f6f6f6 !important;
  }
}

/* The design pins the page ground to dark; light mode has its own. */
html[data-tim-theme='light'] {
  background: #f6f6f6 !important;
}
/* Keyboard focus: the gold ring is too faint on light grounds. */
html[data-tim-theme='light'] :focus-visible {
  outline-color: #172d3f !important;
}

/* The homepage banner draws its own light-mode colours (src/machine-banner.js:
   a brand navy wall and a teal pointer light). The design's invert-and-rotate
   filter, made for the old hosted scene, stays off. */
html[data-tim-theme='light'] [data-tim-splinewrap] canvas {
  filter: none !important;
}

/* Gold written inline in the design's other spellings (#CC9F00, #FFE070 and
   translucent gold) becomes navy on light grounds, as #CC9E00 does in the
   design's light theme. Panels that stay dark in light mode keep their gold. */
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *):not(
    :is(
        [data-tim-darkcard],
        [data-tim-dk],
        [data-tim-svcart],
        [data-tim-caps],
        [style*='background:#172D3F' i],
        [style*='background:#285961' i]
      )
      *
  ):is([style*='color:#CC9F00' i], [style*='color:#FFE070' i], [style*='color:rgba(204,158,0' i]) {
  color: #172d3f !important;
}

/* Filled buttons and badges keep the text colour written for their fill: dark
   on gold and the pale blues, light on navy and teal. The design's light rules otherwise flip it
   (a gold button inside a navy panel went white on gold, 2.3:1). The doubled
   attributes outrank the design's light rules. */
html[data-tim-theme='light']
  [data-screen-label][data-screen-label]
  :is(
    [style*='background:#CC9E00' i],
    [style*='background:#CC9F00' i],
    [style*='background:#FFE070' i],
    [style*='background:#9ACED6' i],
    [style*='background:#B3CCE6' i]
  ):is([style*=';color:#101010' i], [style*=';color:#0C0C0C' i]) {
  color: #101010 !important;
}
html[data-tim-theme='light']
  [data-screen-label][data-screen-label]
  :is([style*='background:#285961' i], [style*='background:#172D3F' i]):is(
    [style*=';color:#FFFFFF' i],
    [style*=';color:#F6F6F6' i]
  ) {
  color: #f6f6f6 !important;
}

/* Wins is laid on #101010, a ground the design's light theme has no rule for:
   its text turned dark on a dark page. */
html[data-tim-theme='light'] [data-screen-label][style^='background:#101010' i] {
  background: #f6f6f6 !important;
}
/* Capability tiles (custom build) are photographs: their captions stay light. */
html[data-tim-theme='light']
  [data-tim-caps][data-tim-caps][data-tim-caps]
  [style*='color:#F6F6F6' i] {
  color: #f6f6f6 !important;
}
html[data-tim-theme='light']
  [data-tim-caps][data-tim-caps][data-tim-caps]
  [style*='color:#CC9F00' i],
html[data-tim-theme='light']
  [data-tim-caps][data-tim-caps][data-tim-caps]
  [style*='color:#CC9E00' i] {
  color: #cc9e00 !important;
}
/* Footer small print, written in a grey the light theme does not map. */
html[data-tim-theme='light'] :not([data-tim-dark] *)[style*='color:#B8B8B8' i] {
  color: #54524c !important;
}

/* Articles migrated from the old site (plain markup, no design of their own). */
html[data-tim-theme='light'] .blog-article {
  background: #f6f6f6;
  color: #101010;
}
html[data-tim-theme='light'] .blog-article-body {
  color: #3a3a3a;
}
html[data-tim-theme='light']
  .blog-article-body:not(:has(> .post-design))
  :is(h2, h3, h4, h5, h6, strong, blockquote) {
  color: #101010;
}
html[data-tim-theme='light'] .blog-article-body:not(:has(> .post-design)) blockquote {
  border-left-color: #172d3f;
}
html[data-tim-theme='light'] .blog-article-body:not(:has(> .post-design)) figcaption {
  color: #5c5c5c;
}
html[data-tim-theme='light'] .blog-article-body:not(:has(> .post-design)) img {
  background: #efefef;
}
html[data-tim-theme='light'] .blog-article-body:not(:has(> .post-design)) a {
  color: #172d3f;
}
html[data-tim-theme='light'] .blog-article-body:not(:has(> .post-design)) a:hover {
  color: #285961;
}
html[data-tim-theme='light'] .blog-article-body:not(:has(> .post-design)) hr {
  border-top-color: rgba(16, 16, 16, 0.12);
}

/* Playbook: Load more and the empty state. */
html[data-tim-theme='light'] .blog-more button:hover,
html[data-tim-theme='light'] .blog-empty button:hover {
  border-color: #172d3f;
}
html[data-tim-theme='light'] .blog-search input {
  caret-color: #172d3f;
}
html[data-tim-theme='light'] .blog-search-field:focus-within {
  border-bottom-color: #172d3f;
  box-shadow: 0 2px 0 #172d3f;
}
html[data-tim-theme='light'] .blog-search-field:focus-within svg {
  stroke: #172d3f;
}

/* Thank-you pages: the link cards. */
html[data-tim-theme='light'] .tim-thanks-links a {
  color: #101010;
  background: #fff;
  border-color: rgba(16, 16, 16, 0.12);
}
html[data-tim-theme='light'] .tim-thanks-links a:hover,
html[data-tim-theme='light'] .tim-thanks-links a:focus-visible {
  color: #101010;
  border-color: #172d3f;
  background: #fff;
}
html[data-tim-theme='light'] .tim-thanks-links strong {
  color: #172d3f;
}
html[data-tim-theme='light'] .tim-thanks-links small {
  color: #54524c;
}
html[data-tim-theme='light'] .tim-thanks-back:hover,
html[data-tim-theme='light'] .tim-thanks-back:focus-visible {
  border-color: #172d3f !important;
  color: #101010;
}

/* The enquiry notice. */
html[data-tim-theme='light'] .enquiry-status {
  border-color: #172d3f;
}

/* Closing call to action: each theme plays its own loop, both mirrored by the
   design's .tim-cta-vid rule. Dark mode keeps the design's dark video; light
   mode plays a white controller video at full strength, with no wash. Its
   ground matches that video's backdrop, so the dark heading reads before the
   video has a frame. The top blend into the section above stays. */
.tim-cta-vid--light {
  display: none;
}
html[data-tim-theme='light'] .tim-cta-vid:not(.tim-cta-vid--light) {
  display: none;
}
/* The light video's controller sits mid-frame, under the heading once
   mirrored; it moves a fifth of the width towards the left, and the edge it
   leaves fades into the matching ground. The mask is in the video's own,
   unmirrored space, so its left edge is the one on screen right. */
html[data-tim-theme='light'] .tim-cta-vid--light {
  display: block;
  transform: scaleX(-1) translateX(20%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%);
  mask-image: linear-gradient(to right, transparent, #000 14%);
}
html[data-tim-theme='light'] .tim-cta-scrim {
  background: none;
}
html[data-tim-theme='light'] .tim-cta.tim-cta.tim-cta {
  background: #e4dfe0 !important;
}
html[data-tim-theme='light'] .tim-cta .tim-cta-vid,
html[data-tim-theme='light'] .tim-cta:hover .tim-cta-vid {
  opacity: 1;
}
/* Service tiles on the homepage: the light design hides the dark caption fade
   but keeps the same artwork, so captions sat on the picture. A pale fade
   gives them a clean ground. */
html[data-tim-theme='light'] .tim-svc-gradient {
  display: block;
  background: linear-gradient(
    to top,
    rgba(246, 246, 246, 0.97) 0%,
    rgba(246, 246, 246, 0.92) 34%,
    rgba(246, 246, 246, 0) 58%
  ) !important;
}
/* Hairlines in tones the design's light theme has no rule for (FAQ rows, form
   fields and dividers): pale lines become the same weight of ink. */
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *)[style*='solid rgba(246,246,246,.07)' i] {
  border-color: rgba(16, 16, 16, 0.1) !important;
}
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *)[style*='solid rgba(246,246,246,.08)' i] {
  border-color: rgba(16, 16, 16, 0.12) !important;
}
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *)[style*='solid rgba(246,246,246,.14)' i],
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *)[style*='solid rgba(246,246,246,.16)' i],
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *)[style*='solid rgba(246,246,246,.18)' i] {
  border-color: rgba(16, 16, 16, 0.16) !important;
}
html[data-tim-theme='light']
  :not([data-tim-card]):not([data-tim-card] *)[style*='solid rgba(246,246,246,.24)' i] {
  border-color: rgba(16, 16, 16, 0.24) !important;
}
/* Wins: the case-study band fades #101010 to #141414, a gradient the design's
   light theme has no rule for; its headings turned dark on dark. */
html[data-tim-theme='light']
  [style*='background:linear-gradient(to bottom,#101010 0%,#101010 30%,#141414 100%)' i] {
  background: #f6f6f6 !important;
}
/* A logo inside a band that stays dark keeps the white logo, with its gold
   dot: the design's light theme blackens every white logo, so the filter goes
   too (the Players page's "The Incredible Story of tim"). */
html[data-tim-theme='light']
  [data-tim-dark]:not([data-tim-hero], [data-tim-pagehero])
  [data-tim-logo] {
  display: inline-block !important;
  filter: none !important;
}
html[data-tim-theme='light']
  [data-tim-dark]:not([data-tim-hero], [data-tim-pagehero])
  [data-tim-logo-light] {
  display: none !important;
}
/* On a phone the headline and intro run almost edge to edge; the light
   hero's navy wash down the left side would sit under their first words. */
@media (max-width: 760px) {
  html[data-tim-theme='light'] [data-tim-hero] [data-tim-scrim]::before {
    opacity: 0.25;
  }
}
/* Home: "TIM Africa" reads in one dark ink in light mode; the gold accent
   word would otherwise turn navy. */
html[data-tim-theme='light']
  [data-screen-label='Home']
  [data-tim-hero][data-tim-hero][data-tim-hero]
  h1,
html[data-tim-theme='light']
  [data-screen-label='Home']
  [data-tim-hero][data-tim-hero][data-tim-hero]
  h1
  [style*='color' i] {
  color: #101010 !important;
}

/* Home banner, light mode: the hero's navy wash down the left side lay in
   front of the blocks (and, as the hero runs 40px below the banner, showed as
   a grey bar under it). The banner now draws the navy behind its blocks
   itself (src/machine-banner.js), so the wash is off. */
html[data-tim-theme='light'] [data-tim-hero] [data-tim-scrim]::before {
  display: none !important;
}

/* Home service tiles, light mode: the caption was 72% ink at the lightest
   weight and faded into the picture. Full body ink at regular weight. */
html[data-tim-theme='light'] [data-tim-svc-card][data-tim-svc-card] p[style] {
  color: #3a3a3a !important;
  font-weight: 400 !important;
}

/* Home marquee, light mode: one dark band. Its wrapper kept the dark ground
   and 40px of padding, which read as a second dark band under it. */
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='background:#141414;padding:0 0 40px'] {
  background: #f6f6f6 !important;
}

/* The Machine, light mode: the Build, Create and Grow section takes brand light
   grey #F6F6F6, round the cards and behind their text. The text turns to dark
   ink and navy (no gold text on a light ground), and the outline button to
   navy. Each card's diagram keeps its own panel. */
html[data-tim-theme='light'] [data-tim-accordion][data-tim-accordion][data-tim-accordion],
html[data-tim-theme='light'] [data-tim-accordion] [data-tim-card][data-tim-card] {
  background: #f6f6f6 !important;
}
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card]
  > div:first-child
  [style*='color:#CC9F00' i] {
  color: #172d3f !important;
}
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card]
  > div:first-child
  h3,
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card]
  > div:first-child
  [style*='color:#F6F6F6' i] {
  color: #101010 !important;
}
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card]
  > div:first-child
  [style*='color:rgba(246,246,246' i] {
  color: #22313d !important;
}
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card]
  > div:first-child
  [style*='color:#FFE070' i] {
  color: #172d3f !important;
  border-color: #172d3f !important;
  background: transparent !important;
}
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card]
  > div:first-child
  [style*='color:#FFE070' i]:hover {
  color: #f6f6f6 !important;
  background: #172d3f !important;
}

/* Wins and Start the Machine, light mode: the gold bands behind the
   testimonials and the closing quote take the Playbook grid tile's light
   ground (grey gradient with a slate grid), as the client chose. */
html[data-tim-theme='light']
  [style*='background:linear-gradient(to top right,#CC9E00,rgba(204,158,0,.88) 50%,#CC9E00)' i] {
  background-color: #e9ebec !important;
  background-image:
    linear-gradient(to top right, #dfe2e4, rgba(240, 241, 242, 0.85) 50%, #e9ebec),
    url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22800%22%3E%3Cg stroke-width=%223.5%22 stroke=%22hsla(215,16%25,47%25,1)%22 fill=%22none%22%3E%3Crect width=%22400%22 height=%22400%22 x=%220%22 y=%220%22/%3E%3Crect width=%22400%22 height=%22400%22 x=%22400%22 y=%220%22/%3E%3Crect width=%22400%22 height=%22400%22 x=%220%22 y=%22400%22/%3E%3Crect width=%22400%22 height=%22400%22 x=%22400%22 y=%22400%22/%3E%3C/g%3E%3C/svg%3E') !important;
  background-size:
    auto,
    50px 50px !important;
  background-repeat: repeat, repeat !important;
  background-position: 0 0 !important;
}

/* Showreel TV (home and Wins): the set stays dark in light mode, so its logo
   stays white. The design's light theme blackens every white logo. */
html[data-tim-theme='light'] img[data-tim-tvlogo] {
  filter: none !important;
}

/* Level pages: the price is brand navy in light mode, on the light yellow
   price card. */
html[data-tim-theme='light'] [data-tim-lvprice][data-tim-lvprice][data-tim-lvprice] {
  color: #172d3f !important;
}

/* Players, light mode: "About TIM Africa" shares the hero's white ground, so
   its text takes the hero's inks and the logo is the light-ground logo. The
   ground rule outweighs the design's rule that keeps dark bands dark. */
html[data-tim-theme='light']
  [data-tim-story][data-tim-story][data-tim-story][data-tim-story][data-tim-story] {
  background: #fff !important;
  color: #101010 !important;
}
html[data-tim-theme='light']
  [data-tim-story][data-tim-story][data-tim-story]
  [style*='color:#9ACED6' i] {
  color: #1f5a66 !important;
}
html[data-tim-theme='light'] [data-tim-story][data-tim-story][data-tim-story] h2,
html[data-tim-theme='light']
  [data-tim-story][data-tim-story][data-tim-story]
  [style*='color:#F6F6F6' i] {
  color: #101010 !important;
}
html[data-tim-theme='light']
  [data-tim-story][data-tim-story][data-tim-story]
  [style*='color:rgba(246,246,246' i] {
  color: #3a3a3a !important;
}
html[data-tim-theme='light'] [data-tim-story][data-tim-story][data-tim-story] [data-tim-logo] {
  display: none !important;
}
html[data-tim-theme='light']
  [data-tim-story][data-tim-story][data-tim-story]
  [data-tim-logo-light] {
  display: inline-block !important;
}

/* Podcast production, "Where we record": the city names stay on one line.
   They were sized by the window, not the card, and allowed to break anywhere,
   so Johannesburg split at some widths. The name now scales with its card
   (the word is about 8 times its font size wide), never above the design's
   size. */
div:has(> [style*='font:italic 800 clamp(18px,2vw,32px)/1.05']) {
  container-type: inline-size;
}
[style*='font:italic 800 clamp(18px,2vw,32px)/1.05'] {
  font-size: min(clamp(18px, 2vw, 32px), 11.5cqi) !important;
  white-space: nowrap;
  overflow-wrap: normal !important;
}

/* Sponsor a Podcast carousel: Apply now sits on the carousel's dark ground in
   both themes, so its text keeps the gold accent; light mode's link rule had
   turned it navy. */
html[data-tim-theme='light'] a.dcc-cta.dcc-cta {
  color: var(--dcc-accent) !important;
}
html[data-tim-theme='light'] a.dcc-cta.dcc-cta:hover {
  color: #101010 !important;
}

/* Home banner, dark mode: the same 40px gap. The hero's dark scrim covered it
   and showed as a darker strip under the banner, so the scrim moves onto the
   banner too. */
html:not([data-tim-theme='light']) [data-screen-label='Home'] [data-tim-hero] [data-tim-scrim] {
  background: none !important;
}
html:not([data-tim-theme='light'])
  [style*='top:81px;left:0;right:0;height:calc(100vh - 80px)']::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
}

/* Cookie panel: it stays dark in light mode, so its heading and links keep
   their dark-ground colours; the light theme had turned them dark ink and
   navy. */
html[data-tim-theme='light'] #cookie-panel h2,
html[data-tim-theme='light'] #cookie-panel h3,
html[data-tim-theme='light'] #cookie-panel legend,
html[data-tim-theme='light'] #cookie-panel label {
  color: #fff !important;
}
html[data-tim-theme='light'] #cookie-panel a {
  color: #f0c946 !important;
}

/* Level pages: the FROM label above the price is navy in light mode, as the
   price is. */
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark]
  > div:has(+ [data-tim-lvprice][data-tim-lvprice][data-tim-lvprice][data-tim-lvprice]) {
  color: #172d3f !important;
}

/* Levels and Players carousels, light mode: each slide's stage colour becomes
   its brand light partner (navy to light blue, gold and dark gold to light
   yellow, teal to light teal, near black to light grey), and the type,
   controls and level cards turn to dark ink to suit. */
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][style*='background:#172D3F;transition:background 650ms' i] {
  background: #b3cce6 !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][style*='background:#7E6300;transition:background 650ms' i],
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][style*='background:#CC9E00;transition:background 650ms' i] {
  background: #ffe070 !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][style*='background:#285961;transition:background 650ms' i] {
  background: #9aced6 !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][style*='background:#1C1A1C;transition:background 650ms' i] {
  background: #f6f6f6 !important;
}
html[data-tim-theme='light'] [data-tim-dark][style*='transition:background 650ms'] h1,
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='color:#F6F6F6' i] {
  color: #101010 !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='color:rgba(246,246,246' i] {
  color: rgba(16, 16, 16, 0.85) !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='border:2px solid #F6F6F6' i] {
  border-color: #101010 !important;
  color: #101010 !important;
}
/* "Packages & pricings" and the giant "The Players" in navy. */
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  > div
  > [style*='color:#9ACED6' i],
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='font:italic 800 clamp(64px,17vw,280px)' i] {
  color: #172d3f !important;
}
/* Level cards: light grey, dark type, teal eyebrow, navy outline button. */
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='background:#141414;border:1px solid rgba(246,246,246,.16)' i] {
  background: #f6f6f6 !important;
  border-color: rgba(16, 16, 16, 0.12) !important;
  box-shadow: 0 34px 70px -32px rgba(23, 45, 63, 0.45) !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='background:#141414;border:1px solid rgba(246,246,246,.16)' i]
  [style*='color:#9ACED6' i] {
  color: #285961 !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='background:#141414;border:1px solid rgba(246,246,246,.16)' i]
  [style*='color:#C9C9C9' i] {
  color: #3a3a3a !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='background:#141414;border:1px solid rgba(246,246,246,.16)' i]
  [style*='background:transparent;color:#CC9E00' i] {
  border-color: #172d3f !important;
  color: #172d3f !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][style*='transition:background 650ms']
  [style*='background:#141414;border:1px solid rgba(246,246,246,.16)' i]
  [style*='background:transparent;color:#CC9E00' i]:hover {
  background: #172d3f !important;
  color: #f6f6f6 !important;
}

/* Playbook, light mode: the second featured article card takes brand yellow,
   with dark type and a navy link. */
html[data-tim-theme='light']
  [style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i] {
  background: #cc9f00 !important;
}
html[data-tim-theme='light']
  [style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i]
  [style*='color:#9C9C9C' i] {
  color: rgba(16, 16, 16, 0.78) !important;
}
html[data-tim-theme='light']
  [style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i]
  p {
  color: #101010 !important;
}
html[data-tim-theme='light']
  [style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i][style*='background:#172D3F;padding:28px;cursor:pointer' i]
  [style*='color:#B3CCE6' i] {
  color: #172d3f !important;
}

/* Level pages, light mode: the price card takes brand light yellow, with navy
   for the price, its label, the bullets and the button, and dark type. */
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(> [data-tim-lvprice]) {
  background: #ffe070 !important;
  box-shadow: 0 30px 60px -34px rgba(23, 45, 63, 0.45) !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(> [data-tim-lvprice])
  [style*='color:rgba(246,246,246' i] {
  color: rgba(16, 16, 16, 0.82) !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(> [data-tim-lvprice])
  [style*='background:rgba(246,246,246,.12)' i] {
  background: rgba(16, 16, 16, 0.16) !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(> [data-tim-lvprice])
  [style*='background:#CC9F00' i] {
  background: #172d3f !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(> [data-tim-lvprice])
  [style*='background:#285961' i] {
  background: #172d3f !important;
  border-color: #172d3f !important;
  color: #f6f6f6 !important;
}
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(
    > [data-tim-lvprice]
  )
  > [data-tim-lvprice][data-tim-lvprice][data-tim-lvprice][data-tim-lvprice],
html[data-tim-theme='light']
  [data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark][data-tim-dark]:has(
    > [data-tim-lvprice]
  )
  > div:has(+ [data-tim-lvprice])[style][style][style][style] {
  color: #172d3f !important;
}

/* Start the Machine, light mode: the closing quote in brand yellow on the light
   grey band. Client decision (10 November 2026), made knowing it reads at
   2.3:1; tests/theme.spec.mjs exempts this one quote from its gold check. */
html[data-tim-theme='light']
  [data-screen-label='Start the Machine']
  [style*='font:italic 800 clamp(26px,3.6vw,44px)/1.28 Poppins,sans-serif;letter-spacing:-.02em;color:#141414' i] {
  color: #cc9f00 !important;
}

/* Wins, light mode: the testimonials heading in brand yellow on the light grey
   band. Client decision (10 November 2026), as for the Start the Machine
   quote; tests/theme.spec.mjs exempts this one heading from its gold check. */
html[data-tim-theme='light']
  [data-screen-label='Wins']
  h2[style*='text-transform:uppercase;color:#172D3F;margin:22px 0 0;text-wrap:balance' i] {
  color: #cc9f00 !important;
}

/* The Machine, light mode: the Build, Create and Grow headings in brand
   yellow on the light grey section. Client decision (10 November 2026);
   tests/theme.spec.mjs exempts these three headings from its gold check. */
html[data-tim-theme='light']
  [data-tim-accordion]
  [data-tim-card][data-tim-card][data-tim-card]
  > div:first-child
  h3 {
  color: #cc9f00 !important;
}

/* The Machine, light mode: the Build maze loses its dark panel and sits on the
   light grey section. Its parts are recoloured to read there: faint navy
   walls, the route in brand gold then gold to teal, a navy moving dash and
   end point, and dark labels. The number dots, Go live pill and pop-ups keep
   their dark colours. */
html[data-tim-theme='light'] [data-tim-card='build'][data-tim-card] > div:nth-child(2) {
  background: transparent !important;
}
html[data-tim-theme='light'] [data-tim-card='build'] svg line[stroke='rgba(246,246,246,.07)'] {
  stroke: rgba(23, 45, 63, 0.1);
}
html[data-tim-theme='light'] [data-tim-card='build'] svg polyline[stroke='#F2CC4A'] {
  stroke: #cc9f00;
  filter: none !important;
}
html[data-tim-theme='light'] [data-tim-card='build'] svg polyline[stroke='rgba(242,204,74,.2)'] {
  stroke: rgba(204, 159, 0, 0.18);
}
html[data-tim-theme='light'] [data-tim-card='build'] svg polyline[stroke='rgba(191,227,214,.16)'] {
  stroke: rgba(40, 89, 97, 0.14);
}
html[data-tim-theme='light'] [data-tim-card='build'] svg polyline[stroke^='url('] {
  filter: none !important;
}
html[data-tim-theme='light'] #tim-mz-tealgrad stop:first-child {
  stop-color: #cc9f00;
}
html[data-tim-theme='light'] #tim-mz-tealgrad stop:last-child {
  stop-color: #285961;
}
html[data-tim-theme='light'] [data-tim-card='build'] svg polyline[stroke='#FFFFFF'] {
  stroke: #172d3f;
}
html[data-tim-theme='light']
  [data-tim-card='build']
  > div:nth-child(2)
  > [style*='background:#F6F6F6;box-shadow' i] {
  background: #172d3f !important;
  box-shadow: 0 0 8px rgba(23, 45, 63, 0.5) !important;
}
html[data-tim-theme='light']
  [data-tim-card='build']
  > div:nth-child(2)
  > [style*='color:rgba(246,246,246,.55)' i],
html[data-tim-theme='light']
  [data-tim-card='build']
  .tim-mz
  > [style*='color:rgba(246,246,246,.62)' i] {
  color: #3a3a3a !important;
}

/* The Machine, light mode: the Grow card's performance panel takes brand light
   blue instead of navy, with the score in navy, dark labels, teal gains, pale
   navy bar tracks and the chart ending in teal. */
html[data-tim-theme='light']
  [data-tim-card='grow']
  [data-tim-svcart='grow'][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-dark][data-tim-dark] {
  background-color: #b3cce6 !important;
  background-image:
    radial-gradient(circle at 22% 78%, rgba(154, 206, 214, 0.55), transparent 46%),
    radial-gradient(circle at 78% 20%, rgba(255, 224, 112, 0.35), transparent 46%) !important;
  border-color: rgba(23, 45, 63, 0.14) !important;
  box-shadow: 0 30px 70px -32px rgba(23, 45, 63, 0.4) !important;
}
html[data-tim-theme='light']
  [data-tim-card='grow']
  [data-tim-svcart='grow'][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-dark][data-tim-dark]
  .tim-score {
  color: #172d3f !important;
  text-shadow: none !important;
}
html[data-tim-theme='light']
  [data-tim-card='grow']
  [data-tim-svcart='grow'][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-dark][data-tim-dark]
  [style*='color:rgba(246,246,246,.5)' i] {
  color: rgba(16, 16, 16, 0.68) !important;
}
html[data-tim-theme='light']
  [data-tim-card='grow']
  [data-tim-svcart='grow'][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-dark][data-tim-dark]
  [style*='background:rgba(246,246,246,.1)' i] {
  background: rgba(23, 45, 63, 0.14) !important;
}
html[data-tim-theme='light']
  [data-tim-card='grow']
  [data-tim-svcart='grow'][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-dark][data-tim-dark]
  [style*='color:#9ACED6' i] {
  color: #1f4f57 !important;
}
html[data-tim-theme='light']
  [data-tim-card='grow']
  [data-tim-svcart='grow'][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-svcart][data-tim-dark][data-tim-dark]
  [style*='background:#9ACED6' i] {
  background: #285961 !important;
}
html[data-tim-theme='light'] [data-tim-card='grow'] #timHsGsvc stop:last-child {
  stop-color: #285961;
}
html[data-tim-theme='light'] [data-tim-card='grow'] circle[fill='#9ACED6'] {
  fill: #285961;
}