/* ==========================================================================
   Studio Global — homepage
   ========================================================================== */

/* Inter Tight, self-hosted (2026-11-10) rather than from Google Fonts, which
   cost a phone two extra connections before any text could show. One variable
   file per subset covers weights 300 to 600. Latin is preloaded in each
   page's <head>; Latin Extended loads only if a page uses one of its letters. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black: #000;
  --white: rgba(255, 255, 255, 0.96);
  --muted: rgba(255, 255, 255, 0.55);
  --paper: #fff;
  --ink: #121212;
  --accent: #ff4a1c;

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--black);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.2;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  padding-inline: var(--gutter);
}

/* Max-width layout container shared by the nav and content sections */
/* Where .wrap's content starts and ends, for full-bleed sections whose
   content should line up with the nav and other wrapped sections */
:root {
  --edge: max(60px, calc((100vw - 2000px) / 2 + 60px));
}

.wrap {
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
  padding-inline: 60px;
}

@media (max-width: 700px) {
  :root { --edge: var(--gutter); }
  .wrap { padding-inline: var(--gutter); }
}

/* Film grain across the whole page */
.grain {
  position: fixed;
  inset: -100%;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-3%, -4%); }
  80%  { transform: translate(7%, 5%); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: clamp(20px, 3.4vh, 32px);
  transition: color 0.3s;
}

/* Switched on by JS while the nav sits over a light section */
.nav--on-light {
  color: var(--ink);
}

/* Pages split into black and white halves (contact, insights) put
   .nav-blend on <body>: the nav inverts whatever is behind it, so it reads
   white over black and black over white. Off while the dropdown or mobile
   menu is open, as their dark panels live inside the nav and would invert
   too. */
html:not(.dd-open):not(.menu-open):not(.nav-scrolled) .nav-blend .nav {
  mix-blend-mode: difference;
}

/* Nav bar on scroll: once the page has scrolled (main.js adds
   html.nav-scrolled), a 60% black bar fades in behind the nav. The nav then
   stays white, so the light-section colour switch and the .nav-blend
   inversion above are off while the bar shows. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.6);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.nav-scrolled .nav::before {
  opacity: 1;
}
html.nav-scrolled .nav {
  color: var(--white);
}
.menu-open .nav {
  color: var(--white);
}

/* Services and Sectors toggles in the nav: text plus a small circled arrow */
.nav__dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav__dd-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transition: transform 0.5s var(--ease-out);
}
.nav__dd-toggle[aria-expanded="true"] .nav__dd-icon {
  transform: rotate(180deg);
}

/* Services and Sectors dropdowns: a dark panel drops under the nav, its links rise in one
   after another, and the page behind dims */
.dd-open .nav {
  color: var(--white);
}

.nav-dd {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.nav-dd.is-open {
  pointer-events: auto;
}

.nav-dd__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 1s;
}
.nav-dd.is-open .nav-dd__bg {
  opacity: 1;
}

.nav-dd__panel {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  overflow: hidden;
  background: #171719;
  transition: height 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-dd.is-open .nav-dd__panel {
  height: 430px;
}

.nav-dd__inner {
  padding-top: 100px;
}

.nav-dd__border {
  height: 1px;
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.2);
}

.nav-dd__row {
  display: flex;
  align-items: flex-start;
}

.nav-dd__heading {
  width: 25%;
  padding-right: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.nav-dd__list {
  flex: 1;
  list-style: none;
}

.nav-dd__link {
  display: inline-block;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Closing is a quick drop away; opening is a slower, staggered rise */
.nav-dd__heading,
.nav-dd__link {
  opacity: 0;
  transform: translateY(100px);
  transition:
    color 0.2s,
    opacity 0.6s cubic-bezier(0.59, 0.12, 0.85, 0.33),
    transform 0.6s cubic-bezier(0.59, 0.12, 0.85, 0.33);
}
.nav-dd.is-open .nav-dd__heading,
.nav-dd.is-open .nav-dd__link {
  opacity: 1;
  transform: none;
  transition:
    color 0.2s,
    opacity 1s cubic-bezier(0.23, 1, 0.32, 1) calc(0.05s * var(--i, 0)),
    transform 1s cubic-bezier(0.23, 1, 0.32, 1) calc(0.05s * var(--i, 0));
}

.nav-dd__link[aria-current="page"] {
  color: var(--accent);
}

/* Hovering a link dims the others */
.nav-dd__list:hover .nav-dd__link {
  color: rgba(255, 255, 255, 0.2);
}
.nav-dd__list .nav-dd__link:hover,
.nav-dd__list .nav-dd__link:focus-visible {
  color: var(--white);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The Studio Global wordmark, painted in currentColor through a mask so it
   follows the nav's colour (and its difference blend) like the text did. Its
   box is the small, scrolled size; at the top of the page it's scaled up from
   the left, and shrinks back once the page scrolls (html.nav-scrolled) */
.nav__logo {
  display: block;
  flex: none;
  width: 141px;
  height: 19px;
}
.nav__logo-img {
  --logo-scale: 1.25;
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("../images/studioglobal-nav-logo.svg") left center / contain no-repeat;
  mask: url("../images/studioglobal-nav-logo.svg") left center / contain no-repeat;
  /* The scroll shrink works from the left edge; the translate moves the
     hover shrink's centre to the middle of the wordmark as drawn */
  --logo-shrink: calc(var(--logo-scale) * (1 - var(--logo-hover, 1)) * 50%);
  transform: translateX(var(--logo-shrink)) scale(calc(var(--logo-scale) * var(--logo-hover, 1)));
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}
html.nav-scrolled .nav__logo-img {
  --logo-scale: 1;
}
/* Shrinks slightly about its centre on hover, at either size */
@media (hover: hover) {
  .nav__logo:hover .nav__logo-img {
    --logo-hover: 0.94;
  }
}
.nav__logo:focus-visible .nav__logo-img {
  --logo-hover: 0.94;
}
@media (max-width: 700px) {
  .nav__logo {
    width: 126px;
    height: 17px;
  }
  .nav__logo-img {
    --logo-scale: 1.15;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.1vw, 34px);
  list-style: none;
}

/* Rolling-text hover */
.roll {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: top;
}
.roll > span {
  display: block;
  transition: transform 0.55s var(--ease-out);
}
.roll > span::after {
  content: attr(data-text);
  display: block;
}
a:hover .roll > span,
a:focus-visible .roll > span,
.nav__dd-toggle:hover .roll > span,
.nav__dd-toggle:focus-visible .roll > span {
  transform: translateY(-50%);
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.nav__toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: -8px;
}
.nav__toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 23px; }

.menu-open .nav__toggle span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.menu-open .nav__toggle span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

/* Phones: hide the nav logo once the footer (with its own logo) is under it */
@media (max-width: 700px) {
  html.footer-under-nav body:not(.menu-open) .nav__logo {
    opacity: 0;
    pointer-events: none;
    transition-duration: 0.3s;
  }
}

/* Intro reveal for nav */
.nav__logo,
.nav__links li,
.nav__toggle {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.is-ready .nav__logo,
.is-ready .nav__links li,
.is-ready .nav__toggle {
  opacity: 1;
  transform: none;
}
.nav__links li { transition-delay: calc(0.25s + var(--i, 0) * 0.05s); }

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 120px 40px;
  background: var(--black);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.menu-open .menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--ease-out);
}
.menu__links {
  list-style: none;
}
.menu__links li {
  overflow: hidden;
}
.menu__links a {
  display: inline-block;
  font-size: clamp(36px, 10vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease-out);
}
.menu-open .menu__links a {
  transform: none;
  transition-delay: calc(0.08s + var(--i, 0) * 0.045s);
}
.menu__foot {
  margin-top: 40px;
  color: var(--muted);
}

/* Services group in the mobile menu: a collapsible drop-down */
.menu {
  overflow-y: auto;
}

/* Reads as one of the menu links, but it's a button that opens the group */
.menu__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: clamp(36px, 10vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-align: left;
  cursor: pointer;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease-out), color 0.4s var(--ease-out);
}
.menu-open .menu__toggle {
  transform: none;
  transition-delay: calc(0.08s + var(--i, 0) * 0.045s);
}

/* Round badge that flips over when the group opens */
.menu__chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-out);
}
.menu__toggle[aria-expanded="true"] .menu__chev {
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.24);
}

/* 0fr collapsed, 1fr open: the list slides out and pushes the rest down */
.menu__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.menu__panel > * {
  overflow: hidden;
}
.menu__panel.is-open {
  grid-template-rows: 1fr;
}

/* The other items step back while the group is open */
.menu.submenu-open .menu__links > li:not(.is-open) > a,
.menu.submenu-open .menu__links > li:not(.is-open) > .menu__toggle {
  color: var(--muted);
}

/* Spacing sits on the items, not the list: padding on the list itself would
   still show when the panel is collapsed to 0fr */
.menu__sub {
  list-style: none;
}
.menu__sub li:first-child { padding-top: 6px; }
.menu__sub li:last-child { padding-bottom: 10px; }

.menu__sub a {
  font-size: clamp(24px, 7vw, 40px);
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .menu__panel,
  .menu__chev {
    transition: none;
  }
}

@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  height: 220vh;
  background: var(--black);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  transform-origin: 50% 40%;
  will-change: transform;
}

/* Showreel (Vimeo background embed), sized to cover the hero like
   object-fit: cover at 16:9; fades in over the black hero once it's playing */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}
.hero.video-playing .hero__video {
  opacity: 1;
}

/* Keeps the headline legible over footage */
.hero.video-playing .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

/* Media fades in on load */
.hero__media {
  opacity: 0;
  transition: opacity 1.6s var(--ease-in-out);
}
.is-ready .hero__media { opacity: 1; }

.hero__shade {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
}

.hero__heading {
  position: absolute;
  inset: auto 0 clamp(8px, 2vh, 28px);
  will-change: transform;
}

.marquee {
  overflow-x: clip;
  overflow-y: visible;
  white-space: nowrap;
}

.marquee__rise {
  transform: translateY(40%);
  opacity: 0;
  transition: transform 1.4s var(--ease-out) 0.35s, opacity 1.1s var(--ease-out) 0.35s;
}
.is-ready .marquee__rise {
  transform: none;
  opacity: 1;
}

.marquee__track {
  display: inline-flex;
  will-change: transform;
}

.marquee__item {
  flex: none;
  padding-right: 0.32em;
  font-size: clamp(72px, 14vw, 260px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* ==========================================================================
   Intro statement
   ========================================================================== */

.intro {
  position: relative;
  padding-block: clamp(120px, 26vh, 320px) clamp(100px, 18vh, 220px);
  background: var(--black);
}

.intro__body {
  max-width: 1500px;
  font-size: clamp(28px, 3.9vw, 64px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.022em;
}

.intro__text .w {
  transition: opacity 0.35s linear;
}

/* ==========================================================================
   Selected work
   ========================================================================== */

.work {
  padding-block: 0 clamp(100px, 16vh, 180px);
  background: var(--black);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 20px);
  list-style: none;
}

/* Animate on: each card rises half its height as it scrolls into view */
.work__item,
.clients__item {
  transition:
    transform 1s cubic-bezier(0.23, 1, 0.32, 1) var(--delay, 0s),
    opacity 1s cubic-bezier(0.23, 1, 0.32, 1) var(--delay, 0s);
}
.js-reveal .work__item:not(.is-in),
.js-reveal .clients__item:not(.is-in) {
  opacity: 0;
  transform: translateY(50%);
}

.work-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
  background: #111;
  transition: transform 0.2s var(--ease-out);
}
.work-card:active {
  transform: scale(0.95);
}

.work-card__media {
  display: block;
  aspect-ratio: 2 / 3;
}
.work-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Bottom scrim keeps the caption legible on any image */
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

/* Hover darken */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}

