/* ---------------------------------------------------------------------------
   Gravitate Media — overrides layered on top of webflow.css.
   Only covers elements the content adaptation introduced or resized; every
   inherited component keeps its original styling.
   --------------------------------------------------------------------------- */

/* New text elements use the site's body face explicitly; containers such
   as the CTA wrapper don't set one, so they would otherwise fall back. */
.gm-chain, .gm-tag, .gm-cta-paragraph, .gm-scope-tag, .gm-what, .gm-footer-desc, .gm-brands-label p {
  font-family: var(--_v2-px---typeface--body);
}

/* Logo: traced Gravitate mark (currentColor) + name ------------------------ */
.nav-logo.main,
.footer-logo {
  aspect-ratio: auto;
  width: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.gm-logo { display: flex; align-items: center; gap: 0.5rem; color: inherit; }
.gm-logo-mark { display: block; flex: none; height: 1.5rem; width: auto; }
.nav-logo.icon .gm-logo-mark { width: 100%; height: 100%; }
.gm-wordmark {
  font-family: var(--_v2-px---typeface--title);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}
.footer-logo .gm-logo { gap: 0.75rem; }
.footer-logo .gm-logo-mark { height: 2rem; }
.footer-logo .gm-wordmark { font-size: 1.5rem; }

/* Brand bar: label cell + scrolling logo strip in the original card frame.
   The frame keeps the wrapper's 1px dark background showing through as rules. */
.hero-mention-card-wrapper.gm-brands {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
  height: 11em;
}
.gm-brands-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background: #f6f6f6;
}
.gm-brands-label p {
  margin: 0;
  max-width: 14em;
  font-size: var(--_v2-px---size--body--medium);
  line-height: 1.25;
  color: var(--_v2-px---neutrals--dark--00);
}
.gm-marquee {
  position: relative;
  overflow: hidden;
  background: #f6f6f6;
}
/* soft edges: card-colour fades over the strip (a mask would show the dark
   frame behind it) */
.gm-marquee::before,
.gm-marquee::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 4em;
  pointer-events: none;
  background: linear-gradient(to right, #f6f6f6, rgba(246, 246, 246, 0));
}
.gm-marquee::before { left: 0; }
.gm-marquee::after { right: 0; transform: scaleX(-1); }
.gm-marquee-track {
  display: flex;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: gm-marquee 55s linear infinite;   /* constant speed is the point of a marquee */
}
.gm-marquee:hover .gm-marquee-track { animation-play-state: paused; }
@keyframes gm-marquee { to { transform: translate3d(-50%, 0, 0); } }
.gm-brand {
  flex: none;
  width: 13em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--_v2-px---black--black-00);
}
.gm-brand img { width: auto; max-width: 72%; opacity: 0.9; }
@media screen and (max-width: 991px) {
  .hero-mention-card-wrapper.gm-brands { grid-template-columns: 1fr 2fr; height: 10em; }
  .gm-brands-label { padding: 1rem; }
  .gm-brand { width: 11em; }
}
@media screen and (max-width: 767px) {
  .hero-mention-card-wrapper.gm-brands { grid-template-columns: 1fr; grid-template-rows: auto 8em; height: auto; }
  .gm-brands-label { flex-direction: row; align-items: baseline; gap: 1rem; padding: 0.75rem; }
  .gm-brands-label .gm-scope-tag { height: auto; }
  .gm-brand { width: 9.5em; font-size: 0.85em; }
  .gm-marquee-track { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-marquee { overflow-x: auto; }
  .gm-marquee-track { animation: none; }
  .gm-brand[aria-hidden="true"] { display: none; }
}

/* Mission: the growth system chain under the principle ------------------- */
.gm-chain {
  grid-column: 7 / span 6;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--_v2-px---neutrals--dark--05);
}
.gm-chain span { white-space: nowrap; }
@media screen and (max-width: 991px) {
  .gm-chain { grid-column: auto; }
}

