/* ===== Tokens ===== */
:root{
  --black: #000000;
  --near-black: #1b1d21;
  --white: #ffffff;
  --grey: #6e6e6e;
  --purple-deep: #3f277d;
  --media: #ff3347;
  --pharma: #00e6ff;
  --sports: #d4f779;
  --beauty: #c45cff;
  /* Service colours: the brand's colour coding now marks services (industries are examples of the work). */
  --svc-web: var(--pharma);
  --svc-ai: var(--beauty);
  --svc-media: var(--media);
  --svc-marketing: var(--sports);
  --svc-strategy: #ffb02e;
  --svc-science: #5b8cff;
  --gap: clamp(20px, 6.04vw, 87px);
  --maxw: 1440px;
  --u: calc(min(100vw, 1440px) / 1440);
  --h1: clamp(34px, calc(var(--u) * 100), 100px);
  --font: 'Archivo', system-ui, sans-serif;
  --font-alt: 'Inter', system-ui, sans-serif;
  --cw: calc(var(--u) * 276);
  --focus: #00e6ff;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1,h2,h3{ font-weight: 700; line-height: 1.05; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap); }
.eyebrow{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing:.02em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.eyebrow__dot{ color: var(--pharma); font-size: 9px; }

/* ===== NAV ===== */
.nav{ position: relative; z-index: 100; background: transparent; }
.nav__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gap);
}
.nav__logo{
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  isolation: isolate;
}
.nav__logo img{ width: 100%; height: 100%; object-fit: cover; }
/* Hover tint (homepage service cards set --lc). The tint layer is masked to the logo's own
   shape, so only the strokes change colour and the logo needs no black box behind it
   (which used to show as a dark square over images and textured sections). */
.nav__logo::after{
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--lc, transparent);
  mix-blend-mode: color;
  -webkit-mask: url("../img/logo-mono.png") center / cover no-repeat;
  mask: url("../img/logo-mono.png") center / cover no-repeat;
  transition: background-color .45s ease;
}
.nav__links{ display: flex; align-items: center; gap: 25px; }
.nav__right{ display: flex; align-items: center; gap: 24px; }
.nav__link{
  font-size: 14px;
  letter-spacing:0;
  text-transform: uppercase;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 21px;
}
.nav__link--strong{ font-weight: 500; margin-left: 1px; }
.nav__chev{ width: 10px; height: 7px; transform: scaleY(-1); margin-left: 3px; }
/* Industries dropdown (desktop nav). Opens on hover/focus, or on click via
   main.js (.is-open + aria-expanded) for touch and keyboard users. */