/* Circular arrow: turns upright and scales in on hover */
.work-card__arrow {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 50%;
  background: #f5f5f5;
  color: #000;
  opacity: 0;
  transform: scale(0.8) rotate(45deg);
  transition:
    opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .work-card:hover .work-card__media img { transform: scale(1.05); }
  .work-card:hover::after { opacity: 0.2; }
  .work-card:hover .work-card__arrow { opacity: 1; transform: none; }
}
.work-card:focus-visible .work-card__media img { transform: scale(1.05); }
.work-card:focus-visible .work-card__arrow { opacity: 1; transform: none; }

.work-card__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 30px;
}

.work-card__title {
  font-size: clamp(18px, 1.3vw, 24px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.work-card__sub {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .work-card__caption { padding: 16px; }
}

/* ==========================================================================
   Services — bento grid (three tiles, then two)
   ========================================================================== */

.bento {
  padding-block: clamp(80px, 14vh, 160px);
  background: var(--black);
}

.bento__title {
  margin-bottom: clamp(40px, 7vh, 90px);
  font-size: clamp(34px, 3.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
}

/* Six columns: the top three tiles take two each, the bottom two take three */
.bento__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  list-style: none;
}
.bento__item {
  grid-column: span 2;
}
.bento__item:nth-child(n + 4) {
  grid-column: span 3;
}

.bento__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: clamp(200px, 19.5vw, 400px);
  overflow: hidden;
  border-radius: 4px;
  background: #242424;
  color: var(--white);
  isolation: isolate;
}

/* Media: the service image always shows under a dark overlay; on hover it
   brightens and zooms in, and the film (if any) fades in over it */
.bento__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bento__img,
.bento__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1.2s var(--ease-out), opacity 0.6s var(--ease-out);
}
.bento__video {
  /* A 16:9 frame that always covers the tile */
  width: max(100%, calc(var(--tile-h, 400px) * 16 / 9));
  height: max(100%, calc(var(--tile-w, 700px) * 9 / 16));
  border: 0;
  pointer-events: none;
  opacity: 0;
}
.bento__tile.video-playing .bento__video {
  opacity: 1;
}
/* Dark overlay: heavy at rest so the label reads, lifted on hover */
.bento__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  transition: background-color 0.6s var(--ease-out);
}

.bento__label {
  position: relative;
  padding: clamp(18px, 1.8vw, 32px);
  font-size: clamp(24px, 2.2vw, 42px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: left;
  transform-origin: left bottom;
  transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) {
  .bento__tile:hover .bento__media::after,
  .bento__tile:focus-visible .bento__media::after {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .bento__tile:hover .bento__img,
  .bento__tile:hover .bento__video,
  .bento__tile:focus-visible .bento__img,
  .bento__tile:focus-visible .bento__video {
    transform: translate(-50%, -50%) scale(1.08);
  }
  .bento__tile:hover .bento__label {
    transform: scale(0.96);
  }
}
.bento__tile:focus-visible {
  outline-offset: -6px;
}

/* Animate on: tiles rise and settle in turn as the grid scrolls into view
   (the observer in main.js adds .is-in and staggers them with --delay) */
.bento__item {
  transition:
    transform 1.1s cubic-bezier(0.23, 1, 0.32, 1) var(--delay, 0s),
    opacity 1.1s cubic-bezier(0.23, 1, 0.32, 1) var(--delay, 0s);
}
.js-reveal .bento__item:not(.is-in) {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
}

/* Tablet: two per row, Branded Environments full width */
@media (max-width: 900px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
  .bento__item,
  .bento__item:nth-child(n + 4) { grid-column: span 1; }
  .bento__item:last-child { grid-column: span 2; }
  .bento__tile { height: clamp(160px, 30vw, 260px); }
}

/* Phones: one per row */
@media (max-width: 560px) {
  .bento__grid { grid-template-columns: 1fr; }
  .bento__item,
  .bento__item:nth-child(n + 4),
  .bento__item:last-child { grid-column: auto; }
  .bento__tile { height: 150px; }
}

/* ==========================================================================
   Clients
   ========================================================================== */

.clients {
  padding-block: clamp(100px, 16vh, 160px);
  background: var(--black);
}

.clients__title {
  margin-bottom: clamp(24px, 3.4vh, 40px);
  font-size: clamp(34px, 3.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Gaps don't count as hovering the grid, so moving between tiles doesn't flicker */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  pointer-events: none;
}

.clients__tile {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  background: #1f1f1f;
  pointer-events: auto;
  transition: opacity 0.4s;
}

/* Logos are taken out of flow so tall ones can't stretch the tile; --s tunes
   optical size per logo. Lighten drops any dark backing shapes into the tile. */
.clients__tile img {
  position: absolute;
  inset: 0;
  width: calc(58% * var(--s, 1));
  height: calc(44% * var(--s, 1));
  margin: auto;
  object-fit: contain;
  mix-blend-mode: lighten;
}

/* Dark logos flipped to white for the dark tiles */
.clients__logo--invert {
  filter: invert(1);
}

@media (hover: hover) {
  .clients__grid:hover .clients__tile { opacity: 0.2; }
  .clients__grid .clients__tile:hover { opacity: 1; }
}

.clients__tile--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.clients__cta-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #000;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.clients__tile--cta:hover .clients__cta-arrow,
.clients__tile--cta:focus-visible .clients__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Pinned to the bottom of the screen beneath the sections before it (which are
   raised a layer), so it is uncovered as the logo section scrolls up. At least
   one screen tall so the whole section is revealed. */
main > section:not(.testimonials) {
  position: relative;
  z-index: 1;
}

.testimonials {
  position: sticky;
  bottom: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(90px, 12vh, 140px);
  background: var(--paper);
  color: var(--ink);
}

.t-slider {
  will-change: transform;
}

/* Too short to reveal the whole section: just scroll normally */
@media (max-height: 560px) {
  .testimonials {
    position: relative;
    z-index: auto;
  }
}

.t-slider {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}

/* Slides share one grid cell, so the block is as tall as the longest quote
   and nothing below jumps when quotes change */
.t-slides {
  display: grid;
}

.t-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease,
    transform 0.8s var(--ease-out),
    visibility 0s linear 0.45s;
}

.t-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.6s ease 0.2s,
    transform 0.9s var(--ease-out) 0.2s,
    visibility 0s;
}

.t-quote {
  position: relative;
  margin: 0;
  padding-bottom: clamp(40px, 7vh, 72px);
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.t-mark {
  display: block;
  width: 0.8em;
  height: 0.65em;
  fill: var(--accent);
}

/* Opening mark hangs in the margin beside the first line */
.t-mark--open {
  position: absolute;
  top: 0.2em;
  left: -1.25em;
}

.t-mark--close {
  margin: 0.3em 0 0 auto;
  transform: rotate(180deg);
}

/* Client logo with "First name, Company" under it. The logos are full
   colour, drawn for a white background (images/testimonials) */
.t-cite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  min-height: 44px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.t-cite__logo {
  display: block;
  width: auto;
  height: calc(44px * var(--s, 1));
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
}

/* Controls sit level with the company name */
.t-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On phones "First name, Company" needs the full width, so the controls
   drop below the caption instead of sitting beside it */
@media (max-width: 600px) {
  .t-controls {
    position: static;
    justify-content: flex-end;
    margin-top: 24px;
  }
}

.t-counter {
  margin-right: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #8a8a8a;
}

.t-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: background-color 0.3s;
}
.t-btn:hover {
  background: #e03a10;
}

@media (max-width: 700px) {
  .t-mark--open {
    position: static;
    margin-bottom: 0.4em;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Keeps the page, and the shadow below, layered above the footer */
main {
  position: relative;
  z-index: 1;
}

/* As the footer arrives, JS scales the section(s) directly above it (marked
   .footer-lift — sometimes a wrapper around the last two sections, see
   "Footer" in main.js) down from its bottom edge. Only that group is scaled,
   not the whole page, and it's kept on its own layer meanwhile so the
   browser resizes it without repainting. overflow: hidden is what makes the
   bottom corners actually round off when there are two sections inside,
   instead of the lower one's square corners poking out. */
html.footer-in .footer-lift {
  overflow: hidden;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 2px 100px 20px rgba(0, 0, 0, 0.2);
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Strips uncovered beside the scaled section match the footer */
html.footer-in,
html.footer-in body {
  background: #1f1f1f;
}

.footer {
  padding-block: 80px 60px;
  background: #1f1f1f;
  color: var(--white);
  font-size: 14px;
}

.footer__rows {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 3.4vw, 64px);
}

.footer__brand {
  display: flex;
  flex: 0 1 600px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin-right: auto;
}

.footer__logo {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.footer__about,
.footer__contact {
  max-width: 22em;
  line-height: 1.5;
  color: #9d9d9d;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.footer__contact-link {
  align-self: flex-start;
  transition: color 0.3s;
}
.footer__contact-link:hover {
  color: var(--white);
}

/* Newsletter sign-up, under the studio details */
.footer__subscribe {
  margin-top: 12px;
}

.footer__subscribe-title {
  margin-bottom: 12px;
  color: #9d9d9d;
}

/* Desktop: names, email and button on one row. The two inner rows only
   become real rows at 1200px and below (see the media query) */
.footer__subscribe-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 8px;
}
.footer__subscribe-row {
  display: contents;
}

.footer__subscribe-input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding-inline: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  background: none;
  color: var(--white);
  font: inherit;
  transition: border-color 0.3s;
}
.footer__subscribe-input::placeholder {
  color: #9d9d9d;
}
.footer__subscribe-input:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
.footer__subscribe-input:focus {
  outline: none;
  border-color: var(--white);
}

.footer__subscribe-button {
  flex: none;
}
.footer__subscribe-button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* Honeypot: hidden from people, still filled in by spam bots */
.footer__subscribe-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.footer__subscribe-status {
  margin-top: 10px;
  color: #9d9d9d;
}
.footer__subscribe-status:empty {
  display: none;
}
.footer__subscribe-status.is-error {
  color: var(--accent);
}

/* The field and button fade up with the footer text */
.js-reveal .footer__subscribe-fields {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s 0.4s, transform 1s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.js-reveal .footer.is-visible .footer__subscribe-fields {
  opacity: 1;
  transform: none;
}

.footer__col {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
}

.footer__heading {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}

/* Hovering a link fades the others in its list */
.footer__list {
  list-style: none;
  pointer-events: none;
}

.footer__link {
  display: inline-block;
  padding-block: 4px;
  line-height: 1.2;
  pointer-events: auto;
  transition: color 0.3s;
}

.footer__list:hover .footer__link:not(:hover) {
  color: #9d9d9d;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  margin-top: clamp(80px, 13vh, 150px);
  color: #9d9d9d;
}

.footer__copy {
  margin-right: auto;
  padding-block: 4px;
}

.footer__legal-link {
  padding-block: 4px;
  transition: color 0.3s;
}
.footer__legal-link:hover {
  color: var(--white);
}

/* Text slides up into place as the footer arrives (masks added by JS) */
.fr {
  display: inline-block;
  overflow: hidden;
  margin: -0.15em -0.5em;
  vertical-align: top;
}

.fr__item {
  display: inline-block;
  padding: 0.15em 0.5em;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: calc(0.15s + var(--i, 0) * 0.025s);
}

.footer.is-visible .fr__item {
  transform: none;
}

/* Below 1600px: studio details and sign-up across the top, with the four
   link columns in one row beneath */
@media (max-width: 1600px) {
  .footer__rows {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 56px 32px;
  }
  .footer__brand {
    grid-column: 1 / -1;
    max-width: 600px;
    margin-right: 0;
  }
}

/* Smaller screens: three columns, then two, and the sign-up on two rows */
@media (max-width: 900px) {
  .footer__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }
}
@media (max-width: 1200px) {
  .footer__subscribe-fields {
    display: flex;
    flex-direction: column;
    max-width: 560px;
  }
  .footer__subscribe-row {
    display: flex;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .footer__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 20px;
  }
}

@media (max-width: 900px) {
  .footer__copy {
    width: 100%;
  }
}

/* ==========================================================================
   Buttons and current-page nav link
   ========================================================================== */

/* Pill button: a white fill grows in on hover */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding-inline: 22px;
  overflow: hidden;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.3s cubic-bezier(0.25, 0.74, 0.22, 0.99);
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--white);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s;
}
.button > * {
  position: relative;
}
.button:hover,
.button:focus-visible {
  color: var(--black);
}
.button:hover::before,
.button:focus-visible::before {
  opacity: 1;
  transform: none;
}
.button:active::before {
  transform: scale(0.9);
}

