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

/* =====================================================================
   RNR MOTORS — case study

   Built on the site's own tokens (tokens.css) and made of the same parts
   as Freight Intelligence, Nivora Health and Aster Analytics: the same
   chrome (progress rail, theme toggle, close), the same section head, the
   same card radius and gap, the same ending. The layout follows the
   Figma file: a full-bleed red cover, then near-full-width cards.

   The one deliberate exception is the BRAND being shown. RNR's red, the
   dark and grey brand cards and the photography keep their own colours in
   both themes, because they are the work, not page styling.

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

  /* The brand. */
  --rn-red: #ec1e24;
  --rn-red-deep: #dd1c21;
  --rn-soft-red: #ff6c6c;
  --rn-charcoal: #1c1c1c;
  --rn-grey: #efefef;

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

.rn-root, .rn-root *, .rn-root *::before, .rn-root *::after { box-sizing: border-box; }
html:has(> body.rn-root) { -webkit-text-size-adjust: 100%; }
.rn-root {
  margin: 0;
  background: var(--rn-bg);
  color: var(--rn-ink);
  font-family: var(--rn-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;
}
.rn-root img { display: block; max-width: 100%; height: auto; }
.rn-root :where(h1, h2, h3, h4, p, figure, figcaption, ol, ul, dl, dd, hr) { margin: 0; }
.rn-root a { color: inherit; }
.rn-root * { font-family: var(--font-body); }
.rn-root :focus-visible { outline: 2px solid var(--rn-ink); outline-offset: 3px; }

.rn-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 14px; border-radius: 10px;
  background: var(--rn-ink); color: var(--rn-bg); text-decoration: none; font-size: var(--fs-meta);
}
.rn-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. */
.rn-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.rn-progress span {
  display: block; width: 100%; height: 100%;
  background: var(--rn-ink); transform: scaleX(0); transform-origin: left;
}
.rn-progress.is-visible { opacity: 1; }
.rn-chrome {
  position: fixed; top: 24px; right: 24px; z-index: 100;
  display: flex; align-items: center; gap: 12px;
}
@media (max-width: 600px) {
  .rn-chrome { top: 14px; right: 14px; gap: 8px; }
  .rn-chrome :is(.rn-close, .rn-theme-toggle) { width: 32px; height: 32px; }
}
.rn-close, .rn-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;
}
.rn-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.rn-close:hover, .rn-theme-toggle:hover { transform: scale(1.06); background: rgba(255, 255, 255, .24); }
.rn-close:active, .rn-theme-toggle:active { transform: scale(.94); }
.rn-chrome.is-on-light :is(.rn-close, .rn-theme-toggle) {
  background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .12); color: #222;
}
:root[data-theme="dark"] .rn-chrome.is-on-light :is(.rn-close, .rn-theme-toggle) {
  background: rgba(18, 18, 18, .78); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.rn-theme-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rn-theme__sun, .rn-theme__moon { transform-origin: 12px 12px; transition: opacity .2s ease, transform .26s var(--ease-out-quart); }
.rn-theme__moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
:root[data-theme="dark"] .rn-theme__sun { opacity: 0; transform: rotate(40deg) scale(.6); }
:root[data-theme="dark"] .rn-theme__moon { opacity: 1; transform: rotate(0) scale(1); }

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

/* ---- Hero ----------------------------------------------------------------
   The brand's red with the monogram enlarged behind the logo. The stage is a
   16:9 sheet sized exactly like object-fit: cover, so everything on it (the
   picture and the logo, positioned in container units) scales together and
   the hero stays identical to the cover image the Work grid morphs from. */
.rn-hero { position: relative; }
.rn-hero__media {
  position: relative; width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--rn-red);
}
.rn-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;
}
.rn-hero__bg {
  position: absolute; inset: 0;
  background: var(--rn-red) url("../../assets/rnr/hero-bg.webp") center / 100% 100% no-repeat;
  will-change: transform;
}
/* Logo box from the Figma, as a share of the 1440 x 810 cover:
   153.34 wide, 176.8 tall, at x 643 and y 331. */
.rn-hero__brand {
  position: absolute; left: 44.653%; top: 40.864%;
  width: 10.649cqw; margin: 0; line-height: 0;
}
.rn-hero__brand svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- Intro ------------------------------------------------------------- */
.rn-intro {
  display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.4vw, 34px);
  padding-top: var(--rn-section-gap);
  text-align: center;
}
.rn-statement {
  max-width: 880px;
  font-size: clamp(24px, 2.15vw, 31px); font-weight: 500; line-height: 1.2; letter-spacing: -.028em;
  text-wrap: balance;
}
.rn-lead {
  max-width: 940px;
  color: var(--rn-body); font-size: var(--fs-body); line-height: 1.45; letter-spacing: -.01em;
  text-wrap: pretty;
}
.rn-intro + .rn-section { padding-top: clamp(48px, 5vw, 72px); }