.nav__drop{ position: relative; }
.nav__drop-btn .nav__chev{ transition: transform .2s ease; }
.nav__drop.is-open .nav__chev, .nav__drop:hover .nav__chev{ transform: scaleY(1); }
.nav__menu{
  position: absolute; top: calc(100% + 14px); left: -20px; z-index: 110;
  display: flex; flex-direction: column; gap: 14px; min-width: 190px; margin: 0; padding: 18px 20px;
  list-style: none; background: rgba(0,0,0,.92); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
/* invisible bridge so the menu doesn't close while the pointer moves down to it */
.nav__menu::before{ content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu, .nav__drop.is-open .nav__menu{
  opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.nav__menu .eco{ color: #fff; transition: opacity .2s ease; }
.nav__menu .eco:hover{ opacity: .7; }
.nav__burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-right: -9px;
  padding: 0 9px;
}
.nav__burger span{
  display: block;
  width: 100%;
  height: 3px;
  background: var(--white);
  transition: transform .38s cubic-bezier(.2,.7,.2,1), width .38s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.nav__burger span:last-child{ width: 62%; margin-left: auto; }

/* ===== SIDE LABELS ===== */
.sides{ position: fixed; inset: 0; z-index: 101; display: none; pointer-events: none; }
.side{
  position: absolute;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #6e6e6e;
  text-transform: uppercase;
  letter-spacing:.02em;
  white-space: nowrap;
}
.side--left{ left: 30px; top: 36px; font-size: 14px; font-weight: 100; line-height: 16px; }
.side--left b{ font-weight: 800; }
.side--right{ right: 23px; top: 205px; font-size: 16px; font-weight: 800; line-height: 20px; }
.side__n{ letter-spacing:-.3em; }

/* ===== HERO ===== */
.hero{
  position: relative;
  background: var(--black);
  overflow: hidden;
  margin-top: -86px;
  padding-top: 86px;
  padding-bottom: calc(var(--u) * 111);
}
.hero__inner{ max-width: var(--maxw); margin: 0 auto; padding: var(--gap); }
.hero__title{
  font-size: var(--h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.hero__row{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(24px, calc(var(--u) * 150), 150px);
}
.hero__poly{
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  left: calc(var(--u) * -1435);
  top: calc(var(--u) * -1516);
  width: calc(var(--u) * 3198);
  height: calc(var(--u) * 3198);
}
.hero__poly path{ stroke: var(--accent, #fff); transition: stroke .45s ease; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__poly-a{ stroke-opacity: .5; }
.hero__poly-b{ stroke-opacity: .2; }
.hero__connect{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-left: calc(var(--u) * 332);
  font-size: var(--h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--accent, #fff);
  transition: -webkit-text-stroke-color .45s ease;
}
.nn{ position: relative; display: inline-block; }
.nn i{ font-style: normal; letter-spacing: -.27em; }
.nn__s{
  color: transparent;
  -webkit-text-stroke: 2px var(--accent, #fff);
  transition: -webkit-text-stroke-color .45s ease;
}
.nn__f{ position: absolute; left: 0; top: 0; color: #000; -webkit-text-stroke: 0; }
.hero__aside{
  position: relative;
  z-index: 1;
  flex: 0 1 330px;
  min-width: 0;
  padding: 13px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero__copy{ font-size: 15px; line-height: 24px; color: #fff; }
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  line-height: 24px;
  color: var(--white);
}
.play{
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.play__shape{
  position: absolute;
  left: 12.44%;
  top: 7.85%;
  width: 75.12%;
  height: 67.15%;
  background: #fff;
  transition: background-color .45s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2214.3506%22%20height%3D%2212.826%22%20viewBox%3D%220%200%2014.3506%2012.826%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20id%3D%22Polygon%201%22%20d%3D%22M5.87614%200.75006C6.45353%20-0.25002%207.89703%20-0.25002%208.47442%200.75006L14.1473%2010.5758C14.7247%2011.5759%2014.003%2012.826%2012.8482%2012.826H1.50236C0.347564%2012.826%20-0.374181%2011.5759%200.203216%2010.5758L5.87614%200.75006Z%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%20%3C%2Fsvg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2214.3506%22%20height%3D%2212.826%22%20viewBox%3D%220%200%2014.3506%2012.826%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20id%3D%22Polygon%201%22%20d%3D%22M5.87614%200.75006C6.45353%20-0.25002%207.89703%20-0.25002%208.47442%200.75006L14.1473%2010.5758C14.7247%2011.5759%2014.003%2012.826%2012.8482%2012.826H1.50236C0.347564%2012.826%20-0.374181%2011.5759%200.203216%2010.5758L5.87614%200.75006Z%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%20%3C%2Fsvg%3E") center/100% 100% no-repeat;
}
.hero .play__shape{ background: var(--accent, #fff); }
.link-arrow:hover .play{ transform: rotate(90deg) translateY(-4px); }
.hero__cards{
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  justify-content: space-between;
  align-items: flex-start;
  height: 515px;
}
.ind-card{
  position: relative;
  overflow: hidden;
  height: 515px;
  padding: 29px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 10px solid var(--media);
  background: #000;
  color: var(--white);
  flex: none;
  width: var(--cw);
  transition: width .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.ind-card > *{ position: relative; z-index: 2; }
.ind-card__bg{ position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0 !important; }
.ind-card__tag{ font-size: 14px; letter-spacing:.02em; text-transform: uppercase; line-height: 16px; }
.ind-card__tag b{ font-weight: 800; }
.ind-card__tag i{ font-style: normal; font-weight: 100; }
.ind-card__text{
  min-height: 92px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  letter-spacing:-.02em;
  line-height: 24px;
}
.ind-card--pharma{ border-top-color: var(--pharma); background: var(--near-black); --ring: var(--pharma); }
.ind-card--sports{ border-top-color: var(--sports); --ring: var(--sports); }
.ind-card--beauty{ border-top-color: var(--beauty); --ring: var(--beauty); }
.ind-card--beauty::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 49.139%, rgba(0,0,0,.6) 89.343%);
}
.ind-card__art{
  position: absolute !important;
  left: -483px;
  top: -98px;
  z-index: 0 !important;
  width: 1586px;
  height: 773px;
  max-width: none;
}
.mock-card{
  width: 280px;
  flex-shrink: 0;
  align-self: flex-start;
  background: var(--white);
  color: #000;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 3px 14px rgba(0,0,0,.25);
  font-family: var(--font-alt);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  transform-origin: top left;
}
.mock-card__head{ display: flex; align-items: center; gap: 2px; font-weight: 700; font-size: 14px; color: var(--near-black); }
.mock-card__msg{ display: flex; flex-direction: column; gap: 6px; }
.mock-card__who{ display: flex; gap: 6px; align-items: flex-start; }
.mock-card__msg + .mock-card__msg{ border-top: 1px solid #e5e5e5; padding-top: 12px; }
.mock-card__avatar{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: var(--white);
  font-size:9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing:-.03em;
}
.mock-card__name{
  font-size: 12px;
  font-weight: 700;
  letter-spacing:-.02em;
  line-height: 1.5;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.mock-card__name time{ font-weight: 400; font-size:8px; letter-spacing: -.27px; }
.mock-card__text{ font-size:11px; line-height: 1.5; letter-spacing:-.03em; color: #000; }
.mock-card__reacts{ display: flex; gap: 6px; }
.mock-card__reacts span{
  background: rgba(24,5,72,.1);
  border-radius: 21px;
  padding: 1px 6px;
  font-size:11px;
  line-height: 1.5;
  letter-spacing:-.03em;
}

/* ===== HERO CARD HOVER ===== */
.ind-card.is-active{ width: calc(var(--cw) * 1.1); height: 568px; }
.hero__cards.has-active .ind-card:not(.is-active){ filter: brightness(.5); }
.ind-card__tag, .ind-card__text{ transition: font-size .5s cubic-bezier(.2,.7,.2,1); }
.ind-card.is-active .ind-card__tag{ font-size: 15px; }
.ind-card.is-active .ind-card__text{ font-size: 22px; line-height: 26px; }
.ind-card.is-active .mock-card{ transform: scale(1.1); }

/* ===== TESTIMONIAL ===== */
.testimonial{ background: var(--white); color: #000; }
.testimonial__inner{
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 90px var(--gap);
}
.testimonial__media{ position: relative; flex: 0 0 528px; max-width: 100%; overflow: hidden; }
.testimonial__media video{ display: block; width: 100%; aspect-ratio: 528/352.22; object-fit: cover; border-radius: 0; }
.testimonial__caption{
  position: absolute;
  left: 20px;
  bottom: 22px;
  font-size: 16px;
  letter-spacing:0;
  line-height: 24px;
  color: #fff;
}
.testimonial__copy{ display: flex; flex-direction: column; gap: 10px; width: 568px; max-width: 100%; }
.testimonial__tri{ width: 16px; height: 19px; }
.testimonial__brand{ font-size: 24px; letter-spacing:.02em; text-transform: uppercase; line-height: 1.1; }
.testimonial__brand b{ font-weight: 800; }
.testimonial__brand i{ font-style: normal; font-weight: 100; }
.testimonial__text{ font-size: 24px; font-weight: 500; letter-spacing:-.02em; line-height: 32px; color: #000; }
.testimonial__text strong{ font-weight: 800; }

/* ===== HOW FSE HELPS ===== */
.helps{ background: var(--white); color: #000; padding: 90px var(--gap); }
.helps__head{
  max-width: var(--maxw);
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.helps__head .eyebrow{
  justify-content: center;
  margin: 0;
  color: #000;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
}
.helps__head h2{ font-size: clamp(28px, 2.78vw, 40px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.helps__grid{ max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
.helps__card{ display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.helps__img{ position: relative; width: 100%; aspect-ratio: 1024/585; overflow: hidden; }
.helps__img img{ position: absolute; max-width: none; }
.helps__img .crop-1{ width: 188.62%; height: 207.97%; left: -24.25%; top: -53.98%; }
.helps__img .crop-2{ width: 115.77%; height: 115.77%; left: -7.88%; top: -3.67%; }
.helps__img .crop-3{ width: 111.83%; height: 221.48%; left: -10.18%; top: -62.05%; }
.helps__card h3{
  font-size: 21px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
@font-face{font-family:'Archivo Arrow'; src:url(../fonts/archivo-arrow-700.ttf) format('truetype'); font-weight:700;}
.helps__card .arrow{ font-family: 'Archivo Arrow', 'Archivo', sans-serif; font-weight: 700; font-size: inherit; }
.helps__card p{ font-size: 15px; line-height: 24px; color: #000; }

/* ===== EDGE ===== */
.edge{ background: var(--black); overflow: hidden; }
.edge__inner{ position: relative; max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap); }
.edge__copy{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 568px;
  max-width: 100%;
}
.edge__copy h2, .tech__copy h2{ font-size: clamp(32px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.042; margin: 0; }
.edge__copy p{ font-size: 15px; line-height: 24px; color: #fff; margin: 0; max-width: none; }
.edge__tri{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  left: calc(var(--u) * 820);
  top: calc(var(--u) * -102);
  width: calc(var(--u) * 581);
  height: calc(var(--u) * 604);
}
.edge__tri path{ stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.edge__tri-a{ stroke-opacity: .85; }
.edge__tri-b{ stroke-opacity: .55; }
.edge__tri-c{ stroke-opacity: .3; }

/* ===== TECH ===== */
.tech{ position: relative; height: 604px; overflow: hidden; background: #000; }
.tech__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Parallax: the video is 30% taller than the section and main.js slides it
   (--py, -1 to 1) as the section scrolls past, so it moves slower than the page */
.tech__bg{ top: -15%; height: 130%; transform: translate3d(0, calc(var(--py, 0) * 10%), 0); will-change: transform; }
.tech__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 90px var(--gap);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tech__copy{
  width: 568px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  color: #fff;
}
.tech__text p{ font-size: 15px; line-height: 24px; color: #fff; }

/* ===== STORIES ===== */
/* Full-bleed strip of image tiles (modelled on agr.studio): tiles run edge
   to edge, the strip scrolls natively (swipe / trackpad, snap per tile) and
   the arrows sit over its left and right edges. main.js wires the arrows. */
.stories{ background: var(--white); color: #000; overflow: hidden; padding-bottom: 90px; }
.stories__inner{ max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap) 40px; }
.stories__head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.stories__title{ display: flex; flex-direction: column; gap: 16px; }
.stories__title .eyebrow{ color: #000; font-weight: 300; font-size: 14px; letter-spacing: 0; margin: 0; line-height: 14px; }
.stories__title h2{ font-size: 32px; font-weight: 500; letter-spacing: -.06em; line-height: 40px; }
.stories__all{ font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.stories__all:hover{ opacity: .6; }
.stories__rail{ position: relative; --tile: calc(var(--u) * 349); --tgap: 24px; }
.stories__viewport{
  display: flex; gap: var(--tgap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.stories__viewport::-webkit-scrollbar{ display: none; }
/* Looping strip (main.js): it drifts continuously, so snapping would fight it; the arrows scroll smoothly themselves. */
.stories__viewport.is-looping{ scroll-snap-type: none; scroll-behavior: auto; }
.story{ flex: none; width: var(--tile); scroll-snap-align: start; display: flex; flex-direction: column; }
.story__img{ display: block; overflow: hidden; aspect-ratio: 349 / 380; background: #eee; }
.story__img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
a.story:hover .story__img img{ transform: scale(1.04); }
.story__meta{ margin-top: 14px; padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 16px; text-transform: uppercase; color: #777; }
.story h3{ margin-top: 6px; padding: 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.story__desc{ margin-top: 6px; padding: 0 12px; font-size: 14px; line-height: 20px; color: #444; }
.stories__arrow{
  position: absolute; z-index: 2; top: calc(var(--tile) * 380 / 349 / 2); transform: translateY(-50%);
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  background: rgba(255,255,255,.92); box-shadow: 0 4px 18px rgba(0,0,0,.15); transition: opacity .2s ease, background .2s ease;
}
.stories__arrow img{ display: block; width: 19px; height: 22px; }
.stories__arrow--prev{ left: 12px; }
.stories__arrow--next{ right: 12px; }
.stories__arrow--prev img{ transform: rotate(180deg); }
.stories__arrow:hover{ background: #fff; }

/* ===== CONVERSATION ===== */
.conv{
  background: var(--black);
  padding: 90px var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}
.conv__btnwrap{ position: relative; display: inline-block; }
.conv__btn{
  position: relative;
  z-index: 2;
  display: block;
  background: #fff;
  color: #000;
  padding: 16px 32px;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  transition: opacity .2s ease;
}
.conv__btn:hover{ opacity: .88; }
.cl{ position: absolute; display: block; pointer-events: none; z-index: 1; }
.cl--a{ left: 0; top: 100%; width: 338px; height: 1px; background: linear-gradient(90deg, #fff, transparent); }
.cl--b{ left: -137px; top: 0; width: 338px; height: 1px; background: linear-gradient(270deg, #fff, transparent); }
.cl--c{ left: 100%; top: 0; width: 1px; height: 99px; background: linear-gradient(180deg, #fff, transparent); }
.cl--d{ left: 1px; bottom: 0; width: 1px; height: 99px; background: linear-gradient(0deg, #fff, transparent); }
.wm{ position: relative; flex: none; width: calc(var(--k, 1) * 1272px); height: calc(var(--k, 1) * 197px); }
.wm__box{
  position: absolute;
  left: 0;
  top: 0;
  width: 1272px;
  height: 197px;
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
  background: #000;
}
.wm__box > *{ position: absolute; }
.wm__e{ left: 319px; top: 19px; width: 918px; height: 162px; }
.wm__s{ left: 157px; top: 16px; width: 151px; height: 167px; }
.wm__f{ left: 22px; top: 19px; width: 131px; height: 162px; }
.wm__blur{ top: 0; height: 197px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wm__blur--l{
  left: 0;
  width: 485px;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 25.565%, rgba(0,0,0,0) 85.954%);
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
}
.wm__blur--r{
  left: 971px;
  width: 301px;
  background: linear-gradient(270deg, rgba(0,0,0,.5) 25.565%, rgba(0,0,0,0) 80.69%);
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(270deg, #000 30%, transparent 92%);
}
.pill{
  padding: 16px 32px;
  border:1px solid rgba(255,255,255,.55);
  border-radius: 100px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size: 14px;
  letter-spacing:.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 16px;
  color: #fff;
}
.pill b{ font-weight: 800; }
.pill i{ font-style: normal; font-weight: 100; }
/* Service tags over the footer wordmark, in the old industry pills' spots */
.pill--a{ left: 431px; top: 0; }
.pill--b{ left: 764px; top: 42px; }
.pill--c{ left: 540px; top: 106px; }
.pill--d{ left: 925px; top: 148px; }
a.pill{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .06em; pointer-events: auto; transition: border-color .2s ease, background .2s ease; }
a.pill::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
a.pill:hover{ border-color: var(--c); background: rgba(0,0,0,.85); }

/* ===== FOOTER ===== */
.footer{ background: var(--black); color: #fff; }
.footer__top{
  /* right edge lines up with the 1440px content column on wide screens */
  padding: 60px max(var(--gap), calc((100% - var(--maxw)) / 2 + var(--gap))) 60px calc((100% - var(--k, 1) * 1272px) / 2 + var(--k, 1) * 22px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__logo{ width: 111px; height: 111px; flex-shrink: 0; margin-left: -23px; }
.footer__cols{ display: flex; gap: 100px; }
.footer__col{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__head, .footer__col a{ font-size: 14px; letter-spacing:0; text-transform: uppercase; line-height: 21px; white-space: nowrap; }
.footer__head{ font-weight: 800; }
.footer__col a{ font-weight: 400; color: #fff; transition: opacity .2s ease; }
.footer__col a:hover, .footer__bottom a:hover{ opacity: .65; }
.footer .m{ font-weight: 500; }
.eco{ display: flex; align-items: center; gap: 4px; }
.eco span{ font-size: 14px; letter-spacing:.02em; line-height: 16px; }
.eco b{ font-family: 'Archivo Black', var(--font); font-weight: 400; letter-spacing:-.05em; }
.eco em{ font-style: normal; font-weight: 100; }
.bar{ display: block; width: 5px; height: 17px; flex-shrink: 0; }
.bar--media{ background: var(--media); }
.bar--pharma{ background: var(--pharma); }
.bar--sports{ background: var(--sports); }
.bar--beauty{ background: var(--beauty); }
.bar--web{ background: var(--svc-web); }
.bar--ai{ background: var(--svc-ai); }
.bar--marketing{ background: var(--svc-marketing); }
.bar--strategy{ background: var(--svc-strategy); }
.bar--science{ background: var(--svc-science); }
/* Service link: colour bar + plain service name (nav dropdown, mobile menu, footer) */
.svc-link{ display: flex; align-items: center; gap: 10px; color: #fff; transition: opacity .2s ease; }
.svc-link span{ font-size: 14px; line-height: 18px; letter-spacing: .01em; }
.svc-link:hover{ opacity: .7; }
.nav__menu--svc{ min-width: 260px; }
.footer__col--svc a{ text-transform: none; white-space: normal; }
.menu__eco.menu__svc{ grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.menu__svc-head{ grid-column: 1 / -1; }
.menu__svc-head{ font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.footer__bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px max(var(--gap), calc((100% - var(--maxw)) / 2 + var(--gap))) 16px calc((100% - var(--k, 1) * 1272px) / 2 + var(--k, 1) * 22px);
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
  letter-spacing:0;
  text-transform: uppercase;
  line-height: 21px;
}
.footer__bottom a{ color: #fff; }

/* ===== FULL-SCREEN MENU ===== */
.menu{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: circle(0 at calc(100% - 38px) 44px);
  transition: clip-path .4s cubic-bezier(.7, 0, .3, 1), visibility 0s .4s;
}
.menu.is-open{
  visibility: visible;
  clip-path: circle(150vmax at calc(100% - 38px) 44px);
  transition: clip-path .55s cubic-bezier(.4, 0, .1, 1), visibility 0s 0s;
}
.menu__bg{ position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.menu__tri{
  position: absolute;
  left: 50%;
  top: 52px;
  width: 170vw;
  max-width: 1100px;
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
  animation: triFloat 14s ease-in-out infinite;
  will-change: translate, scale;
}
@keyframes triFloat{
  0%, 100%{translate:0 0; scale:1;}
  50%{translate:0 -22px; scale:1.04;}
}
.menu__tri path{
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  transition: stroke .45s ease, stroke-opacity .45s ease;
}
.menu__tri path:nth-child(1){ stroke-opacity: .6; }
.menu__tri path:nth-child(2){ stroke-opacity: .4; }
.menu__tri path:nth-child(3){ stroke-opacity: .26; }
.menu.has-hover .menu__tri path{ stroke: var(--hov); }
.menu.has-hover .menu__tri path:nth-child(1){ stroke-opacity: .95; }
.menu.has-hover .menu__tri path:nth-child(2){ stroke-opacity: .72; }
.menu.has-hover .menu__tri path:nth-child(3){ stroke-opacity: .5; }
.menu > *:not(.menu__bg){ position: relative; z-index: 1; }
.menu__top{ display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gap); flex: none; }
.menu__logo img{ display: block; width: 54px; height: 54px; }
.menu__close{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing:.02em;
  text-transform: uppercase;
}
.menu__close i{ position: relative; display: block; width: 26px; height: 26px; }
.menu__close i::before, .menu__close i::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 3px;
  margin: -1.5px 0 0 -15px;
  background: #fff;
  transform: rotate(45deg);
}
.menu__close i::after{ transform: rotate(-45deg); }
.menu__nav{ display: flex; flex-direction: column; padding: 8px var(--gap) 0; flex: 1 0 auto; justify-content: center; }
.menu__nav a{
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: clamp(6px, 1.2vh, 12px) 0;
  border-top: 1px solid rgba(255,255,255,.16);
  min-height: 52px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .15s ease, transform .15s ease;
}
.menu__nav a:last-child{ border-bottom: 1px solid rgba(255,255,255,.16); }
.menu.is-open .menu__nav a{
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 60ms + 280ms);
  transition: opacity .35s ease calc(var(--i) * 40ms + 150ms), transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 40ms + 150ms), color .2s ease;
}
.menu__idx{
  font-size: 13px;
  font-weight: 500;
  letter-spacing:.02em;
  color: #8a8a8a;
  align-self: start;
  padding-top: .7em;
  transition: color .2s ease;
}
.menu__label{
  font-size: clamp(30px, 9vw, 64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 2px transparent;
  transition: color .25s ease, -webkit-text-stroke-color .25s ease;
}
.menu__go{
  width: 18px;
  height: 16px;
  background: #fff;
  opacity: .4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2214.3506%22%20height%3D%2212.826%22%20viewBox%3D%220%200%2014.3506%2012.826%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20id%3D%22Polygon%201%22%20d%3D%22M5.87614%200.75006C6.45353%20-0.25002%207.89703%20-0.25002%208.47442%200.75006L14.1473%2010.5758C14.7247%2011.5759%2014.003%2012.826%2012.8482%2012.826H1.50236C0.347564%2012.826%20-0.374181%2011.5759%200.203216%2010.5758L5.87614%200.75006Z%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2214.3506%22%20height%3D%2212.826%22%20viewBox%3D%220%200%2014.3506%2012.826%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20id%3D%22Polygon%201%22%20d%3D%22M5.87614%200.75006C6.45353%20-0.25002%207.89703%20-0.25002%208.47442%200.75006L14.1473%2010.5758C14.7247%2011.5759%2014.003%2012.826%2012.8482%2012.826H1.50236C0.347564%2012.826%20-0.374181%2011.5759%200.203216%2010.5758L5.87614%200.75006Z%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;
  transform: rotate(90deg);
  transition: background-color .25s ease, opacity .25s ease, transform .3s ease;
}
.menu__nav a:hover .menu__label, .menu__nav a:focus-visible .menu__label, .menu__nav a:active .menu__label{ color: transparent; -webkit-text-stroke-color: var(--c); }
.menu__nav a:hover .menu__idx, .menu__nav a:focus-visible .menu__idx, .menu__nav a:active .menu__idx{ color: var(--c); }
.menu__nav a:hover .menu__go, .menu__nav a:focus-visible .menu__go, .menu__nav a:active .menu__go{ background: var(--c); opacity: 1; transform: rotate(90deg) translateY(-6px); }
.menu__nav a:focus-visible, .menu__close:focus-visible, .menu__cta:focus-visible, .menu__eco a:focus-visible, .menu__meta a:focus-visible, .nav__burger:focus-visible{ outline: 2px solid var(--pharma); outline-offset: 4px; }
.menu__foot{
  padding: 20px var(--gap) max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: none;
}
.menu__cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 22px;
  background: #fff;
  color: #000;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.menu__cta .play__shape{ background: #000; }
.menu__eco{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.menu__eco .eco{ min-height: 28px; color: #fff; }
.menu__meta{ display: flex; flex-wrap: wrap; gap: 6px 22px; }
.menu__meta a{
  font-size: 13px;
  font-weight: 500;
  letter-spacing:0;
  text-transform: uppercase;
  color: #9a9a9a;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.ticker{ display: none; }
@keyframes tickR{from{transform:translateX(-50%);} to{transform:translateX(0);}}

/* ===== MENU MOTION: burger morph + circular reveal from the button ===== */
.nav__burger.is-active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav__burger.is-active span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.nav__burger.is-active span:nth-child(3){ width: 100%; transform: translateY(-9px) rotate(-45deg); }
.menu__top, .menu__bg, .menu__foot > *{ opacity: 0; transition: opacity .15s ease; }
.menu.is-open .menu__top{ opacity: 1; transition: opacity .3s ease .15s; }
.menu.is-open .menu__bg{ opacity: 1; transition: opacity .5s ease .15s; }
.menu.is-open .menu__foot > *{ opacity: 1; transition: opacity .35s ease .3s; }

/* ===== ACCESSIBILITY: visible keyboard focus ===== */
.testimonial, .helps, .stories{ --focus: #000; }
.story:focus-visible{ outline-offset: 4px; }
:focus:not(:focus-visible){ outline: none; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline-offset: 2px; }

/* industry cards: ring in each card's own brand color */
.ind-card--media{ --ring: var(--media); }
.ind-card:focus-visible{ outline: 3px solid var(--ring); outline-offset: 5px; z-index: 5; }

/* ================================================================
   RESPONSIVE — one block per breakpoint
   ================================================================ */

@media (min-width:1001px){
  .menu{ display: none; }
}

@media (min-width:1100px){
  .sides{ display: block; }
}

@media (max-width:1000px){
  /* RESPONSIVE */
  .nav__links, .nav__right{ display: none; }
  .nav__burger{ display: flex; }
  .hero__row{ flex-direction: column; align-items: flex-start; gap: 0; }
  .hero__title{ white-space: normal; line-height: 1.02; }
  .hero__aside{ width: auto; max-width: none; gap: 26px; padding: 0; margin-top: clamp(40px, 11vw, 72px); }
  .hero__cards{ grid-template-columns: 1fr 1fr; display: grid; gap: 16px; height: auto; margin-top: 8px; }
  .testimonial__inner{ flex-direction: column; align-items: stretch; gap: 32px; padding: 60px var(--gap); }
  .testimonial__media{ flex: none; width: 100%; }
  .testimonial__copy{ width: 100%; }
  .testimonial__brand, .testimonial__text{ font-size: clamp(19px, 4.8vw, 24px); }
  .helps__head h2{ white-space: normal; letter-spacing: -.03em; }
  .helps__card{ padding: 0; }
  .helps__grid{ grid-template-columns: 1fr; }
  .ind-card, .ind-card.is-active{ width: auto; height: 515px; }
  .hero__cards.has-active .ind-card:not(.is-active){ filter: none; }
  .ind-card.is-active .mock-card{ transform: none; }
  .hero{ padding-bottom: 60px; }
  /* HERO: responsive emphasis */
  :root{ --h1: clamp(44px, 14vw, 110px); }
  .hero__connect{ margin-left: 0; line-height: 1.02; }
  .hero__copy{ font-size: clamp(18px, 4.9vw, 24px); line-height: 1.55; font-weight: 500; letter-spacing: -.01em; }
  .hero .link-arrow{ font-size: clamp(19px, 5.2vw, 24px); gap: 12px; font-weight: 800; min-height: 48px; }
  .hero .play{ width: clamp(24px, 6.4vw, 30px); height: clamp(24px, 6.4vw, 30px); }
  .hero__poly{
    --pu: calc(var(--u) * 1.8);
    width: calc(var(--pu) * 3198);
    height: calc(var(--pu) * 3198);
    left: calc(57vw - var(--gap) - var(--pu) * 2016);
    top: calc(110px - var(--pu) * 1533);
  }
  .hero__poly path{ stroke-width: 1.5px; }
  .hero__poly-a{ stroke-opacity: .7; }
  .hero__poly-b{ stroke-opacity: .35; }
  /* RESPONSIVE: lower sections */
  .edge__copy h2, .tech__copy h2{ font-size: clamp(30px, 8vw, 48px); }
  .tech{ height: auto; min-height: 520px; clip-path: none; }
  .tech__bg{ position: absolute; inset: -15% 0 auto; width: 100%; height: 130%; }
  .tech__inner{ padding: 72px var(--gap); }
  .tech__copy{ align-items: flex-start; text-align: left; width: 100%; max-width: 560px; gap: 22px; }
  .stories{ padding-bottom: 60px; }
  .stories__rail{ --tile: min(72vw, 320px); --tgap: 16px; }
  .stories__inner{ padding: 60px var(--gap) 32px; }
  .stories__arrow{ width: 44px; height: 44px; }
  .conv{ padding: 70px var(--gap); gap: 48px; }
  .footer__top{ flex-direction: column; gap: 40px; padding: 48px var(--gap); }
  .footer__bottom{ padding: 16px var(--gap); flex-wrap: wrap; gap: 10px 28px; }
  .footer__logo{ margin-left: 0; width: 80px; height: 80px; }
  .footer__cols{ flex-wrap: wrap; gap: 40px 24px; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  /* MOBILE HERO: bolder + more air */
  .hero__inner{ padding-top: calc(var(--gap) + 20px); padding-bottom: calc(var(--gap) + 12px); }
  .hero__title, .hero__connect{ font-weight: 800; letter-spacing: -.04em; line-height: .98; }
  .nn__s{ -webkit-text-stroke-width: 3px; }
  /* MOBILE FOOTER: brand wordmark as backdrop, balanced columns */
  .footer__bottom p{ flex: 1 0 100%; }
  /* RESPONSIVE: keep the FSE Media host's face in frame */
  .ind-card--media .ind-card__bg{ object-position: 50% 14%; }
  /* RESPONSIVE: big triangles sit behind the Attention text */
  .edge__tri{
    left: 50%;
    top: 50%;
    width: max(135vw, 560px);
    max-width: 1000px;
    height: auto;
    transform: translate(-47%, -50%);
  }
  /* RESPONSIVE: tidy, evenly aligned "Turn emerging technology" text */
  .tech::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 100%);
  }
  .tech__copy h2{ line-height: 1.08; text-wrap: balance; }
  .tech__text{ display: flex; flex-direction: column; gap: 14px; }
  .tech__text p{ font-size: clamp(16px, 4.3vw, 19px); line-height: 1.55; text-wrap: pretty; }
  .tech__copy .link-arrow{ font-size: clamp(17px, 4.6vw, 20px); font-weight: 800; min-height: 44px; gap: 12px; }
  .tech .play{ width: clamp(22px, 5.6vw, 26px); height: clamp(22px, 5.6vw, 26px); }
}

@media (max-width:640px){
  .hero__cards{ grid-template-columns: 1fr; }
  .ind-card{ height: auto; min-height: 340px; }
  .ind-card, .ind-card.is-active{ height: auto; min-height: 340px; }
  .pill{ display: none; }
  .conv{ gap: 48px; padding-bottom: 28px; padding-top: calc(var(--k, 1) * 98px - 6px); }
  .wm{
    align-self: flex-start;
    margin-left: calc(-1 * var(--gap) - 6px);
    z-index: 1;
    margin-top: calc(-1 * (var(--k, 1) * 99px + 76px));
  }
  .conv__btnwrap{ z-index: 3; }
  .ticker{
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100vw;
    margin: -28px calc(-1 * var(--gap)) 0;
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
    background: #000;
  }
  .ticker__track{ display: flex; width: max-content; animation: tickR 30s linear infinite; }
  .ticker__group{ display: flex; flex: none; }
  .tk{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    margin-right: 44px;
    font-size: 22px;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff;
  }
  .tk .bar{ width: 6px; height: 24px; }
  .tk b{ font-family: 'Archivo Black', var(--font); font-weight: 400; letter-spacing: -.03em; }
  .tk em{ font-style: normal; font-weight: 100; }
}

/* ===== HERO INTRO ANIMATION =====
   Plays once on page load (pure CSS, no JS). Order: triangles fade in (0s),
   WHERE INDUSTRIES slides in from the left (.1s), CONNECT follows (.22s),
   the paragraph rises (.4s), then the four industry cards rise from below,
   staggered 80ms apart (.5s-.74s). Everything settles by ~1.3s.
   Only opacity/transform are animated, so it doesn't clash with the card
   hover (which changes width/height/filter). `both` keeps elements hidden
   during their delay. Disabled for users who prefer reduced motion. */
@keyframes fromLeft   { from { opacity:0; transform:translateX(-40px); } }
@keyframes fromBottom { from { opacity:0; transform:translateY(60px); } }
@keyframes riseSmall  { from { opacity:0; transform:translateY(16px); } }
@keyframes fadeIn     { from { opacity:0; } }

.hero__title   { animation: fromLeft .7s cubic-bezier(.2,.7,.2,1) .1s both; }
.hero__connect { animation: fromLeft .7s cubic-bezier(.2,.7,.2,1) .22s both; }
.hero__aside   { animation: riseSmall .6s cubic-bezier(.2,.7,.2,1) .4s both; }
.hero__poly    { animation: fadeIn 1.2s ease both; }

.ind-card { animation: fromBottom .8s cubic-bezier(.2,.7,.2,1) both; }
.ind-card:nth-child(1) { animation-delay: .50s; }
.ind-card:nth-child(2) { animation-delay: .58s; }
.ind-card:nth-child(3) { animation-delay: .66s; }
.ind-card:nth-child(4) { animation-delay: .74s; }
.ind-card:nth-child(5) { animation-delay: .82s; }
.ind-card:nth-child(6) { animation-delay: .90s; }

@media (prefers-reduced-motion: reduce) {
  /* html:not(.force-motion) lets the intro be previewed by adding ?motion to the URL */
  html:not(.force-motion) .hero__title,
  html:not(.force-motion) .hero__connect,
  html:not(.force-motion) .hero__aside,
  html:not(.force-motion) .hero__poly,
  html:not(.force-motion) .ind-card { animation: none; }
  .stories__viewport{ scroll-behavior: auto; }
  .story__img img{ transition: none; }
}

/* ================================================================
   FSE MEDIA PAGE
   ================================================================ */
.theme-media .play__shape{
  left: 20%; top: 0; width: 60%; height: 100%;
  background: url("../img/logo-media.png") center/contain no-repeat;
  mask: none; -webkit-mask: none;
  transform: rotate(-90deg);
}
.theme-media .nav__logo{ width: 36px; height: 45px; background: transparent; }
.theme-media .nav__logo img{ object-fit: contain; }
.theme-media .nav__logo::after{ content: none; }

.media-hero{
  position: relative;
  overflow: hidden;
  margin-top: -86px;
  padding-top: 86px;
  border-bottom: 5px solid #f20000;
}
.media-hero__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-hero__scrim{ position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.6); }
.media-hero__poly{
  position: absolute; z-index: 1; pointer-events: none; overflow: visible;
  left: calc(var(--u) * -1435); top: calc(var(--u) * -1516);
  width: calc(var(--u) * 3197.54); height: calc(var(--u) * 3197.54);
}
.media-hero__poly path{ stroke: #fff; stroke-width: 1px; }
.media-hero__poly-a{ stroke-opacity: .35; }
.media-hero__poly-b{ stroke-opacity: .15; }
.media-hero__inner{
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: var(--gap);
}
.media-hero__eyebrow{
  font-size: 15px; font-weight: 500; text-transform: uppercase; color: #fff;
  max-width: 531px; line-height: 24px; margin-bottom: 12px;
}
.media-hero__title{
  font-size: clamp(32px, calc(var(--u) * 70), 70px);
  font-weight: 600; letter-spacing: -.04em; line-height: 1.07;
  text-transform: uppercase; color: #fff;
}
.media-hero__row{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.media-hero__title--accent{ color: #ff0707; white-space: nowrap; }
.media-hero__aside{ display: flex; flex-direction: column; gap: 20px; max-width: 439px; flex: 0 1 439px; padding: 13px 0; }
.media-hero__aside p{ font-size: 15px; line-height: 24px; color: #fff; }

.media-intro{
  background: #fff; color: #000;
  display: flex; align-items: center; justify-content: space-between; gap: 60px;
  max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap);
  /* Content stays in the 1440 column, but the white background runs full
     width on wide screens (paints outside the box without adding scroll) */
  box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax);
}
.media-intro__copy{ display: flex; flex-direction: column; gap: 10px; max-width: 507px; }
.media-intro__mark{ margin-bottom: 8px; }
.media-intro__copy h2{ font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.media-intro__copy p{ font-size: 15px; line-height: 24px; color: #000; }
.media-collage{ position: relative; width: 600px; max-width: 45vw; flex-shrink: 0; height: 345px; }
.media-collage video{ position: absolute; border-radius: 4px; object-fit: cover; box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.media-collage__a{ width: 194px; height: 345px; left: 0; top: 0; }
.media-collage__b{ width: 345px; height: 194px; left: 215px; top: 75px; }
.media-collage__mark{ position: absolute; width: 32px; height: 40px; right: 48px; top: 10px; }
.media-collage__line{ position: absolute; }
.media-collage__line-top, .media-collage__line-bottom{
  height: 1px;
  background: linear-gradient(to right, transparent 4.3%, #000 15.9%, #666 80%, transparent 98.6%);
}
.media-collage__line-left, .media-collage__line-right{
  width: 1px;
  background: linear-gradient(to bottom, transparent 4.3%, #000 15.9%, #666 80%, transparent 98.6%);
}
.media-collage__line-top{ left: -50px; top: 75px; width: 688px; }
.media-collage__line-bottom{ left: -50px; top: 269px; width: 688px; }
.media-collage__line-left{ left: 0; top: -81px; height: 507px; }
.media-collage__line-right{ left: 193px; top: -81px; height: 507px; }

.helps__img--tint{ position: relative; }
.helps__img--tint img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; left: 0; top: 0; }
.helps__img--tint::after{ content: ''; position: absolute; inset: 0; background: #f20000; mix-blend-mode: multiply; }

.media-strategy{
  position: relative; background: #000; color: #fff;
  padding: 90px var(--gap);
}
.media-strategy__copy{ position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; max-width: 568px; }
.media-strategy__kicker{ font-size: 14px; font-weight: 300; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.media-strategy__copy h2{ font-size: clamp(28px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.04; }
.media-strategy__copy p{ font-size: 15px; line-height: 24px; color: #fff; margin-bottom: 6px; }
.media-strategy__art{ position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 47%; }
.media-strategy__art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.media-work{ background: #fff; padding: 100px var(--gap); }
.media-work__grid{
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px;
}
.media-work .ind-card{ width: var(--cw); }

.media-cta{ position: relative; min-height: 361px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 var(--gap); }
.media-cta__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Media pages tint this band red. The swatch-review clip (About, New at FSE,
   Contact, case studies) gets 60% black: Figma leaves it untinted, but the
   white copy sat on bright yellow and white swatches and was hard to read. */
.media-cta__scrim{ position: absolute; inset: 0; }
.theme-media .media-cta__scrim{ background: #be0c0c; mix-blend-mode: multiply; }
.about .media-cta__scrim, .blog .media-cta__scrim,
.contact .media-cta__scrim, .case .media-cta__scrim{ background: rgba(0,0,0,.6); }
.media-cta__poly{
  position: absolute; z-index: 1; pointer-events: none; overflow: visible;
  left: calc(var(--u) * -84); top: calc(var(--u) * -102.34);
  width: calc(var(--u) * 581.227); height: calc(var(--u) * 604.444);
}
.media-cta__poly path{ stroke-width: 1px; }
.media-cta__copy{ position: relative; z-index: 2; text-align: center; color: #fff; max-width: 470px; }
.media-cta__copy h2{ font-size: clamp(28px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.04; margin-bottom: 10px; }
.media-cta__copy p{ font-size: 15px; line-height: 24px; max-width: 446px; margin: 0 auto; }

@media (max-width: 1000px){
  .media-hero__title{ font-size: clamp(38px, 11vw, 70px); }
  .media-hero__row{ flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0; }
  .media-hero__aside{ max-width: none; gap: 26px; margin-top: clamp(40px, 11vw, 72px); }
  .media-hero__aside p{ font-size: clamp(18px, 4.9vw, 24px); line-height: 1.55; font-weight: 500; letter-spacing: -.01em; }
  .media-hero .link-arrow{ font-size: clamp(19px, 5.2vw, 24px); gap: 12px; font-weight: 800; min-height: 48px; }
  .media-hero .play{ width: clamp(24px, 6.4vw, 30px); height: clamp(24px, 6.4vw, 30px); }
  .media-intro{ flex-direction: column; }
  .media-collage{ width: 100%; max-width: 100%; }
  .media-collage__line{ display: none; }
  .media-collage__b{ left: auto; right: 0; top: 170px; }
  .media-strategy{ display: flex; flex-direction: column; gap: 40px; }
  .media-strategy__art{ position: relative; z-index: 1; top: 0; bottom: auto; right: 0; max-width: 100%; width: 100%; aspect-ratio: 678/502; }
  .media-work__grid{ flex-wrap: wrap; }
  .media-work .ind-card{ width: calc(50% - 12px); }
}
@media (max-width: 640px){
  .media-work .ind-card{ width: 100%; }
}

/* ================================================================
   HOMEPAGE (feedback round 2): services hero, showcase, stats, blog
   ================================================================ */
/* Hero: "Full Spectrum / Engagement". The second line is longer than the old
   "coNNect", so it starts closer to the left edge. */
.hero--fse .hero__connect{ margin-left: calc(var(--u) * 140); }
.hero--fse .hero__copy strong{ display: inline-block; margin-bottom: 6px; font-weight: 800; }
.hero .anchor{ position: absolute; top: 60%; }

/* Six service cards in a 3 x 2 grid: wider and shorter than the old four-across
   industry cards, so names and descriptions have room. Hover dims the others
   (no grow effect, which only suited a single row). */
.hero__cards--svc{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: auto; }
.hero__cards--svc .ind-card, .hero__cards--svc .ind-card.is-active{ width: auto; height: 300px; }
.hero__cards--svc .ind-card.is-active .ind-card__tag{ font-size: 14px; }
.hero__cards--svc .ind-card.is-active .ind-card__text{ font-size: 20px; line-height: 24px; }
.hero__cards--svc .ind-card__text{ max-width: 320px; }
.ind-card--svc::after{
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 90%);
}
.ind-card--svc .ind-card__tag{ font-weight: 800; }
/* Medical tile: the source video has subtitles and a brand footer in its bottom ~22%. Scaling 1.3x
   from the top keeps only the top 77% of the frame inside the card. */
.ind-card__bg--crop-bottom{ transform: scale(1.3); transform-origin: 50% 0; }

/* Showcase: rotating examples across industries */
.showcase{ background: var(--white); color: #000; padding: 90px var(--gap); }
.showcase__head{ max-width: var(--maxw); margin: 0 auto 32px; display: flex; flex-direction: column; gap: 16px; }
.showcase__head .eyebrow{ color: #000; font-weight: 300; font-size: 14px; letter-spacing: 0; margin: 0; line-height: 14px; }
.showcase__head h2{ font-size: clamp(32px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.042em; line-height: 1.04; }
.showcase__stage{ position: relative; max-width: var(--maxw); margin: 0 auto; height: clamp(440px, calc(var(--u) * 600), 600px); overflow: hidden; background: #000; color: #fff; }
.showcase__slide{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; border-top: 6px solid var(--c); }
.showcase__slide.is-active{ opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.showcase__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Still slides (Promptive): a slow Ken Burns push-in while the slide is showing. The resting state is the
   end frame, so a slide fading out holds its zoom instead of snapping back. */
.showcase__kb{ object-position: 65% center; transform-origin: 72% 45%; transform: scale(1.12) translate(-1.5%, -1%); }
.showcase__slide.is-active .showcase__kb{ animation: showcaseKenBurns calc(var(--slide) + 1s) ease-out forwards; }
.showcase.is-paused .showcase__kb{ animation-play-state: paused; }
.showcase.is-still .showcase__kb{ animation: none; transform: none; }
@keyframes showcaseKenBurns{ from{ transform: scale(1.01) translate(0, 0); } }
.showcase__scrim{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 100%); }
.showcase__copy{ position: absolute; left: clamp(24px, calc(var(--u) * 64), 64px); bottom: clamp(88px, calc(var(--u) * 110), 110px); max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.showcase__tags{ display: flex; gap: 8px; flex-wrap: wrap; }
.showcase__tags span{ padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.4); }
.showcase__tags span:first-child{ background: var(--c); border-color: var(--c); color: #000; }
.showcase__copy h3{ font-size: clamp(26px, calc(var(--u) * 40), 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.showcase__copy p{ font-size: 16px; line-height: 24px; color: rgba(255,255,255,.88); }
.showcase .play__shape{ background: var(--c, #fff); }
.showcase__tabs{ position: absolute; left: clamp(24px, calc(var(--u) * 64), 64px); right: clamp(24px, calc(var(--u) * 64), 64px); bottom: 28px; display: flex; gap: 12px; z-index: 3; }
.showcase__tab{ position: relative; flex: 1; padding: 12px 0 0; background: none; border: 0; border-top: 3px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .3s ease; }
.showcase__tab:hover{ color: #fff; }
.showcase__tab.is-active{ color: #fff; }
/* Progress bar: the active tab's top line fills in its colour over the slide's duration.
   main.js advances to the next slide when this animation ends, and pauses it on hover,
   focus, or when the showcase is off screen. */
.showcase{ --slide: 7s; }
.showcase__tab::before{ content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left center; }
.showcase__tab.is-active::before{ animation: showcaseProgress var(--slide) linear forwards; }
.showcase.is-paused .showcase__tab.is-active::before{ animation-play-state: paused; }
.showcase.is-still .showcase__tab.is-active::before{ animation: none; transform: none; }
@keyframes showcaseProgress{ to{ transform: scaleX(1); } }
.showcase__tab:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }

/* Stats in the company intro (old site's "Fun Facts", relabelled as plain stats) */
.stats{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.stats li{ display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 18px; }
/* In the homepage intro the stats sit between the paragraph and the link: give them room, and a
   wider column so the four labels don't wrap into narrow stacks. */
.edge .edge__copy{ width: 660px; }
.edge .stats{ width: 100%; margin: 30px 0 28px; }
.stats b{ font-size: clamp(28px, calc(var(--u) * 44), 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stats span{ font-size: 13px; line-height: 18px; color: rgba(255,255,255,.7); }

/* Blog teaser */
.home-blog{ background: var(--white); color: #000; padding: 90px var(--gap); }
.home-blog__inner{ max-width: var(--maxw); margin: 0 auto; }
.home-blog .stories__head{ margin-bottom: 40px; }
.home-blog__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-post{ display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid #e5e5e5; transition: border-color .2s ease, transform .2s ease; }
.home-post:hover{ border-color: #000; transform: translateY(-2px); }
.home-post__img{ display: block; margin: -28px -28px 8px; aspect-ratio: 16 / 9; overflow: hidden; background: #f2f2f2; }
.home-post__img img{ width: 100%; height: 100%; object-fit: cover; }
.home-post__meta{ font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.home-post h3{ font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.home-post p{ font-size: 15px; line-height: 23px; color: #444; }
.home-post__more{ margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1000px){
  .hero--fse .hero__connect{ margin-left: 0; }
  .hero__cards--svc{ grid-template-columns: 1fr 1fr; }
  .hero__cards--svc .ind-card, .hero__cards--svc .ind-card.is-active{ height: 260px; }
  .showcase{ padding-top: 60px; padding-bottom: 60px; }
  .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .home-blog{ padding: 60px var(--gap); }
  .home-blog__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  /* "ENGAGEMENT" is ten capitals: size the hero lines to fit the phone width */
  .hero--fse .hero__title, .hero--fse .hero__connect{ font-size: min(var(--h1), 12.4vw); }
  .hero__cards--svc{ grid-template-columns: 1fr; }
  .hero__cards--svc .ind-card, .hero__cards--svc .ind-card.is-active{ height: 220px; min-height: 0; }
  .showcase{ padding-left: 0; padding-right: 0; }
  .showcase__head{ padding: 0 var(--gap); }
  .showcase__stage{ height: 560px; }
  .showcase__copy{ right: 24px; bottom: 96px; }
  .showcase__scrim{ background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.2) 100%); }
  .showcase__tab span{ font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .showcase__slide, .showcase__slide.is-active{ transition: none; }
}

/* ================================================================
   "Walkthrough" badge on case study cards whose page has a walkthrough
   video (the five pharma case studies). Keyed on the card's link, so it
   shows on every card type (strip, Work grid, selected work, more case
   studies) without touching the generated pages. Add a slug here when a
   new case study gets a walkthrough.
   ================================================================ */
a[href="case-study-uplora.html"] .story__img,
a[href="case-study-uplora.html"] .wk-card__img,
a[href="case-study-uplora.html"] .svc-work__img,
a[href="case-study-uplora.html"] .case-card__img,
a[href="case-study-promptive.html"] .story__img,
a[href="case-study-promptive.html"] .wk-card__img,
a[href="case-study-promptive.html"] .svc-work__img,
a[href="case-study-promptive.html"] .case-card__img,
a[href="case-study-ghapp.html"] .story__img,
a[href="case-study-ghapp.html"] .wk-card__img,
a[href="case-study-ghapp.html"] .svc-work__img,
a[href="case-study-ghapp.html"] .case-card__img,
a[href="case-study-app-connect.html"] .story__img,
a[href="case-study-app-connect.html"] .wk-card__img,
a[href="case-study-app-connect.html"] .svc-work__img,
a[href="case-study-app-connect.html"] .case-card__img,
a[href="case-study-interactive-cme.html"] .story__img,
a[href="case-study-interactive-cme.html"] .wk-card__img,
a[href="case-study-interactive-cme.html"] .svc-work__img,
a[href="case-study-interactive-cme.html"] .case-card__img{ position: relative; }
a[href="case-study-uplora.html"] .story__img::after,
a[href="case-study-uplora.html"] .wk-card__img::after,
a[href="case-study-uplora.html"] .svc-work__img::after,
a[href="case-study-uplora.html"] .case-card__img::after,
a[href="case-study-promptive.html"] .story__img::after,
a[href="case-study-promptive.html"] .wk-card__img::after,
a[href="case-study-promptive.html"] .svc-work__img::after,
a[href="case-study-promptive.html"] .case-card__img::after,
a[href="case-study-ghapp.html"] .story__img::after,
a[href="case-study-ghapp.html"] .wk-card__img::after,
a[href="case-study-ghapp.html"] .svc-work__img::after,
a[href="case-study-ghapp.html"] .case-card__img::after,
a[href="case-study-app-connect.html"] .story__img::after,
a[href="case-study-app-connect.html"] .wk-card__img::after,
a[href="case-study-app-connect.html"] .svc-work__img::after,
a[href="case-study-app-connect.html"] .case-card__img::after,
a[href="case-study-interactive-cme.html"] .story__img::after,
a[href="case-study-interactive-cme.html"] .wk-card__img::after,
a[href="case-study-interactive-cme.html"] .svc-work__img::after,
a[href="case-study-interactive-cme.html"] .case-card__img::after{
  content: "Walkthrough"; position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px;
  background: rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='white'/%3E%3C/svg%3E") 12px center / 9px 11px no-repeat;
  color: #fff; font: 600 11px/1 var(--font, 'Archivo', sans-serif); letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none;
}

/* 404 page */
.nf-body{ background: #fff; color: #000; }
.nf-body__inner{ max-width: var(--maxw); margin: 0 auto; padding: 72px var(--gap) 100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.nf-col h2{ font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #777; margin-bottom: 18px; }
.nf-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.nf-link{ font-size: 24px; font-weight: 500; letter-spacing: -.02em; border-left: 4px solid var(--c, #000); padding-left: 14px; transition: opacity .2s ease; }
.nf-link:hover{ opacity: .6; }
@media (max-width: 640px){ .nf-body__inner{ grid-template-columns: 1fr; padding: 48px var(--gap) 60px; } .nf-link{ font-size: 20px; } }

/* Display the supplied wordmark without its transparent canvas margins. */
.nav__logo.fse-wordmark, .menu__logo.fse-wordmark{
  display: block; position: relative; width: 190px; height: 44px;
  overflow: hidden; flex-shrink: 0;
}
.nav__logo.fse-wordmark img, .menu__logo.fse-wordmark img{
  display: block; position: absolute; width: 134.6424%; height: auto;
  max-width: none; left: -17.3212%; top: 50%; transform: translateY(-50%);
  object-fit: contain;
}
.nav__logo.fse-wordmark::after{ content: none; }
@media (max-width: 640px){
  .nav__logo.fse-wordmark, .menu__logo.fse-wordmark{ width: 160px; }
}