.work__more {
  display: flex;
  margin-top: clamp(32px, 5vh, 60px);
}

.nav__link {
  position: relative;
}
.nav__link[aria-current="page"]::after,
.nav__link.is-current::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  height: 1px;
  background: currentColor;
}

/* Contact: a compact orange pill that stands out from the other links. The
   negative margins keep the nav row the same height as before. Same hover as
   .button--accent: a white fill grows in behind off-black text. */
.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-block: -10px;
  padding-inline: 16px;
  overflow: hidden;
  border-radius: 50px;
  background: var(--accent);
  color: #fff;
  transition: color 0.3s cubic-bezier(0.25, 0.74, 0.22, 0.99);
}
.nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--white);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s;
}
.nav__cta .roll {
  position: relative;
}
.nav__cta:hover,
.nav__cta:focus-visible {
  color: var(--ink);
}
.nav__cta:hover::before,
.nav__cta:focus-visible::before {
  opacity: 1;
  transform: none;
}
.nav__cta[aria-current="page"]::after {
  content: none;
}

/* On .nav-blend pages the whole nav is drawn with mix-blend-mode: difference,
   which would turn the pill cyan over white. main.js ("Contact pill on blended
   navs") hides the original and lays an unblended copy over its slot. */
.nav__links li.is-cta-slot {
  visibility: hidden;
}
.nav-cta-layer {
  position: fixed;
  z-index: 61;
}
.menu-open .nav-cta-layer {
  display: none;
}

/* ==========================================================================
   Work index page
   ========================================================================== */

.work-index {
  min-height: 100vh;
  padding-block: clamp(140px, 20vh, 180px) clamp(100px, 16vh, 150px);
  background: var(--black);
}

.work-index__title {
  font-size: clamp(72px, 10.4vw, 200px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.92;
}

/* Title rises into place on load. Same horizontal-buffer fix as .wm (see
   its comment) — .work-index__title also uses letter-spacing: -0.02em, so
   without this the last letter could clip against overflow: hidden. */
.line {
  display: block;
  overflow: hidden;
  padding: 0 0.08em 0.06em;
  margin-inline: -0.08em;
}
.js-reveal .line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s;
}
.js-reveal.is-ready .line > span {
  transform: none;
}

/* Sector filters on the left, the sort pair on the right; the sort drops
   below the filters once they wrap */
.work-index__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(40px, 7vh, 80px);
}

/* Sector filters: pills whose white fill grows in on hover and when selected */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Sort: the same pills as the filters, after a small muted label */
.sort {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sort__label {
  margin-right: 8px;
  font-size: 14px;
  color: var(--muted);
}

.filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 7px 16px 8px;
  overflow: hidden;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  line-height: 1;
  transition: color 0.3s cubic-bezier(0.25, 0.74, 0.22, 0.99);
}

.filter__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--white);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s, background-color 0.3s;
}

.filter__label {
  position: relative;
}

@media (hover: hover) {
  .filter:hover { color: var(--black); }
  .filter:hover .filter__bg { opacity: 1; transform: none; }
}

/* Selected filter: orange fill with white text (after hover, so it wins) */
.filter.is-active {
  color: #fff;
}
.filter.is-active .filter__bg {
  background: var(--accent);
  opacity: 1;
  transform: none;
}

.filter:active .filter__bg {
  transform: scale(0.8);
}

/* Filters rise in one after another on load (colour change stays instant) */
.js-reveal .sort__label {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s var(--ease-out) calc(0.35s + var(--i, 0) * 0.05s),
    transform 0.8s var(--ease-out) calc(0.35s + var(--i, 0) * 0.05s);
}
.js-reveal.is-ready .sort__label {
  opacity: 1;
  transform: none;
}
.js-reveal .filter {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s var(--ease-out) calc(0.35s + var(--i, 0) * 0.05s),
    transform 0.8s var(--ease-out) calc(0.35s + var(--i, 0) * 0.05s),
    color 0.3s cubic-bezier(0.25, 0.74, 0.22, 0.99);
}
.js-reveal.is-ready .filter {
  opacity: 1;
  transform: none;
}

.work-index__line {
  height: 1px;
  margin-block: clamp(56px, 10vh, 150px);
  background: rgba(255, 255, 255, 0.2);
  transform-origin: left;
}
.js-reveal .work-index__line {
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}
.js-reveal.is-ready .work-index__line {
  transform: none;
}

/* Changing filter: cards shrink and fade out one after another, then the
   matching cards rise back in (see main.js) */
[data-filter-grid].is-filtering .work__item:not([hidden]) {
  opacity: 0;
  transform: scale(0.95);
  transition:
    transform 0.3s cubic-bezier(0.6, 0.1, 0.88, 0.44) var(--out-delay, 0s),
    opacity 0.3s cubic-bezier(0.6, 0.1, 0.88, 0.44) var(--out-delay, 0s);
}

.work-index__empty {
  padding-block: 40px;
  color: var(--muted);
}

/* ==========================================================================
   404 page
   One orange screen: a giant 404 in a deeper orange fills the background and
   a single line of copy scrolls across the middle, pausing on hover. With
   reduced motion the line stands still, centred, without its copies.
   ========================================================================== */

/* The orange Contact pill would vanish into the page, so it goes white here,
   with the hover fill turning it black */
.page-404 .nav__cta {
  background: var(--white);
  color: var(--ink);
}
.page-404 .nav__cta::before {
  background: var(--black);
}
.page-404 .nav__cta:hover,
.page-404 .nav__cta:focus-visible {
  color: #fff;
}

.nf {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--accent);
}

.nf__code {
  display: block;
  font-size: min(max(52vw, 38vh), 58vw);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.8;
  color: color-mix(in srgb, var(--accent), #000 24%);
  user-select: none;
}

.nf__marquee {
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
}

.nf__track {
  display: inline-flex;
  animation: nf-scroll 28s linear infinite;
}
.nf__marquee:hover .nf__track,
.nf__marquee:focus-within .nf__track {
  animation-play-state: paused;
}

@keyframes nf-scroll {
  to { transform: translateX(-50%); }
}

.nf__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding-right: 2.4em;
  font-size: clamp(18px, 1.7vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}

.nf__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition: text-decoration-color 0.3s;
}
.nf__link:hover,
.nf__link:focus-visible {
  text-decoration-color: #fff;
}

/* Arrow in a thin circle */
.nf__icon {
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.nf__icon svg {
  width: 0.5em;
  height: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
  .nf__track {
    display: flex;
    justify-content: center;
    width: 100%;
    animation: none;
  }
  .nf__item[aria-hidden] {
    display: none;
  }
  .nf__item {
    padding-right: 0;
  }
}

/* ==========================================================================
   Case study
   ========================================================================== */

/* Hero: full-bleed image, client name and headline at the foot of the first screen */
.case-hero {
  position: relative;
  height: 140vh;
  height: 140svh;
  min-height: 60vw;
  overflow: hidden;
  background: var(--black);
}

.case-hero__media {
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
}

.case-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

/* Darkens the top for the nav, the lower left behind the headline (so it reads
   over bright photography), then fades to black into the next section */
.case-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.55) 70%, #000 100%);
}

.case-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: clamp(48px, 9vh, 80px);
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}

/* Back to the work grid, sitting above the client name. Two arrows share a
   12px window: on hover the first leaves to the left and the second follows it
   in from the right, the same out-and-in move the nav links make with .roll */
.case-back {
  align-self: flex-start;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s var(--ease-out);
}

.wm > .case-back__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.case-back__icon {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  overflow: hidden;
}
.case-back__icon svg {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.45s var(--ease-out);
}
.case-back__icon svg + svg {
  transform: translateX(150%);
}

.case-back:hover,
.case-back:focus-visible {
  color: var(--white);
}
.case-back:hover .case-back__icon svg,
.case-back:focus-visible .case-back__icon svg {
  transform: translateX(-150%);
}
.case-back:hover .case-back__icon svg + svg,
.case-back:focus-visible .case-back__icon svg + svg {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .case-back__icon svg {
    transition: none;
  }
}

