/* ==========================================================================
   Infinite Red — homepage
   Static recreation of https://infinite.red (captured 2026-09-16)

   Sections
   1. Normalize + base element styles
   2. Layout primitives (grid/row/col, slider, dropdown, navbar)
   3. Fonts + design tokens
   4. Page components (nav, hero, clients, cards, testimonials, CTA, footer)
   5. Responsive overrides  (1280 / 1920 up, 991 / 767 / 479 down)
   6. Page-level overrides that shipped as inline <style> on the original page
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden],
template {
  display: none;
}

a {
  background-color: #0000;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub,
sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: none;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: 700;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial,sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll!important;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000!important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 10px;
  font-weight: 700;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-embed:before,
.w-embed:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}

.w-embed:after {
  clear: both;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button,
[type=button],
[type=reset] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

label {
  margin-bottom: 5px;
  font-weight: 700;
  display: block;
}

.w-row:before,
.w-row:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-4 {
  width: 33.3333%;
}

@media screen and (max-width:767px) {
  .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

}

@media screen and (max-width:479px) {
  .w-col {
    width: 100%;
  }

}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: var(--space-xs);
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round>div {
  border-radius: 100%;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert>div {
  background-color: #2226;
}

.w-slider-nav-invert>div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 var(--space-xs) var(--space-xs);
  transition: background-color .1s,color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left,
.w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^=w-icon-],
.w-slider-arrow-right [class^=w-icon-],
.w-slider-arrow-left [class*=\ w-icon-],
.w-slider-arrow-right [class*=\ w-icon-] {
  position: absolute;
}

.w-slider-arrow-left:focus,
.w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-slider-force-show {
  display: block!important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-toggle {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before,
.w-nav:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block!important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation=over-left] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation=over-left] .w-nav-overlay,
.w-nav[data-animation=over-left] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation=over-right] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation=over-right] .w-nav-overlay,
.w-nav[data-animation=over-right] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse=all] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse=all] .w-nav-button {
  display: block;
}

@media screen and (max-width:991px) {
  .w-nav[data-collapse=medium] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse=medium] .w-nav-button {
    display: block;
  }

}

@media screen and (max-width:767px) {
  .w-nav[data-collapse=small] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse=small] .w-nav-button {
    display: block;
  }

}

@media screen and (max-width:479px) {
  .w-nav[data-collapse=tiny] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse=tiny] .w-nav-button {
    display: block;
  }

}

@keyframes spin {
  0% { transform:rotate(0) }
  to { transform:rotate(360deg) }
}

.w-condition-invisible {
  display: none!important;
}

@font-face {
  font-family: "Droid Serif (compressed)";
  src: url(../assets/fonts/droidserif-regular-webfont.woff2)format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat (compressed)";
  src: url(../assets/fonts/montserrat-medium-webfont.woff2)format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat (compressed)";
  src: url(../assets/fonts/montserrat-bold-webfont.woff2)format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif (compressed)";
  src: url(../assets/fonts/droidserif-italic-webfont.woff2)format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat (compressed)";
  src: url(../assets/fonts/Montserrat600.woff2)format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif (compressed)";
  src: url(../assets/fonts/droid-serif.bold.ttf)format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type ---------------------------------------------------------------- */
  --font-sans: "Montserrat (compressed)", "Trebuchet MS", sans-serif;
  --font-serif: "Droid Serif (compressed)", Georgia, serif;

  /* Spacing — four steps, nothing in between. Every margin, padding and gap
     on the page comes from this scale.                                     */
  --space-xs: 8px;    /* icon gaps, label/value pairs, tight stacks         */
  --space-sm: 16px;   /* control padding — buttons                          */
  --space-md: 24px;   /* inside components, prose rhythm, grid gutters      */
  --space-lg: 64px;   /* between blocks within a section                    */
  --space-xl: 128px;  /* section boundaries — the page's vertical rhythm     */

  /* Shape ----------------------------------------------------------------
     iOS uses continuous-curvature corners rather than quarter-circles.
     `border-radius` is the safe fallback; `corner-shape` progressively
     enhances it to the native-style curve in supporting browsers. */
  --corner-radius: 12px;
  --corner-shape: squircle;

  /* Colour --------------------------------------------------------------- */
  --dark-slate: #262427;
  --crimson: #e73536;
  --crimson-dark: #d32d2e;
  --neutral500: #5d5d61;
  --white: white;
  --light-gray: #f6f6f7;
  --gray: #e9e8ea;
  --light-slate: #c9c5cb;
  --warning: #971111;
  --secondary400: #695d6f;
  --secondary200: #b7b2bb;
  --light-crimson: #fad7d7;
  --mulberry: #632f3e;

  /* On dark backgrounds */
  --on-dark: var(--white);
  --link-on-dark: #fac0c1;   /* pink-tinted white; 7.6:1 on the hero */
  --on-dark-muted: #ffffffcc;
  --on-dark-faint: #ffffff1a;
}

/* ==========================================================================
   Typography

   Headings and prose are styled on the element, not per instance. A heading
   is sized by what it is, so `<h2>` is 38px everywhere on the page and there
   is no `.bottom-cta-heading` or `.footer-cta-heading` overriding it.

   The only modifiers are `.lead` and `.quote` (prose variants that carry real
   meaning) and `.on-dark` (a section on a dark background flips its text to
   white — it is set once on the section, and descendants inherit).
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: left;
  text-wrap: balance;          /* even line lengths, no lone last word */
  margin-top: 0;
  margin-bottom: var(--space-md);
}

h1 {
  font-size: 52px;
  line-height: 110%;
}

h2 {
  font-size: 38px;
  line-height: 110%;
}

h3 {
  font-size: 32px;
  line-height: 120%;
}

h4 {
  font-size: 18px;
  line-height: 133%;
  margin-bottom: var(--space-xs);
}

h5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 143%;
  margin-bottom: var(--space-xs);
}

/* The Webflow base centres every figcaption. Type on this site is left
   aligned; the client quote is the one exception, and it opts in. */
figcaption {
  text-align: left;
}