/* ---- Challenge ----------------------------------------------------------- */
.rn-challenge {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: var(--rn-gap);
  padding: clamp(14px, 1.67vw, 24px);
  border: 1px solid var(--rn-soft-red); border-radius: var(--rn-r);
}
.rn-challenge__copy {
  display: flex; flex-direction: column; gap: 40px;
  padding: clamp(14px, 1.9vw, 24px) clamp(8px, 1.3vw, 22px) clamp(14px, 1.6vw, 24px);
}
.rn-challenge__title {
  font-size: clamp(24px, 2.15vw, 31px); font-weight: 500; line-height: 1.04; letter-spacing: -.028em; text-wrap: balance;
}
.rn-challenge__body {
  margin-top: clamp(28px, 3.9vw, 56px); max-width: 32em;
  color: var(--rn-body); font-size: var(--fs-body); line-height: 1.45; letter-spacing: -.01em;
}
.rn-challenge__close { margin-top: auto; display: grid; gap: 4px; color: var(--rn-body); font-size: var(--fs-body); line-height: 1.4; letter-spacing: -.01em; }
.rn-challenge__big { font-size: clamp(20px, 1.75vw, 25px); font-weight: 450; line-height: 1.2; letter-spacing: -.025em; }
.rn-panel {
  position: relative; display: grid; place-items: center;
  background: var(--rn-charcoal); border-radius: var(--rn-r); overflow: hidden;
}
.rn-challenge__panel { aspect-ratio: 665 / 545; min-height: 300px; background: #1e1e1e; }
.rn-challenge__logo { width: clamp(210px, 23.8vw, 342px); height: auto; margin-top: -4%; }
.rn-challenge__panel .rn-label {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 2.8vw, 40px); text-align: center;
  font-size: clamp(16px, 1.4vw, 20px); color: #fff;
}