.case-hero__client {
  margin-bottom: 16px;
  font-size: clamp(22px, 2.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

.case-hero__title {
  max-width: 70vw;
  font-size: clamp(44px, 7vw, 130px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  /* Evens the lines out instead of filling each one before breaking. The font
     size stops growing at 130px while max-width keeps tracking the viewport,
     so on a wide screen the last line was being left with one or two words
     ("A brand with real substance and" / "soul." at 2400px and up). Balanced,
     that title holds 4 + 3 at every width until it fits on one line. */
  text-wrap: balance;
}

/* Word masks: each word rises into place on load. The horizontal padding
   (cancelled by the matching negative margin, so it doesn't shift layout —
   same trick as .fr in the footer) is a fix, not decoration: every title
   that uses .wm also sets letter-spacing: -0.02em, and negative
   letter-spacing can make the last letter of a word paint slightly past its
   own layout box. Without this buffer, overflow: hidden clips that letter
   ("us" and the "e" in "The" were both reported clipped before this).
   The bottom buffer is deeper for descenders: at these tight line-heights
   the tail of a "g" or "y" hangs about 0.15em below the line box, and a
   0.08em buffer cut it off ("Digital" was reported clipped). */
.wm {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.08em 0.22em;
  margin: 0 -0.08em -0.22em;
  vertical-align: top;
}
.wm > span {
  display: inline-block;
}
.js-reveal .wm > span {
  /* Past the deeper bottom buffer too, so words start fully hidden */
  transform: translateY(calc(110% + 0.22em));
  transition: transform 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) calc(0.35s + var(--i, 0) * 0.04s);
}
.js-reveal.is-ready .wm > span {
  transform: none;
}

/* Facts: lead paragraph beside a darker panel of project details */
.case-facts {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--black);
}

.case-facts__lead-col {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 150px 5vw 150px 60px;
}

.case-facts__lead {
  max-width: 80%;
  font-size: clamp(22px, 2.3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.case-facts__panel {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 450px;
  min-width: 30%;
  padding: 150px 5vw;
  background: #131313;
}

.case-facts__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
}

.case-facts__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.case-facts__list {
  list-style: none;
  font-size: 14px;
  line-height: 22px;
  color: #9d9d9d;
}

/* Story: a centred reading column between full-bleed imagery */
.case-story {
  background: var(--black);
}

.case-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
  width: min(70vw, 900px);
  margin: clamp(80px, 10vw, 160px) auto;
}

.case-copy h2 {
  margin-bottom: clamp(8px, 1.6vw, 24px);
  font-size: clamp(34px, 3.8vw, 55px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.case-copy p {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Deliverables: ruled list, lead phrase in white */
.case-list {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.case-list li {
  padding-block: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.4;
  color: #9d9d9d;
}

.case-list strong {
  font-weight: 500;
  color: var(--white);
}

.case-copy .case-copy__note {
  font-size: 16px;
  font-weight: 400;
  color: #9d9d9d;
}

.case-copy__note a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.case-figure {
  margin: 0;
  background: rgba(255, 255, 255, 0.12);
}

.case-figure img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.case-figure--full img {
  height: 105vh;
  min-height: 56vw;
}

/* Smaller source images sit side by side so they stay sharp */
.case-figure--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.case-figure--pair img {
  aspect-ratio: 5 / 4;
  height: auto;
}
.case-figure--video {
  aspect-ratio: 16 / 9;
}
/* A full-bleed band in the film's own background grey, with the film itself
   set to the width of the copy above it so it reads as one strip */
.case-figure--strip {
  display: flex;
  justify-content: center;
  aspect-ratio: auto;
  background: #282828;
}
.case-figure--video.case-figure--strip iframe {
  flex: none;
  width: min(70vw, 900px);
  height: auto;
  aspect-ratio: 426 / 190;
}
/* Background videos have no controls: let wheel and touch scrolling pass
   through to the page (an iframe otherwise swallows them and the scroll stalls) */
.case-figure--video iframe,
.case-figure__cover iframe {
  pointer-events: none;
}
.case-figure--video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Two videos side by side, stacked on small screens */
.case-figure--video-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.case-figure--video-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.case-figure__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
/* Fills the square and crops the 16:9 video, like object-fit: cover */
.case-figure__cover iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 177.78%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}
/* In a 5:4 image pair the video cell matches its neighbour */
.case-figure--pair .case-figure__cover {
  aspect-ratio: 5 / 4;
}
.case-figure--square img {
  aspect-ratio: 1 / 1;
}

.case-quote {
  width: min(80vw, 1000px);
  margin: clamp(100px, 12vw, 200px) auto;
}

.case-quote__mark {
  display: block;
  width: 36px;
  height: 30px;
  margin-bottom: 28px;
  fill: var(--accent);
}

.case-quote blockquote {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin: 0;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.case-quote figcaption {
  margin-top: 36px;
  font-size: 14px;
  color: #9d9d9d;
}

/* White band around the client quote */
.case-quote-band {
  padding-block: clamp(100px, 14vw, 200px);
  background: var(--paper);
  color: var(--ink);
}

.case-quote-band .case-quote {
  margin: 0 auto;
}

.case-quote-band figcaption {
  color: #6b6b6b;
}

/* White band of launch stats; the numbers count up in main.js ("Stat count-up") */
.case-stats {
  padding-block: clamp(100px, 12vw, 180px);
  background: var(--paper);
  color: var(--ink);
}

.case-stats__title {
  margin-bottom: clamp(40px, 5vw, 80px);
  font-size: clamp(34px, 3.8vw, 55px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.case-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 48px) clamp(20px, 2vw, 32px);
  list-style: none;
}

/* Each stat sits under a rule that draws across as it rises in */
.case-stat {
  position: relative;
  padding-top: clamp(24px, 2.4vw, 36px);
}
.case-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) var(--delay, 0s);
}
.js-reveal .case-stat:not(.is-in)::before {
  transform: scaleX(0);
}

.case-stat__num {
  display: flex;
  align-items: baseline;
  font-size: clamp(56px, 6.4vw, 120px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.case-stat__suffix {
  color: var(--accent);
}

.case-stat__unit {
  margin-left: 0.15em;
  font-size: 0.4em;
  letter-spacing: -0.02em;
}

.case-stat__label {
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  color: #6b6b6b;
}

@media (max-width: 1000px) {
  .case-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .case-stat__num { font-size: 11vw; }
}

/* Closing call to action, centred, over a slowly drifting orange glow */
/* min-height: 100vh matters beyond looks: on the service pages this section
   is the sole .footer-lift (see "Footer" in main.js — its own previous
   sibling, .svc-body, is far too tall to safely group with it). The shrink
   is anchored at the section's own bottom edge, so if the section is
   *shorter* than one viewport, there's a scroll range where its own top
   edge is still on screen while it's already shrinking — uncovering a
   footer-grey gap above it. At under 24vh of padding plus typically-short
   content, this section measured ~760px on a 900px viewport with no
   min-height, comfortably short enough to hit that window. Flex-centering
   keeps the content centred even on the (usual) case where min-height ends
   up taller than padding + content would otherwise be. */
.case-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(150px, 24vh, 260px);
  background: var(--black);
  text-align: center;
}

.case-cta > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Soft gradient circles (no blur filter, only transforms animate, so it stays
   cheap to draw); the top and bottom fade out into the neighbouring sections */
.case-cta__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* The whole glow sways back and forth around its core, so its shape keeps
   visibly shifting while staying up and to the right of the text */
.case-cta__sway {
  position: absolute;
  inset: 0;
  transform-origin: 60% 42%;
  will-change: transform;
  animation: glow-sway 30s ease-in-out infinite alternate;
}

.case-cta__glow span {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: glow-drift 18s ease-in-out infinite alternate;
}

/* Main orange body, up and right of centre like the reference */
.case-cta__glow span:nth-child(1) {
  top: 40%;
  left: 64%;
  width: min(78vw, 1150px);
  background: radial-gradient(closest-side, rgba(255, 74, 28, 0.8), rgba(255, 74, 28, 0.42) 42%, rgba(255, 74, 28, 0) 100%);
}

/* Warm amber highlight */
.case-cta__glow span:nth-child(2) {
  top: 26%;
  left: 72%;
  width: min(44vw, 640px);
  background: radial-gradient(closest-side, rgba(244, 150, 72, 0.6), rgba(244, 150, 72, 0) 100%);
  animation-name: glow-drift-alt;
  animation-duration: 22s;
}

/* Deep ember undertone */
.case-cta__glow span:nth-child(3) {
  top: 62%;
  left: 50%;
  width: min(60vw, 900px);
  background: radial-gradient(closest-side, rgba(140, 28, 14, 0.55), rgba(140, 28, 14, 0) 100%);
  animation-duration: 26s;
  animation-direction: alternate-reverse;
}

@keyframes glow-sway {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(22deg); }
}

@keyframes glow-drift {
  0%   { transform: translate(-50%, -50%) scale(1); }
  33%  { transform: translate(-30%, -64%) scale(1.15); }
  66%  { transform: translate(-66%, -38%) scale(0.9); }
  100% { transform: translate(-44%, -54%) scale(1.05); }
}

@keyframes glow-drift-alt {
  0%   { transform: translate(-50%, -50%) scale(1); }
  33%  { transform: translate(-74%, -32%) scale(1.2); }
  66%  { transform: translate(-28%, -68%) scale(0.85); }
  100% { transform: translate(-58%, -44%) scale(1.1); }
}

.case-cta__title {
  font-size: clamp(40px, 5.2vw, 90px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.case-cta__lede {
  max-width: 34em;
  margin: clamp(20px, 3vh, 32px) auto 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--white);
}

.case-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(32px, 5vh, 48px);
}

/* Orange pill: white text; a white fill grows in on hover with off-black text */
.button--accent {
  background: var(--accent);
  color: #fff;
}

/* Outline pill: white stroke and text; fills to white on hover with black text */
.button--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--white);
  color: var(--white);
}

.button--accent::before,
.button--outline::before {
  background: var(--white);
}
.button--accent:hover,
.button--accent:focus-visible {
  color: var(--ink);
}
.button--outline:hover,
.button--outline:focus-visible {
  color: var(--black);
}

/* Next up: one big link to the next project; shrinks slightly on hover */
.case-next {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  padding-inline: var(--gutter);
  text-align: center;
  background: var(--black);
}

.case-next__pre {
  font-size: 20px;
  font-weight: 500;
  color: #9d9d9d;
}

.case-next__title {
  padding-block: 20px;
  font-size: clamp(56px, 10vw, 190px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) {
  .case-next:hover .case-next__title {
    transform: scale(0.95);
  }
}

/* End of the case study: Next up, then a centred button to all work */
.case-end {
  padding-bottom: clamp(80px, 12vh, 140px);
  background: var(--black);
}

.case-end__more {
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .case-facts {
    display: block;
  }
  .case-facts__lead-col {
    padding: 110px var(--gutter);
  }
  .case-facts__lead {
    max-width: 100%;
    font-size: clamp(22px, 5vw, 32px);
    line-height: 1.3;
  }
  .case-facts__panel {
    width: 100%;
    padding: 110px var(--gutter);
  }
  .case-hero__title {
    max-width: 100%;
    font-size: clamp(40px, 10vw, 80px);
  }
  .case-copy {
    width: auto;
    margin-inline: var(--gutter);
  }
  .case-figure--video.case-figure--strip iframe {
    width: calc(100% - 2 * var(--gutter));
  }
  .case-figure--full img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .case-figure--pair,
  .case-figure--video-pair {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Service pages
   ========================================================================== */

/* Hero: full-bleed image fading to black, with the service name set large at
   the foot of the first screen */
.svc-hero {
  position: relative;
  height: 160vh;
  height: 160svh;
  overflow: hidden;
  background: var(--black);
}

.svc-hero__media {
  position: absolute;
  inset: 0 0 auto;
  height: 120vh;
  height: 120svh;
}

.svc-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.svc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.3) 55%, #000 100%);
}

.svc-hero__heading {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  height: 100svh;
  padding-bottom: clamp(60px, 13vh, 120px);
}

/* The service name, large and static; its words rise into place on load */
.svc-hero__title {
  font-size: clamp(64px, 11vw, 200px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
/* Long single words ("Environments") would overrun a phone at the 64px floor,
   so cap at 15vw; desktop sizes are unchanged since 11vw wins there */
.svc-hero__title--long {
  font-size: min(clamp(64px, 11vw, 200px), 15vw);
}

/* Content slides up over the lower part of the hero */
.svc-body {
  margin-top: -60vh;
  margin-top: -60svh;
  padding-bottom: clamp(100px, 14vh, 150px);
}

.svc-body__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vw, 150px);
}

/* Thin dividers that draw across as they scroll into view */
.svc-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.js-reveal .svc-line:not(.is-in) {
  transform: scaleX(0);
}

/* Generic rise-in for content blocks (the observer in main.js adds .is-in) */
.reveal {
  transition:
    opacity 1s var(--ease-out) var(--delay, 0s),
    transform 1s var(--ease-out) var(--delay, 0s);
}
.js-reveal .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(40px);
}

/* Label in the left five of twelve columns, content in the right seven */
.svc-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.svc-row__label {
  grid-column: 1 / span 5;
  font-size: 16px;
  font-weight: 400;
}

.svc-row__body {
  grid-column: 6 / -1;
}

.svc-lead__tagline {
  margin-bottom: 0.6em;
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.svc-lead {
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.svc-offer {
  list-style: none;
}

.svc-offer li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.svc-offer li:first-child {
  padding-top: 0;
}

.svc-offer__num {
  flex: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: #9d9d9d;
}

/* "Right for" line under the Why us description */
.svc-lead__fit {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
}

.svc-lead__fit span {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #9d9d9d;
}

.svc-ways__title {
  margin-bottom: clamp(28px, 3vw, 44px);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.svc-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 20px;
}

.svc-way {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.svc-way h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.svc-way p {
  font-size: 15px;
  line-height: 1.5;
  color: #9d9d9d;
}

.svc-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 30px;
}

.svc-block__title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.svc-block__title--spaced {
  margin-bottom: 30px;
}

/* Other services and Other sectors: short grey cards with text left and the
   image right */
.svc-others {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.svc-other {
  position: relative;
  display: flex;
  min-height: max(10vw, 130px);
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s;
}
.svc-other:hover {
  background: rgba(255, 255, 255, 0.16);
}

.svc-other__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 55%;
  padding: 24px 20px 24px 28px;
}

.svc-other__title {
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.svc-other__tagline {
  font-size: 15px;
  line-height: 1.4;
  color: #9d9d9d;
}

.svc-other__more {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin-top: 8px;
  padding-inline: 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;
}
.svc-other:hover .svc-other__more {
  background: var(--accent);
  color: #fff;
}

.svc-other__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
}

.svc-other__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.svc-other:hover .svc-other__media img {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .svc-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .svc-row__label,
  .svc-row__body {
    grid-column: 1 / -1;
  }
  .svc-ways,
  .svc-others {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   About hero — the homepage showreel
   Full screen, black until the Vimeo film fades in (main.js, "About page
   hero"), with "About us" bottom left in white in the service pages'
   .svc-hero__title style.
   ========================================================================== */

.about-hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  background: var(--black);
  color: var(--white);
}

.about-hero__media {
  position: absolute;
  inset: 0;
}

.about-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}
.about-hero.video-playing .about-hero__video {
  opacity: 1;
}

/* Darker at the top for the nav and at the bottom for the title, as on the
   service pages, fading into the black intro below */
.about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.3) 60%, #000 100%);
}

.about-hero__heading {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: clamp(60px, 13vh, 120px);
}

/* ==========================================================================
   About intro
   A plain full-dark section: a word-by-word statement (the same
   [data-reveal] mechanic as the homepage's Intro statement, generalised to
   run on more than one element per page).
   ========================================================================== */

.about-intro {
  position: relative;
  padding-block: clamp(120px, 20vh, 260px) clamp(120px, 18vh, 220px);
  background: var(--black);
  color: var(--white);
}

.about-intro__body {
  max-width: 1500px;
}

.about-intro__lede {
  font-size: clamp(32px, 4.4vw, 72px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.about-intro__text {
  max-width: 1100px;
  margin-top: clamp(28px, 3.4vw, 44px);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.about-intro__lede .w,
.about-intro__text .w {
  transition: opacity 0.35s linear;
}

/* ==========================================================================
   Pulse Report page
   A full-screen looping Vimeo hero (same cover sizing and fade-in as the
   homepage showreel), then the About page's intro statement and
   label-left rows, the homepage's client logos and the standard CTA.
   ========================================================================== */

.pr-hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  background: var(--black);
}

.pr-hero__media {
  position: absolute;
  inset: 0;
}

.pr-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}
.pr-hero.video-playing .pr-hero__video {
  opacity: 1;
}

/* Keeps the headline legible over footage */
.pr-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 70%), rgba(0, 0, 0, 0.1);
}

.pr-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
  height: 100%;
  padding-inline: var(--gutter);
  text-align: center;
}