/* Constraint patterns slider: text tag where the publication logo was ---- */
.gm-tag {
  margin-top: auto;
  margin-right: auto;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_v2-px---neutrals--dark--00);
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.gm-tag::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: #34483f;
}

/* Approach charts (replace the Lottie benchmark graphs) ------------------ */
.gm-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Results: four stats instead of three ---------------------------------- */
@media screen and (min-width: 992px) {
  .industry-stat-wrapper { width: 72%; }
}

/* Growth map CTA paragraph --------------------------------------------- */
.gm-cta-paragraph {
  max-width: 34rem;
  text-align: center;
  color: var(--_v2-px---neutrals--dark--03);
  font-size: var(--_v2-px---size--body--large);
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .gm-cta-paragraph { font-size: 0.875rem; padding: 0 1.25em; }
}

/* In-page anchors clear the fixed nav ------------------------------------ */
#what-we-do, #constraint, #approach, #results, #book-a-call { scroll-margin-top: 5.5rem; }

/* Patterns slider has four slides (the original had two). Webflow's mask is
   white-space:nowrap, so its min-content is the SUM of the slides' min-content;
   as a flex item the slider then refused to shrink below ~516px on phones.
   min-width:0 lets it take the track's width like the original. ----------- */
.mentions-slider-track > .slider-3 { min-width: 0; }

/* Leadership grid, re-filled ---------------------------------------------
   Scope label where the testimonial author logo was (same box height). */
.gm-scope-tag {
  height: 3.5em;
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_v2-px---neutrals--dark--05);
}
.gm-scope-tag::before { content: ""; flex: none; width: 0.5em; height: 0.5em; margin-top: 0.35em; background: #34483f; }
@media screen and (max-width: 767px) { .gm-scope-tag { height: 2.8em; } }

/* Build / operate / improve cards where the press logos were. Static (no
   link, no hover colour), laid out like the question cards beside them:
   tag at the top, title and line at the bottom, all visible. */
.news-sm-card.gm-op,
.news-sm-card.gm-op:hover {
  padding: 1.2em;
  justify-content: space-between;
  color: var(--_v2-px---neutrals--dark--00);
  cursor: default;
}
.gm-op-body { display: flex; flex-direction: column; gap: 0.5em; max-width: 26em; }
.gm-op-title {
  font-family: var(--_v2-px---typeface--title);
  font-size: var(--_v2-px---size--heading--h4);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--_v2-px---neutrals--dark--00);
}
.gm-op-text {
  font-size: var(--_v2-px---size--body--medium);
  line-height: 1.3;
  color: var(--_v2-px---neutrals--dark--04);
}
@media screen and (max-width: 767px) {
  .news-sm-card.gm-op { padding: 1em; }
  .gm-op-title { font-size: 1.25rem; }
  .gm-op-text { font-size: 0.875rem; }
}

/* What we do: paragraph, four service groups, journey line ---------------- */
.gm-what {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.gm-what .gm-chain { grid-column: auto; }
.gm-services {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--_v2-px---spacing--grid-spacing);
}
.gm-service { padding: 1rem 0; border-top: 1px solid var(--_v2-px---black--black-00); }
.gm-service dt {
  margin-bottom: 0.35rem;
  font-family: var(--_v2-px---typeface--title);
  font-size: var(--_v2-px---size--heading--h5);
  letter-spacing: -0.01em;
  color: var(--_v2-px---neutrals--dark--00);
}
.gm-service dd { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--_v2-px---neutrals--dark--04); }
.gm-chain-note { margin: -1rem 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--_v2-px---neutrals--dark--00); }
@media screen and (max-width: 991px) { .gm-what { grid-column: auto; } }
@media screen and (max-width: 479px) { .gm-services { grid-template-columns: 1fr; } }

/* Question cards: only one footer line in this copy -------------------- */
.testimonial-designation-text:empty { display: none; }