/* ---- Photographs --------------------------------------------------------- */
.rn-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--rn-r); background: #1c1c1c; container-type: inline-size; }
.rn-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.rn-banner { margin-top: var(--rn-gap); aspect-ratio: 1358 / 461; min-height: 300px; }
.rn-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 0, 2, .62) 0%, rgba(8, 0, 2, .22) 52%, rgba(8, 0, 2, .08) 100%),
    linear-gradient(0deg, rgba(8, 0, 2, .55) 0%, rgba(8, 0, 2, 0) 55%);
}
.rn-banner__copy {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 24px;
  padding: clamp(20px, 3.7vw, 54px) clamp(20px, 4vw, 56px);
  color: #fff;
}
.rn-banner__title {
  font-size: clamp(24px, 2.95vw, 42px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; color: #fff;
}
.rn-banner__meta { display: grid; grid-template-columns: auto auto; gap: 16px clamp(28px, 4.6vw, 64px); justify-content: end; }
.rn-banner__meta dt { color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.3; }
.rn-banner__meta dd { margin-top: 4px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; max-width: 14em; }

/* ---- Section head --------------------------------------------------------- */
.rn-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rn-tag { color: var(--rn-body); font-size: var(--fs-small); font-weight: 500; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.rn-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;
}
.rn-sub {
  max-width: 900px; margin-top: 22px;
  color: var(--rn-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; letter-spacing: -.01em;
  text-wrap: balance;
}

/* ---- The brand cards ------------------------------------------------------ */
.rn-stack { display: grid; gap: var(--rn-gap); margin-top: clamp(30px, 2.9vw, 42px); }
.rn-pair { display: grid; gap: var(--rn-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Symbol and logotype construction: the mark in grey on a grid, four red
   registration squares at its corners. Drawn here, not exported. */
.rn-construct { aspect-ratio: 1358 / 592; min-height: 300px; }
.rn-construct__art { position: relative; width: var(--art); margin-top: -3%; }
.rn-construct--symbol { --art: clamp(150px, 17vw, 240px); }
.rn-construct--logotype { --art: clamp(240px, 29vw, 420px); }
.rn-construct__art > img { display: block; width: 100%; height: auto; }
.rn-construct__grid {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 1px;
}
.rn-construct__grid path { vector-effect: non-scaling-stroke; }
.rn-construct__sq {
  position: absolute; aspect-ratio: 1;
  background: rgba(227, 30, 36, .38); border: 1px solid #d81e26;
}
.rn-construct--symbol .rn-construct__sq { width: calc(100% / 9); }
.rn-construct--logotype .rn-construct__sq { width: calc(100% / 12); }
.rn-construct__sq:nth-of-type(1) { left: 0; top: 0; transform: translate(-100%, -100%); }
.rn-construct__sq:nth-of-type(2) { left: 100%; top: 0; transform: translate(0, -100%); }
.rn-construct__sq:nth-of-type(3) { left: 0; top: 100%; transform: translate(-100%, 0); }
.rn-construct__sq:nth-of-type(4) { left: 100%; top: 100%; }
.rn-construct .rn-label { position: absolute; left: 0; right: 0; bottom: clamp(22px, 5.2vw, 76px); text-align: center; color: rgba(255, 255, 255, .72); }

.rn-tile { position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: 673 / 290; min-height: 150px; border-radius: var(--rn-r); overflow: hidden; }
.rn-tile--light { background: var(--rn-grey); }
.rn-tile--red { background: var(--rn-red); }
.rn-tile > img { width: clamp(72px, 7.2vw, 104px); height: auto; }

/* ---- Typography ----------------------------------------------------------- */
.rn-type {
  padding: clamp(22px, 3.2vw, 46px);
  background: var(--rn-grey); border-radius: var(--rn-r); color: #000;
}
.rn-type, .rn-type * { color: #000; }
.rn-type__tag { font-size: 11px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.rn-type__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 42px); align-items: start; margin-top: clamp(26px, 3.1vw, 40px); }
.rn-type__name img { width: clamp(190px, 23.6vw, 321px); height: auto; }
.rn-type__name--mont { font-family: "Montserrat", var(--font-body); font-size: clamp(26px, 2.95vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.rn-root .rn-type__name--mont { font-family: "Montserrat", var(--font-body); }
.rn-type__aa { width: clamp(56px, 7.4vw, 101px); height: auto; }
.rn-type__set { margin-top: clamp(40px, 7.4vw, 100px); }
img.rn-type__set { width: clamp(220px, 25vw, 343px); height: auto; }
.rn-type__rule { height: 0; margin: clamp(34px, 4.6vw, 64px) 0 0; border: 0; border-top: 1px solid #8d8d8d; }
.rn-type__specimens--two { display: grid; grid-template-columns: minmax(0, 266fr) minmax(0, 306fr); gap: 0 24px; }
.rn-root .rn-type__aa--r, .rn-root .rn-type__aa--s, .rn-root .rn-type__cut p, .rn-root .rn-type__digits { font-family: "Montserrat", var(--font-body); }
p.rn-type__aa { width: auto; font-size: clamp(38px, 4.1vw, 56px); line-height: 1; letter-spacing: -.01em; }
.rn-type__aa--r { font-weight: 400; }
.rn-type__aa--s { font-weight: 600; }
.rn-type__weight { margin-top: clamp(40px, 7vw, 100px); font-family: "Montserrat", var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.rn-type__cut:last-child .rn-type__weight { font-weight: 600; }
.rn-type__set--r, .rn-type__set--s { margin-top: 14px; font-size: 12px; line-height: 18px; letter-spacing: 0; }
.rn-type__set--r { font-weight: 400; }
.rn-type__set--s { font-weight: 600; }
.rn-type__digits { letter-spacing: .26em; font-weight: 600; }
.rn-type__set--r .rn-type__digits { font-weight: 400; }

/* ---- Mock-up photographs --------------------------------------------------- */
.rn-shot--stationery { aspect-ratio: 1358 / 747; }
.rn-shot--billboard { aspect-ratio: 1358 / 748; }
.rn-shot--sign, .rn-shot--poster { aspect-ratio: 666 / 568; }
.rn-shot--web { aspect-ratio: 1358 / 747; background: var(--rn-red); }
.rn-shot__label { position: absolute; z-index: 1; margin: 0; }
.rn-shot__label--bl { left: clamp(18px, 3.2cqw, 44px); bottom: clamp(16px, 2.9cqw, 40px); }
.rn-shot__label--bc { left: 50%; bottom: clamp(18px, 9.4cqw, 70px); transform: translateX(-50%); color: #101010; white-space: nowrap; }
.rn-shot__label--br { right: clamp(18px, 4cqw, 52px); bottom: clamp(16px, 7cqw, 42px); color: #101010; }
.rn-shot--poster .rn-shot__label--br { color: #fff; }
.rn-shot__label--tl { left: clamp(18px, 3cqw, 41px); top: clamp(18px, 3.8cqw, 52px); }
/* The billboard's two lines are live text over the photograph. */
.rn-shot__line {
  position: absolute; z-index: 1; margin: 0; top: 12.9cqw; color: #fff;
  font-family: "Montserrat", var(--font-body); font-size: clamp(14px, 2.06cqw, 28px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em;
  white-space: nowrap;
}
.rn-root .rn-shot__line { font-family: "Montserrat", var(--font-body); }
.rn-shot__line--l { left: 8.5cqw; }
.rn-shot__line--r { right: 11.4cqw; }

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

/* =====================================================================
   Tablet · <=1099px
   ===================================================================== */
@media (max-width: 1099px) {
  .rn-challenge { grid-template-columns: minmax(0, 1fr); }
  .rn-challenge__copy { gap: 36px; }
  .rn-challenge__panel { aspect-ratio: auto; min-height: 300px; }
  .rn-banner { aspect-ratio: auto; min-height: 420px; }
  .rn-banner__copy { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 28px; }
  .rn-banner__meta { justify-content: start; }
  .rn-shot--sign, .rn-shot--poster { aspect-ratio: 4 / 5; }
}

/* =====================================================================
   Phone · <=768px
   ===================================================================== */
@media (max-width: 768px) {
  .rn-root { --rn-gap: 12px; }
  .rn-statement { font-size: 22px; line-height: 1.22; }
  .rn-lead { font-size: var(--fs-meta); line-height: 1.55; }
  .rn-title { font-size: 30px; line-height: 1.08; }
  .rn-sub { font-size: var(--fs-meta); line-height: 1.55; margin-top: 14px; }
  .rn-construct { aspect-ratio: auto; min-height: 340px; }
  .rn-construct .rn-label { bottom: 28px; }
  .rn-tile { aspect-ratio: auto; min-height: 150px; }
  .rn-type__row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .rn-type__set { margin-top: 36px; }
  .rn-type__specimens--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rn-type__weight { margin-top: 30px; }
  .rn-type__cut + .rn-type__cut { margin-top: 40px; }
  .rn-challenge__copy { gap: 28px; }
  .rn-challenge__body { margin-top: 0; }
  .rn-shot--stationery, .rn-shot--web { aspect-ratio: 4 / 3; }
  /* The billboard keeps its desktop proportions: its two lines are laid
     over the picture and must stay on the billboard face. */
  .rn-shot__line { font-size: clamp(8px, 2.06cqw, 14px); }
}
@media (max-width: 560px) {
  .rn-pair--signs { grid-template-columns: minmax(0, 1fr); }
  .rn-type__specimens--two { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .rn-type__specimens--two .rn-type__weight { margin-top: 18px; }
  .rn-banner__meta { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-photo img { transition: none; }
}

/* ---- Overlay-proofing -----------------------------------------------------
   Opened from the Work grid, this page is injected into the homepage, whose
   own h1, link and button colours outrank the single-class rules above. The
   cover and chrome sit on the brand red and are white by design, so they
   state it at root weight, as the other case studies do. */
.rn-root .rn-chrome :is(.rn-close, .rn-theme-toggle) { color: #fff; }
.rn-root .rn-chrome.is-on-light :is(.rn-close, .rn-theme-toggle) { color: #222; }
:root[data-theme="dark"] .rn-root .rn-chrome.is-on-light :is(.rn-close, .rn-theme-toggle) { color: #fff; }
.rn-root :where(p) { color: inherit; }
.rn-root .rn-banner__title, .rn-root .rn-banner__meta dd { color: #fff; }
.rn-root .rn-banner__meta dt { color: rgba(255, 255, 255, .7); }
.rn-root .rn-challenge__panel .rn-label { color: #fff; }
.rn-root .rn-construct .rn-label { color: rgba(255, 255, 255, .72); }
.rn-root .rn-type, .rn-root .rn-type * { color: #000; }
.rn-root .rn-shot__label--bc, .rn-root .rn-shot__label--br { color: #101010; }
.rn-root .rn-shot--poster .rn-shot__label--br, .rn-root .rn-label--on-dark, .rn-root .rn-shot__line { color: #fff; }

/* No accidental browser-default bold: the weight scale is 400 / 500 / 600. */
.rn-root :where(b, strong, dt) { font-weight: inherit; }