.pr-hero__eyebrow {
  font-size: 16px;
  color: var(--muted);
}

.pr-hero__title {
  max-width: 13em;
  font-size: clamp(48px, 7.4vw, 118px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Kept tight so the intro and both rows read in about one screen */
/* (doubled classes so these beat the About rules further down the file) */
.about-intro.pr-intro {
  padding-block: clamp(64px, 9vh, 100px) 0;
}
.about-why.pr-body {
  padding-block: clamp(72px, 10vh, 120px) clamp(80px, 12vh, 140px);
}
.about-why.pr-body .wrap {
  gap: clamp(32px, 3.5vw, 48px);
}
.pr-body .svc-offer li {
  padding-block: 20px;
}
.pr-body .svc-offer li:first-child {
  padding-top: 0;
}

/* The divider under each row does the job of the list's last rule */
.pr-body .why-item:last-child,
.pr-body .svc-offer li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Request form in the closing CTA: name, email, website and Submit on one
   row on desktop (pill fields like the footer sign-up), stacked on phones */
.pr-form {
  max-width: 960px;
  margin: clamp(32px, 5vh, 48px) auto 0;
}

.pr-form__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
}

.pr-form__input {
  min-width: 0;
  height: 50px;
  padding-inline: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.3s;
}
.pr-form__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.pr-form__input:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.pr-form__input:focus {
  outline: none;
  border-color: var(--white);
}

.pr-form__submit {
  justify-content: center;
}
.pr-form__submit[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.pr-form__status {
  color: var(--white);
}

@media (max-width: 800px) {
  .pr-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* No single word left on a line (with &nbsp; before each block's last word
   in the HTML for browsers without text-wrap: pretty) */
.pr-hero__title,
.pr-intro p,
.pr-body p,
.pr-body li,
.pr-form,
#request .case-cta__lede {
  text-wrap: pretty;
}

/* Rows: one divider between each, and space between paragraphs */
.pr-copy .svc-lead + .svc-lead {
  margin-top: 1em;
}
.pr-row__intro {
  margin-bottom: clamp(28px, 4vh, 44px);
}
.pr-row__outro {
  margin-top: clamp(28px, 4vh, 44px);
}

/* ==========================================================================
   Partnerships and Rewards scheme pages
   Built from shared parts: the Sectors hero, the About/service-page
   label-left rows and the orange-glow CTA. Only these small additions.
   ========================================================================== */

.page-hero__actions .case-cta__actions {
  margin-top: clamp(32px, 5vh, 48px);
}

/* A short line above a row's list */
.page-list__intro {
  margin-bottom: clamp(28px, 4vh, 44px);
}

/* The row divider follows each list, so drop the list's own last rule */
.page-list .why-item:last-child,
.page-list.svc-offer li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Tagline sits above a list with the same gap as above a paragraph */
.about-why .svc-lead__tagline + .page-list {
  margin-top: clamp(28px, 4vh, 44px);
}

/* Partnerships hero: b4b × Studio Global × Impress with Print, under the buttons */
.partner-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  /* Sits under the hero subtitle (moved there 2026-11-11) */
  margin-top: clamp(24px, 3.5vh, 36px);
  list-style: none;
}
.partner-lockup img {
  display: block;
  width: auto;
}
.partner-lockup__b4b { height: clamp(32px, 3vw, 44px); }
.partner-lockup__sg { height: clamp(48px, 4.4vw, 64px); }
.partner-lockup__impress { height: clamp(22px, 2vw, 30px); }
.partner-lockup__x {
  display: block;
  color: rgba(255, 255, 255, 0.5);
}
.partner-lockup__x svg { display: block; }
@media (max-width: 420px) {
  /* Tighter gaps keep the three logos on one line on small phones */
  .partner-lockup { gap: 10px; }
}

/* Partner rows: the partner's logo in place of the text label */
.svc-row__label--logo img {
  display: block;
  width: auto;
  max-width: 100%;
}
.partner-logo--b4b { height: clamp(40px, 3.6vw, 53px); }
.partner-logo--impress { height: clamp(24px, 2.2vw, 34px); }

/* ==========================================================================
   Legal pages (privacy-policy.html, terms.html, cookie-policy.html)
   Plain left-aligned text on black: no hero image. Lists, links and
   headings follow the Insights article styles, in the dark palette.
   ========================================================================== */

.legal {
  padding-block: clamp(140px, 22vh, 220px) clamp(100px, 14vh, 160px);
  background: var(--black);
  color: var(--white);
}

.legal__eyebrow {
  font-size: 16px;
  color: var(--muted);
}

.legal__title {
  margin-top: 12px;
  font-size: clamp(48px, 6.4vw, 104px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.legal__meta {
  margin-top: clamp(20px, 3vh, 28px);
  font-size: 15px;
  color: var(--muted);
}

.legal__body {
  max-width: 780px;
  margin-top: clamp(48px, 8vh, 80px);
  padding-top: clamp(32px, 5vh, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: anywhere;
}

.legal__body > * + * {
  margin-top: 1em;
}

.legal__body h2 {
  margin-top: clamp(48px, 7vh, 72px);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--white);
}
.legal__body h3 {
  margin-top: 2em;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--white);
}
.legal__body > :first-child {
  margin-top: 0;
}

.legal__body strong {
  font-weight: 500;
  color: var(--white);
}

.legal__body a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.legal__body a:hover {
  color: var(--accent);
}

/* Orange dot bullets, as in the Insights articles */
.legal__body ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.legal__body li {
  position: relative;
  padding-left: 24px;
}
.legal__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Contents: numbered section links, no dots */
.legal__body .legal__toc {
  gap: 4px;
}
.legal__body .legal__toc li {
  padding-left: 0;
}
.legal__body .legal__toc li::before {
  content: none;
}
.legal__body .legal__toc a {
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

/* Section jumps land clear of the fixed nav */
.legal__body h2[id] {
  scroll-margin-top: 110px;
}

/* The cookie list: label and value rows */
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.legal__table th,
.legal__table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
  vertical-align: top;
}
.legal__table th {
  width: 9em;
  padding-right: 20px;
  font-weight: 500;
  color: var(--white);
}

/* ==========================================================================
   Cookie consent panel
   Built and inserted by main.js ("Cookie consent") on every page. Sits
   under the nav (60) and phone menu (55), so an open menu still covers it.
   ========================================================================== */

.cookie-bar {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 50;
  width: min(400px, calc(100% - 2 * var(--gutter)));
  padding: 24px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #171719;
  color: var(--white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.cookie-bar.is-shown {
  opacity: 1;
  transform: none;
}

.cookie-bar__title {
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.cookie-bar__text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.cookie-bar__text a {
  color: var(--white);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.cookie-bar__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.cookie-bar__actions .button {
  flex: 1;
  justify-content: center;
  height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-bar {
    transition: none;
  }
}
@media print {
  .cookie-bar {
    display: none;
  }
}

/* "Change cookie settings" on the cookie policy page */
.legal__settings {
  margin-top: clamp(24px, 4vh, 32px);
}

/* ==========================================================================
   Team — horizontal drifting carousel
   A row of photo cards drifts left on its own and is pushed along by scroll
   (main.js "Team marquee"), the same drift-plus-push technique as the hero
   marquee, looped by cloning the card set instead of a single item.
   ========================================================================== */

.team {
  position: relative;
  overflow: hidden;
  padding-block: clamp(100px, 16vh, 180px) clamp(120px, 18vh, 200px);
  background: var(--black);
}

/* Overlaid on top of the carousel, not stacked above it — the carousel
   fills the section's own vertical space, and the title + button float
   centred over the middle of it. Title is plain text, not word-masked: an
   earlier version used .wm (see .about-hero__title's history for why),
   which clipped the "e". */
.team__head {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 32px);
  text-align: center;
  pointer-events: none;
}
.team__head .button {
  pointer-events: auto;
}

.team__title {
  font-size: clamp(48px, 7.4vw, 118px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}

.team__viewport {
  overflow: hidden;
}

.team__track {
  display: flex;
  gap: clamp(16px, 1.6vw, 28px);
  width: max-content;
  list-style: none;
  will-change: transform;
}

.team-card {
  position: relative;
  flex: none;
  width: clamp(440px, 38vw, 640px);
  overflow: hidden;
  border-radius: 4px;
  background: #111;
}

.team-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
}
.team-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.team-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

.team-card__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 20px;
}

.team-card__name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.team-card__role {
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 700px) {
  .team-card { width: clamp(320px, 120vw, 460px); }
}

/* ==========================================================================
   Why work with us
   Same label-left/list-right row as the service pages' "What we offer"
   (.svc-row, .svc-row__label, .svc-line are shared/reused, not redefined).
   ========================================================================== */

.about-why {
  padding-block: clamp(100px, 14vh, 160px);
  background: var(--black);
  color: var(--white);
}

/* Breathing room around the row, matching the service pages' .svc-body__inner
   gap — .svc-line has no margin of its own, so without this it sits flush
   against the row above/below it */
.about-why .wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vw, 150px);
}

.why-list {
  list-style: none;
}

.why-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.why-item:first-child {
  padding-top: 0;
}

.why-item__body {
  max-width: 640px;
}

.why-item__title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.why-item__desc {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.why-item__num {
  flex: none;
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #9d9d9d;
}

/* ==========================================================================
   Sectors page
   Hero: a centred title with an intro paragraph (the About hero's type,
   without the photo). Grid: five full-height columns, each a sector on its
   own colour with a faded, fading-out photo at the top (the sectorsgrid.jpg
   inspiration). Clicking one grows it across the screen, squeezing the
   others to nothing, and its details fade in over a dark, faded version of
   the photo (main.js, "Sectors"). FAQs: the service pages' "What we offer"
   list, with an arrow in place of the number, as a one-open-at-a-time
   accordion.
   ========================================================================== */

.sectors-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(120px, 18vh, 180px) var(--gutter) clamp(80px, 12vh, 140px);
  background: var(--black);
  text-align: center;
}

/* Full-screen photo behind the hero, shaded so the white text reads over
   the bright glow in its middle */
.sectors-hero__media {
  position: absolute;
  inset: 0;
}
.sectors-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sectors-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 75%);
}

