@import url("../../css/case-chrome.css?v=21");

/* =====================================================================
   TRIPSTORIES — case study

   Built on the site's own tokens (tokens.css) and the same parts as the
   other case studies: the chrome (progress rail, theme toggle, close), the
   section head, card radius and gap, and the shared ending. The page stays
   in the site's light editorial base; the BRAND panels (black, lime and
   white, Clash Display) keep their own colours in both themes because they
   are the work, not page styling.

   Scoped to .ts-root so none of it can leak into another page.
   ===================================================================== */
.ts-root {
  --ts-bg: #ffffff;
  --ts-ink: var(--ink-strong);
  /* Body copy sits at the Figma's #343434 on white. */
  --ts-body: color-mix(in srgb, var(--ts-ink) 92%, var(--ts-bg));
  --ts-muted: var(--ink-muted);
  --ts-line: var(--line);

  /* The brand. */
  --ts-lime: #cefe46;
  --ts-black: #121212;
  --ts-white: #ffffff;
  --ts-hair: rgba(255, 255, 255, .16);

  --ts-r: 16px;
  --ts-gap: clamp(16px, 1.6vw, 24px);
  --ts-gutter: clamp(16px, 2.85vw, 41px);
  --ts-content: 1358px;
  --ts-narrow: 940px;
  --ts-section-gap: clamp(72px, 8vw, 110px);
  --ts-font-body: var(--font-body);
}
:root[data-theme="dark"] .ts-root { --ts-bg: #0b0b0b; }

.ts-root, .ts-root *, .ts-root *::before, .ts-root *::after { box-sizing: border-box; }
html:has(> body.ts-root) { -webkit-text-size-adjust: 100%; }
.ts-root {
  margin: 0;
  background: var(--ts-bg);
  color: var(--ts-ink);
  font-family: var(--ts-font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .26s ease, color .26s ease;
}
.ts-root img { display: block; max-width: 100%; height: auto; }
.ts-root :where(h1, h2, h3, h4, p, figure, figcaption, ol, ul, dl, dd, hr) { margin: 0; }
.ts-root a { color: inherit; }
.ts-root * { font-family: var(--font-body); }
.ts-root :focus-visible { outline: 2px solid var(--ts-ink); outline-offset: 3px; }

.ts-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 14px; border-radius: 10px;
  background: var(--ts-ink); color: var(--ts-bg); text-decoration: none; font-size: var(--fs-meta);
}
.ts-skip:focus { top: 16px; }

/* ---- Page chrome: progress rail + theme toggle + close ------------------
   Identical to the other case studies: a 2px reading rail and two frosted
   round controls, white over the cover and dark once the page is light. */
.ts-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.ts-progress span {
  display: block; width: 100%; height: 100%;
  background: var(--ts-ink); transform: scaleX(0); transform-origin: left;
}
.ts-progress.is-visible { opacity: 1; }
.ts-chrome {
  position: fixed; top: 24px; right: 24px; z-index: 100;
  display: flex; align-items: center; gap: 12px;
}
@media (max-width: 600px) {
  .ts-chrome { top: 14px; right: 14px; gap: 8px; }
  .ts-chrome :is(.ts-close, .ts-theme-toggle) { width: 32px; height: 32px; }
}
.ts-close, .ts-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #fff; font-size: var(--fs-meta);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .24);
  transition: transform .16s var(--ease-out-quart), background-color .24s ease, color .24s ease, border-color .24s ease;
}
.ts-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ts-close:hover, .ts-theme-toggle:hover { transform: scale(1.06); background: rgba(255, 255, 255, .24); }
.ts-close:active, .ts-theme-toggle:active { transform: scale(.94); }
.ts-chrome.is-on-light :is(.ts-close, .ts-theme-toggle) {
  background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .12); color: #222;
}
:root[data-theme="dark"] .ts-chrome.is-on-light :is(.ts-close, .ts-theme-toggle) {
  background: rgba(18, 18, 18, .78); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.ts-theme-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ts-theme__sun, .ts-theme__moon { transform-origin: 12px 12px; transition: opacity .2s ease, transform .26s var(--ease-out-quart); }
.ts-theme__moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
:root[data-theme="dark"] .ts-theme__sun { opacity: 0; transform: rotate(40deg) scale(.6); }
:root[data-theme="dark"] .ts-theme__moon { opacity: 1; transform: rotate(0) scale(1); }

/* ---- Shared ---------------------------------------------------------- */
.ts-wrap {
  width: 100%;
  max-width: calc(var(--ts-narrow) + 2 * var(--ts-gutter));
  margin-inline: auto;
  padding-inline: var(--ts-gutter);
}
.ts-wide {
  width: 100%;
  max-width: calc(var(--ts-content) + 2 * var(--ts-gutter));
  margin-inline: auto;
  padding-inline: var(--ts-gutter);
}
.ts-section { padding-top: var(--ts-section-gap); }
.ts-label { font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; color: rgba(255, 255, 255, .78); }
.ts-label--on-dark { color: #fff; }

/* ---- Logo fills: one set of paths, recoloured by custom properties ------- */
.ts-logo { display: block; width: 100%; height: auto; overflow: visible; }
.ts-logo .ts-m { fill: var(--m, #fff); }
.ts-logo .ts-w path, .ts-logo .ts-w { fill: var(--w, #fff); }
.ts-logo .ts-t { fill: var(--ts-lime); }
.ts-lg--on-black, .ts-lg { --m: var(--ts-lime); --w: #fff; }
.ts-lg--on-white { --m: #121212; --w: #121212; }
.ts-lg--tile { --m: #121212; --w: #fff; }
.ts-mark { display: block; height: auto; fill: currentColor; }
.ts-brand, .ts-brand * { font-family: "Clash Display", var(--font-body), system-ui, sans-serif !important; }
.ts-eyebrow, .ts-marker {
  color: var(--ts-body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}

/* ---- Hero: black, the tile lockup centred -------------------------------- */
.ts-hero { position: relative; }
.ts-hero__media {
  position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: var(--ts-black);
}
.ts-hero__stage {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%); container-type: inline-size;
}
/* Lockup box: 462 x 100 units, 34cqw wide, optically centred on the 16:9 sheet. */
.ts-hero__brand {
  position: absolute; left: 33%; top: 44.4%; width: 34cqw; margin: 0; line-height: 0;
}
.ts-hero__brand .ts-logo { overflow: visible; }
.ts-hero__tm {
  position: absolute; right: -1.4cqw; top: 2cqw; color: #fff; font-size: 1.4cqw; line-height: 1;
  font-family: "Clash Display", var(--font-body); font-weight: 600;
}
.ts-hero__caption {
  position: absolute; left: 0; right: 0; bottom: 7cqw; margin: 0; text-align: center;
  color: rgba(255, 255, 255, .55); font-size: max(11px, .95cqw); letter-spacing: .24em; text-transform: uppercase;
}
.ts-hero__hint {
  position: absolute; left: 50%; bottom: 22px; width: 1px; height: 38px; background: linear-gradient(#fff, transparent); opacity: .55;
  transform-origin: top; animation: tsHint 2.2s ease-in-out infinite;
}
@keyframes tsHint { 0%, 100% { transform: scaleY(.3); opacity: .2; } 50% { transform: scaleY(1); opacity: .7; } }

/* ---- Intro ---------------------------------------------------------------- */
.ts-intro {
  display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.4vw, 34px);
  padding-top: var(--ts-section-gap); text-align: center;
}
.ts-statement { max-width: 880px; font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
.ts-lead { max-width: 900px; color: var(--ts-body); font-size: var(--fs-body); line-height: 1.5; letter-spacing: -.01em; text-wrap: pretty; }
.ts-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ts-chips li {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--ts-line); font-size: var(--fs-meta);
}
.ts-chips b { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.ts-chips span { color: var(--ts-muted); }
.ts-intro + .ts-section { padding-top: clamp(48px, 5vw, 72px); }

/* ---- Panels ---------------------------------------------------------------- */
.ts-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; place-items: center; border-radius: var(--ts-r); overflow: hidden; background: var(--ts-black); color: #fff; }
.ts-panel--black { background: var(--ts-black); }
.ts-panel--white { background: #fff; color: #121212; border: 1px solid rgba(0, 0, 0, .08); }
.ts-panel .ts-label { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.2vw, 30px); text-align: center; font-size: 14px; }
.ts-label--ink { color: rgba(18, 18, 18, .6); }
.ts-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ts-gap); margin-top: clamp(30px, 2.9vw, 42px); }
.ts-pair { display: grid; gap: var(--ts-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(30px, 2.9vw, 42px); }
.ts-stack .ts-pair { margin-top: 0; }

/* Brief banner */
.ts-banner { aspect-ratio: 1358 / 461; min-height: 300px; place-items: stretch; }
.ts-banner::before {
  content: ""; position: absolute; right: -4%; top: 50%; width: 40%; aspect-ratio: 178 / 123; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='270 298 178 123'%3E%3Cpath fill='%23cefe46' d='M366.071 318.249C341.286 325.601 322.314 329.198 310.464 330.601C304.432 331.315 298.877 328.243 294.242 324.197L272.327 306.976C269.678 304.663 271.261 300.198 274.731 300.194L441.345 300C444.869 299.996 446.431 304.572 443.681 306.847L309.002 418.278C303.441 422.878 295.394 417.579 297.097 410.438L310.464 354.395C313.955 338.198 354.032 324.255 366.071 318.249Z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .07; pointer-events: none;
}
.ts-banner__copy {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 24px;
  padding: clamp(20px, 3.7vw, 54px) clamp(20px, 4vw, 56px); color: #fff;
}
.ts-banner__title { font-size: clamp(28px, 3.4vw, 50px); font-weight: 500; line-height: 1; letter-spacing: -.035em; color: #fff; }
.ts-banner__meta { display: grid; grid-template-columns: auto auto; gap: 16px clamp(28px, 4.6vw, 64px); justify-content: end; }
.ts-banner__meta dt { color: rgba(255, 255, 255, .6); font-size: 13px; }
.ts-banner__meta dd { margin-top: 4px; color: #fff; font-size: 13px; font-weight: 500; max-width: 15em; line-height: 1.35; }
.ts-banner__meta div:nth-child(1) dd { color: var(--ts-lime); }

/* Challenge */
.ts-challenge {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: var(--ts-gap);
  padding: clamp(14px, 1.67vw, 24px); border: 1px solid var(--ts-line); border-radius: var(--ts-r);
}
.ts-challenge__copy { display: flex; flex-direction: column; gap: 28px; padding: clamp(14px, 1.9vw, 24px) clamp(8px, 1.3vw, 22px); }
.ts-challenge__title { font-size: clamp(24px, 2.15vw, 31px); font-weight: 500; line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; }
.ts-challenge__body { max-width: 32em; color: var(--ts-body); line-height: 1.5; letter-spacing: -.01em; }
.ts-challenge__close { margin-top: auto; display: grid; gap: 4px; color: var(--ts-body); line-height: 1.4; }
.ts-challenge__big { font-size: clamp(20px, 1.75vw, 25px); font-weight: 450; line-height: 1.2; letter-spacing: -.025em; color: var(--ts-ink); }
.ts-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: stretch; }
.ts-issues li {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: clamp(18px, 2vw, 28px);
  border-radius: calc(var(--ts-r) - 4px); background: var(--ts-black); color: #fff;
}
.ts-issues__n { color: var(--ts-lime); font: 500 13px/1.6 var(--font-body); letter-spacing: .08em; }
.ts-issues h4 { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.025em; color: #fff; }
.ts-issues p { margin-top: 6px; color: rgba(255, 255, 255, .62); font-size: var(--fs-meta); line-height: 1.5; }

/* Section head */
.ts-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ts-tag { color: var(--ts-body); font-size: var(--fs-small); font-weight: 500; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.ts-title { margin-top: 18px; font-size: clamp(26px, 2.64vw, 38px); font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; line-height: .95; word-spacing: .14em; text-wrap: balance; }
.ts-sub { max-width: 860px; margin-top: 22px; color: var(--ts-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; letter-spacing: -.01em; text-wrap: balance; }

/* Insight: two columns joined by a line that draws */
.ts-duo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 9vw, 140px) minmax(0, 1fr); align-items: start; margin-top: clamp(30px, 2.9vw, 42px); gap: var(--ts-gap); }
.ts-duo__col { padding: clamp(20px, 2.4vw, 34px); border: 1px solid var(--ts-line); border-radius: var(--ts-r); display: grid; gap: 14px; }
.ts-duo__col h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.ts-duo__col p:last-child { color: var(--ts-body); line-height: 1.5; max-width: 30em; }
.ts-duo__line { align-self: center; position: relative; height: 1px; background: var(--ts-line); overflow: hidden; }
.ts-duo__line i { position: absolute; inset: 0; background: var(--ts-lime); box-shadow: 0 0 0 1px #8aae00; transform-origin: left; }
:root[data-theme="dark"] .ts-duo__line i { box-shadow: none; }

/* Logomark construction */
.ts-construct { aspect-ratio: 1358 / 640; min-height: 320px; }
.ts-construct__art { width: clamp(220px, 28vw, 400px); }
.ts-construct__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ts-construct__mark { fill: var(--ts-lime); }
.ts-construct__guides .g-box, .ts-construct__guides .g-line, .ts-construct__guides .g-circle {
  stroke: rgba(255, 255, 255, .55); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-width: 1;
}
.ts-construct__guides .g-angle { stroke: var(--ts-lime); }
.ts-construct__guides .g-faint { stroke-dasharray: 3 4; opacity: .5; }
.ts-ideas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-gap); }
.ts-ideas li { padding: clamp(18px, 2vw, 28px); border: 1px solid var(--ts-line); border-radius: var(--ts-r); display: grid; gap: 6px; }
.ts-ideas span { color: var(--ts-muted); font-size: 12px; letter-spacing: .1em; }
.ts-ideas h4 { margin: 8px 0 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.03em; }
.ts-ideas p { color: var(--ts-body); font-size: var(--fs-meta); }

/* Logotype + weights */
.ts-logotype { aspect-ratio: 1358 / 560; min-height: 280px; }
.ts-logotype__art { position: relative; width: clamp(260px, 38vw, 540px); margin-top: -3%; }
.ts-logotype__tm { position: absolute; right: -2.6%; top: -10%; font: 600 clamp(10px, 1vw, 14px) / 1 "Clash Display", var(--font-body); }
.ts-weights { display: grid; gap: clamp(18px, 2vw, 28px); padding: clamp(24px, 3vw, 44px); border-radius: var(--ts-r); background: var(--ts-black); color: #fff; }
.ts-weights__name { position: relative; margin: 0; font-size: clamp(40px, 7.2vw, 108px); line-height: 1; letter-spacing: -.03em; display: grid; }
.ts-weights__name span { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; }
.ts-weights__name span[data-w="700"] { opacity: 1; }
.ts-weights[data-step] .ts-weights__name span { opacity: 0; }
.ts-weights__name span[data-w="400"] { font-weight: 400; } .ts-weights__name span[data-w="500"] { font-weight: 500; }
.ts-weights__name span[data-w="600"] { font-weight: 600; } .ts-weights__name span[data-w="700"] { font-weight: 700; }
.ts-weights[data-step="400"] span[data-w="400"], .ts-weights[data-step="500"] span[data-w="500"],
.ts-weights[data-step="600"] span[data-w="600"], .ts-weights[data-step="700"] span[data-w="700"] { opacity: 1 !important; }
.ts-weights__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ts-weights__list li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ts-hair); font-size: clamp(14px, 1.3vw, 19px); transition: color .4s ease; color: rgba(255, 255, 255, .55); }
.ts-weights__list li b { font-weight: 500; font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .5); align-self: center; }
.ts-weights__list li[data-w="400"] span { font-weight: 400; } .ts-weights__list li[data-w="500"] span { font-weight: 500; }
.ts-weights__list li[data-w="600"] span { font-weight: 600; } .ts-weights__list li[data-w="700"] span { font-weight: 700; }
.ts-weights__list li.is-on { color: var(--ts-lime); }

/* Lockups + icons */
.ts-lockups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-gap); }
.ts-lockup { aspect-ratio: 4 / 3; min-height: 220px; padding: 0 12%; }
.ts-lockup .ts-logo { width: 100%; margin-top: -6%; }
.ts-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-gap); }
.ts-icons li { display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--ts-r); background: #1a1a1a; }
.ts-icons li.is-white { background: #ececec; }
.ts-icons img { width: clamp(84px, 11vw, 150px); height: auto; border-radius: 22%; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }

/* Clear space + minimum size */
.ts-space, .ts-min { aspect-ratio: 5 / 4; min-height: 300px; }
.ts-space__svg { width: 94%; height: auto; }
.ts-space .ts-m, .ts-space .ts-w, .ts-space .ts-w path { fill: #fff; }
.ts-space__box, .ts-space__inner { stroke: rgba(255, 255, 255, .6); stroke-width: 1; stroke-dasharray: 4 4; }
.ts-space__inner { stroke-dasharray: none; stroke: rgba(255, 255, 255, .35); }
.ts-space__x rect { opacity: .92; }
.ts-space__t { fill: #121212; font: 600 22px "Clash Display", var(--font-body); text-anchor: middle; }
.ts-min__row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(40px, 7vw, 100px); padding-bottom: 14%; }
.ts-min__item { position: relative; display: grid; justify-items: center; gap: 14px; padding-left: 26px; color: #121212; }
.ts-min__ruler { position: absolute; left: 0; bottom: 34px; width: 10px; height: var(--h); border: 1px solid #121212; border-right: 0; opacity: .65; }
.ts-min__mark { height: 50px; width: auto; }
.ts-min__mark--100 { height: 100px; }
.ts-min__n { font-size: 14px; font-weight: 500; color: #121212; }

/* Colour */
.ts-swatches { display: flex; gap: var(--ts-gap); margin-top: clamp(30px, 2.9vw, 42px); min-height: clamp(420px, 36vw, 540px); }
.ts-swatch { flex: 1 1 0; margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--ts-r); overflow: hidden; position: relative; }
.ts-swatch--lime { background: var(--ts-lime); color: #121212; }
.ts-swatch--black { background: var(--ts-black); color: #fff; }
.ts-swatch--white { background: #fff; color: #121212; border: 1px solid rgba(0, 0, 0, .1); }
.ts-swatch h3 { margin: 0; font-size: clamp(26px, 2.8vw, 40px); font-weight: 500; letter-spacing: -.04em; }
.ts-swatch dl { margin: 18px 0 0; display: grid; gap: 8px; }
.ts-swatch dl div { display: flex; gap: 14px; font-size: 13px; }
.ts-swatch dt { width: 36px; opacity: .6; } .ts-swatch dd { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ts-tints { list-style: none; margin: 24px calc(-1 * clamp(20px, 2.2vw, 32px)) calc(-1 * clamp(20px, 2.2vw, 32px)); padding: 0; display: grid; }
.ts-tints li { padding: 9px clamp(20px, 2.2vw, 32px); font-size: 11px; letter-spacing: .06em; text-align: right; }
.ts-swatch--lime .ts-tints li:nth-child(1) { background: #daff74; } .ts-swatch--lime .ts-tints li:nth-child(2) { background: #b1d63a; } .ts-swatch--lime .ts-tints li:nth-child(3) { background: #839f23; color: #fff; } .ts-swatch--lime .ts-tints li:nth-child(4) { background: #546a12; color: #fff; }
.ts-swatch--black .ts-tints li:nth-child(1) { background: #3c3c3c; } .ts-swatch--black .ts-tints li:nth-child(2) { background: #6d6d6d; } .ts-swatch--black .ts-tints li:nth-child(3) { background: #9e9e9e; color: #121212; } .ts-swatch--black .ts-tints li:nth-child(4) { background: #d0d0d0; color: #121212; }
.ts-swatch--white .ts-tints li:nth-child(1) { background: #f4f4f4; } .ts-swatch--white .ts-tints li:nth-child(2) { background: #d9d9d9; } .ts-swatch--white .ts-tints li:nth-child(3) { background: #b3b3b3; } .ts-swatch--white .ts-tints li:nth-child(4) { background: #858585; color: #fff; }

/* Type scale + mistakes */
.ts-scale { border-radius: var(--ts-r); background: var(--ts-black); color: #fff; padding: clamp(20px, 3vw, 44px); display: grid; }
.ts-scale__row { display: grid; grid-template-columns: minmax(64px, 120px) 1fr; align-items: baseline; gap: 16px; padding: clamp(14px, 1.6vw, 22px) 0; border-top: 1px solid var(--ts-hair); }
.ts-scale__row:first-child { border-top: 0; }
.ts-scale__row span { font-size: 12px; color: rgba(255, 255, 255, .5); letter-spacing: .06em; }
.ts-scale__row p { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.ts-mistakes { display: grid; gap: 16px; padding-top: clamp(10px, 1.4vw, 20px); }
.ts-mistakes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-gap); }
.ts-mistakes li { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: clamp(150px, 15vw, 210px); padding: 18px; border-radius: var(--ts-r); background: #fff; color: #121212; border: 1px solid rgba(0, 0, 0, .1); overflow: hidden; }
.ts-mistakes li p { margin: 0; align-self: center; justify-self: center; font: 500 clamp(22px, 2.2vw, 32px) / 1.05 "Clash Display", var(--font-body); color: #121212; text-align: center; }
.ts-mistakes li span { font-size: 12px; color: rgba(18, 18, 18, .55); text-align: center; }
.ts-mistakes li::after { content: ""; position: absolute; left: 8%; right: 8%; top: 46%; height: 2px; background: #e5322d; transform-origin: left; transform: rotate(-24deg) scaleX(1); transition: transform .6s cubic-bezier(.65,0,.35,1); }
.ts-root.is-anim .ts-mistakes li:not(.is-struck)::after { transform: rotate(-24deg) scaleX(0); }
.ts-l { transform-box: fill-box; }
.m-script { font-weight: 300 !important; font-style: italic; }
.m-rotate { transform: rotate(-12deg); }
.m-tight { letter-spacing: -.12em; }
.m-center { text-align: center; }
.m-shadow { text-shadow: 0 6px 6px rgba(0, 0, 0, .35), 0 2px 0 rgba(0, 0, 0, .5); }
.m-squeeze { display: inline-block; transform: scale(1.35, .6); }

/* Voice and values */
.ts-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ts-gap); }
.ts-values li { padding: clamp(20px, 2vw, 28px); border: 1px solid var(--ts-line); border-radius: var(--ts-r); display: grid; align-content: start; gap: 10px; transition: transform .4s var(--ease-out-quart), border-color .3s ease; }
.ts-values li:hover { transform: translateY(-6px); border-color: var(--ts-ink); }
.ts-values h3 { margin: 6px 0 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.ts-values p { color: var(--ts-body); font-size: var(--fs-meta); line-height: 1.5; }
.ts-marquee { overflow: hidden; border-radius: var(--ts-r); background: var(--ts-lime); color: #121212; padding: clamp(22px, 3vw, 40px) 0; }
.ts-marquee__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 60px); width: max-content; font-size: clamp(34px, 5.2vw, 78px); font-weight: 600; letter-spacing: -.035em; line-height: 1; animation: tsMarquee 40s linear infinite; padding-left: 40px; }
.ts-marquee__track i { width: .32em; height: .32em; border-radius: 50%; background: #121212; flex: none; }
.ts-marquee:hover .ts-marquee__track { animation-play-state: paused; }
@keyframes tsMarquee { to { transform: translateX(-50%); } }

/* In use */
.ts-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--ts-r); background: #1c1c1c; container-type: inline-size; }
.ts-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ts-shot { aspect-ratio: 2400 / 1100; }
.ts-shot--half { aspect-ratio: 4 / 3; }
.ts-shot__label { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); }
.ts-label--on-dark { color: #fff; }

/* Outcome */
.ts-lessons { list-style: none; margin: clamp(30px, 2.9vw, 42px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-gap); }
.ts-lessons li { padding: clamp(22px, 2.4vw, 34px); border-radius: var(--ts-r); background: var(--ts-black); color: #fff; display: grid; align-content: start; gap: 12px; min-height: 240px; }
.ts-lessons span { color: var(--ts-lime); font-size: 12px; letter-spacing: .1em; }
.ts-lessons h3 { margin: 24px 0 0; font-size: clamp(20px, 1.9vw, 27px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.ts-lessons p { color: rgba(255, 255, 255, .62); font-size: var(--fs-meta); line-height: 1.5; }

/* Closing band */
.ts-cta { display: grid; justify-items: center; gap: 28px; padding: clamp(48px, 7vw, 100px) 20px; border-radius: var(--ts-r); background: var(--ts-lime); color: #121212; text-align: center; }
.ts-cta__title { margin: 0; font-size: clamp(30px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: #121212; text-wrap: balance; }
.ts-cta__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ts-cta__primary, .ts-cta__ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500; text-decoration: none; transition: transform .25s var(--ease-out-quart); }
.ts-cta__primary { background: #121212; color: #fff; }
.ts-cta__ghost { border: 1px solid #121212; color: #121212; }
.ts-cta__primary:hover, .ts-cta__ghost:hover { transform: translateY(-2px); }
.ts-cta + .cs-more, .ts-wide + .cs-more { margin-top: var(--ts-section-gap); }

/* ---- Motion helpers (filled by tripstories.js) ----------------------------- */
.ts-word { display: inline-block; white-space: nowrap; }
.ts-char { display: inline-block; overflow: hidden; vertical-align: top; }
.ts-char > span { display: inline-block; }

/* ---- Tablet <= 1099px ----------------------------------------------------- */
@media (max-width: 1099px) {
  .ts-challenge { grid-template-columns: minmax(0, 1fr); }
  .ts-banner { aspect-ratio: auto; min-height: 420px; }
  .ts-banner__copy { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 28px; }
  .ts-banner__meta { justify-content: start; }
  .ts-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-mistakes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Phone <= 768px ------------------------------------------------------- */
@media (max-width: 768px) {
  /* The 16:9 sheet would be wider than the screen and crop the lockup, so on
     phones the stage is the viewport and the lockup is sized to it. */
  .ts-hero__stage { width: 100%; height: 100%; aspect-ratio: auto; }
  .ts-hero__brand { left: 13%; top: 46%; width: 74cqw; }
  .ts-hero__tm { right: -3cqw; top: 4cqw; font-size: 3cqw; }
  .ts-hero__caption { bottom: 14cqw; font-size: max(10px, 2.6cqw); }
  .ts-root { --ts-gap: 12px; }
  .ts-statement { font-size: 24px; line-height: 1.2; }
  .ts-lead { font-size: var(--fs-meta); line-height: 1.55; }
  .ts-title { font-size: 30px; line-height: 1.08; }
  .ts-sub { font-size: var(--fs-meta); line-height: 1.55; margin-top: 14px; }
  .ts-duo { grid-template-columns: minmax(0, 1fr); }
  .ts-duo__line { width: 1px; height: 48px; justify-self: center; }
  .ts-duo__line i { transform-origin: top; }
  .ts-construct, .ts-logotype, .ts-space, .ts-min, .ts-banner { aspect-ratio: auto; min-height: 300px; }
  .ts-ideas, .ts-lessons, .ts-lockups, .ts-icons { grid-template-columns: minmax(0, 1fr); }
  .ts-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-lockup { aspect-ratio: auto; min-height: 190px; }
  .ts-pair { grid-template-columns: minmax(0, 1fr); }
  .ts-swatches { flex-direction: column; min-height: 0; }
  .ts-swatch { min-height: 260px; }
  .ts-weights__list li { grid-template-columns: minmax(70px, 100px) 1fr; }
  .ts-values { grid-template-columns: minmax(0, 1fr); }
  .ts-shot { aspect-ratio: 4 / 3; }
  .ts-lessons li { min-height: 0; }
}
@media (max-width: 560px) {
  .ts-banner__meta { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .ts-mistakes ul { grid-template-columns: minmax(0, 1fr); }
  .ts-min__row { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-hero__hint, .ts-marquee__track { animation: none; }
  .ts-weights__name span { transition: none; }
}

/* ---- Overlay-proofing -------------------------------------------------------
   Opened from the Work grid this page is injected into the homepage, whose own
   h1, link and button colours outrank single-class rules, so the brand panels
   state their colours at root weight. */
.ts-root .ts-chrome :is(.ts-close, .ts-theme-toggle) { color: #fff; }
.ts-root .ts-chrome.is-on-light :is(.ts-close, .ts-theme-toggle) { color: #222; }
:root[data-theme="dark"] .ts-root .ts-chrome.is-on-light :is(.ts-close, .ts-theme-toggle) { color: #fff; }
.ts-root :where(p) { color: inherit; }
.ts-root :where(b, strong, dt) { font-weight: inherit; }
.ts-root .ts-panel, .ts-root .ts-issues li, .ts-root .ts-weights, .ts-root .ts-scale, .ts-root .ts-lessons li { color: #fff; }
.ts-root .ts-panel--white, .ts-root .ts-swatch--lime, .ts-root .ts-swatch--white, .ts-root .ts-marquee, .ts-root .ts-cta, .ts-root .ts-mistakes li { color: #121212; }
.ts-root .ts-banner__title, .ts-root .ts-banner__meta dd, .ts-root .ts-issues h4, .ts-root .ts-lessons h3, .ts-root .ts-scale__row p, .ts-root .ts-weights__name { color: #fff; }
.ts-root .ts-banner__meta div:nth-child(1) dd { color: var(--ts-lime); }
.ts-root .ts-cta__title, .ts-root .ts-mistakes li p { color: #121212; }
.ts-root .ts-label { color: rgba(255, 255, 255, .72); }
.ts-root .ts-label--ink { color: rgba(18, 18, 18, .6); }
.ts-root .ts-label--on-dark { color: #fff; }
.ts-root .ts-cta__primary { color: #fff; }