/* Closing section: supporting line under the button ---------------------- */
/* Footer: one-line description under the logo ---------------------------- */
.gm-footer-desc {
  margin: 1rem 0 0;
  max-width: 18rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--_v2-px---neutrals--light--03);
}

/* Footer: support email under the description */
.gm-footer-email {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--_v2-px---typeface--body);
  font-size: 0.875rem;
  color: var(--_v2-px---neutrals--light--00);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s;
}
.gm-footer-email:hover { border-bottom-color: currentColor; }

/* Privacy notice: fine print at the very foot of the page */
.gm-fineprint {
  padding: 1.5rem 3rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  scroll-margin-top: 6rem;
}
.gm-fineprint p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  text-wrap: auto;
  color: rgba(255, 255, 255, 0.5);
}
.gm-fineprint strong { font-weight: 500; color: rgba(255, 255, 255, 0.75); }
@media screen and (max-width: 767px) { .gm-fineprint { padding: 1.25rem 1.25rem 1.75rem; } .gm-fineprint p { text-align: left; } }

/* What we do: photograph in the left column, level with the service list
   (row 2 of the section's 12-column grid; stacks last on smaller screens). */
.gm-what-img {
  grid-column: 1 / span 5;
  grid-row: 2;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-top: 0.5rem;
}
@media screen and (max-width: 991px) { .gm-what-img { margin-top: 0.5rem; } }

/* Your starting point: copy on the left, photo on the right (desktop). The
   two halves are auto-placed 6+6 columns, so reordering swaps them. */
@media screen and (min-width: 992px) {
  .slider-3 .news-thumbnail { order: 2; }
  .slider-3 .mentions-text-wrapper { padding: 1em 1.25em; }
  .slider-3 .w-slider-arrow-left { color: var(--_v2-px---neutrals--dark--00); }   /* now over the light copy panel */
}

/* Footer: one Instagram box where LinkedIn and X were -------------------- */
.footer-social-icon-container .gm-ig { width: 1em; height: 1em; }

/* Results has a single slide: its one-dot slider nav is noise */
.industry-slider .w-slider-nav { display: none; }

/* Footer legal items: listed, not linked yet */
.footer-link.gm-link-inert { cursor: default; }
.footer-link.gm-link-inert:hover { opacity: 1; }

/* Motion (gm-motion.js) --------------------------------------------------- */
.gm-anim:not(.gm-ready) .sec-hero h1,
.gm-anim:not(.gm-ready) .sec-hero .hero-subheading,
.gm-anim:not(.gm-ready) .sec-hero .cta,
.gm-anim:not(.gm-ready) .gm-brands { visibility: hidden; }
/* photos scale inside their sections, never over the neighbours */
.section-wrapper.dark, .section-wrapper.footer { overflow: hidden; }
.hero-bg { transform-origin: 50% 40%; will-change: transform; }
/* the intro's start scale, painted from the first frame (before gm-motion.js
   runs), so the photo never jumps when the animation takes over */
.gm-anim .hero-bg { transform: scale(1.12); }
/* Webflow gives buttons transition:all, which made every GSAP frame (intro
   fade, magnetic pull) restart a CSS transition: laggy, stepped motion. Only
   the hover properties transition now. */