.sectors-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}

.sectors-hero__title {
  font-size: clamp(48px, 7.4vw, 118px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.sectors-hero__sub {
  margin-top: clamp(20px, 3vh, 32px);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.sectors-hero__text {
  max-width: 620px;
  margin-top: clamp(28px, 4vh, 44px);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Grid ---------- */

.sectors {
  --sector-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --sector-pad: clamp(20px, 2vw, 32px);
  position: relative;
  display: flex;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--black);
}

.sector {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background-color: var(--tone);
  color: var(--white);
  transition:
    flex-grow 1s var(--sector-ease),
    background-color 0.5s ease,
    color 0.5s ease;
}
.sector--light {
  color: var(--ink);
}

/* Hover (or keyboard focus) while nothing is open: the column turns the
   accent orange and widens a little */
@media (hover: hover) {
  .sectors:not(.is-open) .sector:hover {
    flex-grow: 1.35;
  }
}
.sectors:not(.is-open) .sector:hover,
.sectors:not(.is-open) .sector:has(.sector__face:focus-visible) {
  background-color: var(--accent);
  color: var(--white);
}

/* The photo, in greyscale and tinted by the column colour, fading out down
   the column. Opened, the fade is pushed off the bottom so the whole photo
   shows, dimmed, behind the details. */
.sector__bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 100%);
  mask-image: linear-gradient(#000 35%, transparent 100%);
  -webkit-mask-size: 100% 62%;
  mask-size: 100% 62%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition:
    opacity 0.8s ease,
    -webkit-mask-size 1s var(--sector-ease),
    mask-size 1s var(--sector-ease);
}
.sector__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out);
}
.sector:hover .sector__bg img {
  transform: scale(1);
}

/* Darkens the left side behind the opened details */
.sector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.sector.is-open {
  flex-grow: 1;
  background-color: #0a0a0a;
  color: var(--white);
}
.sectors.is-open .sector:not(.is-open) {
  flex-grow: 0;
}
.sector.is-open .sector__bg {
  opacity: 0.35;
  -webkit-mask-size: 100% 400%;
  mask-size: 100% 400%;
}
.sector.is-open .sector__bg img {
  transform: scale(1);
}
.sector.is-open::after {
  opacity: 1;
}

/* Closed face: the whole column is the button. Its contents are a fixed
   width, so they get clipped as the column is squeezed instead of rewrapping. */