p {
  color: var(--dark-slate);
  font-family: var(--font-serif);
  text-align: left;
  text-wrap: pretty;           /* tidier rag, no orphans */
  font-size: 16px;
  line-height: 163%;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* Intro paragraph under a heading. Wrapping is left to the `text-wrap: pretty`
   on `p`: balancing these evens the line lengths but pulls the whole column in
   and leaves a wide gutter, which reads worse than the odd short line. */
.lead {
  font-size: 18px;
  line-height: 150%;
}

/* Pull quote — the testimonial slider. */
.quote {
  font-size: 23px;
  font-style: italic;
  line-height: 165%;
}

/* Last child in a block never adds trailing space. */
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child,
p:last-child {
  margin-bottom: 0;
}

/* A dark section flips its text; descendants inherit rather than each
   element carrying its own `--reversed` class. */
.on-dark,
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6,
.on-dark p {
  color: var(--on-dark);
}

a {
  color: var(--crimson);
  font-family: inherit;
  font-weight: 400;
  text-decoration: none;
}

/* Inline links in prose carry colour, not an underline.

   On light, crimson sits at 3.64:1 against the body text, which clears the
   bar for colour being the only resting cue. On dark no pink-tinted white
   gets near that, so hover and keyboard focus underline instead — the link
   never depends on colour alone, and nothing is underlined at rest. */
p a,
li a {
  color: var(--crimson);
}

p .bttn {
  color: var(--white);
}

.on-dark p a,
.on-dark li a {
  color: var(--link-on-dark);
}

p a:not(.link-action):hover,
li a:hover,
p a:not(.link-action):focus-visible,
li a:focus-visible {
  text-decoration: underline;
}



ul {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 163%;
  margin-bottom: 0;
  padding-left: var(--space-md);
}

ol {
  font-family: var(--font-serif);
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
}

li {
  color: var(--dark-slate);
  text-wrap: pretty;
  margin-bottom: var(--space-xs);
  padding-left: var(--space-xs);
  line-height: 163%;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

blockquote {
  color: var(--neutral500);
  border-left: 5px solid #e2e2e2;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 28px;
}

.top-nav-brand {
  align-items: center;
  padding: var(--space-xs);
  display: flex;
}

.top-nav-menu {
  z-index: 5;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}

.container {
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  text-decoration: none;
}

.hero-home {
  background-color: var(--dark-slate);
  background-image: linear-gradient(151deg,#47004dc7,#82002a99),url(../assets/images/home-hero.webp);
  background-position: 0 0,50% 0;
  background-size: auto,cover;
  align-items: center;
  height: 90vh;
  display: flex;
  position: relative;
}

.top-nav-container {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

/* The 700px reading column, shared by the hero and every section intro. */
.measure {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Action type. Buttons and standalone action links share a face, weight and
   tracking; never underlined. The link takes its size from the prose it sits
   in, so it reads as part of the paragraph rather than a stray smaller line. */
.bttn,
.link-action {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .5px;
  text-decoration: none;
}

.bttn {
  font-size: 15px;
}

/* The action link takes the size of the prose it sits in. */
.link-action {
  font-size: inherit;
}

/* The default button is a filled pill, sized by real padding off the scale. */
.bttn {
  background-color: var(--crimson);
  color: var(--white);
  border: 1px solid var(--crimson);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  display: inline-block;
  transition: background-color .3s, color .3s, border-color .3s;
}

.bttn:hover {
  background-color: var(--crimson-dark);
  border-color: var(--crimson-dark);
}

.bttn.bttn--outlined-white {
  border-color: var(--white);
  background-color: transparent;
  color: var(--white);
}

.bttn.bttn--outlined-white:hover,
.bttn.bttn--outlined-white:focus-visible {
  background-color: var(--white);
  color: var(--mulberry);
}

.bttn.bttn-spacing-top-md {
  margin-top: var(--space-md);
}

/* The gap under the hero copy exists to separate it from the CTA, so it
   belongs to the button. Carried on the text instead it hangs off the bottom
   of every hero that has no button and pushes the block off centre. */
.hero-home__text + .bttn {
  margin-top: var(--space-lg);
}

.clients-featured {
  background-color: var(--light-gray);
  flex-direction: row;
  align-items: center;
}

.clients-featured__collection-wrapper {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  display: flex;
}

.cta-capabilities {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.top-nav-brand-image {
  color: var(--white);
}

.cta-img {
  background-image: url(../assets/images/img-bg-academy.jpg);
  background-position: 50% 0;
  background-size: cover;
  justify-content: center;
  align-items: center;
  min-height: 740px;
  display: flex;
}

.cta-img.cta-img--community {
  background-image: url(../assets/images/community-splash.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  display: none;
}

.cta-img.cta-img--react {
  background-image: url(../assets/images/img-bg-react.webp);
  flex-direction: column;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  display: none;
}

.work-list__cards {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.cta__intro__bttns {
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-lg);
  display: flex;
}

.client-list {
  clear: none;
  background-color: var(--light-gray);
  padding-top: var(--space-xl);
  position: static;
}

.client-list__logos {
  margin-top: 0;
  padding-bottom: var(--space-xl);
}

.client-list__collection {
  width: 100%;
}

.client-list__collection__item {
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
  display: flex;
}

.client-list__collection__item__img {
  opacity: 1;
  filter: grayscale();
  background-image: url(../assets/images/logo-ir-2x.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 216px;
  /* With 24px of padding either side this sets the row rhythm; the scale
     still has nothing between 24 and 64, so the box carries the difference. */
  height: 72px;
}

.top-nav-menu-link {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
  align-self: auto;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 77px;
  text-decoration: none;
  display: flex;
}

.top-nav-menu-link.w--current {
  color: var(--crimson);
  padding-top: 0;
  padding-bottom: 0;
}

.top-nav-menu-link.in-dropdown {
  line-height: 52px;
}

.clients-featured__collection__item__img {
  background-image: url(../assets/images/logo-ir-2x.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  display: flex;
}

.client-testimonials {
  padding-top: 0;
  padding-bottom: 0;
}

.work-list__slider__mask {
  width: 82%;
  margin-left: auto;
  margin-right: auto;
}

.previousbutton {
  width: 50px;
  height: 50px;
  margin: auto var(--space-xs);
  position: absolute;
  left: auto;
}

.work-list__slider__nav {
  display: none;
}

.nextbutton {
  width: 50px;
  height: 50px;
  margin: auto var(--space-xs);
}

.client-testimonails__slider {
  background-color: #0000;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  justify-content: space-between;
  align-items: center;
  max-width: 1180px;
  height: auto;
  margin-top: var(--space-md);
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.client-testimonials__slider__slide1 {
}

.client-testimonial__img {
  border-radius: 100px;
  width: 60px;
  height: 60px;
  margin-top: var(--space-md);
  display: none;
}

.client-testimonial__collection__item {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 72%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.client-testimonial__slide-container {
  align-items: center;
  height: 520px;
  display: flex;
}

/* Client quotes are the only centred type on the page. */
.client-testimonial__collection__item,
.client-testimonial__collection__item p,
.client-testimonial__collection__item h4 {
  text-align: center;
}

/* Attribution under a pull quote: name, then company. */
.client-testimonial__collection__item h4 {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.client-testimonial__collection__item h4 + p {
  margin-bottom: 0;
}

.work-list__slider__title__categories {
  opacity: .6;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.work-list__cards__collection-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.work-list__cards__collection {
  grid-column-gap: var(--space-md);
  grid-row-gap: var(--space-lg);
  flex-wrap: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-items: start stretch;
  width: 100%;
  display: grid;
}

.work-list__cards__collection__item {
  width: 100%;
}

.project__card {
  flex-direction: column;
  max-width: 370px;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 6px #0000001f;
}

.project__card.home-page__card {
  max-width: 100%;
}

.work-list__project__card__img {
  background-image: url(../assets/images/ProjectArcadeCity-2x.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 320px;
}

.work-list__project__card__info {
  background-color: var(--white);
  text-align: left;
  padding: var(--space-md);
  position: relative;
}

.work-list__project__card__icon {
  width: 28px;
  height: 28px;
  position: absolute;
  bottom: 24px;
  right: 20px;
}

.image,
.image-2 {
  width: 50px;
  height: 50px;
}

.menu-button-hamburger-line {
  height: 2px;
  color: var(--white);
}

.top-nav {
  z-index: 4;
  background-color: #0000;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  min-height: 77px;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.menu-button {
  background-color: #0000;
}

.cta__card {
  grid-column-gap: var(--space-md);
  grid-row-gap: var(--space-md);
  background-color: var(--white);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  justify-content: flex-start;
  align-items: center;
  max-width: 720px;
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
  padding: var(--space-lg);
  text-decoration: none;
  display: flex;
  box-shadow: 3px 3px 8px #0000001f;
}

.cta__card.cta-card--scroll {
  grid-column-gap: var(--space-md);
  grid-row-gap: var(--space-md);
  opacity: 1;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 31%;
  margin-top: var(--space-md);
  margin-right: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
}

.cta__card__img {
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  width: 20%;
}

.cta__card__img.card__home {
  width: 25%;
  margin-left: auto;
  margin-right: auto;
}

.cta-card__img.cta-card__img--cr {
  width: 63px;
  height: 43px;
  padding-left: 0;
  padding-right: 0;
}

.cta-card__img.cta-card__img--academy {
  width: 34px;
}

.cta__card__content__link {
  align-items: center;
  padding-top: var(--space-md);
  display: flex;
}

.cta__card__content__link:hover {
  opacity: .65;
}

.cta__link__icon {
  width: 17px;
  height: 17px;
  margin-right: var(--space-xs);
}

/* Sans-serif action link: card CTAs and the end of a section intro. */
.link-action {
  color: var(--crimson);
  transition: color .3s;
}

.link-action:hover {
  color: var(--crimson-dark);
}

.container-scroll {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1240px;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  display: flex;
}

.img-icon-20px {
  width: 20px;
  height: 20px;
}

.work-list__project__card__icon__arrow {
  width: 28px;
  height: 28px;
}

.cta__card__content--full {
  text-align: left;
  width: 100%;
}

.top-nav-wrapper {
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
  display: flex;
}

.icon--sm {
  width: 24px;
  height: 24px;
}

.icon--sm.top-nav-menu-link-icon-caret {
  color: #fff;
  align-self: center;
  position: relative;
  top: -2px;
}

.icon--sm.top-nav-menu-icon-link-external {
  color: #fff;
  align-self: center;
  position: relative;
  bottom: -1px;
}

.top-nav-menu-link-w-icon {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  display: flex;
}

.top-nav-dropdown {
  background-color: #fff0;
  border: 1px solid #ffffff1a;
  border-left: 1px #fff0;
  border-right: 1px #000;
  justify-content: flex-start;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0%;
  right: 0%;
}

.div-block-23 {
  width: 0;
  height: 52px;
  min-height: 0;
  display: block;
}

.top-nav-embed {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.dropdown {
  display: none;
}

.bottom-cta-container {
  width: 100%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  position: relative;
}

.custom-js-right-click {
  display: none;
}

.footer {
  overflow: hidden;
}

.footer-v2 {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  position: relative;
}

.footer-container {
  z-index: 1;
  grid-column-gap: var(--space-lg);
  grid-row-gap: var(--space-lg);
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  display: flex;
  position: relative;
}

.footer-nav {
  flex-flow: column;
  flex: auto;
  justify-content: space-between;
  display: flex;
}

.footer-cta {
  flex: 0 640px;
}

.footer-cta-box {
  background-color: #ffffff1a;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  padding: var(--space-md);
}

.div-block-24 {
  grid-column-gap: var(--space-md);
  grid-row-gap: var(--space-md);
  flex-flow: column;
  display: flex;
  position: relative;
}

.footer-cta-row {
  grid-column-gap: var(--space-xs);
  grid-row-gap: var(--space-xs);
  flex-flow: column;
  transition: opacity .35s cubic-bezier(.645,.045,.355,1);
  display: flex;
}

.footer-cta-row:hover {
  opacity: .8;
}

.footer-cta-row-label {
  color: #fffc;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
}

.footer-cta-row-value {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  line-height: 120%;
}

.footer-cta-social {
  position: absolute;
  bottom: 26px;
  right: 24px;
}

.footer-cta-social-link {
  margin-left: var(--space-xs);
}

.footer-nav-logo {
  width: 128px;
  color: var(--white);
}

.footer-nav-wrapper {
  grid-column-gap: var(--space-lg);
  grid-row-gap: var(--space-md);
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: var(--space-md);
  display: grid;
}

.footer-nav-col {
  flex: auto;
}

.footer-nav-col-label {
  opacity: .5;
  color: #e0e0e1;
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 120%;
}

.footer-nav-col-link {
  color: var(--white);
  white-space: nowrap;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 135%;
  transition: opacity .35s cubic-bezier(.645,.045,.355,1);
  display: block;
}

.footer-nav-col-link:hover {
  opacity: .8;
}

.custom-js-footer-tiled-background {
  display: none;
}

.footer-tiled-background-1 {
  opacity: .15;
  width: 200%;
  height: 112px;
  position: absolute;
  inset: 0 0 0 calc(50% - 230px);
}

.footer-tiled-background-tiles {
  background-image: url(../assets/images/tiled-red-squares.png);
  background-position: 0 0;
  background-size: 1484px 980px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.footer-tiled-background-2 {
  opacity: .15;
  width: 200%;
  height: 84px;
  position: absolute;
  inset: 112px 0 0 calc(50% - 62px);
}

.footer-tiled-background-3 {
  opacity: .15;
  width: 200%;
  height: 84px;
  position: absolute;
  inset: 196px 0 0 calc(50% + 50px);
}

.footer-tiled-background-4 {
  opacity: .15;
  width: 200%;
  height: 200%;
  position: absolute;
  inset: 280px 0 0 calc(50% + 162px);
}

.custom-css-footer-gradient-background {
  display: none;
}

.bottom-cta-v2 {
  background-color: var(--white);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.bottom-cta-wrapper {
  grid-column-gap: var(--space-lg);
  grid-row-gap: var(--space-lg);
  background-color: #f1f1f1a1;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  width: 100%;
  max-width: 1328px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-lg);
  display: flex;
  position: relative;
}

.bottom-cta-content {
  flex: 0 0 54%;
  max-width: 640px;
}

.bottom-cta-photos {
  flex: 1;
  height: 258px;
  position: relative;
}

.bottom-cta-description {
  margin-bottom: var(--space-md);
}

.bottom-cta-img-1 {
  object-fit: cover;
  width: 188px;
  max-width: 500%;
  height: 295px;
  display: block;
  position: absolute;
  top: -127px;
  right: 321.344px;
}

.bottom-cta-img-2 {
  object-fit: cover;
  width: 294px;
  max-width: 500%;
  height: 264px;
  display: block;
  position: absolute;
  top: 133px;
  right: 0;
}

.bottom-cta-tiled-background-tiles {
  background-image: url(../assets/images/tiled-red-squares.png);
  background-position: 0 100%;
  background-size: 1484px 980px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.bottom-cta-tiled-background-4 {
  opacity: .6;
  width: 200%;
  height: 112px;
  position: absolute;
  inset: auto 0 140px calc(50% - 650px);
}

.bottom-cta-tiled-background-5 {
  opacity: .6;
  width: 200%;
  height: 84px;
  position: absolute;
  inset: auto 0 56px calc(50% - 482px);
}

.bottom-cta-tiled-background-6 {
  opacity: .6;
  width: 200%;
  height: 56px;
  position: absolute;
  inset: auto 0 0 calc(50% - 342px);
}

.custom-js-bottom-cta-tiled-background {
  display: none;
}

.bottom-cta-tiled-background-2 {
  opacity: .6;
  width: 200%;
  height: 112px;
  position: absolute;
  inset: auto 0 420px calc(50% - 884px);
}

.bottom-cta-img-3 {
  object-fit: cover;
  width: 240px;
  max-width: 500%;
  height: 150px;
  display: block;
  position: absolute;
  top: 198px;
  right: 321.344px;
}

.bottom-cta-img-4 {
  object-fit: cover;
  width: 175px;
  max-width: 500%;
  height: 210px;
  position: absolute;
  top: -107px;
  right: 119.328px;
}

.bottom-cta-tiled-background-3 {
  opacity: .6;
  width: 200%;
  height: 168px;
  position: absolute;
  inset: auto 0 252px calc(50% - 762px);
}

.bottom-cta-tiled-background-1 {
  opacity: .6;
  width: 200%;
  height: 100%;
  position: absolute;
  inset: auto 0 532px calc(50% - 996px);
}

.footer-cta-row-label-muted {
  opacity: .75;
  letter-spacing: .5px;
  font-size: 12px;
  font-weight: 500;
}

.footer-nav-col-link-muted {
  opacity: .75;
  letter-spacing: .5px;
  font-size: 12px;
}

@media screen and (min-width:1280px) {
  .footer-container {
    justify-content: space-between;
    align-items: flex-start;
  }

  .bottom-cta-img-3,
  .bottom-cta-img-4 {
    display: block;
  }

}

@media screen and (min-width:1920px) {
  .top-nav {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .icon--sm {
    color: #ff0909;
  }

  .icon--sm.top-nav-menu-link-icon-caret,
  .icon--sm.top-nav-menu-icon-link-external,
  .icon--sm.top-nav-menu-link-icon-caret,
  .icon--sm.top-nav-menu-icon-link-external {
    display: block;
  }

  .bottom-cta-photos {
    flex: 0 auto;
    width: 514px;
    height: 258px;
  }

}

@media screen and (max-width:991px) {
  h1 {
    font-size: 46px;
    line-height: 53px;
  }

  h2 {
    font-size: 38px;
    line-height: 44px;
  }

  .top-nav-brand {
    z-index: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    position: relative;
  }

  .top-nav-menu {
    z-index: 6;
    background-color: var(--white);
    width: 100%;
    height: 100vh;
    color: var(--dark-slate);
    text-align: left;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: var(--space-lg);
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    position: absolute;
    inset: 0%;
  }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .hero-home {
    align-items: center;
    display: flex;
  }

  .clients-featured {
    height: auto;
  }

  .cta-capabilities {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .top-nav-brand-image {
    z-index: 1;
    position: relative;
  }

  .cta-img.cta-img--community {
    padding-top: var(--space-lg);
  }

  .client-list {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .client-list__logos {
    margin-top: 0;
    margin-bottom: 0;
  }

  .client-list__collection {
    flex-wrap: wrap;
    display: flex;
  }

  .client-list__collection__item {
    flex-wrap: wrap;
    flex: 0 50%;
  }

  .client-list__collection__item__img {
    width: 189px;
    height: 65px;
  }

  .top-nav-menu-link {
    color: var(--dark-slate);
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    font-size: 12px;
    font-weight: 500;
    line-height: 52px;
  }

  .top-nav-menu-link:hover {
    color: #4c3e54c2;
  }

  .client-testimonials {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .work-list__slider__mask {
    width: 95%;
  }

  .client-testimonails__slider {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .work-list__cards__collection {
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
  }

  .project__card {
    flex-wrap: wrap;
  }

  .menu-button-hamburger-line {
    background-color: #fff;
    border-radius: 8px;
    width: 35px;
  }

  .top-nav {
    height: auto;
    min-height: 65px;
  }

  .menu-button {
    z-index: 7;
    grid-column-gap: var(--space-xs);
    grid-row-gap: var(--space-xs);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 65px;
    padding: 0 var(--space-md);
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
  }

  .menu-button.w--open {
    z-index: 6;
    background-color: #fff0;
  }

  .cta__card {
    margin-bottom: var(--space-md);
  }

  .cta__card.cta-card--scroll {
    width: 100%;
    max-width: 90%;
    margin-bottom: var(--space-md);
    margin-right: var(--space-xs);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .cta__card__img {
    width: 15%;
  }

  .top-nav-wrapper {
    z-index: 0;
  }

  .icon--sm {
    width: 18px;
    height: 18px;
  }

  .top-nav-menu-link-w-icon {
    display: flex;
  }

  .top-nav-menu-link-w-icon.hide-on-mobile,
  .top-nav-dropdown.hide-on-mobile {
    display: none;
  }

  .menu-button-hamburger {
    grid-column-gap: var(--space-xs);
    grid-row-gap: var(--space-xs);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .dropdown {
    flex-direction: column;
    align-items: stretch;
    display: flex;
  }

  .dropdown-toggle {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    display: flex;
  }

  .dropdown-list {
    opacity: 0;
    background-color: #0000;
    flex-direction: column;
    align-items: stretch;
    padding-left: var(--space-md);
    position: static;
  }

  .dropdown-list.w--open {
    opacity: 0;
    display: flex;
  }

  .footer-container {
    z-index: 1;
    flex-flow: column;
  }

  .footer-cta {
    flex-basis: auto;
  }

  .footer-nav-logo {
    z-index: 1;
    position: relative;
  }

  .footer-nav-logo-link.w--current {
    justify-content: center;
    align-items: center;
  }

  .footer-tiled-background-1 {
    height: 224px;
    left: 112px;
  }

  .footer-tiled-background-2 {
    height: 112px;
    top: 224px;
    left: 168px;
  }

  .footer-tiled-background-3 {
    height: 308px;
    top: 336px;
    left: 364px;
  }

  .footer-tiled-background-4 {
    top: 644px;
    left: 504px;
  }

  .bottom-cta-v2 {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .bottom-cta-wrapper {
    flex-flow: column;
    padding-right: var(--space-lg);
  }

  .bottom-cta-content {
    flex-flow: column;
    order: -1;
    justify-content: center;
    align-self: center;
    align-items: center;
    display: flex;
  }

  .bottom-cta-photos {
    flex: 0 258px;
    order: 1;
    align-self: center;
    width: 514px;
    margin-top: var(--space-lg);
    margin-right: calc(-1 * var(--space-lg));
  }

  .bottom-cta-description {
    margin-bottom: var(--space-lg);
  }

  .bottom-cta-tiled-background-4,
  .bottom-cta-tiled-background-5,
  .bottom-cta-tiled-background-6,
  .bottom-cta-tiled-background-2 {
    display: none;
  }

  .bottom-cta-img-4 {
    display: block;
  }

  .bottom-cta-tiled-background-3 {
    display: none;
  }

  .bottom-cta-tiled-background-1 {
    width: 100%;
    inset: 0;
  }

}

@media screen and (max-width:767px) {
  h1 {
    font-size: 44px;
    line-height: 50px;
  }

  h2 {
    font-size: 34px;
    line-height: 41px;
  }

  h3 {
    font-size: 24px;
    line-height: 26px;
  }

  h4 {
    font-size: 16px;
    line-height: 22px;
  }

  .work-list__cards {
    justify-content: center;
    align-items: flex-start;
  }

  .client-list {
    padding-top: var(--space-lg);
  }

  .client-list__logos {
    margin-top: 0;
  }

  .client-list__collection {
    flex-wrap: wrap;
    display: flex;
  }

  .client-list__collection__item {
    flex: 0 50%;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }

  .client-list__collection__item__img {
    width: 162px;
    height: 47px;
  }

  .previousbutton {
    display: none;
  }

  .work-list__slider__nav {
    display: block;
  }

  .nextbutton {
    display: none;
  }

  .quote {
    font-size: 20px;
    line-height: 160%;
  }

  .work-list__cards__collection {
    grid-row-gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  .work-list__cards__collection__item {
    flex-direction: column;
    flex-basis: 100%;
    align-items: center;
  }

  .project__card {
    margin-left: auto;
    margin-right: auto;
  }

  .project__card.home-page__card {
    max-width: 370px;
  }

  .cta__card.cta-card--scroll {
    max-width: 90%;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
  }

  .cta__card__img {
    width: 20%;
  }

  .img-icon-20px {
    width: 30px;
    height: 30px;
  }

  .cta__card__content--full {
    padding-top: 0;
  }

  .footer-container {
    align-items: stretch;
  }

  .footer-cta-row {
    align-items: center;
  }

  .footer-cta-row-value {
    font-size: 24px;
  }

  .footer-cta-social {
    justify-content: center;
    align-items: center;
    margin-top: var(--space-xs);
    display: flex;
    position: static;
  }

  .footer-nav-logo-link {
    align-self: center;
  }

  .footer-nav-logo-link.w--current {
    display: flex;
  }

  .footer-nav-wrapper {
    grid-row-gap: var(--space-lg);
    flex-flow: column;
    align-items: center;
    margin-top: var(--space-lg);
    display: flex;
  }

  .footer-nav-col {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .footer-tiled-background-2 {
    height: 280px;
  }

  .footer-tiled-background-3 {
    top: 504px;
    left: 224px;
  }

  .footer-tiled-background-4 {
    top: 812px;
    left: 308px;
  }

}

@media screen and (max-width:479px) {
  h1 {
    font-size: 32px;
    line-height: 39px;
  }

  h2 {
    font-size: 28px;
    line-height: 34px;
  }

  h3 {
    font-size: 22px;
    line-height: 27px;
  }

  .container {
    width: 100%;
    max-width: none;
  }

  .lead {
    font-size: 16px;
  }

  .hero-home__text {
    margin-left: auto;
    margin-right: auto;
  }

  .clients-featured__collection-wrapper {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
  }

  .cta-capabilities {
    padding-top: var(--space-lg);
  }

  .measure {
    margin-bottom: var(--space-lg);
  }

  .client-list {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .client-list__logos {
    margin-top: 0;
    margin-bottom: 0;
  }

  .client-list__collection__item {
    flex-wrap: wrap;
    flex-basis: 49%;
    width: 50%;
    padding: var(--space-md) 0;
  }

  .client-list__collection__item__img {
    width: 68%;
    height: 65px;
  }

  .clients-featured__collection__item__img {
    height: 49px;
  }

  .work-list__slider__mask {
    width: 100%;
    height: 30%;
  }

  .previousbutton {
    display: none;
  }

  .work-list__slider__nav {
    font-size: 8px;
    display: block;
    bottom: -32px;
  }

  .nextbutton {
    display: none;
  }

  .client-testimonial__collection-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .client-testimonial__collection {
    justify-content: center;
    align-items: center;
  }

  .client-testimonial__slide-container {
    flex-direction: column;
    justify-content: center;
    height: auto;
  }

  .work-list__project__card__img {
    min-height: 280px;
  }

  .image,
  .image-2 {
    display: none;
  }

  .menu-button {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .cta__card {
    flex-direction: column;
    align-items: center;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .cta__card.cta-card--scroll {
    flex-direction: column;
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .cta__card__img {
    justify-content: center;
    align-self: center;
    width: 100px;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    padding-right: 0;
    display: flex;
  }

  .cta-card__img {
    max-width: 60%;
  }

  .cta-card__img.cta-card__img--cr {
    padding-left: 0;
    padding-right: 0;
  }

  .container-scroll {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .cta__card__content--full {
    max-width: 250px;
  }

  .footer-cta-social {
    margin-top: var(--space-md);
  }

  .footer-nav-logo {
    position: static;
  }

  .bottom-cta-v2 {
    padding-bottom: var(--space-lg);
  }

  .bottom-cta-wrapper {
    padding: var(--space-lg) var(--space-md);
  }

  .bottom-cta-photos {
    margin-top: var(--space-lg);
    margin-right: calc(-1 * var(--space-lg));
    transform: scale(.8);
  }

}


/* ==========================================================================
   6. Page-level overrides (these shipped as inline <style> blocks on the
      original page, after the main stylesheet)
   ========================================================================== */

/* Horizontal card rail: hide the scrollbar but keep it scrollable. */
.container-scroll {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 11 */
}

.container-scroll::-webkit-scrollbar {
  display: none;              /* WebKit */
}

/* Current-page nav links are always crimson. */
.w-nav-link.w--current {
  color: #e73536 !important;
}

/* --- Top nav ------------------------------------------------------------ */

.top-nav-menu-link-w-icon > .icon--sm + .top-nav-menu-link {
  padding-left: var(--space-xs);
  padding-right: 0px;
}

.top-nav-menu-link-w-icon > .top-nav-menu-link:has(+ .icon--sm) {
  padding-right: var(--space-xs);
  padding-left: 0px;
}

.top-nav-menu-link-w-icon.w--current > .top-nav-menu-link,
.top-nav-menu-link-w-icon.w--current > .icon--sm {
  color: var(--crimson) !important;
}

.top-nav .top-nav-menu > .top-nav-menu-link:hover,
.top-nav .top-nav-menu > .top-nav-menu-link-w-icon:hover {
  opacity: 0.65;
  transition: opacity 200ms ease-in-out;
}

.top-nav:has(#top-nav-community-dropdown .w--current) #top-nav-community-dropdown {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.top-nav #top-nav-community-dropdown {
  opacity: 0;
  transition: opacity 350ms ease-in-out 500ms;
}

.top-nav #top-nav-community-dropdown:not(.active) {
  pointer-events: none;
}

.top-nav:has(#top-nav-community-dropdown-trigger:hover) #top-nav-community-dropdown,
.top-nav:has(#top-nav-community-dropdown:hover) #top-nav-community-dropdown {
  opacity: 1;
  transition-delay: 100ms;
  pointer-events: auto;
}

.top-nav .top-nav-brand-image {
  transition: color 350ms ease-in-out;
}

.top-nav:has(.menu-button.w--open) .top-nav-brand-image {
  color: var(--dark-slate) !important;
}

.top-nav:has(.menu-button.w--open) .menu-button-hamburger-line {
  background: var(--dark-slate) !important;
}

.top-nav .menu-button-hamburger-line {
  transition: background 350ms ease-in-out;
}

.top-nav:has(#top-nav-community-dropdown .w--current) #top-nav-community-dropdown-trigger * {
  color: var(--crimson) !important;
}

@media screen and (max-width: 991px) {
  .top-nav-menu-link {
    color: var(--dark-slate) !important;
  }

  .top-nav-menu-link.w--current {
    color: var(--crimson) !important;
  }
}

/* --- Footer gradient ---------------------------------------------------- */

.footer-v2 {
  background: linear-gradient(81.4deg, #8A1339E6, #291135E6), #343434;
  background-size: 200% 200%;
  animation: footer-v2-gradient 10s ease-in-out infinite;
}

@keyframes footer-v2-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================================
   7. Component mechanics
      On the original these were produced at runtime by webflow.js (inline
      styles + generated wrapper elements). Expressed here as plain CSS so
      js/main.js only has to toggle classes. Geometry and timings are
      unchanged: 400ms ease for the menu, 500ms ease for the slider.
   ========================================================================== */

/* --- Mobile menu (data-animation="over-right", data-duration="400") ------ */

@media screen and (max-width: 991px) {
  /* Closed: out of the layout entirely, as Webflow's collapse rule has it. */
  .top-nav[data-collapse="medium"] .top-nav-menu {
    display: none;
  }

  /* Mounted but not yet open — parked off the right edge. Webflow's
     [data-nav-menu-open] forces `display: block`, which is what makes the
     Community accordion span the menu instead of centring on its own width. */
  .top-nav[data-collapse="medium"].is-menu-mounted .top-nav-menu {
    display: block;
    top: 0;
    left: auto;
    right: 0;
    overflow: auto;
    transform: translateX(100%);
    transition: transform 400ms ease;
  }

  .top-nav[data-collapse="medium"].is-menu-open .top-nav-menu {
    transform: translateX(0);
  }
}

/* --- Hamburger -> X (Webflow interaction "top-nav-open"/"top-nav-close") -
   350ms inOutBack on rotation, width and offset.                          */

.top-nav .menu-button-hamburger-line {
  width: 35px;
  transition: transform 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
    width 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
    background 350ms ease-in-out;
}

.top-nav.is-menu-open .menu-button-hamburger-line:nth-child(1) {
  width: 15px;
  transform: translate(-7px, 3px) rotate(45deg);
}

.top-nav.is-menu-open .menu-button-hamburger-line:nth-child(2) {
  transform: rotate(-45deg);
}

.top-nav.is-menu-open .menu-button-hamburger-line:nth-child(3) {
  width: 15px;
  transform: translate(7px, -3px) rotate(45deg);
}

/* --- Community accordion inside the mobile menu ------------------------- */

@media screen and (max-width: 991px) {
  .dropdown-list {
    transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .dropdown-list.w--open {
    display: flex;
  }

  /* Webflow's interaction fades the panel in after it is displayed. */
  .dropdown-list.w--open.is-visible {
    opacity: 1;
  }
}

/* --- Testimonial slider (data-duration="500", data-easing="ease") --------
   Webflow laid the slides out as inline-blocks and translated each one by
   the mask width. Flex gets the same geometry without inline whitespace
   showing up as a gap between slides mid-transition. */

.work-list__slider__mask {
  display: flex;
}

.client-testimonials__slider__slide1 {
  flex: 0 0 100%;
}

.w-slide {
  transition: transform 500ms ease;
}

.previousbutton,
.nextbutton {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.w-slider-dot {
  border: 0;
  padding: 0;
}

/* --- Hero entrance -------------------------------------------------------
   Heading, paragraph and button rise a little and fade in on load, staggered
   so the eye is led down the block rather than everything arriving at once.
   `backwards` holds the start state during the delay, so nothing flashes in
   its final position first. Pure CSS: it runs whether or not main.js does. */

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-home h1,
.hero-home .lead,
.hero-home .bttn {
  animation: hero-rise 800ms cubic-bezier(.16, 1, .3, 1) backwards;
}

.hero-home h1               { animation-delay: 0ms; }
.hero-home .lead            { animation-delay: 120ms; }
.hero-home .lead + .lead    { animation-delay: 180ms; }
.hero-home .bttn            { animation-delay: 240ms; }

/* --- Hero gradient drift -------------------------------------------------
   The same slow wash the footer has, applied to the hero's colour overlay.

   `background-position` is one shorthand across every layer, so the keyframes
   have to restate the photo's `50% 0` on each step or it would drift too --
   only the gradient moves. Sizing the gradient to 200% gives it room to travel
   through; the photo stays `cover`. 20s rather than the footer's 10s: the hero
   is the full viewport, and at 10s the colour shift reads as a pulse.        */

.hero-home {
  background-size: 200% 200%, cover;
  animation: hero-home-gradient 20s ease-in-out infinite;
}

@keyframes hero-home-gradient {
  0%   { background-position: 0% 50%, 50% 0; }
  50%  { background-position: 100% 50%, 50% 0; }
  100% { background-position: 0% 50%, 50% 0; }
}

/* --- Client wall fades out at the bottom ---------------------------------
   The wall only ever shows twelve logos and the client list is longer than
   that, so the last row fades into the background: reads as "and plenty more"
   instead of "that is the complete list".

   The fade spans exactly the last row, so --wall-row has to track the height
   of .client-list__collection__item at each breakpoint: 24px of padding top
   and bottom plus the logo height (72 / 65 / 47 / 65).                     */

.client-list__collection {
  --wall-row: 120px;

  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wall-row)),
    rgba(0, 0, 0, 0.08) 92%, transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wall-row)),
    rgba(0, 0, 0, 0.08) 92%, transparent);
}

@media screen and (max-width: 991px) {
  .client-list__collection {
    --wall-row: 113px;
  }
}

@media screen and (max-width: 767px) {
  .client-list__collection {
    --wall-row: 95px;
  }
}

/* Expo: faithful page-specific layout from the live page. Shared chrome remains global. */
.expo-page { overflow-x: hidden; }
.expo-page .expo-content :is(h1,h2,h3,h4,h5,h6,p) { text-wrap: wrap; }
.expo-page .expo-container { width:100%; margin-left:auto; margin-right:auto; }
.expo-page .expo-hero-heading { font-size:52px; }
.expo-page .expo-hero-subheading { margin-top:10px; }
.expo-page .expo-hero-heart { color:#e73536; }
.expo-page .expo-partner-media { min-width:0; }
.expo-page .expo-hero { background-image:url(/assets/images/expo-hero.jpg);background-position:50%;background-size:cover;padding-top:213px;padding-bottom:213px;position:relative }
.expo-page .expo-container { max-width:1292px;padding-left:24px;padding-right:24px }
.expo-page .expo-hero-wrapper { flex-flow:column;align-items:center;width:810px;max-width:100%;margin-left:auto;margin-right:auto;display:flex;position:relative }
.expo-page .expo-hero-heading { color:var(--white);text-align:center;margin-top:0;margin-bottom:0;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;line-height:120% }
.expo-page .expo-hero-subheading { color:var(--white);text-align:center;letter-spacing:0;text-transform:none;margin-bottom:0;font-family:"Droid Serif (compressed)",Georgia,sans-serif;font-size:18px;font-weight:400;line-height:132% }
.expo-page .expo-hero-logo { margin-bottom:12px }
.expo-page .expo-hero-gradient { background-image:linear-gradient(81.4deg,#8a1339e6,#291135e6);width:100%;height:100%;position:absolute;inset:0 }
.expo-page .expo-alternating-row { grid-column-gap:9.49%;grid-row-gap:9.49%;min-height:420px;display:flex }
.expo-page .expo-alternating-content { flex-flow:column;flex:1;justify-content:center;display:flex }
.expo-page .expo-alternating-content.alternate { order:1 }
.expo-page .expo-alternating-media { flex-flow:column;flex:1;justify-content:center;display:flex }
.expo-page .expo-alternating-media.alternate { order:-1 }
.expo-page .expo-alternating-heading { color:#333;margin-bottom:16px;font-size:36px;line-height:120% }
.expo-page .expo-alternating-description { margin-top:0;margin-bottom:0;line-height:145% }
.expo-page .expo-alternating-image { border-radius:12px;display:block }
.expo-page .expo-alternating-container { grid-column-gap:80px;grid-row-gap:80px;flex-flow:column;display:flex }
.expo-page .expo-reasons { padding-top:96px;padding-bottom:96px }
.expo-page .expo-exceptions { background-color:#f8f7f7;padding-top:64px;padding-bottom:64px }
.expo-page .expo-exceptions-heading { color:#333;flex:1;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:30px;font-weight:600;line-height:120% }
.expo-page .expo-exceptions-container { grid-column-gap:8.44%;grid-row-gap:8.44%;flex-flow:row;justify-content:flex-start;padding-left:7.2%;padding-right:7.2%;display:flex }
.expo-page .expo-exceptions-content { grid-column-gap:24px;grid-row-gap:24px;flex-flow:column;flex:1;display:flex }
.expo-page .expo-exceptions-content-heading { color:#333;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:600;line-height:120% }
.expo-page .expo-exceptions-content-row { grid-column-gap:16px;grid-row-gap:16px;align-items:flex-start;display:flex }
.expo-page .expo-exceptions-icon { color:#e73536;flex:none;width:28px;height:28px }
.expo-page .expo-exceptions-text { margin-top:0;margin-bottom:0;line-height:145% }
.expo-page .expo-us-testimonial-photo { object-fit:cover;border-radius:100px;width:40px;height:40px;display:block }
.expo-page .expo-us-testimonial-photo.expo-us-testimonial-photo-2 { margin-left:-16px }
.expo-page .praise-item { flex-flow:row;padding-left:12px;padding-right:12px;display:flex }
.expo-page .expo-boilerplate { padding-top:152px;padding-bottom:121px;position:relative;overflow:hidden }
.expo-page .expo-boilerplate-backdrop { width:829px;height:446px;position:absolute;top:36%;left:50%;transform:translate(-50%,-50%) }
.expo-page .expo-boilerplate-container { display:flex;position:relative }
.expo-page .expo-boilerplate-content { flex-flow:column;flex:none;justify-content:center;align-items:flex-start;width:53%;display:flex }
.expo-page .expo-boilerplate-media { flex:auto }
.expo-page .expo-boilerplate-image { position:relative;right:-100px }
.expo-page .expo-boilerplate-subheading { color:#e73536;margin-bottom:16px;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:18px;font-weight:500;line-height:120% }
.expo-page .expo-boilerplate-heading { color:var(--dark-slate);margin-bottom:16px;font-size:30px;line-height:120% }
.expo-page .expo-boilerplate-text { color:#1e1b1a;margin-bottom:32px;line-height:145% }
.expo-page .expo-reason { padding-top:48px;padding-bottom:61px;position:relative;overflow:hidden }
.expo-page .expo-reason-container { justify-content:center;align-items:center;display:flex;position:relative }
.expo-page .expo-tiled-background { width:100%;height:100%;position:absolute;inset:0 }
.expo-page .expo-tiled-background.expo-intro { width:100vw;height:887px;position:absolute;top:-183px;left:810px }
.expo-page .expo-tiled-background-tiles { background-image:url(/assets/images/tiled-red-squares.png);background-position:0 0;background-size:1484px 980px;width:100%;height:100%;position:absolute;inset:0 }
.expo-page .expo-reason-wrapper { background-color:#fff;max-width:700px;padding:24px }
.expo-page .expo-reason-heading { color:#333;text-align:center;margin-bottom:16px;font-size:44px;line-height:120% }
.expo-page .expo-reason-description { text-align:center;margin-top:0;margin-bottom:0;line-height:145% }
.expo-page .expo-intro { position:relative;overflow:hidden }
.expo-page .expo-intro-container { padding-top:183px;padding-bottom:262px;position:relative }
.expo-page .expo-description-container { display:flex;position:relative }
.expo-page .expo-facts-container { grid-column-gap:32px;grid-row-gap:32px;padding-left:105px;display:flex }
.expo-page .expo-description-content { width:670px;padding-top:85px;padding-bottom:80px;padding-left:105px }
.expo-page .expo-description-heading { margin-bottom:16px;position:relative }
.expo-page .expo-description-heading-text { color:#333;font-size:36px;line-height:120%;display:inline }
.expo-page .expo-description-heading-text.accent { color:#e73536 }
.expo-page .expo-description-heading-icon { color:#e73536;width:25px;height:25px }
.expo-page .expo-description-description { height:418px;margin-top:0;margin-bottom:0;line-height:145% }
.expo-page .expo-description-image-1 { object-fit:contain;width:375px;position:absolute;top:0;left:722px }
.expo-page .expo-description-image-2 { object-fit:contain;width:281px;position:absolute;top:45px;left:1003px }
.expo-page .expo-fact { flex:1 }
.expo-page .expo-fact-icon { color:#e73536;width:32px;height:32px;margin-bottom:24px;display:block }
.expo-page .expo-fact-heading { color:#000;margin-top:0;margin-bottom:12px;font-size:18px;font-weight:600;line-height:120% }
.expo-page .expo-fact-description { margin-top:0;margin-bottom:0;line-height:145% }
.expo-page .expo-radial-background { object-fit:fill;width:601px;height:826px;position:absolute;top:-30px;left:912px }
.expo-page .expo-intro-progress { width:50%;height:100%;position:absolute;inset:0 auto 0 0 }
.expo-page .expo-partner { padding-bottom:96px;overflow:hidden }
.expo-page .expo-partner-container { grid-column-gap:11.5%;grid-row-gap:11.5%;justify-content:flex-start;align-items:center;display:flex }
.expo-page .expo-partner-media { flex:auto;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;justify-content:flex-end;align-items:center }
.expo-page .expo-partner-content { flex:none;width:46% }
.expo-page .expo-partner-logos { height:64px;margin-bottom:24px }
.expo-page .expo-partner-heading { color:var(--dark-slate);margin-bottom:32px;font-size:30px;line-height:120% }
.expo-page .expo-partner-description { margin-top:0;margin-bottom:0;line-height:145% }
.expo-page .expo-partner-podcast { color:#272728;margin-top:48px;margin-bottom:24px;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:18px;font-weight:500;line-height:120% }
.expo-page .expo-partner-podcast-list { grid-column-gap:8px;grid-row-gap:8px;display:flex }
.expo-page .expo-partner-podcast-link { grid-column-gap:8px;grid-row-gap:8px;cursor:pointer;border:1px solid #eee;border-radius:8px;justify-content:flex-start;align-items:center;padding:12px 16px 12px 12px;transition:background-color .35s cubic-bezier(.645,.045,.355,1);display:flex;box-shadow:0 3px 8px #0000000f }
.expo-page .expo-partner-podcast-link:hover { background-color:var(--gray) }
.expo-page .expo-partner-podcast-icon { width:24px;height:24px }
.expo-page .expo-partner-podcast-label { color:#272728;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:14px;font-weight:600;line-height:100% }
.expo-page .expo-partner-photo { float:right;width:634px;max-width:200%;display:block }
.expo-page .expo-description-point { width:22px;height:22px;position:absolute;top:10px;left:-115px }
.expo-page .expo-intro-point { width:22px;height:22px;margin-left:-11px;position:absolute;top:0;left:50% }
.expo-page .expo-intro-point.bottom { top:auto;bottom:0 }
.expo-page .expo-description-images { width:100%;position:absolute;top:0;left:0 }
.expo-page .expo-hero-heading-wrapper { grid-column-gap:8px;grid-row-gap:8px;justify-content:center;align-items:center;margin-bottom:20px;display:flex }
.expo-page .expo-hero-heart { width:64px;height:64px;display:block }
.expo-page .expo-hero-subheading-link { border-bottom:1px solid var(--white);color:var(--white);transition:border-color .25s cubic-bezier(.645,.045,.355,1) }
.expo-page .expo-hero-subheading-link:hover { border-bottom-color:#0000 }
.expo-page .praise-section { grid-column-gap:16px;grid-row-gap:16px;background-image:url(/assets/images/expo-media-background.png);background-position:-100% 75px;background-repeat:no-repeat;background-size:auto 100%;flex-flow:column;padding:96px 24px 120px;display:flex;overflow:hidden }
.expo-page .praise-heading { color:#333;text-align:center;margin-bottom:48px;padding-left:24px;padding-right:24px;font-size:44px;line-height:120% }
.expo-page .praise-marquee { justify-content:flex-start;margin-left:-12px;margin-right:-12px;display:flex }
.expo-page .praise-item-wrapper { grid-column-gap:24px;grid-row-gap:24px;background-color:#fff;border:1px solid #eee;border-radius:12px;flex-flow:column;flex:none;width:460px;padding:32px;transition:box-shadow .25s cubic-bezier(.645,.045,.355,1);display:flex;box-shadow:0 3px 8px #0000000f }
.expo-page .praise-item-wrapper:hover { box-shadow:0 3px 8px #0003 }
.expo-page .praise-item-text { margin-top:0;margin-bottom:0;font-style:italic;line-height:145% }
.expo-page .praise-item-header { grid-column-gap:16px;grid-row-gap:16px;justify-content:flex-start;align-items:center;display:flex;position:relative }
.expo-page .praise-item-platform { border-radius:100px;width:48px;height:48px;display:block;position:relative;top:-5px }
.expo-page .praise-item-photos { justify-content:flex-start;align-items:flex-start;display:flex;position:relative;top:-2px }
.expo-page .praise-item-source { grid-column-gap:4px;grid-row-gap:4px;flex-flow:column;flex:1;display:flex }
.expo-page .praise-item-name { color:#333;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:14px;font-weight:600;line-height:120% }
.expo-page .praise-item-handle { color:var(--dark-slate);font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:14px;font-weight:500;line-height:120% }
.expo-page .praise-marquee-container { grid-column-gap:24px;grid-row-gap:24px;flex-flow:column;display:flex }
@media screen and (min-width:1920px) {
.expo-page .praise-section { background-position:24% 75px }
}
@media screen and (max-width:991px) {
.expo-page .expo-hero { padding-top:140px;padding-bottom:230px }
.expo-page .expo-hero-heading { font-size:52px }
.expo-page .expo-alternating-row { flex-flow:column;min-height:auto }
.expo-page .expo-alternating-content { order:1 }
.expo-page .expo-alternating-media { order:-1;margin-bottom:40px }
.expo-page .expo-reasons { padding-bottom:80px }
.expo-page .expo-exceptions-container { grid-column-gap:40px;grid-row-gap:40px;flex-flow:column }
.expo-page .expo-boilerplate-backdrop { top:25% }
.expo-page .expo-boilerplate-container { grid-column-gap:106px;grid-row-gap:106px;flex-flow:column }
.expo-page .expo-boilerplate-content { width:100% }
.expo-page .expo-boilerplate-image { position:static }
.expo-page .expo-tiled-background.expo-intro { height:100%;top:0%;left:calc(50vw + 30px) }
.expo-page .expo-intro-container { padding-top:157px;padding-bottom:233px }
.expo-page .expo-facts-container { flex-flow:column;padding-left:80px;padding-right:80px }
.expo-page .expo-description-content { width:100%;padding:40px 80px }
.expo-page .expo-description-description { height:auto }
.expo-page .expo-description-image-1 { object-fit:contain;object-position:30% 50%;width:100%;height:373px;position:static;transform:rotate(-1.5deg) }
.expo-page .expo-description-image-2 { width:225px;position:absolute;top:95px;left:50%;transform:rotate(1.5deg) }
.expo-page .expo-radial-background { top:0%;left:40vw }
.expo-page .expo-partner-container { grid-column-gap:80px;grid-row-gap:80px;flex-flow:column }
.expo-page .expo-partner-content { width:100% }
.expo-page .expo-description-point { left:-90px }
.expo-page .expo-description-images { margin-top:27px;padding-top:42px;padding-bottom:276px;display:block;position:relative }
}
@media screen and (max-width:767px) {
.expo-page .expo-hero { padding-top:161px;padding-bottom:250px }
.expo-page .expo-container { padding-left:16px;padding-right:16px }
.expo-page .expo-hero-heading { font-size:32px }
.expo-page .expo-hero-subheading { font-size:16px }
.expo-page .expo-alternating-media { margin-bottom:32px }
.expo-page .expo-alternating-heading { font-size:30px }
.expo-page .expo-alternating-container { grid-column-gap:64px;grid-row-gap:64px }
.expo-page .expo-reasons { padding-top:48px;padding-bottom:64px }
.expo-page .expo-exceptions { padding-top:48px;padding-bottom:48px }
.expo-page .expo-exceptions-container { padding-left:0%;padding-right:0% }
.expo-page .expo-boilerplate { padding-top:90px;padding-bottom:90px }
.expo-page .expo-boilerplate-backdrop { width:480px;height:258px;top:25% }
.expo-page .expo-reason { padding-top:64px;padding-bottom:64px }
.expo-page .expo-tiled-background.expo-intro { left:33% }
.expo-page .expo-reason-wrapper { margin-left:16px;margin-right:16px;padding:16px }
.expo-page .expo-reason-heading { font-size:36px }
.expo-page .expo-intro-container { padding-bottom:100px }
.expo-page .expo-facts-container { padding-bottom:20px;padding-left:0;padding-right:0 }
.expo-page .expo-description-content { padding-top:0;padding-left:0;padding-right:0 }
.expo-page .expo-description-heading-text { font-size:30px }
.expo-page .expo-intro-progress { width:4px;margin-left:-3px;left:50% }
.expo-page .expo-partner { padding-bottom:64px }
.expo-page .expo-partner-media { justify-content:center;align-items:center;display:flex }
.expo-page .expo-partner-podcast-list { grid-column-gap:12px;grid-row-gap:12px;flex-flow:wrap;justify-content:flex-start }
.expo-page .expo-partner-podcast-link { flex:1 0 40%;justify-content:center;align-items:center }
.expo-page .expo-partner-photo { max-width:150% }
.expo-page .expo-description-point { margin-bottom:24px;margin-left:-11px;position:relative;top:0;left:50% }
.expo-page .expo-description-images { margin-bottom:86px;padding-top:60px;padding-bottom:220px }
.expo-page .expo-hero-heading-wrapper { margin-bottom:16px }
.expo-page .expo-hero-heart { width:48px;height:48px }
.expo-page .praise-section { padding-bottom:96px;padding-left:16px;padding-right:16px }
.expo-page .praise-heading { font-size:36px }
.expo-page .praise-item-wrapper { max-width:calc(100vw - 32px) }
}
@media screen and (max-width:479px) {
.expo-page .expo-hero { padding-bottom:300px }
.expo-page .expo-hero-heading { font-size:26px }
.expo-page .expo-reason-heading { font-size:32px }
.expo-page .expo-hero-heading-wrapper { margin-bottom:12px }
.expo-page .expo-hero-heart { width:44px;height:44px }
.expo-page .praise-heading { font-size:32px }
.expo-page .praise-item-wrapper { padding:24px 16px }
.expo-page .praise-item-header { flex-flow:column }
.expo-page .praise-item-platform { width:40px;height:40px;position:absolute;top:-2px;right:0 }
.expo-page .praise-item-source { order:1 }
}

            .expo-intro-progress svg {
              display: none;
            }

            @media (min-width: 768px) {
              .expo-intro-progress svg.expo-intro-progress-desktop {
                display: block;
                --expo-intro-progress-gutter: 11.72%;
                /* the svg has a horizontal padding to accomodate the traveling comet */
                --expo-intro-progress-width: calc(100% + var(--expo-intro-progress-gutter) * 2);
                height: 100%;
                width: var(--expo-intro-progress-width);
                position: absolute;
                top: 0;
                left: calc(var(--expo-intro-progress-gutter) * -1);
                bottom: 0;
              }
            }

            @media (max-width: 767px) {
              .expo-intro-progress svg.expo-intro-progress-mobile {
                display: block;
                height: 100%;
                position: absolute;
                top: 0;
                left: calc(50% - 1px);
                bottom: 0;
                opacity: 0.5;
              }
            }


@media screen and (max-width: 479px) {
  .client-list__collection {
    --wall-row: 113px;
  }
}

/* Preserve page-specific link sizing and the original square Ignite CTA. */
.expo-page .expo-hero-subheading-link { font-size:16px; }
.expo-page .expo-boilerplate-text { margin-top:4px; }
.expo-page .expo-boilerplate-content .bttn { letter-spacing:.2px; border:0; border-radius:0; padding:16px 40px; font-weight:500; }
.expo-page .praise-marquee-container { gap:16px; }
@media (min-width:992px) {
  .expo-page .expo-description-image-1 { transform:translateX(-5px) rotate(-2deg); }
  .expo-page .expo-description-image-2 { transform:translateX(-3px) rotate(1.75deg); }
}
/* The live media carousel has five cards above and four below. */
.expo-page .expo-media-viewport { margin:0 -12px; }
.expo-page .praise-marquee { width:max-content; margin:0; animation:expo-media-scroll var(--marquee-duration) linear infinite; }
.expo-page .praise-marquee:nth-child(2) { animation-direction:reverse; }
.expo-page .praise-marquee:focus-within { animation-play-state:paused; }
.expo-page .praise-item-wrapper { color:var(--dark-slate); }
.expo-page .praise-item-photos, .expo-page .praise-item-platform { flex-shrink:0; }
.expo-page .expo-description-images { pointer-events:none; }
.expo-page .expo-description-heading-text { margin:0; }
.expo-page .expo-fact-icon svg, .expo-page .expo-partner-podcast-icon svg, .expo-page .expo-exceptions-icon svg { display:block; width:100%; height:100%; }
@keyframes expo-media-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .expo-page .praise-marquee { animation:none; }
  .expo-page .expo-media-viewport { overflow-x:auto; }
  .expo-page .praise-item[aria-hidden="true"] { display:none; }
}

/* Match the live Expo chrome locally without changing other pages. */
.expo-page .top-nav-wrapper { padding-left:10px; padding-right:10px; }
.expo-page .top-nav-brand { padding:10px; }
.expo-page .top-nav-menu > .top-nav-menu-link,
.expo-page .top-nav-menu > .top-nav-menu-link-w-icon { padding-left:20px; padding-right:20px; }
@media (max-width:991px) { .expo-page .top-nav-brand { padding-left:20px; padding-right:20px; } }

.expo-page .bottom-cta-content p { margin-top:4px; line-height:26px; }
.expo-page .bottom-cta-button { letter-spacing:.2px; border:0; border-radius:0; padding:16px 40px; font-weight:500; }
.expo-page .footer-cta-row h4 { line-height:24px; }
.expo-page .bottom-cta-container { width:100%;padding-left:24px;padding-right:24px;position:relative }
.expo-page .footer-v2 { padding-top:72px;padding-bottom:72px;position:relative }
.expo-page .footer-container { z-index:1;grid-column-gap:64px;grid-row-gap:64px;flex-direction:row;flex:1;justify-content:space-between;align-items:flex-start;width:100%;max-width:1350px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;display:flex;position:relative }
.expo-page .footer-nav { flex-flow:column;flex:auto;justify-content:space-between;display:flex }
.expo-page .footer-cta { flex:0 640px }
.expo-page .footer-cta > h3 { color:#fff;margin-bottom:32px;font-size:32px;line-height:120% }
.expo-page .footer-cta-box { background-color:#ffffff1a;border-radius:12px;padding:24px }
.expo-page .div-block-24 { grid-column-gap:32px;grid-row-gap:32px;flex-flow:column;display:flex;position:relative }
.expo-page .footer-cta-row h4 { color:#fffc;margin-top:0;margin-bottom:12px;font-size:24px;font-weight:500 }
.expo-page .footer-cta-row { grid-column-gap:4px;grid-row-gap:4px;flex-flow:column;transition:opacity .35s cubic-bezier(.645,.045,.355,1);display:flex }
.expo-page .footer-cta-row:hover { opacity:.8 }
.expo-page .footer-cta-row-label { color:#fffc;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:13px;font-weight:500;line-height:120% }
.expo-page .footer-cta-row-value { color:var(--white);font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:28px;font-weight:600;line-height:120% }
.expo-page .footer-cta-social { position:absolute;bottom:26px;right:24px }
.expo-page .footer-cta-social-link { margin-left:5px }
.expo-page .footer-nav-logo { width:128px;color:var(--white) }
.expo-page .footer-nav-wrapper { grid-column-gap:44px;grid-row-gap:24px;flex-flow:wrap;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;margin-top:32px;display:grid }
.expo-page .footer-nav-col { flex:auto }
.expo-page .footer-nav-col-label { opacity:.5;color:#e0e0e1;margin-bottom:8px;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:13px;font-weight:600;line-height:120% }
.expo-page .footer-nav-col-link { color:var(--white);white-space:nowrap;padding-top:4px;padding-bottom:4px;font-family:"Montserrat (compressed)",Trebuchet MS,sans-serif;font-size:14px;font-weight:600;line-height:135%;transition:opacity .35s cubic-bezier(.645,.045,.355,1);display:block }
.expo-page .footer-nav-col-link:hover { opacity:.8 }
.expo-page .footer-tiled-background-1 { opacity:.15;width:200%;height:112px;position:absolute;inset:0 0 0 calc(50% - 230px) }
.expo-page .footer-tiled-background-tiles { background-image:url(/assets/images/tiled-red-squares.png);background-position:0 0;background-size:1484px 980px;width:100%;height:100%;position:absolute;inset:0 }
.expo-page .footer-tiled-background-2 { opacity:.15;width:200%;height:84px;position:absolute;inset:112px 0 0 calc(50% - 62px) }
.expo-page .footer-tiled-background-3 { opacity:.15;width:200%;height:84px;position:absolute;inset:196px 0 0 calc(50% + 50px) }
.expo-page .footer-tiled-background-4 { opacity:.15;width:200%;height:200%;position:absolute;inset:280px 0 0 calc(50% + 162px) }
.expo-page .bottom-cta-v2 { background-color:var(--white);padding-top:146px;padding-bottom:146px;position:relative;overflow:hidden }
.expo-page .bottom-cta-wrapper { grid-column-gap:72px;grid-row-gap:72px;background-color:#f1f1f1a1;border-radius:12px;width:100%;max-width:1328px;margin-left:auto;margin-right:auto;padding:56px 64px 56px 38px;display:flex;position:relative }
.expo-page .bottom-cta-content { flex:0 0 54%;max-width:640px }
.expo-page .bottom-cta-photos { flex:1;height:258px;position:relative }
.expo-page .bottom-cta-content h2 { color:var(--dark-slate);margin-bottom:10px;font-size:36px;line-height:120% }
.expo-page .bottom-cta-content p { margin-bottom:32px }
.expo-page .bottom-cta-img-1 { object-fit:cover;width:188px;max-width:500%;height:295px;display:block;position:absolute;top:-127px;right:321.344px }
.expo-page .bottom-cta-img-2 { object-fit:cover;width:294px;max-width:500%;height:264px;display:block;position:absolute;top:133px;right:0 }
.expo-page .bottom-cta-tiled-background-tiles { background-image:url(/assets/images/tiled-red-squares.png);background-position:0 100%;background-size:1484px 980px;width:100%;height:100%;position:absolute;inset:0 }
.expo-page .bottom-cta-tiled-background-4 { opacity:.6;width:200%;height:112px;position:absolute;inset:auto 0 140px calc(50% - 650px) }
.expo-page .bottom-cta-tiled-background-5 { opacity:.6;width:200%;height:84px;position:absolute;inset:auto 0 56px calc(50% - 482px) }
.expo-page .bottom-cta-tiled-background-6 { opacity:.6;width:200%;height:56px;position:absolute;inset:auto 0 0 calc(50% - 342px) }
.expo-page .bottom-cta-tiled-background-2 { opacity:.6;width:200%;height:112px;position:absolute;inset:auto 0 420px calc(50% - 884px) }
.expo-page .bottom-cta-img-3 { object-fit:cover;width:240px;max-width:500%;height:150px;display:block;position:absolute;top:198px;right:321.344px }
.expo-page .bottom-cta-img-4 { object-fit:cover;width:175px;max-width:500%;height:210px;position:absolute;top:-107px;right:119.328px }
.expo-page .bottom-cta-tiled-background-3 { opacity:.6;width:200%;height:168px;position:absolute;inset:auto 0 252px calc(50% - 762px) }
.expo-page .bottom-cta-tiled-background-1 { opacity:.6;width:200%;height:100%;position:absolute;inset:auto 0 532px calc(50% - 996px) }
.expo-page .footer-cta-row-label-muted { opacity:.75;letter-spacing:.5px;font-size:12px;font-weight:500 }
.expo-page .footer-nav-col-link-muted { opacity:.75;letter-spacing:.5px;font-size:12px }
@media screen and (min-width:1280px) {
.expo-page .footer-container { justify-content:space-between;align-items:flex-start }
.expo-page .bottom-cta-img-3, .expo-page .bottom-cta-img-4 { display:block }
}
@media screen and (min-width:1920px) {
.expo-page .bottom-cta-photos { flex:0 auto;width:514px;height:258px }
}
@media screen and (max-width:991px) {
.expo-page .footer-container { z-index:1;flex-flow:column }
.expo-page .footer-cta { flex-basis:auto }
.expo-page .footer-nav-logo { z-index:1;position:relative }
.expo-page .footer-nav-logo-link.w--current { justify-content:center;align-items:center }
.expo-page .footer-tiled-background-1 { height:224px;left:112px }
.expo-page .footer-tiled-background-2 { height:112px;top:224px;left:168px }
.expo-page .footer-tiled-background-3 { height:308px;top:336px;left:364px }
.expo-page .footer-tiled-background-4 { top:644px;left:504px }
.expo-page .bottom-cta-v2 { padding-top:128px;padding-bottom:164px }
.expo-page .bottom-cta-wrapper { flex-flow:column;padding-right:38px }
.expo-page .bottom-cta-content { flex-flow:column;order:-1;justify-content:center;align-self:center;align-items:center;display:flex }
.expo-page .bottom-cta-photos { flex:0 258px;order:1;align-self:center;width:514px;margin-top:137px;margin-right:-100px }
.expo-page .bottom-cta-content h2 { text-align:center;margin-bottom:24px }
.expo-page .bottom-cta-content p { text-align:center;margin-bottom:48px }
.expo-page .bottom-cta-tiled-background-4, .expo-page .bottom-cta-tiled-background-5, .expo-page .bottom-cta-tiled-background-6, .expo-page .bottom-cta-tiled-background-2 { display:none }
.expo-page .bottom-cta-img-4 { display:block }
.expo-page .bottom-cta-tiled-background-3 { display:none }
.expo-page .bottom-cta-tiled-background-1 { width:100%;inset:0 }
}
@media screen and (max-width:767px) {
.expo-page .footer-container { align-items:stretch }
.expo-page .footer-cta > h3 { text-align:center;margin-bottom:24px;font-size:24px }
.expo-page .footer-cta-row { align-items:center }
.expo-page .footer-cta-row-value { font-size:24px }
.expo-page .footer-cta-social { justify-content:center;align-items:center;margin-top:12px;display:flex;position:static }
.expo-page .footer-nav-logo-link { align-self:center }
.expo-page .footer-nav-logo-link.w--current { display:flex }
.expo-page .footer-nav-wrapper { grid-row-gap:44px;flex-flow:column;align-items:center;margin-top:44px;display:flex }
.expo-page .footer-nav-col { flex-flow:column;justify-content:center;align-items:center;display:flex }
.expo-page .footer-tiled-background-2 { height:280px }
.expo-page .footer-tiled-background-3 { top:504px;left:224px }
.expo-page .footer-tiled-background-4 { top:812px;left:308px }
}
@media screen and (max-width:479px) {
.expo-page .footer-cta-social { margin-top:24px }
.expo-page .footer-nav-logo { position:static }
.expo-page .bottom-cta-v2 { padding-bottom:124px }
.expo-page .bottom-cta-wrapper { padding:48px 24px }
.expo-page .bottom-cta-photos { margin-top:56px;margin-right:-88px;transform:scale(.8) }
}
@media (max-width:991px) { .expo-page .bottom-cta-button { padding-left:32px; padding-right:32px; } }
@media (max-width:767px) { .expo-page .expo-partner-photo { width:100vw; flex:none; } }


/* --- Recent-clients carousel --------------------------------------------
   The original bar was a static row of six logos. This runs all fifteen past
   in a continuous loop, the way expo.dev's does: one linear, infinite
   translate with no easing and no pause, plus a mask that fades both edges.

   The track holds the list twice, so translating it by exactly -50% lands the
   second copy where the first started and the loop is seamless. Speed is what
   is being matched, not duration -- expo travels ~35px/s, so the duration is
   derived from the track width (15 x 180px = 2700px per pass).            */

.clients-marquee {
  --marquee-duration: 75s;   /* 15 x 174px at ~35px/s */
  --marquee-fade: 96px;

  flex: 1;
  min-width: 0;
  overflow: hidden;

  /* Opaque through the middle, transparent at both ends. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)), transparent);
}

.clients-marquee__track {
  width: max-content;
  align-items: center;
  display: flex;
  animation: clients-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

@keyframes clients-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Spacing lives on the item, not as a flex `gap`: the gap between the two
   halves has to match the gap between logos or the seam shows. */
.clients-marquee__item {
  flex: 0 0 auto;
  width: 150px;
  margin-right: var(--space-md);
}

@media screen and (max-width: 767px) {
  .clients-marquee {
    --marquee-fade: 64px;
  }
}

@media screen and (max-width: 479px) {
  .clients-marquee {
    --marquee-duration: 62s;   /* 15 x 144px at the same ~35px/s */
    --marquee-fade: 40px;
  }

  .clients-marquee__item {
    width: 120px;
    margin-right: var(--space-md);
  }
}

/* ==========================================================================
   8. Inner pages

   /software-development, /work, /about and /contact. Everything here is built
   from the existing tokens — no new sizes, colours or spacing values. The type
   comes from the element scale, so a heading in a card is just an <h3>.
   ========================================================================== */

/* --- Page hero (.hero-sub) -----------------------------------------------
   The real inner-page hero: a full-bleed photograph per page, content in the
   700px column. Kept 1:1 with the live site apart from the spacing, which now
   comes from the scale, and the type, which comes from the element rules. */

.hero-sub {
  display: flex;
  align-items: center;
  min-height: 520px;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--mulberry);
}

/* /software-development carries a plum-to-crimson wash over the photograph,
   which is what keeps the white heading legible against it. */
.hero-img--apps {
  background-image:
    linear-gradient(160deg, rgba(30, 10, 40, .88), rgba(150, 30, 60, .78)),
    url(../assets/images/hero-apps.jpg);
}
.hero-img--work    { background-image: url(../assets/images/hero-work.jpg); }
.hero-img--company { background-image: url(../assets/images/hero-company.jpg); }
.hero-img--contact { background-image: url(../assets/images/hero-contact.jpg); }
.hero-img--open-source { background-image: url(../assets/images/community/hero-open-source.jpg); }
.hero-img--podcasts    { background-image: url(../assets/images/community/hero-podcasts.jpg); }
.hero-img--talks       { background-image: url(../assets/images/community/hero-talks.jpg); }
.hero-img--newsletters { background-image: url(../assets/images/community/hero-newsletters.jpg); }

/* The eyebrow over a photograph needs the tinted white, not dark slate. */
.hero-sub h5 {
  color: var(--link-on-dark);
  margin-bottom: var(--space-md);
}

.hero-sub .bttn {
  margin-top: var(--space-lg);
}

@media screen and (max-width: 991px) {
  .hero-sub {
    min-height: 420px;
  }
}

/* A name that must not break, where a non-breaking space cannot reach. */
.nowrap {
  white-space: nowrap;
}

/* --- Alternating image / text blocks (.alt-blocks) ------------------------
   The technology blocks on /software-development. The photograph runs off the
   outer edge of the viewport while the copy sits in a 500px column on the
   other side; each block flips the pair. Below 992px the photograph leads and
   both stack, so the reading order stays image-then-copy on every block. */

.alt-blocks {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* A boundary between two blocks is one --space-xl, not two. Where .alt-blocks
   follows a padded section, that section's padding already carries the gap. */
.section + .alt-blocks {
  padding-top: 0;
}

.alt-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.alt-block + .alt-block {
  margin-top: var(--space-xl);
}

.alt-block--flip {
  justify-content: flex-start;
}

.alt-block__content {
  max-width: 500px;
  margin-left: 8%;
  margin-right: 8%;
}

.alt-block--flip .alt-block__content {
  margin-left: 10%;
  margin-right: 0;
}

.alt-block__content > :last-child {
  margin-bottom: 0;
}

.alt-block__media {
  width: 44vw;
}

.alt-block__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 991px) {
  .alt-block {
    flex-wrap: wrap;
  }

  .alt-block__media {
    order: -1;
    width: 80vw;
    margin: 0 auto var(--space-lg);
  }

  .alt-block__content,
  .alt-block--flip .alt-block__content {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 479px) {
  .alt-block__media {
    width: 100vw;
  }
}

/* --- Generic section ----------------------------------------------------- */

.section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.section--tint {
  background-color: var(--light-gray);
}

/* A section's own intro column, then full-width content beneath it. */
.section .measure + .feature-grid,
.section .measure + .checklist,
.section .measure + .split {
  margin-top: var(--space-lg);
}

/* --- Feature grid -------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.feature-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-grid__item {
  margin: 0;
  padding: 0;
}

.feature-grid__item h3 {
  font-size: 18px;
  line-height: 133%;
  margin-bottom: var(--space-xs);
}

.feature-grid__item p {
  margin-bottom: var(--space-xs);
}

@media screen and (max-width: 991px) {
  .feature-grid,
  .feature-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .feature-grid,
  .feature-grid--2 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --- Checklist ----------------------------------------------------------- */

.checklist {
  max-width: 700px;
  margin: var(--space-md) auto 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  border-top: 1px solid var(--gray);
  margin: 0;
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  position: relative;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 163%;
}

.checklist li:last-child {
  border-bottom: 1px solid var(--gray);
}

.checklist li::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: 999px;
  background: var(--crimson);
}

.checklist b {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: .5px;
}

/* --- Split: copy beside a mark ------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  max-width: 1040px;
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray);
}

.split--flip {
  grid-template-columns: minmax(0, 1fr) 200px;
}

.split--flip .split__media {
  order: 2;
}

.split__media img {
  width: 100%;
  max-width: 96px;
  height: auto;
}

.split__body h3 {
  margin-bottom: var(--space-md);
}

@media screen and (max-width: 767px) {
  .split,
  .split--flip {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .split--flip .split__media {
    order: 0;
  }
}

/* --- Contact form -------------------------------------------------------- */

.form {
  margin-top: var(--space-lg);
}

.form__field {
  margin-bottom: var(--space-md);
}

/* Two fields side by side; one column once there is no room for two. */
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-md);
}

@media screen and (max-width: 479px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

.form__label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
}

.form__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--light-slate);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background: var(--white);
  color: var(--dark-slate);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 163%;
  transition: border-color .3s;
}

.form__input:focus {
  outline: none;
  border-color: var(--crimson);
}

.form__input--area {
  resize: vertical;
  min-height: 180px;
}

.form__hint {
  margin: var(--space-xs) 0 0;
  font-size: 14px;
  color: var(--neutral500);
}

.form__label .form__hint {
  display: inline;
  margin: 0;
  font-weight: 400;
  color: var(--neutral500);
}

/* --- /about: a block of the page ----------------------------------------
   Subtitle, heading, then whatever the block holds — prose beside a picture,
   or the team grid. Upstream calls these .block__group. */

.block-group {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.block-group__heading {
  max-width: 780px;
  margin-bottom: var(--space-lg);
}

.block-group__heading .lead {
  margin-bottom: var(--space-xs);
}

.block-group__heading h2 {
  margin-bottom: 0;
}

/* --- Prose beside a picture ---------------------------------------------- */

.narrative {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.narrative__copy > :last-child {
  margin-bottom: 0;
}

.narrative__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .narrative {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --- Team grid ------------------------------------------------------------
   Four up on desktop. The photographs arrive at assorted aspect ratios, so
   they are cropped to a common 3:4 to keep the rows level. */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* These are grid cells, not bullets: drop the list indent and rhythm. */
.team-grid__member {
  margin: 0;
  padding-left: 0;
}

.team-grid__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  margin-bottom: var(--space-md);
}

.team-grid__name {
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 133%;
  font-weight: 600;
}

.team-grid__role {
  margin-bottom: 0;
  color: var(--neutral500);
}

@media screen and (max-width: 991px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* --- /contact: form beside the sidebar ----------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* The card lifts into the hero and the sidebar drops the same distance below
   it, which is the shape of the live page. The tinted section under them both
   loses its own top padding so the offsets are the only thing setting the
   vertical position. */
.section--contact {
  padding-top: 0;
}

.contact-form {
  min-width: 0;
  margin-top: calc(-1 * var(--space-lg));
  padding: var(--space-lg);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(38, 36, 39, .08);
}

.contact-aside {
  margin-top: var(--space-lg);
}

/* The form heading is centred and sits on one line, matching upstream. */
.contact-form h2 {
  font-size: 32px;
  line-height: 120%;
  text-align: center;
  text-wrap: balance;
}

.contact-form .form {
  margin-top: var(--space-md);
}

.contact-form .form > :last-child {
  margin-bottom: 0;
}

/* The shared .w-slider is a fixed 300px on a grey plate — right for the
   testimonial band, wrong here, where the slide is a portrait plus a caption. */
.form__notice {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 145%;
}

.form__notice--ok {
  background: var(--light-gray);
  color: var(--dark-slate);
  border-left: 3px solid var(--crimson);
}

.form__notice--bad {
  background: #fdecec;
  color: var(--crimson-dark);
  border-left: 3px solid var(--crimson);
}

.contact-success {
  min-width: 0;
  padding: 0 20px 20px;
  text-align: center;
}

.contact-success h2 {
  margin-bottom: 0;
  font-size: 28px;
  line-height: 110%;
}

.contact-success__gif {
  padding: 20px 0;
}

.contact-success__gif iframe {
  display: block;
  width: 180px;
  height: 201px;
  margin: 0 auto;
  border: 0;
}

.contact-success__confirmation,
.contact-success__refresh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 auto;
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.contact-success__brands {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 0;
}

.contact-success__brands h3 {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
}

.contact-success__slider {
  min-width: 0;
  width: 100%;
  height: 260px;
  background: transparent;
}

.contact-success__slider .w-slider-mask {
  height: 100%;
  padding-bottom: var(--space-md);
}

.contact-success__slide {
  width: 100%;
  height: 100%;
}

.contact-success__brand-card {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px 40px 28px;
  border-radius: 4px;
  background: var(--light-gray);
  color: var(--crimson);
  text-align: left;
  text-decoration: none;
}

.contact-success__brand-logo {
  flex: 0 1 16%;
  align-self: center;
  margin-right: 5%;
}

.contact-success__brand-logo img {
  display: block;
  width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.contact-success__brand-copy {
  display: flex;
  min-width: 0;
  flex: 0 1 90%;
  flex-direction: column;
  justify-content: space-between;
  color: var(--dark-slate);
}

.contact-success__brand-copy strong {
  margin: 10px 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.contact-success__brand-copy > span:not(.contact-success__brand-link) {
  margin: 4px 0 16px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 26px;
}

.contact-success__brand-link {
  padding-top: 20px;
  color: var(--crimson);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.contact-success__arrow {
  width: 32px;
  height: 32px;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
}

.contact-success__arrow.w-slider-arrow-left {
  left: 8px;
  background-image: url(../assets/images/circle-arrow-left.svg);
}

.contact-success__arrow.w-slider-arrow-right {
  right: 8px;
  background-image: url(../assets/images/circle-arrow-right.svg);
}

.contact-success__dots {
  display: none;
}

.contact-success__refresh a {
  padding-bottom: 3px;
  color: var(--crimson);
  font-size: 15px;
  line-height: 18px;
  text-decoration: none;
}

.contact-success__refresh a:hover {
  text-decoration: underline;
}

.contact-error {
  margin-top: 42px;
  padding: 38px 38px 42px;
  border-radius: 8px;
  background: var(--light-gray);
  color: var(--crimson-dark);
  text-align: left;
}

.contact-error h3 {
  margin-bottom: var(--space-md);
  color: var(--crimson-dark);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

.contact-error p {
  margin: 0;
  color: var(--crimson-dark);
  font-size: 16px;
  line-height: 24px;
}

.contact-error a {
  color: var(--crimson-dark);
}

.form__counter {
  margin: var(--space-xs) 0 0;
  color: var(--neutral500);
  font-size: 13px;
  line-height: 145%;
}

.form__counter[hidden] {
  display: none;
}

.contact-form button:disabled {
  cursor: wait;
  opacity: .65;
}

/* Off-canvas rather than display:none — a bot reading the DOM still sees it. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-aside__slider {
  position: relative;
  height: 550px;
  margin-bottom: var(--space-lg);
  background: none;
  text-align: left;
}

.contact-aside__slider .w-slider-mask,
.contact-aside__slider .w-slide {
  height: auto;
}

/* Webflow's 32px outlined controls sit together at the bottom-left of the
   fixed-height sales carousel, below its caption. */
.contact-aside__slider .w-slider-arrow-left,
.contact-aside__slider .w-slider-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  right: auto;
  bottom: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--crimson);
  transition: opacity .3s;
}

.contact-aside__slider .w-slider-arrow-left svg,
.contact-aside__slider .w-slider-arrow-right svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
}

.contact-aside__slider .w-slider-arrow-left  { left: 0; }
.contact-aside__slider .w-slider-arrow-right { left: 38px; }

.contact-aside__slider .w-slider-arrow-left:hover,
.contact-aside__slider .w-slider-arrow-right:hover {
  opacity: .7;
}

.contact-aside__slider .w-slider-arrow-left:focus-visible,
.contact-aside__slider .w-slider-arrow-right:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

.contact-aside__photo {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 10;
  object-fit: cover;
  margin-bottom: var(--space-md);
}

.contact-aside__slider .w-slide p:last-child {
  margin-bottom: 0;
}

.contact-aside__other h3 {
  margin-bottom: var(--space-md);
}

.contact-aside__row {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--gray);
}

.contact-aside__row:last-child {
  border-bottom: 1px solid var(--gray);
}

.contact-aside__row h4 {
  margin-bottom: var(--space-xs);
}

.contact-aside__row p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  .contact-form {
    padding: var(--space-md);
  }

  .contact-success {
    padding-right: 0;
    padding-left: 0;
  }

  .contact-success__brand-card {
    padding-right: var(--space-md);
    padding-left: var(--space-md);
  }
}

/* ==========================================================================
   9. Community

   /community/building-community, open-source, podcasts, talks, newsletters.
   Same tokens as everywhere else; the only new idea here is the tall
   photographic hero, which the other four pages do not use.
   ========================================================================== */

/* --- A small caps label, used all over this section ---------------------- */

.label {
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 145%;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--neutral500);
}

/* --- Tall photographic hero ---------------------------------------------- */

.hero-full {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 900px;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  overflow: hidden;
  background-color: var(--mulberry);
}

/* Three layers, stacked explicitly. The shared .w-slider-mask carries
   z-index: 1 from the Webflow base, which would otherwise lift the
   photograph above the wash and leave the heading sitting on bare image. */
.hero-full__slider,
.hero-full__slider .w-slider-mask,
.hero-full__slider .w-slide {
  position: absolute;
  inset: 0;
  height: 100%;
  background: none;
}

.hero-full__slider {
  z-index: 0;
}

.hero-full__slider .w-slider-mask {
  z-index: auto;
}

.hero-full__slider .w-slide {
  position: relative;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The wash that keeps the heading legible whichever photograph is showing.
   Same mulberry-to-plum pair the footer uses, at the angle the live page has. */
.hero-full__scrim {
  z-index: 1;
  position: absolute;
  inset: 0;
  background-image: linear-gradient(38deg, rgba(138, 19, 57, .9), rgba(41, 17, 53, .9));
}

.hero-full__content {
  position: relative;
  z-index: 2;
}

/* The one display size on the site: a full-bleed photographic hero carries a
   heading the page-level scale is too small for. Scales down with the page. */
.hero-full h1 {
  max-width: 900px;
  font-size: clamp(40px, 5.4vw, 77px);
  line-height: 100%;
}

.hero-full__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.hero-full__labels li {
  margin: 0;
  padding-left: 0;
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 145%;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media screen and (max-width: 991px) {
  .hero-full {
    min-height: 620px;
  }

  .hero-full__labels {
    justify-content: flex-start;
  }
}

/* --- Offset intro + gallery ---------------------------------------------- */

.offset-intro__statement {
  max-width: 790px;
}

/* The "offset" of offset-intro: the prose sits in from the heading's left
   edge, two equal columns wide. */
.offset-intro__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 790px;
  margin-top: var(--space-lg);
  margin-left: auto;
}

.offset-intro__columns > div > :last-child {
  margin-bottom: 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-xl);
}

/* The wide photograph is shorter and carries the caption; the tall one runs
   the full height of the row beside it. */
.gallery__wide img {
  aspect-ratio: 51 / 38;
  object-fit: cover;
}

.gallery__tall img {
  aspect-ratio: 51 / 52;
  object-fit: cover;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery__wide {
  margin: 0;
}

.gallery__wide figcaption {
  margin-top: var(--space-md);
  color: var(--neutral500);
  font-size: 16px;
  line-height: 163%;
}

@media screen and (max-width: 767px) {
  .offset-intro__columns,
  .gallery {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --- Card grid ("Experts at our craft") ----------------------------------
   Two per row, the logo sitting beside the copy rather than above it. */

.cta-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.cta-cards__item {
  margin: 0;
  padding-left: 0;
}

.cta-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-md);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(38, 36, 39, .12);
  text-decoration: none;
  transition: box-shadow .3s, transform .3s;
}

.cta-card:hover {
  box-shadow: 0 4px 16px rgba(38, 36, 39, .18);
  transform: translateY(-2px);
}

.cta-card__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
}

.cta-card__logo img {
  display: block;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

.cta-card__body {
  display: block;
}

.cta-card__title {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 133%;
  font-weight: 600;
}

.cta-card__text {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--dark-slate);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 163%;
}

.cta-card .link-action {
  color: var(--crimson);
}

/* `li a:hover` underlines links in lists, which is right for a list of links
   and wrong for a card whose whole face is one <a>: text-decoration inherits
   down, so the heading and body pick it up too. Card links opt out and
   underline only their own call to action. */
.cta-card:hover,
.cta-card:focus-visible,
.talk:hover,
.talk:focus-visible {
  text-decoration: none;
}

.cta-card:hover .link-action,
.cta-card:focus-visible .link-action {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .cta-cards {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  .cta-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Large feature rows --------------------------------------------------
   Cover photograph, then a narrow identity column beside the detail. */

.lg-feature {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.section + .lg-feature,
.talks-grid-section + .lg-feature {
  padding-top: 0;
}

.lg-feature__item + .lg-feature__item {
  margin-top: var(--space-xl);
}

.lg-feature__cover {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background-color: var(--dark-slate);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.lg-feature__hosts {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-feature__hosts li {
  width: 72px;
  margin: 0;
  padding-left: 0;
  text-align: center;
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 145%;
}

.lg-feature__hosts img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  margin-bottom: var(--space-xs);
}

.lg-feature__trailer-bttn {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background: rgba(38, 36, 39, .6);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background-color .3s;
}

.lg-feature__trailer-bttn:hover {
  background: var(--dark-slate);
}

.lg-feature__trailer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
}

.lg-feature__body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.lg-feature__logo {
  display: block;
  max-width: 180px;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
}

.lg-feature__detail > :last-child {
  margin-bottom: 0;
}

.lg-feature__detail .label {
  margin-top: var(--space-md);
}

.lg-feature__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-feature__links li {
  margin: 0;
  padding-left: 0;
}

@media screen and (max-width: 991px) {
  .lg-feature__body {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .lg-feature__cover {
    aspect-ratio: 16 / 9;
  }

  .lg-feature__hosts li {
    width: 56px;
  }
}

/* --- Talks grid ----------------------------------------------------------- */

.talks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.talks-grid__item {
  margin: 0;
  padding-left: 0;
}

.talk {
  display: block;
  text-decoration: none;
}

.talk__cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background-color: var(--dark-slate);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* One upstream row ships without artwork; keep the tile, lose the photo. */
.talk__cover[data-blank] {
  background-image: linear-gradient(135deg, var(--dark-slate), var(--mulberry));
}

.talk__watch {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background: rgba(38, 36, 39, .75);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .5px;
  transition: background-color .3s;
}

.talk:hover .talk__watch {
  background: var(--crimson);
}

.talk__meta {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.talk__avatar {
  flex: none;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 999px;
}

.talk__title {
  display: block;
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 143%;
  font-weight: 500;
}

.talk:hover .talk__title {
  text-decoration: underline;
}

.talk__who {
  display: block;
  margin-top: var(--space-xs);
  color: var(--neutral500);
  font-size: 16px;
  line-height: 143%;
}

@media screen and (max-width: 991px) {
  .talks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  .talks-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Feature row beside a subscribe box (/community/newsletters) --------- */

.feature-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-lg);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) 0;
}

/* The feature row is already a section; inside this grid it is just a column. */
.feature-2col .lg-feature {
  padding: 0;
}

.feature-2col .lg-feature .container {
  width: auto;
  max-width: none;
  padding: 0;
}

.feature-2col .signup {
  padding-top: var(--space-md);
}

.signup h3 {
  margin-bottom: var(--space-md);
}

.signup .form {
  margin-top: 0;
}

@media screen and (max-width: 991px) {
  .feature-2col {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.pagination__link {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--crimson);
  text-decoration: none;
}

.pagination__link:hover,
.pagination__link:focus-visible {
  text-decoration: underline;
}

.pagination__count {
  color: var(--neutral500);
  font-size: 14px;
  line-height: 143%;
}

/* --- Standalone client quote ---------------------------------------------
   Quotes are the one thing on this site that centre. */

.quote-block {
  background-color: var(--light-gray);
}

/* The base blockquote rule adds a left rule and inset — wrong for a centred
   pull quote, which is its own full-width statement. */
.quote-block blockquote {
  margin: 0 auto;
  padding: 0;
  border-left: 0;
  text-align: center;
}

.quote-block .quote {
  text-align: center;
  margin-bottom: var(--space-md);
}

.quote-block cite {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 143%;
  font-style: normal;
  color: var(--neutral500);
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .footer-v2,
  .hero-home,
  .hero-home h1,
  .hero-home .lead,
  .hero-home .bttn {
    animation: none;
  }

  .w-slide,
  .top-nav[data-collapse="medium"].is-menu-mounted .top-nav-menu,
  .top-nav .menu-button-hamburger-line,
  .dropdown-list {
    transition: none;
  }

  /* Hold the logos still; the row stays reachable by scrolling it. */
  .clients-marquee__track {
    animation: none;
  }

  .clients-marquee {
    overflow-x: auto;
  }
}

/* ==========================================================================
   9. React Native

   Page structure from the live /react-native Webflow page. Type, colour,
   controls and spacing all consume the shared tokens and base elements above.
   ========================================================================== */

.rn-hero {
  min-height: 702px;
  display: flex;
  align-items: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background-color: var(--mulberry);
  /* The source artwork already includes the page's full colour treatment. */
  background-image: url(../assets/images/react-native-hero.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.rn-hero .container {
  width: 100%;
}

.rn-hero__content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.rn-hero__eyebrow,
.rn-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rn-hero__eyebrow {
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.rn-hero__eyebrow img {
  width: 35px;
  height: 32px;
}

.rn-hero__eyebrow h5,
.rn-hero__cta h5 {
  text-align: center;
}

.rn-hero__content h1 {
  margin-bottom: var(--space-lg);
  /* Keep the source page's natural wrap instead of the global balanced wrap. */
  text-wrap: wrap;
}

.rn-hero__cta {
  gap: var(--space-sm);
}

.rn-intro {
  background: var(--light-gray);
  display: flex;
  align-items: center;
  min-height: 398px;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.rn-intro .container {
  width: 100%;
}

.rn-intro__content {
  max-width: 1040px;
  margin: 0 auto;
}

.rn-intro__content h2 {
  max-width: 900px;
}

.rn-features {
  overflow: hidden;
}

.rn-feature {
  display: flex;
  align-items: center;
  min-height: 500px;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.rn-feature__copy,
.rn-feature__image {
  width: 42%;
}

.rn-feature__copy {
  width: 58%;
  max-width: 576px;
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.rn-feature__image img {
  display: block;
  width: 100%;
  height: auto;
}

.rn-clients {
  background: var(--light-gray);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.rn-clients > .container {
  max-width: 1072px;
}

.rn-clients > .container > h3 {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.rn-clients__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
}

.rn-testimonial {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.rn-testimonial blockquote {
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  text-align: center;
}

.rn-testimonial .quote {
  text-align: center;
  margin-bottom: var(--space-md);
}

.rn-testimonial cite {
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 145%;
  text-transform: uppercase;
}

.rn-social-proof {
  background: var(--light-gray);
}

.rn-social-proof > .container {
  max-width: 1168px;
}

.rn-social-proof__top,
.rn-social-proof__quotes {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-xl);
}

.rn-social-proof__top {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.rn-social-proof__overview {
  max-width: 410px;
}

.rn-social-proof__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--space-lg);
  border-bottom: 1px solid var(--gray);
  color: var(--crimson);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 143%;
  text-decoration: none;
}

.rn-social-proof__links img {
  flex: none;
  width: 20px;
  height: 20px;
}

.rn-social-proof__quotes {
  align-items: start;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
  gap: var(--space-md);
}

.rn-social-proof__quote-stack {
  display: grid;
  gap: var(--space-md);
}

.rn-social-card {
  position: relative;
  min-height: 300px;
  padding: var(--space-lg);
  border: 1px solid var(--gray);
  border-radius: var(--corner-radius);
  corner-shape: var(--corner-shape);
  background: var(--white);
}

.rn-social-card--tall {
  min-height: 624px;
}

.rn-social-card .quote {
  font-size: 18px;
  line-height: 150%;
}

.rn-social-card h5 {
  margin-top: var(--space-lg);
  margin-right: var(--space-lg);
}

.rn-social-card > img {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 48px;
  height: 48px;
  padding: var(--space-sm);
  border-radius: 999px;
  background: var(--light-gray);
}

@media screen and (max-width: 991px) {
  .rn-hero {
    min-height: 640px;
  }

  .rn-feature {
    min-height: 0;
  }

  .rn-feature__copy {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .rn-clients__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }

  .rn-social-proof__top,
  .rn-social-proof__quotes {
    gap: var(--space-lg);
  }
}

@media screen and (max-width: 767px) {
  .rn-hero {
    min-height: 620px;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
  }

  .rn-intro,
  .rn-clients,
  .rn-testimonial {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .rn-feature,
  .rn-feature--reverse {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .rn-feature--reverse .rn-feature__image {
    order: 2;
  }

  .rn-feature__copy,
  .rn-feature__image {
    width: 100%;
  }

  .rn-feature__copy {
    max-width: none;
  }

  .rn-clients__grid,
  .rn-social-proof__top,
  .rn-social-proof__quotes {
    grid-template-columns: 1fr;
  }

  .rn-social-proof__top {
    padding-top: var(--space-lg);
  }

  .rn-social-proof__overview {
    max-width: none;
  }

  .rn-social-proof__quotes {
    padding-bottom: var(--space-lg);
  }

  .rn-social-card,
  .rn-social-card--tall {
    min-height: 0;
  }
}

@media screen and (max-width: 479px) {
  .rn-hero {
    min-height: 590px;
  }

  .rn-hero__content h1 {
    margin-bottom: var(--space-lg);
  }

  .rn-clients__grid {
    gap: var(--space-md);
  }

  .rn-social-card {
    padding: var(--space-md);
  }
}

/* 404 --------------------------------------------------------------------- */

.not-found-page {
  background-color: var(--mulberry);
}

.not-found {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--mulberry);
  background-image:
    linear-gradient(140deg, rgba(26, 2, 42, .8), rgba(130, 0, 42, .7)),
    url("/assets/images/404-page.jpg");
  background-position: 0 0, 50% 0;
  background-repeat: no-repeat;
  background-size: auto, cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.not-found__container {
  width: 100%;
  max-width: 983px;
  padding-right: 30px;
  padding-left: 30px;
  text-align: center;
}

.not-found__heading {
  margin-bottom: 72px;
}

.not-found__heading h1 {
  margin: 20px 0;
  color: var(--white);
  text-align: left;
  text-wrap: wrap;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .not-found__container {
    padding-right: var(--space-md);
    padding-left: var(--space-md);
  }

  .not-found__heading {
    margin-bottom: var(--space-xl);
  }

.not-found__heading h1 {
    text-align: center;
    white-space: normal;
  }
}

/* Case studies ------------------------------------------------------------- */

.case-study-hero {
  position: relative;
  height: 670px;
  background-color: var(--dark-slate);
  display: flex;
  align-items: center;
  overflow: clip;
}

.case-study-hero__media {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.case-study-hero__scrim {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(38, 36, 39, .34);
}

.case-study-hero__content {
  z-index: 2;
  position: relative;
  width: 100%;
  max-width: 760px;
}

.case-study-hero__content h1 {
  margin-bottom: 0;
  color: var(--white);
  text-wrap: balance;
}

.case-study-eyebrow {
  margin-bottom: var(--space-md);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.case-study-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.case-study-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 720px);
  justify-content: center;
  gap: var(--space-lg);
  align-items: start;
}

.case-study-facts__logo {
  display: block;
  width: 140px;
  height: auto;
  margin-bottom: var(--space-lg);
}

.case-study-facts dl,
.case-study-facts dd {
  margin: 0;
}

.case-study-facts dl > div + div {
  margin-top: var(--space-lg);
}

.case-study-facts dt {
  margin-bottom: var(--space-sm);
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.case-study-facts dd {
  color: var(--neutral500);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 190%;
}

.case-study-copy {
  max-width: 720px;
}

.case-study-copy--wide {
  max-width: 690px;
}

.case-study-copy h2 {
  margin-bottom: var(--space-lg);
}

.case-study-copy p:last-child {
  margin-bottom: 0;
}

.case-study-copy a {
  color: var(--crimson);
}

.case-study-copy em {
  font-style: italic;
}

.case-study-full-image,
.case-study-image-pair {
  margin: 0;
}

.case-study-full-image img {
  display: block;
  width: 100%;
  height: auto;
}

.case-study-team-quote {
  background: var(--light-gray);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.case-study-team-quote blockquote,
.case-study-client-quote blockquote {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.case-study-team-quote blockquote p,
.case-study-client-quote blockquote p {
  margin-bottom: var(--space-lg);
  font-family: var(--font-serif);
  font-size: 25px;
  font-style: italic;
  line-height: 150%;
  text-wrap: balance;
}

.case-study-team-quote blockquote p {
  text-align: center;
}

.case-study-team-quote footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}

.case-study-team-quote footer img {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  object-fit: cover;
}

.case-study-team-quote cite {
  display: flex;
  flex-direction: column;
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  line-height: 145%;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.case-study-team-quote cite span {
  color: var(--neutral500);
}

.case-study-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.case-study-image-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 1.072 / 1;
  object-fit: cover;
}

.case-study-client-quote {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.case-study-client-quote blockquote p {
  text-align: left;
}

.case-study-client-quote cite {
  display: block;
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.case-study-full-image--reviews {
  background: #6c68df;
}

.case-study-full-image--ratings {
  background: #f45f4f;
}

.case-study-objective {
  padding-top: 120px;
  padding-bottom: 120px;
}

.case-study-objective > .container {
  padding-right: 100px;
  padding-left: 100px;
}

.case-study-objective__grid {
  display: flex;
  justify-content: center;
  max-width: 1240px;
}

.case-study-objective__copy {
  width: 38%;
  margin-right: 8%;
}

.case-study-objective__copy h5 {
  margin: 10px 0;
}

.case-study-objective__richtext {
  display: flow-root;
  margin-top: 40px;
}

.case-study-objective__richtext p {
  margin: 4px 0 16px;
}

.case-study-objective blockquote {
  width: 30%;
  margin: 0;
  padding: 0;
  border: 0;
}

.case-study-objective blockquote p {
  margin: 4px 0 16px;
  font-family: var(--font-serif);
  font-size: 23px;
  font-style: italic;
  line-height: 38px;
  text-wrap: wrap;
}

.case-study-store-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.case-study-store-links a {
  display: inline-flex;
  min-height: 44px;
}

.case-study-store-links img {
  display: block;
  width: auto;
  height: 40px;
}

.case-study-more {
  background: var(--light-gray);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.case-study-more > .container > h5 {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--light-slate);
}

.case-study-more .client-list {
  background: transparent;
  padding-top: 0;
}

.case-study-more .client-list > .container {
  padding: 0;
}

.case-study-more .work-list__cards__collection {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 991px) {
  .case-study-hero {
    height: 560px;
  }

  .case-study-objective > .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .case-study-objective__copy {
    width: 50%;
  }

  .case-study-objective blockquote {
    width: 36%;
  }
}

@media screen and (max-width: 767px) {
  .case-study-hero {
    height: 470px;
  }

  .case-study-hero__media {
    background-position: 58% 50%;
  }

  .case-study-hero__content h1 {
    font-size: 40px;
  }

  .case-study-section,
  .case-study-team-quote,
  .case-study-client-quote,
  .case-study-more {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .case-study-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .case-study-facts {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-md);
  }

  .case-study-facts__logo {
    width: 120px;
    margin-bottom: 0;
  }

  .case-study-facts dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .case-study-facts dl > div + div {
    margin-top: 0;
  }

  .case-study-copy h2 {
    margin-bottom: var(--space-md);
  }

  .case-study-team-quote blockquote p,
  .case-study-client-quote blockquote p {
    font-size: 21px;
  }

  .case-study-image-pair {
    grid-template-columns: 1fr;
  }

  .case-study-objective__grid {
    flex-direction: column;
    align-items: center;
  }

  .case-study-objective {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .case-study-objective__copy {
    width: 92%;
    margin-right: 0;
    margin-bottom: 60px;
  }

  .case-study-objective blockquote {
    width: 92%;
  }

  .case-study-objective blockquote p {
    font-size: 20px;
    line-height: 32px;
  }
}

@media screen and (max-width: 479px) {
  .case-study-objective {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .case-study-objective > .container {
    width: 100%;
    max-width: none;
    padding-right: 10px;
    padding-left: 10px;
  }

  .case-study-objective__copy {
    margin-bottom: 40px;
  }

  .case-study-objective blockquote p {
    text-align: center;
  }

  .case-study-facts {
    grid-template-columns: 1fr;
  }

  .case-study-facts dl {
    grid-template-columns: 1fr;
  }

  .case-study-facts dl > div + div {
    margin-top: var(--space-md);
  }

  .case-study-store-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-study-more .work-list__cards__collection {
    grid-template-columns: 1fr;
  }

  .case-study-conclusion .bttn {
    width: 100%;
  }
}