/* benzimra.co
   Hand-written replacement for the 87KB Webflow stylesheet.
   Values are taken from the captured production CSS, not re-invented.
   Breakpoints follow production: the mobile footer overrides live at <=767, not <=991. */

/* ---------- tokens ---------- */
:root {
  /* palette, verbatim from production */
  --black-50: #fff;
  --black-100: #d0cccc;
  --black-200: #a09999;
  --black-300: #716666;
  --black-400: #413333;
  --black-500: #120000;

  --red-50: #ffd7d7;
  --red-100: #f8b7b0;
  --red-200: #f29889;
  --red-300: #eb7862;
  --red-400: #e5593b;
  --red-500: #de3914;
  --red-600: #c12e10;
  --red-700: #a4220c;
  --red-800: #861708;
  --red-900: #690b04;
  --red-950: #4c0000;

  --gold-50: #fff;
  --gold-100: #f2e9e1;
  --gold-200: #e4d2c3;
  --gold-300: #d7bca4;
  --gold-400: #c9a586;
  --gold-500: #bc8f68;
  --gold-600: #9d7859;
  --gold-700: #7e624a;
  --gold-800: #5f4b3c;
  --gold-900: #40352d;
  --gold-950: #211e1e;

  --green-50: #cfe3db;
  --green-100: #a6e1d0;
  --green-200: #7cdfc4;
  --green-300: #53deb9;
  --green-400: #29dcad;
  --green-500: #00daa2;
  --green-600: #00bf93;
  --green-700: #00a384;
  --green-800: #008876;
  --green-900: #006c67;
  --green-950: #005158;

  --blue-50: #d1e9f3;
  --blue-100: #a7caf5;
  --blue-200: #7dacf8;
  --blue-300: #548dfa;
  --blue-400: #2a6efd;
  --blue-500: #004fff;
  --blue-600: #0049e0;
  --blue-700: #0042c1;
  --blue-800: #003ba2;
  --blue-900: #003483;
  --blue-950: #002d64;

  /* Layout grid, carried over from production's inline column variables. --col-N is the width of
     an N-column span including the gaps inside it, so it is not N x --col-w. /collective uses
     --col-2, 4, 6, 7 and 8 as max-widths.

     The narrow breakpoints below redefine only the first few, exactly as production does. That is
     not an omission to tidy up: at 479px --col-4 is still the 400px desktop value, and any element
     capped at --col-4 there is effectively uncapped. Completing the ladder would silently change
     the mobile layout. */
  --layout-max-w: 1280px;
  --layout-pad: 24px;
  --layout-gap: 16px;
  --col-w: 88px;
  --col-1: 88px;   --col-2: 192px;  --col-3: 296px;   --col-4: 400px;
  --col-5: 504px;  --col-6: 608px;  --col-7: 712px;   --col-8: 816px;
  --col-9: 920px;  --col-10: 1024px; --col-11: 1128px; --col-12: 1232px;
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --layout-pad: 24px; --col-w: 115px;
    --col-1: 115px; --col-2: 246px; --col-3: 377px;
    --col-4: 508px; --col-5: 639px; --col-6: 770px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --layout-pad: 16px; --col-w: 147px;
    --col-1: 147px; --col-2: 310px; --col-3: 473px; --col-4: 636px;
  }
}
@media (max-width: 479px) {
  :root {
    --layout-pad: 16px; --col-w: 173px;
    --col-1: 173px; --col-2: 362px;
  }
}

/* ---------- fonts (self-hosted; production loaded these from Google) ----------
   unicode-range is kept so browsers fetch only the subsets they actually need.
   font-display:swap matches production behaviour (WebFont loader was async). */