.sector__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(96px, 14vh, 140px) var(--sector-pad) var(--sector-pad);
  text-align: left;
  transition: opacity 0.4s ease 0.35s;
}
.sectors.is-open .sector__face {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

.sector__name,
.sector__foot {
  width: max(160px, calc(20vw - 2 * var(--sector-pad)));
}

.sector__name {
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.sector__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.sector__num {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.sector__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Circled plus, turning a quarter on hover */
.sector__plus {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform 0.5s var(--ease-out);
}
.sector__plus::before,
.sector__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.sector__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.sector__face:hover .sector__plus,
.sector__face:focus-visible .sector__plus {
  transform: rotate(90deg);
}
.sector__face:focus-visible {
  outline-offset: -8px;
}

/* Opened details: anchored to the column's left edge at full screen width,
   so they're revealed as the column grows. Scrolls on its own if it's
   taller than the screen (data-lenis-prevent lets it). */
.sector__panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: var(--sectors-w, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.sector.is-open .sector__panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s ease 0.6s,
    transform 0.9s var(--ease-out) 0.6s;
}

.sector__panel-inner {
  position: relative;
  min-height: 100%;
  padding: clamp(110px, 17vh, 170px) var(--gutter) clamp(40px, 7vh, 72px);
}

.sector__close {
  position: absolute;
  top: clamp(96px, 14vh, 140px);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.sector__x {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.5s var(--ease-out);
}
.sector__x::before,
.sector__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sector__x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sector__close:hover .sector__x,
.sector__close:focus-visible .sector__x {
  background: var(--white);
  color: #000;
  transform: rotate(90deg);
}

.sector__kicker {
  font-size: 14px;
  color: var(--muted);
}

.sector__title {
  max-width: 11ch;
  margin: 18px 0 clamp(40px, 8vh, 90px);
  font-size: clamp(48px, 7.4vw, 118px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.sector__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 1280px;
}

.sector__label {
  margin-bottom: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

.sector__col p {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.sector__cta {
  margin-top: clamp(40px, 7vh, 72px);
  height: auto;
  min-height: 50px;
  padding-block: 12px;
}

/* Phones and small tablets: the columns become rows, and an opened row
   fills the screen the same way */
@media (max-width: 900px) {
  .sectors {
    flex-direction: column;
  }

  .sector__bg {
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
    -webkit-mask-size: 80% 100%;
    mask-size: 80% 100%;
  }
  .sector.is-open .sector__bg {
    -webkit-mask-size: 400% 100%;
    mask-size: 400% 100%;
  }

  .sector__face {
    flex-direction: row;
    align-items: flex-end;
    padding: 16px var(--gutter);
  }

  .sector__name,
  .sector__foot {
    width: auto;
  }
  .sector__name {
    font-size: clamp(24px, 6vw, 34px);
  }
  .sector__num {
    display: none;
  }

  .sector__panel {
    width: 100%;
  }
  .sector__panel-inner {
    padding-top: 150px;
  }
  .sector__close {
    top: 88px;
  }
  .sector__cols {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQs ---------- */

.sectors-faq {
  padding-block: clamp(100px, 14vh, 150px);
}

/* Each row keeps the "What we offer" look, but the question is a button
   and the answer opens beneath it */
.faq li {
  display: block;
  padding-block: 0;
}

.faq__q {
  font-size: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding-block: 28px;
  text-align: left;
  letter-spacing: inherit;
}
.faq__item:first-child .faq__q {
  padding-top: 0;
}

.faq__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #9d9d9d;
  transition:
    transform 0.6s var(--ease-out),
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.faq__q:hover .faq__icon,
.faq__q:focus-visible .faq__icon {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}
.faq__item.is-open .faq__icon {
  border-color: var(--white);
  background: var(--white);
  color: #000;
  transform: rotate(180deg);
}

/* Height animates by growing the grid row from 0fr to 1fr */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__a p {
  max-width: 640px;
  padding-bottom: 28px;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.4s ease,
    transform 0.6s var(--ease-out);
}
.faq__item.is-open .faq__a p {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

/* ==========================================================================
   Contact page
   A 70/30 split filling the screen: black on the left with the intro and
   the message form, white on the right with the Pulse Report and the studio's
   details. Stacks below 1000px.
   ========================================================================== */


.contact {
  display: grid;
  grid-template-columns: 7fr 3fr;
  min-height: 100vh;
  min-height: 100svh;
}

.contact__main {
  padding: clamp(130px, 20vh, 200px) var(--edge) clamp(80px, 12vh, 120px);
  background: var(--black);
}

.contact__main > * {
  max-width: 820px;
}

.contact__eyebrow {
  margin-bottom: 24px;
  font-size: 16px;
  color: var(--muted);
}

.contact__title {
  font-size: clamp(48px, 6.4vw, 110px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.contact__lede {
  max-width: 560px;
  margin-top: clamp(24px, 4vh, 40px);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Form ---------- */

.contact-form {
  margin-top: clamp(56px, 9vh, 100px);
}

.contact-form__title {
  margin-bottom: clamp(20px, 3vh, 32px);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 14px;
  color: var(--muted);
}

/* Bare inputs on a single underline, which brightens on focus */
.field__input {
  width: 100%;
  padding: 10px 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  transition: border-color 0.3s;
}
.field__input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.field__input:focus {
  outline: none;
  border-bottom-color: var(--white);
}
.field__input--area {
  min-height: 120px;
  resize: vertical;
  line-height: 1.4;
}

.contact-form__submit {
  margin-top: clamp(32px, 5vh, 48px);
}
.contact-form__submit[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* Honeypot: hidden from people, still filled in by spam bots */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__status {
  margin-top: 20px;
  font-size: 16px;
  color: var(--muted);
}
.contact-form__status:empty {
  display: none;
}
.contact-form__status.is-error {
  color: var(--accent);
}

/* ---------- White side ---------- */

.contact__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: clamp(130px, 20vh, 200px) var(--edge) clamp(56px, 9vh, 96px) clamp(28px, 3vw, 56px);
  background: var(--paper);
  color: var(--ink);
}

.contact__aside-title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.contact__aside-text {
  margin-block: 16px 28px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.7);
}

/* Solid black button for light backgrounds; fills orange on hover */
.button--dark {
  background: var(--ink);
  color: var(--white);
}
.button--dark::before {
  background: var(--accent);
}
.button--dark:hover,
.button--dark:focus-visible {
  color: var(--white);
}

.contact__name {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.contact__list {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: 16px;
  line-height: 1.45;
}

.contact__row {
  padding-block: 14px;
  border-top: 1px solid rgba(18, 18, 18, 0.14);
}

.contact__label {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.5);
}

.contact__row a {
  transition: color 0.3s;
}
.contact__row a:hover,
.contact__row a:focus-visible {
  color: var(--accent);
}

.contact__map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-block: 14px 4px;
  border-bottom: 1px solid currentColor;
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
}
.contact__map svg {
  transition: transform 0.4s var(--ease-out);
}
.contact__map:hover svg,
.contact__map:focus-visible svg {
  transform: translateX(4px);
}

@media (max-width: 1000px) {
  .contact {
    grid-template-columns: 1fr;
  }
  .contact__aside {
    padding: clamp(64px, 10vh, 96px) var(--edge);
  }
}

@media (max-width: 600px) {
  .contact-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Insights page
   One full-screen section split 50/50: Insights Editions on white, the
   InBrief video series on black. Hovering a half widens it a little. Stacks
   below 1000px.
   ========================================================================== */

.insights {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
}

.ins-half {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(110px, 16vh, 160px) var(--edge) clamp(60px, 10vh, 100px);
  transition:
    flex-grow 0.9s cubic-bezier(0.77, 0, 0.175, 1),
    padding 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
/* The outer padding lines up with the nav; the inner edges get the gutter */
.ins-half--light {
  padding-right: var(--gutter);
  background: var(--paper);
  color: var(--ink);
}
.ins-half--dark {
  position: relative;
  overflow: hidden;
  padding-left: var(--gutter);
  background: var(--black);
}

/* InBrief video: covers the half like object-fit: cover at 16:9 (sized in
   container units, as the half resizes on hover), fading in
   over the black once it's playing, under a scrim so the copy stays legible */
.ins-half__media {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}
.ins-half__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.9s ease;
}
.ins-half__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}
.ins-half.video-playing .ins-half__video {
  opacity: 1;
}

.ins-half--dark .ins-half__inner {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (min-width: 1001px) {
  .insights:not(.is-takeover):not(.is-takeover-light) .ins-half:hover {
    flex-grow: 1.2;
  }
}

.ins-half__inner {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  /* Sized to the screen, not the half, so it's clipped rather than rewrapped
     as the half is squeezed away by a takeover */
  width: min(440px, 100vw - 2 * var(--edge));
}

.ins-half__logo img {
  display: block;
  width: min(100%, 392px);
  height: auto;
}

.ins-half__text {
  margin-block: clamp(28px, 4vh, 40px) clamp(28px, 4vh, 36px);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
}
.ins-half--light .ins-half__text {
  color: rgba(18, 18, 18, 0.7);
}
.ins-half--dark .ins-half__text {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1000px) {
  .insights {
    flex-direction: column;
  }
  .ins-half,
  .ins-half--light,
  .ins-half--dark {
    /* Stacked, each half grows with its content (the editions list is
       many screens tall) rather than sharing the screen's height */
    flex-basis: auto;
    min-height: 50svh;
    padding: clamp(96px, 14vh, 130px) var(--edge) clamp(56px, 8vh, 80px);
  }
  .ins-half--dark {
    padding-top: clamp(56px, 8vh, 80px);
  }
}

/* ---------- InBrief takeover ----------
   "View the series" (main.js, "InBrief takeover") squeezes the white half
   away and the InBrief half fills the screen: the series intro top left, a
   player for episode 1 and the episode carousel along the bottom. The video
   keeps looping behind, less dimmed. */

.insights.is-takeover .ins-half--light {
  flex-grow: 0;
  padding-inline: 0;
}
.insights.is-takeover .ins-half--dark {
  flex-grow: 1;
}
.ins-half__inner {
  transition: opacity 0.4s ease 0.5s;
}
.insights.is-takeover .ins-half__inner {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.insights.is-takeover .ins-half__media::after {
  opacity: 0.6;
}

.inbrief {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(100px, 15vh, 150px) 0 clamp(24px, 4vh, 44px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* display: flex would otherwise override the hidden attribute */
.inbrief[hidden],
.inbrief__player[hidden] {
  display: none;
}

.inbrief.is-open {
  opacity: 1;
  transition: opacity 0.8s ease 0.6s;
}
/* Opening straight from a link to insights.html#inbrief: no animation */
.insights.is-instant .ins-half,
.insights.is-instant .ins-half__inner,
.insights.is-instant .inbrief {
  transition: none;
}

.inbrief__close {
  position: absolute;
  top: clamp(96px, 14vh, 140px);
  right: var(--edge);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.inbrief__close:hover .sector__x,
.inbrief__close:focus-visible .sector__x {
  background: var(--white);
  color: #000;
  transform: rotate(90deg);
}

.inbrief__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The 620px cap is for the text; the left padding (in line with the nav)
     is added on top, as it grows large on wide screens */
  max-width: calc(620px + var(--edge));
  padding-left: var(--edge);
}

.inbrief__logo {
  width: clamp(180px, 16vw, 260px);
  height: auto;
}

.inbrief__series {
  margin-top: clamp(20px, 3vh, 32px);
  font-size: 14px;
  color: var(--muted);
}

.inbrief__title {
  margin-top: 10px;
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.inbrief__text {
  max-width: 520px;
  margin-top: 16px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.inbrief__play {
  margin-top: clamp(20px, 3vh, 32px);
}
.inbrief__play-dur {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Player: covers the takeover over black, the video as large as fits */
.inbrief__player {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: clamp(96px, 14vh, 140px) var(--edge) clamp(24px, 4vh, 44px);
  background: #000;
}

.inbrief__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.inbrief__back:hover,
.inbrief__back:focus-visible {
  color: var(--accent);
}

.inbrief__frame {
  align-self: center;
  width: min(100%, (100svh - 260px) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}
.inbrief__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1000px) {
  .insights.is-takeover .ins-half--light {
    display: none;
  }
  .insights.is-takeover .ins-half--dark {
    min-height: 100svh;
  }
  .inbrief__text {
    display: none;
  }
}

/* ---------- Insights editions takeover ----------
   "Read the insights" (main.js, "Insights page takeovers") squeezes the
   InBrief half away and the white half fills the screen. Once it has grown
   (.is-listing), its intro is swapped for the list of editions: a row of
   article cards per edition. The list sits in the page flow, so the page
   simply gets taller and scrolls. */

.insights.is-takeover-light .ins-half--dark {
  flex-grow: 0;
  padding-inline: 0;
}
.insights.is-takeover-light .ins-half--light {
  flex-grow: 1;
}
.insights.is-takeover-light .ins-half--light .ins-half__inner {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.insights.is-instant .ins-list {
  transition: none;
}

.ins-half--light.is-listing {
  display: block;
  padding: clamp(110px, 16vh, 160px) var(--edge) clamp(90px, 13vh, 140px);
}
.ins-half--light.is-listing .ins-half__inner {
  display: none;
}

.ins-list[hidden] {
  display: none;
}
.ins-list {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.9s var(--ease-out);
}
.ins-list.is-open {
  opacity: 1;
  transform: none;
}

/* Close stays in reach while scrolling the list: it sticks below the nav,
   in a zero-height bar so it doesn't push the intro down */
.ins-list__bar {
  position: sticky;
  top: clamp(84px, 12vh, 120px);
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
}
.ins-list__close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 4px 0 18px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  font-size: 14px;
}
.ins-list__x {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(18, 18, 18, 0.25);
  border-radius: 50%;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.5s var(--ease-out);
}
.ins-list__x::before,
.ins-list__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ins-list__x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ins-list__close:hover .ins-list__x,
.ins-list__close:focus-visible .ins-list__x {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
  transform: rotate(90deg);
}

.ins-list__intro {
  padding-right: 140px;
}

.ins-list__logo {
  width: clamp(200px, 18vw, 280px);
  height: auto;
}

.ins-list__title {
  margin-top: clamp(28px, 4vh, 44px);
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.ins-list__text {
  max-width: 560px;
  margin-top: 20px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.7);
}

/* One edition: a heading row over a divider, then its cards */
.ins-edition {
  margin-top: clamp(64px, 10vh, 110px);
}

.ins-edition__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3.5vh, 36px);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}

.ins-edition__name {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.ins-edition__tag {
  padding: 5px 12px;
  border-radius: 30px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}

.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vh, 48px) clamp(20px, 2.2vw, 36px);
  list-style: none;
}

.ins-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ins-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1080 / 647;
  border-radius: 6px;
  background: #f2f2f2;
}
.ins-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.ins-card__link:hover .ins-card__media img,
.ins-card__link:focus-visible .ins-card__media img {
  transform: scale(1.05);
}

.ins-card__meta {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.55);
}

.ins-card__title {
  margin-top: 6px;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  transition: color 0.3s;
}
.ins-card__link:hover .ins-card__title,
.ins-card__link:focus-visible .ins-card__title {
  color: var(--accent);
}

.ins-card__desc {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.68);
}

.ins-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  font-weight: 500;
}
.ins-card__more svg {
  transition: transform 0.4s var(--ease-out);
}
.ins-card__link:hover .ins-card__more svg,
.ins-card__link:focus-visible .ins-card__more svg {
  transform: translate(2px, -2px);
}

@media (max-width: 1000px) {
  .insights.is-takeover-light .ins-half--dark {
    display: none;
  }
  .ins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ins-grid {
    grid-template-columns: 1fr;
  }
  .ins-list__intro {
    padding-right: 0;
    padding-top: 56px;
  }
}

/* ---------- Episode carousel (takeover and episode pages) ----------
   A row of cards that scrolls sideways: drag, swipe, trackpad, or the arrow
   buttons (main.js, "Episode carousels"). The row starts in line with the
   nav and runs off the right edge of the screen. */

.ep-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding-inline: var(--edge);
}

.ep-carousel__label {
  font-size: 14px;
  color: var(--muted);
}

.ep-carousel__nav {
  display: flex;
  gap: 8px;
}
.ep-carousel__nav .t-btn:disabled {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.ep-carousel__track {
  display: flex;
  gap: 16px;
  padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  list-style: none;
  cursor: grab;
}
.ep-carousel__track::-webkit-scrollbar {
  display: none;
}
.ep-carousel__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}
.ep-carousel__track.is-dragging .ep-card__link {
  pointer-events: none;
}

.ep-card {
  flex: none;
  width: clamp(230px, 20vw, 320px);
  scroll-snap-align: start;
}

.ep-card__link {
  display: block;
  -webkit-user-drag: none;
}

.ep-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 330 / 180;
  border-radius: 6px;
  background: #111;
}
.ep-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
  -webkit-user-drag: none;
}

.ep-card__num {
  position: absolute;
  left: 14px;
  bottom: 8px;
  font-size: clamp(36px, 3vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ep-card__dur {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ep-card__play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: #000;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.3s,
    transform 0.4s var(--ease-out);
}

.ep-card__link:hover .ep-card__media img,
.ep-card__link:focus-visible .ep-card__media img {
  transform: scale(1.06);
}
.ep-card__link:hover .ep-card__play,
.ep-card__link:focus-visible .ep-card__play {
  opacity: 1;
  transform: none;
}

.ep-card__kicker {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.ep-card.is-current .ep-card__kicker {
  color: var(--accent);
}
.ep-card.is-current .ep-card__media {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ep-card__title {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.ep-card__sum {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

/* In the takeover the summaries are left off, and the cards scale with the
   screen's height as well as its width, so intro and row always fit */
.inbrief .ep-card__sum {
  display: none;
}
.inbrief .ep-card {
  width: clamp(190px, min(20vw, 30vh), 320px);
}

/* Short screens: drop the intro paragraph to make room for the row */
@media (max-height: 820px) {
  .inbrief__text {
    display: none;
  }
}

/* ==========================================================================
   InBrief episode pages (inbrief-*.html)
   The video large at the top, then the write-up in the service pages' row
   layout (details on the left, story and key takeaway on the right),
   previous and next links, and the episode carousel.
   ========================================================================== */

.ep-hero {
  padding-top: clamp(96px, 14vh, 140px);
}

.ep-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  transition: color 0.3s;
}
.ep-back:hover,
.ep-back:focus-visible {
  color: var(--accent);
}

.ep-player {
  width: min(100%, (100svh - 220px) * 16 / 9);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}
.ep-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ep-body {
  padding-block: clamp(80px, 12vh, 140px) clamp(60px, 9vh, 100px);
}

.ep-meta__logo {
  width: 160px;
  height: auto;
}

.ep-meta__list {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 28px 0 0;
}
.ep-meta__list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
}
.ep-meta__list dt {
  color: var(--muted);
}
.ep-meta__list dd {
  margin: 0;
  text-align: right;
}

.ep-meta__partner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
}
.ep-meta__partner img {
  width: 44px;
  height: auto;
}

.ep-kicker {
  font-size: 14px;
  color: var(--accent);
}

.ep-title {
  margin: 12px 0 clamp(28px, 4vh, 44px);
  font-size: clamp(40px, 4.6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.ep-text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 680px;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.ep-text strong {
  font-weight: 500;
  color: var(--white);
}

.ep-takeaway {
  max-width: 680px;
  margin-top: clamp(36px, 6vh, 56px);
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.05);
}
.ep-takeaway__label {
  font-size: 14px;
  color: var(--accent);
}
.ep-takeaway__text {
  margin-top: 8px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.ep-pager {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
.ep-pager__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 45%;
}
.ep-pager__link--next {
  align-items: flex-end;
  text-align: right;
}
.ep-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}
.ep-pager__title {
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  transition: color 0.3s;
}
a.ep-pager__link:hover .ep-pager__title,
a.ep-pager__link:focus-visible .ep-pager__title {
  color: var(--accent);
}

.ep-more {
  padding-bottom: clamp(100px, 14vh, 150px);
}
.ep-more__title {
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

@media (max-width: 800px) {
  .ep-pager {
    flex-direction: column;
  }
  .ep-pager__link {
    max-width: none;
  }
}

/* ==========================================================================
   Insights article pages (insight-*.html)
   Modelled on the articles on studioglobal.co.uk: white, one centred 800px
   column. The header graphic is the edition's logo over its big faded
   number, then the title, a bold standfirst, the byline and date, and the
   article, with a rule above each section heading and large pull quotes.
   After it: previous and next links, more articles as cards, and the usual
   dark call to action. body.page-light makes main white; the nav inverts to
   black through .nav-blend.
   ========================================================================== */

/* White goes on the article sections, not <main>: the footer reveal shrinks
   the last sections and uncovers <main> beside them, which has to stay
   footer-coloured rather than white */
.page-light main {
  color: var(--ink);
}
.page-light .art,
.page-light .art-foot {
  background: var(--paper);
}
.page-light .case-cta {
  color: var(--white);
}
.page-light .svc-line {
  background: rgba(18, 18, 18, 0.14);
}

/* The reading column */
.art-col {
  width: min(800px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Header graphic ---------- */

.art-head {
  padding-top: clamp(90px, 13vh, 130px);
}

.art-head__back {
  position: relative;
  z-index: 2;
}

/* The logo sits on the left of an 800 × 500 box, with the 700 × 600 faded
   number behind it to the top right, as on the live site */
.art-head__art {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 42vw, 500px);
}
.art-head__number {
  position: absolute;
  top: calc(-1 * clamp(40px, 6vw, 80px));
  right: 0;
  width: min(700px, 88%);
  aspect-ratio: 700 / 600;
  background: center / cover no-repeat;
  pointer-events: none;
}
.art-head__logo {
  position: relative;
  z-index: 1;
  width: clamp(220px, 34vw, 300px);
  height: auto;
}

/* ---------- Title ---------- */

/* At mid widths the faded number runs past the art box; keep the text above it */
.art-title,
.art-standfirst,
.art-meta {
  position: relative;
  z-index: 1;
}

.art-title {
  margin-top: clamp(24px, 4vh, 48px);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.art-standfirst {
  margin-top: 18px;
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 20px;
  padding-bottom: clamp(28px, 4vh, 40px);
  border-bottom: 1px solid rgba(18, 18, 18, 0.14);
  font-size: 14px;
  color: rgba(18, 18, 18, 0.55);
}

/* ---------- The story ---------- */

.art-content {
  padding-top: clamp(28px, 4vh, 40px);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.65;
  color: rgba(18, 18, 18, 0.82);
}
.art-content > * + * {
  margin-top: 1em;
}

/* Each section heading gets a rule above it */
.art-content h2 {
  margin-top: clamp(44px, 6vh, 64px);
  padding-top: clamp(36px, 5vh, 52px);
  border-top: 1px solid rgba(18, 18, 18, 0.14);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}
.art-content__kicker {
  margin-top: clamp(44px, 6vh, 64px) !important;
  padding-top: clamp(36px, 5vh, 52px);
  border-top: 1px solid rgba(18, 18, 18, 0.14);
  font-size: 14px;
  color: var(--accent);
}
.art-content__kicker + h2 {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.art-content strong {
  font-weight: 600;
  color: var(--ink);
}
.art-content a:not(.button) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.art-content a:not(.button):hover {
  color: var(--accent);
}

.art-content ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}
.art-content li {
  position: relative;
  padding-left: 24px;
}
/* The orange dot bullets echo the originals */
.art-content li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* Pull quote: a big quote mark, the quote large, then who said it, with
   rules above and below */
.art-quote {
  margin: clamp(44px, 6vh, 64px) 0 !important;
  padding-block: clamp(36px, 5vh, 52px);
  border-block: 1px solid rgba(18, 18, 18, 0.14);
}
.art-quote::before {
  content: "“";
  display: block;
  height: 0.55em;
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
}
.art-quote blockquote {
  margin: 0;
}
.art-quote blockquote p {
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--ink);
}
.art-quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.35;
}
.art-quote figcaption img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.art-quote__name {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.art-quote__role {
  display: block;
  color: var(--accent);
}
/* A section heading straight after a quote doesn't need a second rule */
.art-quote + h2 {
  margin-top: 0;
  border-top: 0;
}

.art-gallery {
  display: grid;
  gap: 12px;
  margin-block: clamp(32px, 5vh, 48px) !important;
}
.art-gallery--2 {
  grid-template-columns: 1fr 1fr;
}
.art-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f2f2;
}
.art-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-content__link {
  margin-top: 24px !important;
}
.art-content .button--dark {
  height: auto;
  min-height: 50px;
  padding-block: 12px;
  color: var(--white);
}

/* Byline at the end of the article */
.art-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 7vh, 72px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid rgba(18, 18, 18, 0.14);
}
.art-byline img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.art-byline__by {
  display: block;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.55);
}
.art-byline__name {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---------- After the article ---------- */

.art-foot {
  padding-block: clamp(80px, 12vh, 130px) clamp(100px, 14vh, 150px);
}
.art-foot .ep-pager {
  margin-top: clamp(40px, 6vh, 64px);
}
.page-light .ep-pager__dir {
  color: rgba(18, 18, 18, 0.55);
}
.art-foot__title {
  margin: clamp(80px, 12vh, 120px) 0 clamp(24px, 4vh, 36px);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

@media (max-width: 640px) {
  .art-gallery--2 {
    grid-template-columns: 1fr;
  }
  .art-head__art {
    align-items: flex-end;
    padding-bottom: 12px;
  }
  .art-head__number {
    top: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .case-cta__glow span,
  .case-cta__sway { animation: none; }
  /* No JS drift: the card row becomes a plain swipeable strip instead of an
     auto-scrolling one */
  .team__viewport { overflow-x: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Steele Raymond DNA: practice areas built as live HTML. Two text columns
   either side of a four-strand "DNA" line; the strand hides on small screens
   and the groups stack. */
.case-dna {
  background: #282828;
  padding: clamp(48px, 7vw, 120px) clamp(20px, 5vw, 80px);
}
.case-dna__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(56px, 7vw, 110px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}
.case-dna__col {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 80px);
}
.case-dna__group {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
}
.case-dna__bar {
  position: relative;
  height: clamp(4px, 0.45vw, 6px);
  margin-bottom: clamp(4px, 1vw, 12px);
}
.case-dna__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
}
.case-dna__item h3 {
  margin: 0 0 clamp(6px, 0.8vw, 10px);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.case-dna__item p {
  margin: 0;
  max-width: 34em;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.case-dna__item--a h3 { color: #33c2d8; }
.case-dna__item--b h3 { color: #95bee5; }
.case-dna__item--c h3 { color: #f9b9b9; }
.case-dna__item--d h3 { color: #c7db70; }

.case-dna__strand {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22%;
  padding: 0 8%;
}
.case-dna__strand i {
  position: relative;
  display: block;
}
.case-dna__strand i span {
  position: absolute;
  left: 0;
  right: 0;
}

@media (max-width: 800px) {
  .case-dna__grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 8vw, 60px);
  }
  .case-dna__strand {
    display: none;
  }
}