: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's own gutter on a phone; the design's page padding is wider. */
@media (max-width: 700px) {
  .blog-article-head,
  .blog-article-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 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: none;
  margin: 0 auto;
  padding: 60px 32px;
}
.blog-article-body {
  max-width: none;
  margin: 0 auto;
  padding: 0 32px 60px;
  font:
    300 17px/1.8 Poppins,
    sans-serif;
  color: #c9c9c9;
  overflow-wrap: anywhere;
}
.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;
}

/* 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;
  }

  [data-tim-pagehero] > div:first-child {
    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 cards past the loaded count stay in the page but out of view while
   no filter is active, so a filtered match is never hidden behind the Load more
   button, which itself steps aside for a filter. The cards carry an inline
   display, so this has to be important. */
[data-cat-filter='all'] .blog-card[data-beyond] {
  display: none !important;
}
[data-cat-filter]:not([data-cat-filter='all']) .blog-more {
  display: none !important;
}
/* 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: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) 32px;
}
.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;
}