@font-face {
  font-family: Alata; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/alata-400-latin.fd54c066.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Alata; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/alata-400-latin-ext.d9539b58.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face { font-family: Sora; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/sora-300-latin.fa26406e.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Sora; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/sora-400-latin.fa26406e.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Sora; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/sora-500-latin.fa26406e.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Sora; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/sora-600-latin.fa26406e.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Sora; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/sora-700-latin.fa26406e.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* latin-ext faces, same families */
@font-face { font-family: Sora; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/sora-300-latin-ext.c163c536.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Sora; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/sora-400-latin-ext.c163c536.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Sora; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/sora-500-latin-ext.c163c536.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Sora; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/sora-600-latin-ext.c163c536.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Sora; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/sora-700-latin-ext.c163c536.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Alata; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/alata-400-latin-ext.d9539b58.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* production body defaults, verbatim */
body {
  margin: 0;
  color: var(--black-500);
  background-color: transparent;
  font-family: Sora, sans-serif;
  font-size: 16px;
  line-height: 140%;
  text-wrap: balance;
}
/* Webflow's normalize is `img{vertical-align:middle;max-width:100%;display:inline-block}` and the
   whole rebuild has to agree with it, because an inline-block image sits on a baseline while a
   block one does not. At 390 that is worth half a pixel on the nav lockup -- invisible, and still
   the only thing between /privacy and an exact match. Where a block image IS wanted, the element
   says so itself rather than the reset deciding for everything. */
img { display: inline-block; vertical-align: middle; max-width: 100%; }
svg, video { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- footer (canonical blue bar) ---------- */
.section-footer {
  z-index: 5;
  gap: 16px;
  background-color: var(--blue-950);
  width: 100%;
  height: 8.75vw;
  color: var(--black-50);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.section-container.is-footer {
  max-width: none;
  width: 100%;
  color: var(--black-50);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 16.443vw 1.3889vw;
  display: flex;
}

.footer-legal {
  color: #fff;
  letter-spacing: -0.011em;
  white-space: pre-wrap;
  font-size: 0.9028vw;
  line-height: 1.5;
  position: relative;
  top: -0.0694vw;
}

.footer-privacy-link { white-space: nowrap; color: inherit; text-decoration: none; }

.footer-icons {
  gap: 2.8472vw;
  flex-direction: row;
  align-items: center;
  display: flex;
  position: relative;
  top: -0.1389vw;
}

.footer-icon-link { color: #fff; justify-content: center; align-items: center; display: flex; }

/* icon boxes are sized individually; each SVG has its own aspect ratio */
.inline-svg-0 { width: 1.5296vw; height: 1.1111vw; display: block; }
.inline-svg-1 { width: 1.5997vw; height: 1.1111vw; display: block; }
.inline-svg-2 { width: 1.1130vw; height: 1.1111vw; display: block; }

@media screen and (max-width: 767px) {
  .section-footer { border-top: 1px solid var(--gold-500); height: auto; }
  .section-container.is-footer {
    gap: 29px;
    flex-direction: column-reverse;
    padding: 41px 24px 34px;
  }
  .footer-legal { opacity: 0.5; text-align: center; font-size: 12px; line-height: normal; top: 0; }
  .footer-icons { gap: 0; opacity: 0.5; justify-content: space-between; width: 181px; top: 0; }
  .inline-svg-0 { width: 24.78px; height: 18px; }
  .inline-svg-1 { width: 25.91px; height: 18px; }
  .inline-svg-2 { width: 18.02px; height: 18px; }
}

/* ---------- layout primitives ---------- */
.section {
  z-index: 0; flex-flow: column; flex: none; justify-content: center; align-items: center;
  width: 100%; height: auto; display: flex; position: relative; overflow: hidden;
}
.section-container {
  gap: 16px; width: 100%; max-width: 1280px; color: var(--black-500);
  flex-flow: row; justify-content: center; align-items: stretch;
  padding: 128px 24px; display: flex; position: relative;
}
.col {
  gap: 64px; flex-flow: column; justify-content: center; align-items: flex-start;
  width: 100%; display: flex; position: relative;
}
.col.is-h_r { gap: 32px; flex-flow: row; justify-content: flex-end; align-items: center; }

/* ---------- nav ---------- */
.section-nav {
  z-index: 20; gap: 32px; scroll-snap-align: start; flex: none;
  justify-content: center; align-items: center; width: 100%; height: 80px;
  display: flex; position: fixed; top: 0; overflow: hidden;
}
.section-nav.is-solid { background-color: #fff; border-bottom: 1px solid #00000014; }
.section-container.is-nav {
  z-index: 2; flex-flow: row; justify-content: space-between; align-items: center;
  padding-top: 0; padding-bottom: 0; position: relative;
}
.is-nav { color: var(--red-500); }
.nav-logo { display: block; }
.link-nav { gap: 8px; justify-content: flex-start; align-items: center; display: flex;
  text-decoration: none; }
.img-caret { width: 14px; padding-top: 4px; }
.img-lock { width: 16px; }
.div-menu {
  background-color: var(--red-500); width: 32px; height: 32px; color: var(--gold-50);
  cursor: pointer; flex: none; justify-content: center; align-items: center;
  padding: 4px; display: flex;   /* production shows this at every width, not mobile-only */
}
.img-menu { flex: none; height: 16px; }
.img-exit { flex: none; width: 16px; height: 16px; display: none; }
.toggle { width: 16px; height: 16px; display: none; }

@media screen and (max-width: 991px) {
  .link-nav { flex: none; display: none; }
  .div-menu { display: flex; }
}
@media screen and (max-width: 479px) {
  .section-container.is-nav { gap: 0; }
  .col { gap: 32px; }
  .section-nav { height: 64px; }
}

/* Inlined nav icons: production's SVGs carried width/height 100% attributes and were sized by
   their wrapper. Reproduce that with CSS so fill="currentColor" still inherits the link colour.

   The caret and the lock stay INLINE, against the `svg { display: block }` reset above. Webflow
   never styled these, so they are ordinary inline replaced boxes sitting on the text baseline,
   and their wrappers are as tall as the line box (22.4px) rather than as tall as the glyph. Made
   blocks, both wrappers collapse to the glyph and the icons drop 2-3px -- the entire residual on
   /privacy, and a quiet error in the home nav too. The hamburger IS a block: production sets
   display:block on that wrapper itself. */
.img-caret svg, .img-lock svg { width: 100%; height: auto; display: inline; }
.img-menu svg, .img-exit svg { height: 100%; width: auto; display: block; }

/* ---------- mega menu ---------- */
.section-menu {
  z-index: 15; background-color: var(--black-50); flex-flow: column;
  justify-content: flex-start; align-items: center; padding-top: 80px;
  display: none; position: fixed; inset: 0; overflow: scroll;
}
.section-menu.is-open { display: flex; }
.mm-container {
  gap: 16px; border-top: 1px solid var(--gold-100); flex-flow: row;
  justify-content: center; align-items: stretch; width: 100%; max-width: 1280px;
  height: 100%; padding: 0 24px; display: flex;
}
.mm-lvl1 {
  gap: 24px; border-right: 1px solid var(--gold-100); flex-flow: column; flex: none;
  width: 100%; max-width: 192px; margin-left: -16px; display: flex;
}
.flex-v-64 { display: flex; flex-flow: column; align-items: flex-start; gap: 64px; }
.is-pad_lt-16 { padding-left: 16px; padding-top: 16px; }
.flex-v-0 { display: flex; flex-flow: column; align-items: stretch; gap: 0; }
.flex-v-0.is-scroll { overflow-y: auto; }
.mm-lvl1-link, .mm-lvl2-link {
  gap: 8px; color: var(--black-500); justify-content: flex-start; align-items: flex-start;
  padding: 8px 16px; display: flex; text-decoration: none;
}
.mm-lvl2-panel, .mm-lvl3-panel { flex: 1; position: relative; }
.mm-panel-header {
  gap: 16px; border-bottom: 1px solid var(--gold-100); justify-content: flex-start;
  align-items: center; height: 48px; display: none; top: 0;
}
.mm-panel-body { height: 100%; overflow: hidden; }
.mm-back {
  gap: 8px; aspect-ratio: 1; background-color: var(--red-500); color: #fff;
  justify-content: center; align-items: center; height: 100%;
  padding-left: 16px; padding-right: 16px; font-weight: 600; display: flex; position: relative;
}
.mm-lvl2 {
  gap: 16px; border-right: 1px solid var(--gold-100); flex-flow: column; flex: 1;
  height: 100%; display: flex; position: relative; overflow: hidden;
}
.mm-lvl2.is-hidden, .mm-lvl3.is-hidden, .mm-lvl3.is-art.is-hidden { display: none; }
.mm-lvl2-header {
  gap: 32px; border-bottom: 1px solid var(--gold-100); background-color: var(--black-50);
  flex-flow: column; align-items: flex-start; padding: 16px; display: flex;
}
.mm-lvl3 {
  gap: 64px; background-color: var(--gold-100); flex-flow: column; flex: 1;
  align-items: flex-start; height: 100%; padding: 16px; display: flex;
}
.mm-lvl3.is-art { background-color: var(--gold-50); align-items: stretch; display: none; }
.mm-lvl3-header { gap: 32px; flex-flow: column; align-items: flex-start; display: flex; }
.text-header { font-size: 24px; font-weight: 500; line-height: 140%; }
.text-header.is-red-500 { color: var(--red-500); }

/* art panels */
.art { aspect-ratio: 1; width: 100%; position: relative; }
.img-art_main { width: 100%; }
.img-art_elements { width: 100%; position: absolute; inset: 0; }

/* red CTA with its four stacked key icons */
.button-primary {
  gap: 8px; color: #fff; justify-content: center; align-items: center;
  padding: 16px 30px 16px 24px; font-weight: 600; display: flex; position: relative;
  text-decoration: none;
}
.button-primary.is-red {
  background-color: var(--red-500); flex: none; height: 56px; position: relative; overflow: hidden;
}
.div-hover { z-index: 0; background-color: var(--gold-950); opacity: 0; position: absolute; inset: 0; }
/* The stylesheet ships .08, but production's interactions set it to 0 at rest and animate
   it in on hover. Measured, not assumed: at .08 the whole button darkens to rgb(207,54,20)
   while the key outline stacks above it and stays pure red-500, showing as a bright bar. */
.button-text { z-index: 4; position: relative; }
/* Width comes from the viewBox, not a number: the 12-08 20:30 publish stopped stretching this
   glyph to its wrapper and sizes it from its own ratio instead, which makes the 56x24 key 46.66px
   wide rather than 46 and leaves the 60x24 variant at 50px. Letting the intrinsic ratio do the
   arithmetic matches production exactly and needs no per-variant override. */
.img-key { z-index: 2; height: 20px; width: auto; position: relative; }
.img-key_outline { z-index: 3; height: 24px; width: 24px; position: absolute; left: 0; }
.img-key_outline.is-hover { z-index: 4; opacity: 0; color: var(--gold-950); }

/* Button key animation, measured from production's computed styles rather than guessed.
   At rest the outline/fill keyholes sit red-on-red and read as invisible; on hover they slide
   right, the detail key tips back in 3D, and a dark wash fades in at 0.12. */
.img-key_outline.is-hover  { transform: translateX(2px); }
.img-key_outline.is-red-500 { transform: translateX(2px); }
.img-key_fill  { transform: translateX(-4px); }
.img-key       { transform: none; }
.button-primary .img-key, .button-primary .img-key_outline,
.button-primary .img-key_fill, .button-primary .div-hover {
  transition: transform .45s ease, opacity .45s ease;
}
.button-primary:hover .img-key_outline.is-hover   { opacity: .12; transform: translateX(16px); }
.button-primary:hover .img-key_outline.is-red-500 { transform: translateX(16px); }
.button-primary:hover .img-key_fill               { transform: translateX(20px); }
.button-primary:hover .img-key                    { transform: translateX(-8px) rotateX(44.35deg); }
.button-primary:hover .div-hover                  { opacity: .12; }

@media (prefers-reduced-motion: reduce) {
  .button-primary .img-key, .button-primary .img-key_outline,
  .button-primary .img-key_fill, .button-primary .div-hover { transition: none; }
}
.img-key_outline.is-red-500 { color: var(--red-500); }
.img-key_fill { z-index: 1; height: 24px; width: 24px; position: absolute; left: 0; color: var(--red-700); }

@media screen and (max-width: 991px) { .art { flex: 1; max-width: 40vw; } }
@media screen and (max-width: 767px) {
  .mm-lvl3 { background-color: var(--gold-50); }
  .mm-lvl3.is-art { display: none; }
  .mm-container { gap: 0; padding-top: 0; }
  .mm-panel-header { gap: 16px; justify-content: flex-start; align-items: center; display: flex; }
  .section-menu { padding-top: 80px; }
}
@media screen and (max-width: 479px) { .section-menu { padding-top: 64px; } }

/* ---------- page/document ----------
   scrollbar-gutter is the reason component screenshots kept coming out 15px off: production
   reserves the gutter on every page, so a short page is laid out as if it had a scrollbar. */
html {
  height: 100%;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}
html.is-scroll-locked, body.is-scroll-locked { overflow: hidden; }
.section-menu, .section-popup { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- type ---------- */
/* Webflow's normalize comes first and the site's own rules override it, exactly as they do in
   production. It matters below h3: the site stylesheet only ever restyles h1-h3, so a bare <h4>
   on /collective keeps margin-bottom:10px and font-weight:700 from the group rule here. Without
   these the browser's own defaults (1.33em margins) stood in, and /collective is the one page
   that uses <h4>, <ul> and <li> unclassed. */
h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; font-weight: 700; }
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; }
ul, ol { margin-top: 0; margin-bottom: 8px; padding-left: 24px; }
li { margin-bottom: 8px; }

h1 { margin: 0; font-family: Alata, sans-serif; font-size: 40px; font-weight: 700; line-height: 44px; }
h2 { margin: 0; font-family: Alata, sans-serif; font-size: 64px; font-weight: 500; line-height: 100%; }
h3 { margin: 0; font-size: 32px; font-weight: 500; line-height: 100%; }
strong { font-weight: 700; }
label { display: block; margin-bottom: 5px; font-weight: 700; }

.h2.is-red   { color: var(--red-500); }
.h2.is-blue  { color: var(--blue-500); }
.h2.is-green { color: var(--green-950); }
.h2.is-white { color: var(--black-50); }
.h2-red { color: var(--red-500); }
.h2-red.is-approach { text-transform: uppercase; max-width: 608px; font-size: 96px; font-weight: 400; line-height: 100%; }
.h2-red.is-mobile { display: none; }
.text-40pt { color: var(--black-500); font-size: 32px; line-height: 128%; }
.text-40pt.is-red { color: var(--red-500); font-size: 40px; }
.text-caps { font-family: Alata, sans-serif; font-size: 64px; font-weight: 500; line-height: 120%; }
.text-caps.is-white { color: var(--gold-50); }
/* Snell Roundhand is macOS-only; the two words that used it are now outlined SVG, but the box
   keeps the old metrics so the marquee rhythm is unchanged */
.text-script { height: 76.8px; font-size: 64px; font-weight: 500; line-height: 120%; }
.bold-text { font-size: 20px; }
.approach-h3 { font-family: "Snell Roundhand", "Palatino Linotype", sans-serif; font-size: 40px; }

/* ---------- more layout primitives ---------- */
.col.is-xc_yt { gap: 0; justify-content: flex-start; align-items: center; }
.col.is-xc_yc { justify-content: center; align-items: center; }
.col.is-xl_yt { justify-content: flex-start; align-items: flex-start; }
.col.is-approach { justify-content: flex-start; align-items: flex-start; padding-right: 80px; }
.row { gap: 16px; flex-flow: row; justify-content: center; align-items: stretch; width: 100%; display: flex; }
.row-col { gap: 64px; flex-flow: column; justify-content: center; align-items: flex-start; width: 100%; display: flex; }
.section-container.is-vertical { gap: 96px; flex-flow: column; justify-content: flex-start; align-items: stretch; height: 100%; }
.content { gap: 32px; flex-flow: column; flex: 1; align-items: flex-start; display: flex; }
.content.is-footer { justify-content: center; align-items: flex-start; padding-right: 80px; }
.content-title { gap: 8px; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.flex-v-32 { gap: 32px; flex-flow: column; justify-content: flex-start; align-items: flex-start; width: 100%; display: flex; }
.flex-center { flex-flow: row; justify-content: center; align-items: center; width: 50%; display: flex; }

/* ---------- hero ---------- */
.section.is-hero {
  background-color: var(--red-950);
  background-image: url(/assets/bg-flourish-red.4eaece91.svg);
  background-position: 50%;
  background-size: auto;
  height: 100vh;
}
.section.is-black-50 { background-color: #fff; }
.section.is-gold-100 { background-color: var(--gold-100); height: auto; }
.section.is-red-50   { background-color: var(--red-50); color: var(--red-950); }
.section.is-green-50 { background-color: var(--green-50); }
.section.is-blue-50  { background-color: var(--blue-50); color: var(--blue-950); overflow: hidden; }

.section-container.is-hero {
  gap: 0; flex-flow: row; justify-content: space-between; align-items: flex-end;
  height: 100%; padding-top: 80px; padding-bottom: 80px;
}
.h-content { gap: 32px; flex-flow: row; justify-content: flex-start; align-items: stretch; width: 100%; height: 100%; display: flex; }
.h-col-1 { gap: 64px; flex-flow: column; justify-content: flex-end; width: 100%; max-width: 920px; display: flex; }
.h-col-2 { flex: 1; justify-content: flex-end; align-items: flex-end; display: flex; }
.h-h1 { color: var(--gold-50); font-size: 56px; font-weight: 500; line-height: 120%; }
.h-subhead { gap: 32px; flex-flow: row; justify-content: flex-start; align-items: stretch; width: 100%; display: flex; }
.h-subhead-text { max-width: 504px; min-height: 0; color: var(--red-50); flex: 1; font-size: 18px; font-weight: 400; line-height: 140%; }
.h-mark { aspect-ratio: 1; object-fit: contain; flex: none; align-self: stretch; width: 64px; height: 64px; }
.h-stamp-container {
  aspect-ratio: 144/288; flex-flow: column; justify-content: flex-end; align-items: flex-end;
  width: 100%; max-width: 256px; height: 100%; max-height: 512px; display: flex; position: relative;
}
.h-stamp {
  aspect-ratio: 1/2; object-fit: cover; flex: none; width: 100%; max-width: none; height: 100%;
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 450ms ease;
}
.h-stamp.is-active { opacity: 1; }
.h-stamp.is-hidden { opacity: 0; }
.h-stamp.no-transition { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .h-stamp { transition: none !important; } }

/* ---------- our scope ---------- */
.scope-container { flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; }
.scope-container.is-mobile { display: none; }
.scope-pillar {
  width: 100%; max-width: 400px; color: var(--black-100); cursor: pointer; flex: 1;
  justify-content: space-between; align-items: flex-start;
  padding-top: 16px; padding-bottom: 16px; display: flex; position: relative;
}
.scope-title { font-size: 20px; line-height: 32px; color: var(--black-100); transition: color 200ms ease; }
.scope-divider-grey { z-index: 1; background-color: var(--black-100); opacity: .5; width: 100%; height: 1px; position: absolute; inset: 0 0 auto; }
.scope-divider-red {
  z-index: 2; background-color: var(--red-500); width: 100%; height: 1px; position: absolute; inset: 0 0 auto;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}
.scope-badge { justify-content: center; align-items: center; width: 32px; height: 32px; display: flex; position: relative; }
.scope-badge-number {
  z-index: 2; text-align: center; padding-right: 4px;
  font-family: "Snell Roundhand", "Palatino Linotype", sans-serif;
  font-size: 20px; line-height: 16px; position: relative;
  color: var(--black-200); transition: color 200ms ease;
}
.scope-badge-icon {
  z-index: 1; opacity: 0; height: 32px; width: 32px; position: absolute;
  transform-origin: 50% 50%; will-change: opacity; transition: opacity 200ms ease; pointer-events: none;
}
.scope-pillar.is-active, .scope-pillar.is-active .scope-title { color: var(--red-500); }
.scope-pillar.is-active .scope-badge-icon { opacity: 1; }
.scope-pillar.is-active .scope-badge-number { color: var(--black-50); }
.scope-pillar.is-active .scope-divider-red { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .scope-divider-red, .scope-title, .scope-badge-icon { transition: none !important; animation: none !important; }
}

/* ---------- collages ----------
   Production placed these with generated #w-node ids; the placements are stable per class,
   so they live on the class here. */
.collage-v {
  gap: 0; aspect-ratio: 384/640; height: 100%;
  grid-template-rows: auto auto auto auto auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid;
}
.collage-v-1 { grid-area: span 2 / span 2; width: 256px; height: 256px; padding: 16px; display: flex; }
.collage-v-1.is-red-950   { background-color: var(--red-950); }
.collage-v-1.is-green-500 { background-color: var(--green-500); }
.collage-v-2 { grid-area: span 1 / span 1; width: 128px; height: 128px; padding: 32px; display: flex; }
.collage-v-2.is-red-500  { background-color: var(--red-500); }
.collage-v-2.is-gold-500 { background-color: var(--gold-500); }
.collage-v-3 {
  grid-area: span 3 / span 2;
  background-image: url(/assets/collage-uae.e100a940.jpg); background-position: 0 0; background-size: cover;
  justify-content: center; align-items: center; width: 256px; height: 384px;
  padding-top: 64px; display: flex; position: relative;
}
.collage-v-3.is-green { background-image: url(/assets/collage-gulf.fcf485c3.jpg); background-position: 0 0; background-size: cover; }
.collage-v-4 {
  grid-area: 2 / 3 / 6 / 4; width: 128px; height: 512px;
  background-size: 100% 200%; animation: gradient-animation 8s linear infinite;
}
.collage-v-4.is-red   { background-image: linear-gradient(#21031c,#431480 10%,#a78303 20%,#8c099b 40%,#21031c 50%,#431480 60%,#a78303 70%,#8c099b 90%,#21031c); }
.collage-v-4.is-green { background-image: linear-gradient(#001f19,#00906a 15%,#0678a8 30%,#05193e 40%,#001f19 50%,#00906a 65%,#0678a8 80%,#05193e 90%,#001f19); }
.collage-v-4.is-blue  { background-image: linear-gradient(#3b6cd9,#431480 10%,#1390ca 25%,#020541 40%,#3b6cd9 50%,#431480 60%,#1390ca 75%,#020541 103%); flex: none; }
@keyframes gradient-animation { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } }
@media (prefers-reduced-motion: reduce) { .collage-v-4 { animation: none; } }

.collage-h { gap: 0; flex-flow: row; justify-content: flex-start; align-items: stretch; width: 100%; display: flex; position: relative; }
.collage-h.is-mobile { display: none; }
.collage-h-2 { background-color: var(--red-950); flex-flow: row; flex: 1; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.collage-h-2.is-co { background-color: var(--blue-950); }
.collage-h-2-img { max-width: none; }
.collage-h-3 { background-color: var(--gold-500); width: 128px; height: 128px; padding: 32px; display: flex; position: absolute; inset: auto auto 0 0; }
.collage-h-4 {
  background-image: url(/assets/collage-uae.e100a940.jpg); background-position: 50%; background-size: cover;
  flex-flow: row; flex: 1; justify-content: center; align-items: center;
  width: 50%; max-width: 400px; display: flex; position: relative;
}
.collage-h-4.is-co { background-image: url(/assets/collage-skyline.376b990c.jpg); background-position: 0%; }
.c-collage-p2 { background-color: var(--red-950); flex-flow: row; flex: 1; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.c-collage-p3 {
  background-image: url(/assets/collage-gulf.fcf485c3.jpg); background-position: 50%; background-size: cover;
  flex-flow: row; flex: 1; justify-content: center; align-items: center;
  width: 50%; max-width: 400px; display: flex; position: relative;
}
.collage-h-4-door { z-index: 1; width: 100%; position: absolute; inset: 0 0 auto; }
.collage-h-4-door.is-gold-500 { color: var(--gold-500); }
.collage-h-4-door.is-blue-50  { color: var(--blue-50); top: -1px; }
.collage-h-4-point { height: 64px; width: 64px; }
.collage-h-4-point.is-white { color: var(--gold-50); }
.img-keyhole { width: 100%; height: 100%; }
.img-keyhole.is-red-950   { color: var(--red-950); }
.img-keyhole.is-green-950 { color: var(--green-950); }
.flex-center.is-co_b { z-index: 1; background-color: var(--gold-500); width: 132px; height: 132px; padding: 4px; position: absolute; inset: auto auto 0 0; }
.img-script_b { width: 128px; height: 128px; }
.img-co_co { z-index: 0; width: 100%; color: var(--blue-500); position: relative; transform: translate(32px); }
.img-mark.is-white { width: 96px; height: 96px; color: var(--gold-50); flex: none; margin-left: 16px; margin-right: 16px; }

/* Production wrapped every inline SVG in a <div class="w-embed">. Where that wrapper carried no
   explicit height it also picked up the line box of the 16px/140% strut: 0.4em of empty space
   below the artwork. That slack shifts whatever is centred or stacked around it, so it is
   reproduced here rather than silently dropped. Everywhere else the wrapper was given a height
   and there is nothing to reproduce. */
.img-co_co, .collage-h-4-door, .img-script_b-co,
.marquee-item.is-vertical .img-mark { padding-bottom: .4em; }

/* ---------- marquees ---------- */
.section-marquee { gap: 16px; flex-flow: row; justify-content: flex-end; align-items: center; width: 100%; height: 88px; display: flex; overflow: hidden; }
.section-marquee.is-red-500   { background-color: var(--red-950); color: var(--red-500); }
.section-marquee.is-green-950 { background-color: var(--green-950); color: var(--green-500); }
.section-marquee.is-vertical  { z-index: 2; flex-flow: column; justify-content: flex-start; align-items: center; width: 128px; height: 100%; position: absolute; inset: 0 0 0 auto; }
.marquee { flex-flow: row; justify-content: flex-end; align-items: center; display: flex; }
.marquee.is-vertical { gap: 16px; flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; padding-bottom: 16px; }
.marquee-item { gap: 16px; white-space: nowrap; flex-flow: row; justify-content: space-between; align-items: center; padding-right: 16px; display: flex; }
.marquee-item.is-case-studies { width: auto; padding-right: 24px; }
.marquee-item.is-capabilities { width: auto; }
.marquee-item.is-vertical { flex-flow: column; width: 100%; height: 584px; padding-bottom: 16px; padding-right: 0; }
.img-mark.is-scroll  { flex: none; width: 64px; height: 64px; }
.img-mark.is-footer  { flex: none; width: 128px; margin-left: 16px; margin-right: 16px; }
.img-script_b-co { width: 128px; }
.script-word-regulation { width: 257.71px; max-width: none; height: 64.85px; display: block; position: relative; top: 18.32px; }
.script-word-risk       { width: 119.47px; max-width: none; height: 46.93px; display: block; position: relative; top: 18.32px; }

/* Each horizontal strip is six identical items, so one step is 100/6% of its own width. The
   strip is anchored right, so all the slack sits off to the left and only rightward travel
   keeps the band covered. */
.marquee.is-case-studies, .marquee.is-capabilities { animation: marquee-right 12s linear infinite; }
.marquee.is-capabilities { animation-duration: 11s; }
@keyframes marquee-right { from { transform: translateX(0); } to { transform: translateX(16.6667%); } }
.marquee.is-vertical { animation: marquee-up 10s linear infinite; }
@keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-600px); } }
@media (prefers-reduced-motion: reduce) {
  .marquee.is-case-studies, .marquee.is-capabilities, .marquee.is-vertical { animation: none; }
}

/* ---------- strategy meets tech ----------
   Fonts are set per element rather than inherited: the headline pair and the tag bars are Alata,
   the body copy is Sora, and "meets" keeps the Snell Roundhand stack for the (now unused) text
   fallback path. */
.team-eyebrow, .team-strategy, .team-tech,
.team-tag-maia, .team-tag-victor { font-family: Alata, sans-serif; }
.team-name-maia, .team-name-victor, .team-role-maia, .team-role-victor,
.team-bio-maia, .team-bio-victor, .team-sub { font-family: Sora, sans-serif; }
.team-meets { font-family: "Snell Roundhand", "Snell Roundhand LT Std", cursive; }

.team-section { background-color: #fbf7f0; width: 100%; position: relative; overflow: hidden; }
.team-canvas { width: 100%; max-width: 1440px; height: 934px; margin-left: auto; margin-right: auto; position: relative; }
.team-engraving { width: 800px; height: auto; position: absolute; bottom: -430px; left: -60px; }
.team-head { width: 466px; height: 320px; position: absolute; top: 223px; left: 864px; }
.team-strategy, .team-tech { color: #513115; letter-spacing: -1.5px; text-transform: uppercase; font-size: 80px; line-height: 1.18; position: absolute; }
.team-strategy { top: 0; left: 0; }
.team-tech { top: 73px; left: 177px; }
.team-meets { color: #513115; height: 98px; position: absolute; top: 54px; left: 7px; }
.team-meets-word { width: 172px; max-width: none; height: 39px; display: block; position: relative; top: 36.66px; left: -4.84px; }
.team-sub { color: #513115; letter-spacing: -.18px; width: 354px; font-size: 16px; line-height: 1.5; position: absolute; top: 178px; left: 8px; }
.team-eyebrow { gap: 7px; color: var(--gold-500); letter-spacing: -.25px; text-transform: uppercase; align-items: center; margin-bottom: 12px; font-size: 13px; display: flex; }
.team-eyebrow-icon { width: 13px; height: 13px; }
.team-tag-key { width: 50px; height: auto; }
/* Maia's key is stood on end; Victor's is left flat */
.team-tag-maia .team-tag-key { width: 18px; height: 46px; transform: rotate(-90deg); margin: 0 14px; }

.team-card-maia { width: 584px; height: 304px; position: absolute; top: 174px; left: 217px; }
/* object-position added by the 12-08 20:30 publish: the crop rides high so the portrait keeps her
   head in frame when the card is short. Only Maia's photo carries it; Victor's stays centred. */
.team-photo-maia { object-fit: cover; object-position: 50% 10%; width: 243px; height: 304px; position: absolute; top: 0; left: 0; }
.team-panel-maia { background-color: var(--red-50); width: 341px; height: 253px; padding: 30px 40px; position: absolute; top: 0; left: 243px; }
.team-name-maia { color: var(--red-950); letter-spacing: -.29px; font-size: 26px; line-height: 1.05; }
.team-role-maia { color: var(--red-950); letter-spacing: -.15px; margin-top: 2px; margin-bottom: 13px; font-size: 14px; font-weight: 600; line-height: 1.41; }
.team-bio-maia  { color: var(--red-950); letter-spacing: -.15px; font-size: 14px; line-height: 1.5; }
.team-tag-maia  { gap: 12px; color: var(--red-500); letter-spacing: -.38px; background-color: var(--red-950); justify-content: center; align-items: center; width: 341px; height: 51px; font-size: 20px; display: flex; position: absolute; top: 253px; left: 243px; }
.team-edge-maia { background-color: var(--red-500); width: 7px; height: 304px; position: absolute; top: 0; right: 0; }

.team-card-victor { width: 584px; height: 306px; position: absolute; top: 501px; left: 642px; }
.team-photo-victor { object-fit: cover; width: 243px; height: 306px; position: absolute; top: 0; left: 341px; }
.team-panel-victor { background-color: #dcf0e5; width: 341px; height: 255px; padding: 26px 40px 0 42px; position: absolute; top: 0; left: 0; }
.team-name-victor { color: var(--green-950); letter-spacing: -.29px; font-size: 26px; line-height: 1.05; }
.team-role-victor { color: var(--green-950); letter-spacing: -.15px; margin-top: 2px; margin-bottom: 13px; font-size: 14px; font-weight: 600; line-height: 1.41; }
.team-bio-victor  { color: var(--green-950); letter-spacing: -.15px; font-size: 14px; line-height: 1.5; }
.team-tag-victor  { gap: 12px; color: var(--green-500); letter-spacing: -.38px; background-color: var(--green-950); justify-content: center; align-items: center; width: 341px; height: 51px; font-size: 20px; display: flex; position: absolute; top: 255px; left: 0; }
.team-edge-victor { z-index: 2; background-color: var(--green-500); width: 7px; height: 306px; position: absolute; top: 0; left: 0; }

/* ---------- outcomes stamp ---------- */
.stamp-v {
  gap: 0; aspect-ratio: 384/512; width: 384px; height: 512px;
  background-image: url(/assets/collage-silk.b0e52ead.jpg); background-position: 100%; background-size: cover;
  flex-flow: column; justify-content: center; align-items: center; padding-top: 64px;
  display: flex; position: relative;
}
.stamp-v .image { max-width: none; }

/* ---------- other button colours ---------- */
/* only .is-red is given a fixed height and clipped; the other two size to their content and let
   the key layers overflow, exactly as production does */
.button-primary.is-green { background-color: var(--green-500); color: var(--black-500); }
.button-primary.is-blue  { background-color: var(--blue-500); }
.img-key_outline.is-green-500 { color: var(--green-500); }
.img-key_outline.is-blue-500  { color: var(--blue-500); }
.img-key_fill.is-green-800 { color: var(--green-800); }
.img-key_fill.is-blue-800  { color: var(--blue-800); }
button.button-primary { border: 0; font: inherit; cursor: pointer; }

/* ---------- contact popup ---------- */
.section-popup {
  z-index: 25; flex-flow: column; justify-content: center; align-items: center;
  padding-left: 24px; padding-right: 24px; display: none; position: fixed; inset: 0; overflow: hidden;
  opacity: 0;
}
.section-popup.is-open { display: flex; }
.section-popup.is-vis { opacity: 1; }
.div-close { z-index: 10; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: #120000cc; justify-content: center; align-items: center; position: absolute; inset: 0; overflow: hidden; }
.div-popup {
  z-index: 100; gap: 32px; border-top: 8px solid var(--red-500);
  background-color: var(--gold-50);
  background-image: linear-gradient(#fffc,#fffc), url(/assets/art-hand-key-bg.6dcfde7f.svg);
  background-position: 0 0, 100% 100%; background-repeat: repeat, no-repeat;
  background-size: auto, 50%; background-attachment: scroll, fixed;
  flex-flow: column; width: 100%; max-width: 608px; padding: 32px 32px 24px;
  display: flex; position: absolute; overflow: auto;
  transform: translateY(100vh);
}
/* Webflow drove these with an interaction; the values are its ix2 definitions verbatim
   (Popup Open: 400ms outExpo in, Popup Close: 400ms inExpo out). */
.section-popup, .div-popup { transition: opacity 400ms ease-out, transform 400ms cubic-bezier(.19,1,.22,1); }
.section-popup.is-closing, .section-popup.is-closing .div-popup { transition: opacity 400ms ease-in, transform 400ms cubic-bezier(.95,.05,.795,.035); }
.section-popup.is-vis .div-popup { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .section-popup, .div-popup { transition: none; } }

.popup-logo { width: 100%; max-width: 240px; }
.flex-h-fill { flex-flow: row; flex: 1; justify-content: space-between; align-items: flex-start; width: 100%; display: flex; position: relative; }
.flex-h-fill.is-red-500 { color: var(--red-500); flex: none; }
.div-exit { background-color: var(--red-500); width: 32px; height: 32px; color: var(--gold-50); cursor: pointer; flex: none; justify-content: center; align-items: center; padding: 4px; display: flex; }
.img-close { flex: none; width: 16px; height: 16px; display: flex; }
.div-h-divider { background-color: var(--gold-100); height: 1px; }
.form-submit { flex-flow: column; justify-content: space-between; align-items: flex-start; display: flex; }
.flex-block-3 { gap: 16px; flex-flow: column; display: flex; padding-bottom: 16px; }
.form-container {
  gap: 16px; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr;
  justify-content: flex-start; align-items: flex-start; width: 100%; padding-bottom: 32px; grid-auto-columns: 1fr; display: grid;
}
.form-container .flex-v-0 { gap: 0; }
.flex-v-0.is-span-2 { grid-column: span 2; }
.form-label { font-size: 14px; font-weight: 400; }
.form-field {
  color: var(--black-500); background-image: linear-gradient(#12000014,#12000014);
  border: 2px solid transparent; width: 100%; height: 56px; margin-bottom: 0; padding: 16px;
  font: inherit; font-size: 14px; display: block;
}
textarea.form-field { height: auto; }
.form-field:focus { border: 2px solid var(--red-500); outline: 0; }
.form-notice { opacity: .32; font-size: 14px; font-weight: 400; }
.form-success { background-color: var(--gold-100); text-align: center; padding: 20px; }
.form-error { background-color: var(--red-50); margin-top: 22px; padding: 10px; }
.text-block-7 { text-align: center; }
.input--hidden { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* ---------- '27 cohort popup ---------- */
.cohort-overlay {
  z-index: 9999; justify-content: center; align-items: center; padding: 24px;
  display: none; position: fixed; inset: 0;
  background-color: #14000000; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease;
}
.cohort-overlay.is-open { display: flex; }
.cohort-overlay.is-vis { background-color: #14000073; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cohort-card {
  row-gap: 28px; text-align: center;
  background-image: url(/assets/cohort-popup-bg.15bc444f.jpg); background-position: 50% 30%; background-size: cover;
  border-radius: 20px; flex-direction: column; align-items: center;
  width: 94vw; max-width: 920px; padding: 88px 64px 72px;
  display: flex; position: relative; overflow: hidden; box-shadow: 0 40px 90px #00000080;
  transition: transform .55s cubic-bezier(.55,0,.25,1), opacity .18s ease;
}
/* on the way out the card shrinks first and only fades at the end, so it reads as flying into
   the pill rather than dissolving */
.cohort-overlay.is-closing .cohort-card { transition: transform .55s cubic-bezier(.55,0,.25,1), opacity .18s ease .38s; }
.cohort-close { transition: background-color .25s, color .25s; }
.cohort-close:hover { background-color: #f4f4f4; color: #250000; }
.cohort-cta { transition: filter .25s; }
.cohort-cta:hover { filter: brightness(.85); }
.cohort-pill:hover { filter: brightness(1.15); }
.cohort-veil { background-color: #2500008c; position: absolute; inset: 0; }
.cohort-close { z-index: 2; color: #f4f4f4; cursor: pointer; border: 1.5px solid #f4f4f4d9; border-radius: 50%; justify-content: center; align-items: center; width: 44px; height: 44px; font-size: 18px; line-height: 1; display: flex; position: absolute; top: 20px; right: 20px; }
.cohort-eyebrow, .cohort-cta, .cohort-close { font-family: Alata, sans-serif; }
.cohort-lede { font-family: Sora, sans-serif; }
.cohort-eyebrow { z-index: 2; color: #f4f4f4; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; line-height: 1.5; position: relative; }
.cohort-headline { z-index: 2; width: 80%; max-width: 640px; height: auto; position: relative; }
.cohort-lede { z-index: 2; color: #fff; max-width: 560px; font-size: 17px; line-height: 1.6; position: relative; }
.cohort-cta { z-index: 2; color: #fff; letter-spacing: .12em; text-transform: uppercase; background-color: var(--red-500); padding: 17px 34px; font-size: 15px; line-height: 1; text-decoration: none; display: inline-block; position: relative; }
.cohort-pill {
  z-index: 9998; cursor: pointer; background-color: #1e1e1e; border: 1px solid var(--gold-500);
  border-radius: 3px; justify-content: center; align-items: center; width: 200px; height: 56px;
  display: none; position: fixed; bottom: 22px; right: 22px; overflow: hidden;
  box-shadow: 4px 6px 14px #1e1e1e66;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, filter .25s;
}
.cohort-pill.is-on { display: flex; }
.cohort-pill.is-vis { opacity: 1; transform: translateY(0); }
.cohort-pill-word { z-index: 2; flex-shrink: 0; width: 172px; max-width: none; height: auto; position: relative; }
body.cohort-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cohort-overlay, .cohort-card, .cohort-pill { transition: none; } }

/* ---------- nav background, driven by the section under the probe line ---------- */
.section-nav { transition: background-color 200ms ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mm-back-icon { height: 16px; display: flex; }
.mm-back-icon svg { height: 100%; width: auto; }

/* ---------- breakpoints ---------- */
@media screen and (max-width: 991px) {
  .section { height: auto; }
  .section-container { gap: 64px; flex-flow: column; padding-top: 96px; padding-bottom: 96px; }
  .h-h1 { font-size: 48px; }
  .h-col-1 { gap: 32px; order: 9999; justify-content: flex-end; align-items: flex-start; width: auto; max-width: none; }
  .h-col-2 { flex: 0 auto; order: -9999; justify-content: flex-start; align-items: flex-end; width: 100%; height: 100%; }
  .h-content { gap: 64px; flex-flow: column; justify-content: flex-end; align-items: flex-start; height: 100%; }
  .h-subhead { align-items: center; height: 64px; }
  .h-subhead-text { max-width: none; }
  .h-mark { display: none; }
  .h-stamp { overflow: visible; }
  .h-stamp-container { justify-content: flex-end; align-items: flex-start; width: 100%; max-width: 192px; max-height: 384px; }
  .h2-red.is-approach { display: none; }
  .h2-red.is-mobile { display: flex; }
  .section-marquee { height: 80px; }
  .row { gap: 32px; flex-flow: column; }
  .col.is-xc_yc { justify-content: center; align-items: flex-start; }
  .col.is-approach { gap: 16px; flex-flow: row; justify-content: flex-start; align-items: center; padding-right: 0; }
  .content { flex: 1; }
  .scope-pillar { gap: 16px; max-width: none; }
  .scope-container { display: none; }
  .scope-container.is-mobile { display: flex; }
  .collage-v { display: none; }
  .collage-h { display: flex; }
  .collage-h.is-mobile { aspect-ratio: 5/2; display: flex; }
  .collage-h-4 { width: 1%; }
  .collage-h-2-img { flex: none; width: 112%; height: auto; }
  .c-collage-p2 { background-color: var(--green-500); }
  .c-collage-p3 { width: 1%; }
  .collage-v-4 { height: auto; min-height: 384px; }
  .flex-center { width: 1%; }
  .stamp-v { width: auto; height: 384px; }
  .image { max-width: none; height: 64%; }
  .div-popup { background-image: linear-gradient(#fffc,#fffc), url(/assets/art-griffin-red.d677f743.svg); background-position: 0 0, 100% 100%; background-size: auto, 80%; }
}
@media screen and (max-width: 767px) {
  .section-container { gap: 32px; padding: 80px 16px; }
  .section-container.is-hero { padding-top: 80px; padding-bottom: 80px; }
  .h-h1 { font-size: 32px; }
  .h-subhead { align-items: stretch; }
  .h-subhead-text { font-size: 18px; }
  .h-stamp-container { width: auto; max-width: none; max-height: 256px; }
  .text-40pt { font-size: 24px; }
  .text-40pt.is-red { font-size: 32px; }
  .text-caps { font-size: 48px; }
  .flex-v-64.is-pad_lt-16 { height: 64px; }
  .section-marquee { height: 64px; }
  .img-mark.is-white { width: 80px; height: 80px; }
  .img-mark.is-scroll { height: 48px; }
  .img-co_co { transform: none; }
  .collage-v-4 { min-height: 256px; }
  .collage-h-3 { transform-origin: 0 100%; transform: scale(.6); }
  .flex-center.is-co_b { transform-origin: 0 100%; transform: scale(.6); }
  .script-word-regulation, .script-word-risk { top: 12.33px; }
  .h-content, .row { gap: 32px; }
  .div-popup { height: 100%; padding: 24px; }
  .section-popup { justify-content: flex-start; }
  /* keep the label on one line and the button shrink-wrapped on a narrow or zoomed phone */
  .button-primary { padding: 16px min(30px, 7.6vw) 16px min(24px, 6.1vw); }
  .button-primary .button-text { white-space: nowrap; font-size: min(16px, 4.2vw); }
}
/* "meets" artwork scales with the old 56/83 font step. Production sets this at 640, not 767. */
@media (max-width: 640px) {
  .team-meets { height: 66px; }
  .team-meets-word { width: 116px; height: 26px; left: -3.26px; top: 24.73px; }
}
@media screen and (max-width: 479px) {
  /* Both of these were dropped in the first pass of the port and both were missed by the pixel
     check on the home page, which has no unclassed <h3> and paints every section's background.
     /collective has both, and the h3 cost 40px per heading: "Our Heavyweight History" wraps to
     two lines at 32px in a 390px viewport and fits on one at 24px. */
  body { background-color: var(--black-50); }
  h3 { font-size: 24px; }
  .section.is-hero { height: 100dvh; }
  .section-container { padding-top: 64px; padding-bottom: 64px; }
  .section-container.is-hero { padding-top: 64px; padding-bottom: 64px; }
  .section-container.is-vertical { gap: 32px; }
  .h-subhead-text { font-size: 16px; }
  .h2 { font-size: 32px; }
  .h2-red { font-size: 32px; }
  .text-40pt.is-red { font-size: 20px; }
  .section-marquee.is-vertical { display: none; }
  .collage-v-4 { width: 16vw; }
  .collage-v-4.is-blue { min-height: 256px; }
  .collage-h-4-point.is-white { height: 48px; width: 48px; }
  .collage-h-3 { transform: scale(.4); }
  .flex-center.is-co_b { transform: scale(.4); }
  .img-mark.is-white { width: 64px; height: 64px; }
  .content { width: 100%; }
  .content.is-footer { padding-right: 0; }
  .col.is-approach { flex-flow: column; justify-content: flex-start; align-items: flex-start; }
  .stamp-v { width: 100%; height: auto; }
  .div-popup { width: 100%; height: 100%; padding: 16px 24px 24px; }
  .form-container { grid-template-columns: 1fr; }
  .flex-v-0.is-span-2 { grid-column: span 1; }
}

/* ---------- mega menu open/close ----------
   Was a Webflow interaction ("Capabilities [IN]"/"[OUT]"): the panel slides down from -100vh in
   400ms outExpo, the caret flips 180 degrees, and the nav goes solid white. Same values, in CSS. */
.section-menu { transform: translateY(-100vh); transition: transform 400ms cubic-bezier(.19,1,.22,1); }
.section-menu.is-vis { transform: translateY(0); }
.img-caret svg { transition: transform 400ms cubic-bezier(.19,1,.22,1); }
.section-nav.is-menu-open { background-color: #fff !important; }
.section-nav.is-menu-open .img-caret svg { transform: rotateX(180deg); }
.section-nav.is-menu-open .img-menu { display: none; }
.section-nav.is-menu-open .img-exit { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .section-menu, .img-caret svg { transition: none; }
}

/* ---------- team + cohort responsive ----------
   These live in their own breakpoints (1279 and 640), not the site's 991/767/479 set, because
   the team canvas is an absolutely-positioned 1440x934 composition: it has to become a normal
   stacked flow the moment it no longer fits, which is a different question from the rest of the
   page's layout. Values are production's inline block verbatim. */
@media (max-width: 1279px) {
  .team-canvas { height: auto; display: flex; flex-direction: column; align-items: center; row-gap: 56px; padding: 72px 24px; }
  .team-head { position: static; width: 466px; max-width: 100%; height: auto; order: 1; }
  .team-strategy, .team-meets, .team-tech, .team-sub { position: static; }
  .team-meets { margin-top: -38px; margin-left: 44px; }
  .team-tech { margin-top: -44px; margin-left: 177px; }
  .team-sub { margin-top: 18px; }
  .team-card-maia { position: static; order: 2; }
  .team-card-victor { position: static; order: 3; }
  .team-engraving { display: none; }
}
@media (max-width: 640px) {
  .team-card-maia, .team-card-victor { width: 100%; height: auto; }
  .team-photo-maia, .team-photo-victor { position: static; width: 100%; height: 260px; display: block; }
  .team-panel-maia, .team-panel-victor { position: static; width: 100%; height: auto; padding: 28px 24px; }
  .team-tag-maia, .team-tag-victor { position: static; width: 100%; }
  .team-edge-maia, .team-edge-victor { display: none; }
  .team-strategy, .team-tech { font-size: 54px; }
  .team-meets { font-size: 56px; margin-top: -26px; margin-left: 30px; }
  .team-tech { margin-top: -30px; margin-left: 120px; }

  .cohort-card { padding: 72px 22px 48px; row-gap: 22px; }
  .cohort-headline { width: 90%; }
  .cohort-lede { font-size: 15px; }
  .cohort-pill { right: 14px; bottom: 14px; padding: 12px 18px; }
}

/* ---------- /privacy ----------
   The whole page is five rules. Nothing here is responsive: production sets no breakpoint
   overrides for any pp-* class, so the 44px h1 stays 44px at 390 as well as at 1920, and the
   measure is governed by .section-container's padding alone. Type family is inherited on
   purpose -- the headings take Alata from the h1/h2 element rules and the body copy takes Sora
   from <body>, exactly as production does. */
.pp-inner-1 { align-self: center; width: 100%; max-width: none; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; }
.pp-h1 { color: #c8401c; letter-spacing: -.01em; margin: 0 0 8px; font-size: 44px; font-weight: 700; line-height: 1.15; }
.pp-meta-1 { color: #8a8a8a; margin: 0 0 16px; font-size: 14px; }
.pp-h2 { color: #1a1a1a; letter-spacing: -.01em; margin: 40px 0 12px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.pp-p-1 { color: #333; text-align: left; margin: 0 0 16px; font-size: 16px; line-height: 1.7; }

/* ---------- /collective ----------
   Everything below is used only by /collective, and it is kept in one block rather than folded
   into the sections above because the page is a world of its own: eleven full-viewport client
   panels that open and close, a horizontally dragged gallery, and a cursor of its own.

   Its responsive layer lives at the bottom of this block for the same reason. */

/* the nav here is logo + menu button; production ships no Services/Work links on this page */
.section-nav.is-bare .link-nav { display: none; }

/* ----- shared type and rules the page adds to the primitives ----- */
.text-14pt { font-size: 14px; line-height: 140%; }
.text-18pt { font-size: 18px; line-height: 140%; }
.text-18pt.is-max-608 { max-width: 608px; }
.text-20pt { font-size: 20px; line-height: 140%; }
.text-24pt { font-size: 24px; line-height: 140%; }
.text-32pt { font-size: 32px; line-height: 140%; }
.text-unit { opacity: .48; font-size: 24px; }
.text-bold { font-weight: 600; }
.text-fade { opacity: .48; }
.text-red { color: var(--red-500); font-weight: 600; }
.text-black-300 { color: var(--black-300); }
.text-position { font-size: 14px; font-weight: 400; }
.text-tag { color: var(--black-500); letter-spacing: 4px; text-transform: uppercase; font-size: 14px; font-weight: 600; }
.text-tag.is-red { color: var(--red-500); }
.text-tag.is-black { letter-spacing: 2px; font-size: 14px; }
/* Webflow held this as a generated `#w-node-<uuid>` id rule. The uuid means nothing and would not
   survive a re-export, so it becomes a named modifier: the "Featured in" label sits on its own
   line above the press logos. The span widens below 992px, which is what pushes the logos onto
   the implicit tracks and gives the four-up row production renders. */
.text-tag.is-grid-label { grid-column: span 2; }
.text-tag.is-white { color: var(--black-50); font-size: 14px; }
.h2.is-all-caps { color: var(--red-500); text-transform: uppercase; font-size: 96px; }
.h2-red.is-full-width { font-size: 17.7cqi; }
.h3-inline { font-size: 32px; font-weight: 500; }
.h4-inline { font-size: 24px; font-weight: 500; }
/* the two script faces on this page; Snell Roundhand is macOS-only and falls back on purpose */
.h3-gold { color: var(--gold-500); font-family: "Snell Roundhand", "Palatino Linotype", sans-serif; font-size: 80px; font-weight: 400; }
.number { color: var(--red-500); font-family: "Snell Roundhand", "Palatino Linotype", sans-serif; font-size: 40px; }

.divider-horizontal { flex: none; width: 100%; height: 1px; }
.divider-horizontal.is-green { background-color: var(--green-950); opacity: .2; }
.divider-horizontal.is-gold { background-color: var(--gold-200); }
.divider-horizontal.is-white { background-color: var(--black-50); opacity: .32; }
.divider-vertical { flex: none; width: 1px; }
.divider-vertical.is-red { background-color: var(--red-500); }

.flex-h-8 { gap: 8px; justify-content: flex-start; align-items: center; width: 100%; display: flex; }
.flex-h-8.is-max-2col { max-width: var(--col-2); }
.flex-v-16 { gap: 16px; flex-flow: column; justify-content: flex-start; align-items: flex-start; height: 100%; display: flex; }
.flex-v-16.is-max-8col { width: 100%; height: 100%; max-width: var(--col-8); }
.flex-v-32.is-max-8col { height: 100%; }
/* grid-auto-columns matters here even though the template is explicit: the "Featured in" label
   below spans more tracks than the narrow breakpoints define, and the implicit columns that
   creates are what production sizes with this. Without it they size to content and the logo row
   collapses to two-up instead of four-up. */
.grid-2col { gap: 16px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid; }
.grid-6col { gap: 16px; grid-template-rows: auto; grid-template-columns: repeat(6, 1fr); grid-auto-columns: 1fr; width: 100%; display: grid; }
.content-title.is-h-16 { gap: 16px; }
.col.is-gap-32 { gap: 32px; }
.col.is-max-4col { width: 100%; max-width: var(--col-4); flex: none; }
.col.is-max-6col { max-width: var(--col-6); }
.col.is-max-8col { max-width: var(--col-8); justify-content: center; align-items: flex-start; }
.row.is-hcontainer { justify-content: flex-start; align-items: stretch; container-type: inline-size; }
.div-block-5-copy { gap: 16px; width: 50%; display: flex; }
.div-icon_group { gap: 16px; width: 100%; max-width: var(--col-4); justify-content: flex-start; align-items: flex-start; display: flex; }
.img-logo { width: 40px; height: 40px; }
.img-key_fill.is-red-700 { color: var(--red-700); }
.img-mark--hero { aspect-ratio: 1; object-fit: contain; flex: none; align-self: stretch; width: 64px; height: 64px; }
.div-hero--gated { gap: 64px; flex-flow: column; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 50%; display: flex; }

/* ----- our model ----- */
.col.is-model { gap: 8px; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: var(--col-4); flex: none; padding-right: 88px; }
.row.is-model { border-top: 1px solid var(--gold-500); border-bottom: 1px solid var(--gold-500); padding-top: 24px; padding-bottom: 24px; }

/* ----- leadership and team ----- */
.div-profile { object-fit: cover; width: 100%; height: var(--col-2); overflow: hidden; }
.div-profile.is-leadership { height: 80cqi; }
.div-profile--name {
  gap: 8px; width: 100%; height: 192px; color: var(--black-50); text-wrap: wrap;
  flex-flow: column; justify-content: flex-end; align-items: flex-start;
  padding: 32px 32px 16px 16px; display: flex; position: relative;
}
.div-profile--name.is-red   { background-color: var(--red-950);   justify-content: space-between; }
.div-profile--name.is-blue  { background-color: var(--blue-950);  justify-content: space-between; }
.div-profile--name.is-green { background-color: var(--green-950); justify-content: space-between; }
.div-profile--name.is-leadership { background-color: var(--green-950); justify-content: space-between; height: 50cqi; }
.div-profile--accent { width: 32px; height: 32px; position: absolute; inset: 0 0 auto auto; }
.div-profile--accent.is-red   { background-color: var(--red-500); }
.div-profile--accent.is-blue  { background-color: var(--blue-500); }
.div-profile--accent.is-green { background-color: var(--green-500); }
.flex-v-16.is-leadership {
  border-bottom: 8px solid var(--gold-500); background-color: var(--green-50);
  height: 272px; padding: 32px;
}
.col.is-max-4col.is-profile { gap: 0; container-type: inline-size; }
.col.is-team { gap: 0; flex: none; width: calc(20cqi - 12.8px); }
.flex-block-8 { flex-flow: column; align-items: flex-start; display: flex; }
.flex-block-7 { gap: 16px; flex-flow: wrap; align-items: flex-start; width: 100%; display: flex; container-type: inline-size; }
.section-container.is-leadership { gap: 0; }

/* ----- partners accordion -----
   Same shape as the client panels below: 80px closed, natural height open, handle at 45deg
   (which turns the x into a +) closed and 180deg open. */
.div-partner--accordion { gap: 16px; flex-flow: column; align-items: flex-start; width: 100%; display: flex; }
.div-partner {
  gap: 16px; cursor: pointer; flex-flow: column; justify-content: space-between;
  align-items: flex-start; width: 100%; height: 80px; padding-bottom: 32px;
  display: flex; overflow: hidden; transition: height .4s ease-in-out;
}
.div-partner.is-open { height: auto; }
.div-partner--title {
  border-top: 1px solid var(--gold-500); flex-flow: row; flex: none;
  justify-content: space-between; align-items: center; width: 100%; height: 80px;
  padding-top: 16px; padding-bottom: 16px; display: flex;
}
.div-partner .grid-2col { opacity: 0; transition: opacity .4s ease-in-out; }
.div-partner.is-open .grid-2col { opacity: 1; }
.div-handle { flex-flow: column; justify-content: center; align-items: center; width: 24px; height: 24px; display: flex; }
.text-handle { font-size: 24px; font-weight: 300; line-height: 140%; transform: rotate(45deg); transition: transform .4s ease-in-out; }
.text-handle.is-gold { color: var(--gold-500); }
.text-handle.is-white { color: var(--black-50); }
.div-partner.is-open .text-handle,
.section-client.is-open .text-handle { transform: rotate(180deg); }

/* ----- client panels -----
   Production drives these with a Webflow interaction that writes an inline height of 80px on
   load and animates it to auto on click. Here the collapsed height is simply the base rule and
   .is-open carries the open one, so nothing depends on JavaScript having run to look right. */
.section-client {
  z-index: 0; flex-flow: column; flex: none; justify-content: flex-start; align-items: center;
  width: 100%; height: 80px; display: flex; position: relative; overflow: hidden;
  transition: height .4s ease-in-out;
}
.section-client.is-open { height: calc(100vh - 80px); }
.section-client.is-mempool.is-open { height: 100vh; }
.section-client.is-alphaone { scroll-snap-align: start; background-color: #002ecd; }
.section-client.is-ampleforth { background-image: linear-gradient(#000, #242424); }
.section-client.is-block3 { background-image: linear-gradient(135deg, #16b3c7, #30678b 35%, #442d5d 66%, #873fb8); }
.section-client.is-fragments { background-image: linear-gradient(#3d2757, #0c0c0c); }
.section-client.is-mempool { background-image: linear-gradient(#ef8d17, #270c01); }
.section-client.is-nirvana { background-image: linear-gradient(#a6353d, #290c3b); }
.section-client.is-oobyte { background-image: linear-gradient(#23254d, #0b3696); }
.section-client.is-spot { background-image: linear-gradient(225deg, #f6c000, #0009cb 50%, #270c01); }
.section-client.is-syntropyx { background-image: linear-gradient(135deg, #d97e69, #263faf); }
.section-client.is-tomi { background-image: linear-gradient(#090827, #6a0d0d); }
.section-client.is-zerobase { background-image: linear-gradient(#05b8d0, #03505b); }

.section-client--toggle { justify-content: center; align-items: center; width: 100%; height: 80px; padding: 0; display: flex; }
.div-client--title {
  cursor: pointer; flex: none; justify-content: space-between; align-items: center;
  width: 100%; max-width: 1280px; height: 80px; padding-left: 24px; padding-right: 24px; display: flex;
}
.div-client--logo { height: 32px; }
.div-client--logo.is-40px { height: 40px; }
.div-client--logo.is-48px { height: 48px; }
/* offsets the in-page jump so a panel does not open underneath the fixed nav */
.link-anchor { position: absolute; top: -80px; }

.section-container.is-clients {
  gap: 0; height: 100%; color: var(--black-50); background-color: transparent;
  flex-flow: column; justify-content: flex-start; align-items: center;
  padding: 0 0 64px; display: flex;
}
.row.is-clients {
  gap: 16px; text-align: center; flex-flow: row; justify-content: flex-start; align-items: stretch;
  max-width: 1280px; height: auto; padding-left: 24px; padding-right: 24px;
  position: relative; overflow: visible; opacity: 0; transition: opacity .4s ease-in-out;
}
.section-client.is-open .row.is-clients { opacity: 1; }
.row.is-clients--header { gap: 64px; text-align: center; flex-flow: column; justify-content: center; align-items: center; height: 100%; }

/* the left-hand column of copy scrolls on its own, faded out at the bottom edge */
.col.is-client {
  z-index: 3; gap: 32px; text-align: left; scrollbar-width: thin; scrollbar-color: #ffffff29 transparent;
  flex: none; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 504px;
  padding: 16px 24px 64px 0; line-height: 140%; overflow: hidden scroll;
  -webkit-mask-image: linear-gradient(#000 90%, #0000); mask-image: linear-gradient(#000 90%, #0000);
}
.div-client--tags { gap: 16px; flex-flow: column; align-items: flex-start; width: 100%; display: flex; }
.div-client--taglist { gap: 8px; flex-flow: wrap; align-items: flex-start; width: 100%; display: flex; }
.div-client--details, .div-client--results {
  gap: 16px; text-align: left; text-wrap: wrap; flex-flow: column;
  align-items: flex-start; width: 100%; display: flex;
}
.div-client--metrics { gap: 8px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; align-items: stretch; width: 100%; display: grid; }
.div-client--item {
  gap: 16px; flex-flow: column; align-items: flex-start; border: 1px solid #ffffff52;
  padding: 8px; display: flex; transition: background-color .2s ease-in-out;
}
.div-client--item:hover { background-color: #ffffff14; border-color: #ffffff7a; }
.div-chip { background-color: #00000052; justify-content: center; align-items: center; padding: 8px 16px; font-size: 14px; display: flex; }
.div-chip.is-white { background-color: #ffffff14; }

/* the gallery is dragged sideways, so it swallows the pointer and the .crs disc stands in for it */
.col.is-gallery {
  justify-content: flex-start; align-items: flex-start; width: calc(50vw + 96px); min-width: 0;
  height: calc(100vh - 224px); position: absolute; inset: 0 0 0 calc(50% - 96px); overflow: hidden;
}
.div-client--gallery {
  gap: 16px; scrollbar-width: thin; scrollbar-color: #ffffff29 transparent; flex: 1;
  flex-flow: column; align-items: flex-start; width: 100%; height: 100%;
  display: flex; overflow: scroll hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, #0000 100%);
  mask-image: linear-gradient(90deg, #000 90%, #0000 100%);
}
/* three rows deep, filled column by column: the wrap order IS the visual order */
.div-client--container {
  gap: 16px; pointer-events: none; cursor: none; flex-flow: wrap; flex: none;
  align-content: flex-start; align-items: flex-start; align-self: stretch;
  width: calc(200vh - 432px); height: 100%; display: flex;
}
.div-client--container.is-1set { width: calc(100vh - 224px); }
.div-client--container.is-3set { width: calc(300vh - 640px); }
.div-client--gallery-square { aspect-ratio: 1; flex: none; width: calc(33.3333vh - 85.3333px); height: calc(33.3333vh - 85.3333px); }
.div-client--gallery-wide { aspect-ratio: 2; object-fit: cover; flex: none; width: calc(66.6667vh - 154.667px); height: calc(33.3333vh - 85.3333px); }
.div-client--gallery-special {
  object-fit: cover; background-position: 50%; background-repeat: no-repeat; background-size: 101%;
  flex: none; width: 100%; height: 100%;
}
.div-client--gallery-special.is-oobyte { object-fit: cover; }

/* Per-image fits. Every one of these is a photograph that would be cropped wrongly by the
   default cover, or a logo card that needs its own backdrop behind the letterboxing. */
.div-client--gallery-square.is-alph1, .div-client--gallery-square.is-alph9,
.div-client--gallery-square.is-ampl1, .div-client--gallery-square.is-ampl7,
.div-client--gallery-square.is-blck3, .div-client--gallery-square.is-blck11,
.div-client--gallery-square.is-frag1, .div-client--gallery-square.is-frag9,
.div-client--gallery-square.is-memp5, .div-client--gallery-square.is-memp7,
.div-client--gallery-square.is-memp9, .div-client--gallery-square.is-nirv5,
.div-client--gallery-square.is-spot1, .div-client--gallery-square.is-spot3,
.div-client--gallery-square.is-spot7, .div-client--gallery-square.is-spot9,
.div-client--gallery-square.is-spot11, .div-client--gallery-square.is-synx7,
.div-client--gallery-square.is-synx13 { object-fit: cover; }
.div-client--gallery-square.is-alph11 { object-fit: cover; object-position: 0 50%; }
.div-client--gallery-square.is-frag3 { object-fit: cover; object-position: 100% 50%; }
.div-client--gallery-square.is-nirv15 { object-fit: cover; object-position: 0 0; }
.div-client--gallery-square.is-synx17 { object-fit: cover; object-position: 0 50%; }
.div-client--gallery-square.is-blck7 { object-fit: contain; background-color: #dd6be5; }
.div-client--gallery-square.is-synx15 { background-image: url(/assets/video/syntropyx-gif-4-poster.deeaefc2.webp); background-position: 50%; }
.div-client--gallery-square.is-zero3 { background-image: url(/assets/zerobase-6.6ca26d76.jpg); background-size: contain; }
.div-client--gallery-wide.is-ampl6, .div-client--gallery-wide.is-ampl10,
.div-client--gallery-wide.is-ampl12, .div-client--gallery-wide.is-blck6,
.div-client--gallery-wide.is-blck12 { object-fit: contain; background-color: #000; }
.div-client--gallery-wide.is-ampl8 { background-color: #000; }
.div-client--gallery-wide.is-synx4, .div-client--gallery-wide.is-synx18 { object-fit: contain; background-color: #fffbf2; }
.div-client--gallery-wide.is-alph4 { object-fit: contain; object-position: 100% 50%; background-color: #0014f1; }
.div-client--gallery-wide.is-alph6 { object-position: 50% 0; background-image: url(/assets/alphaone-5.115d3ce0.jpg); background-position: 50% 0; }
.div-client--gallery-wide.is-blck10 { object-position: 50% 30%; }
.div-client--gallery-wide.is-frag12 { background-image: url(/assets/fragments-14.4df0a6b8.webp); }
.div-client--gallery-wide.is-memp6 { background-image: url(/assets/mempool-3.4c125803.jpg); }
.div-client--gallery-wide.is-memp12 { background-image: url(/assets/mempool-2.ed062c93.jpg); }

/* the drag cursor: an 80px disc that replaces the pointer over a gallery */
.crs {
  z-index: 0; opacity: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none; cursor: none; background-color: #ffffff29; border: 1px solid #ffffff3d;
  border-radius: 50%; justify-content: center; align-items: center; width: 80px; height: 80px;
  transition: opacity .2s; display: flex; position: fixed; transform: translate(-50%, -50%);
}
.text-crs { color: var(--black-50); letter-spacing: 4px; text-transform: uppercase; font-size: 12px; font-weight: 600; }

/* ----- /collective breakpoints ----- */
@media (min-width: 1280px) {
  .col.is-client { height: calc(100vh - 224px); }
  .div-client--gallery-special { max-width: var(--col-7); background-color: transparent; }
  .div-client--gallery-special.is-oobyte { background-image: url(/assets/oobyte-1.c6b1ab63.webp); background-size: cover; }
  .div-client--gallery-special.is-tomi { background-image: url(/assets/tomi-1.95a05f62.webp); background-size: cover; }
}

@media (max-width: 991px) {
  /* The panels stop being viewport-height here and simply grow, so the copy column drops below
     the gallery instead of scrolling beside it. An open panel therefore cannot animate its
     height, and does not try to. */
  .section-client.is-open, .section-client.is-mempool.is-open { height: auto; transition: none; }
  .col.is-gallery {
    flex: none; order: -9999; width: calc(100vw - 48px); height: calc(50vw - 24px);
    position: relative; left: 0; overflow: visible;
  }
  .col.is-client {
    order: 9999; max-width: none; padding-right: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .row.is-clients { flex-flow: column; height: auto; }
  .div-client--gallery {
    scroll-snap-type: x mandatory; width: calc(100% + 64px); padding-left: 32px;
    position: relative; left: -32px; -webkit-mask-image: none; mask-image: none;
  }
  .div-client--container, .div-client--container.is-1set, .div-client--container.is-3set {
    flex-flow: row; align-items: stretch; width: auto; height: 100%;
  }
  .div-client--gallery-square { scroll-snap-align: center; width: calc(50vw - 24px); height: calc(50vw - 24px); }
  .div-client--gallery-wide,
  .div-client--gallery-special { scroll-snap-align: center; width: calc(100vw - 48px); height: calc(50vw - 24px); }
  .div-hero--gated { gap: 32px; order: 9999; justify-content: flex-end; align-items: flex-start; width: auto; max-width: none; }
  .div-profile { width: 100%; max-width: none; height: 192px; }
  .div-profile--name.is-leadership { max-width: 36cqi; height: 100%; }
  .flex-v-16.is-leadership { flex: 0 auto; justify-content: center; align-items: flex-start; width: 100%; height: 100%; }
  .col.is-max-4col.is-profile { flex-flow: row; justify-content: center; max-width: none; height: 50cqi; }
  .col.is-max-6col { max-width: none; }
  .col.is-model { padding-right: 0; }
  .col.is-team { width: calc(33.3333cqi - 10.6667px); }
  .row.is-model { gap: 16px; }
  .divider-vertical.is-red { width: 100%; height: 1px; }
  .grid-6col { grid-template-columns: repeat(3, 1fr); }
  .text-tag.is-grid-label { grid-column: span 4; }
  .img-logo { height: 32px; }
}

@media (max-width: 767px) {
  .col.is-gap-32 { gap: 16px; }
  .flex-v-16.is-leadership { flex: 1; }
  .img-mark--hero { flex: 1; }
  .text-20pt, .text-handle { font-size: 20px; }
}

@media (max-width: 479px) {
  .col.is-max-4col.is-profile { flex-flow: column; height: auto; }
  .col.is-model { flex-flow: column; justify-content: flex-start; align-items: flex-start; }
  .col.is-team { scroll-snap-align: center; width: 100cqi; }
  .col.is-team.is-last { scroll-snap-align: none; height: 256px; }
  .div-client--container { gap: 8px; }
  .div-client--metrics { grid-template-columns: 1fr; }
  .div-profile { height: 100cqi; }
  .div-profile--name.is-leadership { max-width: none; height: 192px; }
  .flex-block-7 { flex-flow: row; flex: none; width: calc(100% - 16px); }
  .flex-block-8 {
    scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-behavior: smooth;
    scrollbar-color: #ffffff29 transparent; flex-flow: row; width: calc(100% + 32px);
    padding-left: 16px; position: relative; left: -16px; overflow: scroll;
  }
  .flex-v-16.is-leadership { padding-left: 24px; padding-right: 24px; }
  .grid-6col { grid-template-columns: 1fr 1fr; }
  .h2.is-all-caps { font-size: 64px; }
  .h3-inline { font-size: 24px; }
  .h4-inline { font-size: 20px; }
  .div-icon_group { gap: 8px; flex-flow: column; }
  .link-anchor { top: -64px; }
  .text-20pt { font-size: 18px; }
  .text-handle { font-size: 18px; }
  .text-tag.is-red { font-size: 12px; }
}

/* ---------- /collective gate ----------
   Shown in place of the page until the password is accepted. Production's version is a Webflow
   "password page" whose classes are otherwise unused, so they live here rather than in the shared
   form block above -- the one exception is .form-field, which is the same field as the contact
   form's and is deliberately shared. */
.body-gated {
  background-color: var(--red-950);
  background-image: url(/assets/bg-flourish-red.4eaece91.svg);
  background-position: 50%; background-size: auto;
}
.section-gated {
  z-index: 25; justify-content: center; align-items: center;
  padding-left: 24px; padding-right: 24px; display: flex; position: fixed; inset: 0; overflow: hidden;
}
.div-gated {
  z-index: 100; gap: 32px; border-top: 8px solid var(--red-500); background-color: var(--gold-50);
  /* the white wash sits over the key-in-hand artwork so the form stays readable on top of it */
  background-image: linear-gradient(#fffc, #fffc), url(/assets/art-hand-key-bg.6dcfde7f.svg);
  background-position: 0 0, 72%; background-repeat: repeat, no-repeat;
  background-size: auto, 256px 256px; background-attachment: scroll, fixed;
  flex-flow: column; width: 100%; max-width: 608px; padding: 32px 32px 24px;
  display: flex; overflow: auto;
}
.utility-page-form { gap: 32px; flex-direction: column; align-items: stretch; display: flex; }
.section-gated .flex-v-0 { flex: 1; align-items: stretch; width: 100%; }
.flex-block-10 { display: flex; flex-flow: row; align-items: stretch; }
.submit-button-2 {
  background-color: var(--red-500); color: var(--black-50); border: 0;
  padding-left: 32px; padding-right: 32px; font: inherit; font-weight: 500; cursor: pointer;
}
.gate-error { background-color: var(--red-50); color: var(--red-950); padding: 10px; text-align: center; }

@media (max-width: 991px) {
  .div-gated {
    background-image: linear-gradient(#fffc, #fffc), url(/assets/art-griffin-red.d677f743.svg);
    background-position: 0 0, 100% 100%; background-size: auto, 80%;
  }
}
@media (max-width: 767px) {
  .section-gated { justify-content: flex-start; }
  .div-gated { padding: 24px; }
}
@media (max-width: 479px) {
  .div-gated { padding: 16px 24px 24px; }
}