.cta { transition-property: color, background-color, border-color, padding, column-gap, row-gap; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.cta.navbar { transition-property: color, background-color, border-color, padding, column-gap, row-gap, opacity; }
/* SplitText line masks clip at the line box; give descenders room */
.gm-line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.gm-chain > span { display: inline-block; }
.industry-stat { font-variant-numeric: tabular-nums; }
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Browser surfaces ----------------------------------------------------------- */
::selection { background: #34483f; color: #f6f6f6; }
:focus-visible { outline: 2px solid #34483f; outline-offset: 3px; }
.section-wrapper.dark :focus-visible, .footer-section-wrapper :focus-visible { outline-color: #f6f6f6; }
/* The clone's slider embed kills focus rings (.w-slider :focus { outline:
   none !important }); restore them for keyboard focus only */
.w-slider .w-slider-arrow-left:focus-visible, .w-slider .w-slider-arrow-right:focus-visible,
.w-slider .w-slider-dot:focus-visible { outline: 2px solid #34483f !important; outline-offset: -6px !important; }
.slider-3 .w-slider-arrow-right:focus-visible { outline-color: #f6f6f6 !important; }
h1, h2, .industry-card-heading { text-wrap: balance; }
p, dd { text-wrap: pretty; }

/* Brand strip driven by gm-motion.js (the keyframe loop is the fallback) */
.gm-marquee-js .gm-marquee-track { animation: none; will-change: transform; }

/* Results odometer: each digit is a clipped column of numerals */
.industry-stat.gm-odo-ready { display: inline-flex; align-items: flex-start; line-height: 1; }
.gm-odo, .gm-odo-char { display: inline-block; height: 1em; line-height: 1; }
.gm-odo { overflow: hidden; }
.gm-odo-col { display: block; will-change: transform; }
/* two turns of numerals, one per 1em line */
.gm-odo-col::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; line-height: 1; text-align: center; }
.gm-odo-char::before { content: attr(data-c); }
.gm-odo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* One licensed family: the clone's base styles set paragraphs and footer links
   in Helvetica Neue; everything here is set in Switzer. */
p, .footer-link { font-family: var(--_v2-px---typeface--body); }

/* No rubber-band overscroll where the browser allows it. iPhone Safari bounces
   the page anyway, so the canvas it shows past the end is dark while the
   footer is on screen (gm-end, set by gm-motion.js): no white bar under the
   footer, and the top of the page stays light. */
html { overscroll-behavior-y: none; background-color: #f6f6f6; }
html.gm-end { background-color: #131313; }

/* Phone/tablet menu bar over dark areas (class set by gm-motion.js) */
@media screen and (max-width: 991px) {
  .nav, .nav-backdrop, .nav-logo.main, .nav_menu_button, .menu-icon1_line-top, .menu-icon1_line-bottom {
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* only while the menu is closed; the open menu keeps its light panel */
  .gm-nav-dark .nav:not(:has(.w--open)) { background-color: rgba(19, 19, 19, 0.3); }
  .gm-nav-dark .nav:not(:has(.w--open)) .nav-backdrop { background-color: rgba(19, 19, 19, 0.6); }
  .gm-nav-dark .nav:not(:has(.w--open)) .nav-logo.main,
  .gm-nav-dark .nav:not(:has(.w--open)) .nav_menu_button { color: #f6f6f6; }
  .gm-nav-dark .nav:not(:has(.w--open)) .menu-icon1_line-top,
  .gm-nav-dark .nav:not(:has(.w--open)) .menu-icon1_line-bottom { background-color: #f6f6f6; }
}

/* Open phone/tablet menu: a black panel. The links carry a dark inline colour
   baked in from Webflow's desktop scroll state, so they were nearly invisible;
   inside the open menu they are always light. */
@media screen and (max-width: 991px) {
  .w-nav-menu .nav-link { color: #f6f6f6 !important; }
  .w-nav-menu .nav-link:hover { opacity: 0.7; }
  /* same baked inline colours made the menu's "Book a call" transparent with
     black text on the black panel; restore its intended light button */
  .w-nav-menu .cta.navbar { background-color: #f6f6f6 !important; color: #131313 !important; border-color: #f6f6f6 !important; }
}

/* Responsive photos: <picture> wrappers are layout-transparent, and when a
   phone crop is in use it is framed from its centre (the crop is already
   centred on what phones showed of the full photo). */
.gm-pic { display: contents; }
@media (max-width: 767px) and (max-aspect-ratio: 3/5) { .hero-bg { object-position: 50% 50%; } }
@media (max-width: 479px) {
  .industry-card-bg-img { object-position: 50% 50%; }
  .section-wrapper.footer .bg-img { object-position: 50% 0%; }
}