/* ==========================================================================
   Runtime overrides.

   The reference build shipped these rules as inline <style> blocks in the
   document head rather than in its compiled stylesheet. They are load-bearing:
   the split-text animations, the mega-menu hover swap, the physics canvas and
   the custom checkboxes all depend on them, so they are collected here and
   enqueued after the compiled stylesheet.

   Brand colours are expressed as custom properties so the Customizer still
   drives them.
   ========================================================================== */

html { height: auto !important; }

body { overflow-x: hidden; }

/* The export hid the native cursor and drew its own. That worked while the
   custom one was a cursor: a pink badge that opened over every link and told
   you it was a link.

   The badge is gone — it read as a heart over every link on a business site —
   and what was left behind it is not a cursor. The two dots it was built from
   are both invisible, one scaled to zero and one at zero opacity, and the only
   thing still following the pointer is the decorative shard trail, which lags
   behind on purpose and says nothing about what is under it.

   So the page had no pointer, no hand over links, and no I-beam over a text
   field. The native cursor comes back, and the trail stays as decoration on
   top of it. See components.css for the explicit ones. */

.cursor-wrapper { pointer-events: none; }

/* The reference parks this at z-index 199, which was fine when nothing else
   was fixed to the viewport. The sticky enquiry button and the floating menu
   both sit above that, and the pointer disappeared under them. It never takes
   clicks, so there is no cost to putting it on top of everything. */
.cursor-wrapper { z-index: 9999 !important; }

option { background: #000 !important; }

.line-break.is-right { display: inline-block !important; }

@media screen and (max-width: 475px) {
  .line-break.is-right { display: inline !important; }
}

/* --------------------------------------------------------------------------
   SplitType scaffolding
   -------------------------------------------------------------------------- */

[text-split] { opacity: 0; }
html.w-editor [text-split] { opacity: 1; }

.word {
  position: relative;
  overflow: hidden;
  padding-bottom: 0.3em;
  margin-bottom: -0.5em;
  margin-top: -0.5em;
  transform-origin: bottom;
}

.word-line {
  overflow: hidden;
  padding-bottom: 0.3em;
  margin-bottom: -0.4em;
  margin-top: -0.2em;
}

/* Those negative margins exist to pull the clipped lines of a heading back
   together: each line carries padding so a descender is not cut off, and the
   margin takes that padding back out of the flow.

   Between two lines that is exactly right. On the first and last line it is
   not, because there is no neighbouring line to absorb it — the heading has no
   padding or border of its own, so the margins collapse straight out through
   it and take the spacing around the heading with them.

   Measured on the homepage: the kicker asks for 16px below itself and got 8,
   and the paragraph under the heading asks for 15px above itself and got −2,
   which is why the heading and its opening line were touching. The same two
   classes set every heading on the site, so it happened on every page.

   The outer edges are trimmed to nothing instead: the first line keeps its own
   leading, and the last line cancels its padding without pulling anything up
   after it. */
.word-line:first-child { margin-top: 0; }
.word-line:last-child { margin-bottom: -0.3em; }

.line { display: inline-block !important; }

.skew-up { opacity: 0; }

.line-mask {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--ed-paper, #fff);
  opacity: 0.8;
  height: 105%;
  width: 105%;
  z-index: 2;
}

.service-list .word { margin-bottom: -1.1em !important; }

@media only screen and (max-width: 991px) {
  .service-list .word { margin-bottom: -0.6em !important; }
}

.heading-h2.s-small { display: inline-block !important; }

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

/* --------------------------------------------------------------------------
   Footer physics canvas
   -------------------------------------------------------------------------- */

.tag-canvas { overflow: visible !important; }

.tag-canvas canvas {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Mega-menu link hover swap
   -------------------------------------------------------------------------- */

.dropdown-link p,
.dropdown-link,
.line { transition: 500ms ease; }

.dropdown-link {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}

.dropdown-link .wrapper { position: relative; }

.dropdown-link .text-original {
  transform: translateY(0);
  transition: transform .3s ease;
}

.dropdown-link .text-clone {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(0);
  transition: transform .3s ease;
}

.dropdown-link:hover .text-original,
.dropdown-link:hover .text-clone { transform: translateY(-100%); }

/* The reference switched these to uppercase on hover, which changes the text
   width and reflows the whole mega-menu under the cursor. The text-swap above
   is the intended effect; the case change was just causing layout shift. */

.link-wrap:hover .line { height: 5px; }

.internal-services-wrap { height: auto !important; }

/* --------------------------------------------------------------------------
   Contact-page checkboxes (dark fill on select)
   -------------------------------------------------------------------------- */

.cf-checkbox,
.cf-checkbox-label::before { transition: all 250ms ease; }

.cf-checkbox:checked ~ .cf-checkbox-label {
  color: #fff !important;
  background-color: #000 !important;
  transform: scale(.9);
}

.cf-checkbox:checked ~ .cf-checkbox-label::before { opacity: 0; }

.cf-checkbox-label::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #000;
  z-index: -1;
  opacity: 1;
  border-radius: 62px;
}

@media screen and (min-width: 991px) {
  .cf-checkbox-label:hover { color: #fff !important; }
  .cf-checkbox-label:hover::before { height: 100%; }
}

/* --------------------------------------------------------------------------
   Footer-form checkboxes (accent fill on select)
   -------------------------------------------------------------------------- */

.checkbox-label,
.checkbox-label::before { transition: all 250ms ease; }

.checkbox:checked ~ .checkbox-label {
  background-color: var(--ed-accent) !important;
  transform: scale(.9);
}

.checkbox:checked ~ .checkbox-label::before { opacity: 0; }

.checkbox-label::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--ed-accent);
  z-index: -1;
  opacity: 1;
  border-radius: 62px;
}

@media screen and (min-width: 991px) {
  .checkbox-label:hover::before { height: 100%; }
}

/* --------------------------------------------------------------------------
   Testimonial slider dots
   -------------------------------------------------------------------------- */

.w-slider-dot {
  width: 1.25rem;
  height: .5rem;
  border-radius: 5rem !important;
  background-color: #000;
  transition: 500ms ease;
}

.w-slider-dot.w-active {
  width: 2.5rem;
  background-color: var(--ed-accent);
}

/* --------------------------------------------------------------------------
   WordPress-only corrections
   -------------------------------------------------------------------------- */

/* Applied by app.js only while SplitType is measuring line breaks. The
   negative margins above would otherwise collapse every word onto one
   apparent line, so a heading that wraps would be split — and clipped — as if
   it were a single line. */
.ed-measuring .word,
.ed-measuring .word-line,
.ed-measuring .char {
  overflow: visible !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* The split-text scaffolding above is scoped to the animated headings. Reset it
   inside editorial content, where <p> and headings must keep normal metrics. */
.ed-prose .word,
.ed-prose .word-line {
  overflow: visible;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Mobile: no word-level splitting

   app.js skips the split-text reveals below 992px (see isNarrow()), so the
   scaffolding must not hide the text or interfere with normal line breaking.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  [text-split],
  [data-skew-up],
  [data-split-word] { opacity: 1 !important; }

  .word,
  .word-line {
    overflow: visible;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: inline !important;
  }

  .line-mask { display: none !important; }
}

/* --------------------------------------------------------------------------
   Typography — Brand Guidelines section 09

   The compiled Webflow stylesheet names Aeonik, Ppneuemachina and Roobert in
   42 places. Those are the export's own licensed faces, which this project
   never had the right to serve; the new guidelines specify Poppins throughout
   with IBM Plex Mono for labels and metrics, both open licensed.

   Rather than editing the compiled file — which would be undone by any future
   re-export — every family is remapped here by name. Anything still asking for
   an old face gets Poppins, so nothing falls back to a system serif.
   -------------------------------------------------------------------------- */

html body,
html body [class] {
  font-family: var(--ed-font-body);
}

/* Elements the compiled sheet sets a family on directly. */
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, td, th,
button, input, select, textarea,
.heading-h1, .heading-h2, .heading-h3, .heading-h4,
.paragraph, .button, .nav-link, .mega-menu-link {
  font-family: var(--ed-font-body);
}

/* Labels, descriptors, metrics and case-study data take the mono face. */
.ed-kicker,
.ed-card__num,
.ed-journey__num,
.ed-difference__num,
.ed-story__num,
.p-count,
.counter,
.count-symbol,
.ed-post-card__meta,
.ed-article__meta {
  font-family: var(--ed-font-mono);
  font-weight: 500;
}

/* The icon font is functional, not typographic — it must not be remapped. */
[class*="w-icon-"],
.w-icon-dropdown-toggle,
.w-icon-nav-menu,
.w-icon-slider-left,
.w-icon-slider-right {
  font-family: 'webflow-icons' !important;
}

/*
 * Display sizing: 600 weight with tight tracking, per the guidelines. Body is
 * 400 at 1.6 leading and never below 16px on web — the floor the guidelines set.
 */
.heading-h1, .heading-h2, .heading-h3,
.heading-h1 *, .heading-h2 *, .heading-h3 * {
  font-weight: 600;
  letter-spacing: -0.02em;
}

body { font-weight: 400; }

.paragraph { line-height: 1.6; }

/* --------------------------------------------------------------------------
   Ground colour

   The compiled stylesheet sets body to pure white. The guidelines specify a
   warmer paper, #F5F5F2, and that warmth is what keeps the gradient from
   reading as neon against it — on pure white the magenta goes shrill.
   -------------------------------------------------------------------------- */

body { background-color: var(--ed-paper); }

/* Sections that assume a white ground need to follow it, or they band. */
.service-gradient-mask { background-image: linear-gradient(var(--ed-paper), transparent) !important; }
.service-gradient-mask.bottom { background-image: linear-gradient(transparent, var(--ed-paper)) !important; }

/* ==========================================================================
   Display typography — weight, scale and leading

   Three things were wrong against the reference build.

   1. Weight. Headings were set to 600. Poppins at 600 is visibly heavier than
      the grotesk the reference uses at the same nominal weight, so the display
      type read as bolder and more crowded than the design it was matched to.
      500 is the closest visual match.

   2. Scale. The compiled sheet sets .heading-h1 at 8.75vw — 168px on a 1920
      screen, which is larger than the reference and forces long lines to wrap
      in places the layout does not expect. Everything steps down roughly a
      tenth.

   3. Leading. line-height: 1 on Poppins clips nothing but reads cramped,
      because Poppins carries tall ascenders and a deep descender. Display
      lines get 1.06, section headings 1.12, and the tracking loosens slightly
      to suit the lighter weight.
   ========================================================================== */

.heading-h1, .heading-h2, .heading-h3,
.heading-h1 *, .heading-h2 *, .heading-h3 * {
  font-weight: 500;
  letter-spacing: -0.018em;
}

.heading-h1 { font-size: 7.9vw; line-height: 1.06; }
.heading-h1.s-small { font-size: 6.9vw; line-height: 1.12; }
.heading-h1.s-small.x-small { font-size: 6.4vw; }

.heading-h2 { line-height: 1.12; }
.heading-h2.s-large { font-size: 5.8vw; }
.heading-h2.s-large.little-small { font-size: 5.4vw; }
.heading-h2.s-medium { font-size: 4.2vw; }

.heading-h3 { line-height: 1.18; }

/* ---- Hero headline rhythm -----------------------------------------------
   The three lines of the headline are three different kinds of element, and
   until now each one worked out its own vertical spacing.

   The first two are spans inside the h1. They were inline-block, which puts
   them on a text line and aligns them to its baseline, so each one carried the
   line box's half-leading below it — an extra 18px at 38px type that nothing
   asked for and nothing else matched. The rotating line is a separate block
   below the h1 with a line-height of its own and a negative margin hand-tuned
   to drag it back up. At 375px the result was 41px boxes advancing 59px, then
   a third line pulled 19px above where the rhythm put it.

   All three are blocks now, all on the same leading, and the negative margin is
   gone. The lines advance by exactly one line-height, everywhere, at any size.
   ------------------------------------------------------------------------ */

.heading-h1.home > .leading,
.heading-h1.home > .full-service {
  /*
     block, not inline-block, so neither line sits on a text baseline and picks
     up that line box's half-leading. fit-content keeps each box the width of
     its own words, which two other things depend on: the opening scale is
     measured from the first line's width, and a full-width box would report
     the container instead and cancel the move.
  */
  display: block;
  width: fit-content;
}

/* The decorative rule between the two spans is meant to be hidden and was
   still occupying a 1px line of its own. */
.heading-h1.home > .underline.hero.hide {
  display: none;
}

.heading-h1.home,
.heading-h1.home.is-ticker {
  line-height: 1.14;
}

/*
   A flex column, so the newlines between the spans in the template stop
   counting. As block siblings they were whitespace between block boxes,
   which the browser still resolves against the headline's own line box and
   which was adding 18px between line one and line two and nowhere else.
   Flex items ignore whitespace-only text nodes outright, so the only thing
   between two lines is their own leading.
*/
.heading-h1.home {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/*
   The wrap is sized by the line inside it rather than by a vw figure kept in
   step by hand. It still clips, because the entrance below rises the line up
   from underneath that edge; the padding is the room Poppins needs for the
   descenders in "growth" and "your" inside that clip.
*/
.hero-ticker-wrap {
  height: auto;
  margin-top: 0;
  overflow: hidden;
}

.heading-h1.home.is-ticker {
  white-space: nowrap;
  padding-bottom: .16em;
}

/*
 * The mask hides the top of the incoming phrase. It was painted #fff on a
 * #f5f5f2 ground, which put a bright bar straight across the headline.
 */
.ticker-mask { background-color: var(--ed-paper); }

/* ---- Section rhythm ------------------------------------------------------
   Kicker, heading and lede were each carrying their own margins from three
   different places, so the gap above a heading changed from section to
   section. One scale, applied everywhere.
   ------------------------------------------------------------------------ */

.ed-kicker { margin: 0 0 .9vw; line-height: 1.4; }
.ed-section__lede { margin-top: 1.4vw; }
.ed-problem__kicker { margin-top: 1.2vw; }

@media screen and (max-width: 991px) {
  .heading-h1 { font-size: 66px; line-height: 1.08; }
  .heading-h1.s-small { font-size: 50px; }
  .heading-h1.s-small.x-small { font-size: 44px; }
  .heading-h2.s-large { font-size: 56px; }
  .heading-h2.s-large.little-small { font-size: 50px; }
  .heading-h2.s-medium { font-size: 34px; }


  .ed-kicker { margin-bottom: 12px; }
  .ed-section__lede { margin-top: 18px; }
  .ed-problem__kicker { margin-top: 16px; }
}

@media screen and (max-width: 767px) {
  .heading-h1 { font-size: 48px; }
  .heading-h1.s-small { font-size: 40px; }
  .heading-h1.s-small.x-small { font-size: 36px; }
  .heading-h2.s-large { font-size: 42px; }
  .heading-h2.s-large.little-small { font-size: 38px; }
  .heading-h2.s-medium { font-size: 30px; }

}

@media screen and (max-width: 479px) {
  /*
     Fluid rather than a fixed step, because this is the band where the
     headline stops fitting. Measured in Poppins at 500: the longest rotating
     phrase, "a growth channel", runs 8.55x the font size. The container keeps
     20px of padding each side, so the phrase fits while
     font-size <= (viewport - 40) / 8.55.

     11.2vw - 4.5px sits just inside that at every width: 37.5px on a 375px
     screen, 35.8 on a 360, 31.3 on a 320. It also meets the band above exactly
     — at 479px it computes to 49.1 and the 48px ceiling takes over — so there
     is no visible step at the breakpoint.
  */
  .heading-h1 { font-size: clamp(26px, calc(11.2vw - 4.5px), 48px); }
  .heading-h1.s-small { font-size: 32px; }
  .heading-h2.s-large { font-size: 34px; }
  .heading-h2.s-medium { font-size: 26px; }

}

/* --------------------------------------------------------------------------
   Section heads

   .section-space carries a 5vw bottom margin — 96px on a 1920 screen — and the
   block that follows adds its own top margin on top of that. Under a section
   heading it came to about 160px of white space, which is what made the
   headings read as adrift from the content they introduce.

   Scoped to the heads rendered by ed_section_head() so the reference layout's
   own use of .section-space is untouched.
   -------------------------------------------------------------------------- */

.ed-sec-head { margin-bottom: 3vw; }
.ed-sec-head + * { margin-top: 0; }

@media screen and (max-width: 991px) {
  .ed-sec-head { margin-bottom: 34px; }
}

@media screen and (max-width: 767px) {
  .ed-sec-head { margin-bottom: 26px; }
}

/* --------------------------------------------------------------------------
   Hero entrance

   The theme drives this now; the exported timeline's trigger id has been
   removed from the markup. See initHeroIntro() in app.js.

   Every hidden state below is scoped to .ed-intro, which is added by that
   script. If it never runs the class is never added and the headline is simply
   complete and still — the failure mode is no animation, not no content.
   -------------------------------------------------------------------------- */

.ed-hero-section .heading-h1.home .leading {
  /* Was inline-block, for the fit-to-text width. A block that is
     fit-content gives the same width without the baseline gap. */
  display: block;
  width: fit-content;
  transform-origin: left center;
  will-change: transform;
}

.ed-hero-section.ed-intro-run .heading-h1.home .leading {
  transition: transform 1000ms cubic-bezier(.16, .84, .28, 1);
}

/* Lines two and three wait for the first to land. */
.ed-hero-section.ed-intro .heading-h1.home .full-service,
.ed-hero-section.ed-intro .hero-ticker-wrap {
  opacity: 0;
  transform: translateY(18px);
}

.ed-hero-section.ed-intro-done .heading-h1.home .full-service,
.ed-hero-section.ed-intro-done .hero-ticker-wrap {
  opacity: 1;
  transform: none;
  transition: opacity 620ms ease, transform 720ms cubic-bezier(.16, .84, .28, 1);
}

/* The rotating line comes in a beat after the middle one. */
.ed-hero-section.ed-intro-done .hero-ticker-wrap {
  transition-delay: 170ms;
}

@media (prefers-reduced-motion: reduce) {
  .ed-hero-section .heading-h1.home .leading,
  .ed-hero-section .heading-h1.home .full-service,
  .ed-hero-section .hero-ticker-wrap { transition: none; transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   The rotating line's entrance

   The line itself never moves from its resting place; only its text changes.
   This is the entrance it replays on each change, as a keyframe animation
   rather than a transition: an animation with fill-mode both always finishes
   at its end state, so there is no completion event to miss and no way to be
   left mid-way.
   -------------------------------------------------------------------------- */

/*
 * It rises rather than fades in from nothing.
 *
 * Both numbers here are deliberately small. The window is exactly one line
 * tall and clips, so a large starting offset pushes most of the glyphs out of
 * frame for the first part of every cycle — which reads as the same blank this
 * component has been fighting. 17% keeps the whole line inside the window
 * throughout, and the opacity never drops below just under a half.
 */
/*
   The phrase rises into place from under the clip edge rather than nudging up
   17% from where it already was. The wrap clips, so at 108% the line is fully
   out of sight and the move reads as one phrase leaving and the next arriving,
   which is what a rotating line is meant to look like. Opacity lands early so
   the word is legible for most of the travel instead of fading in over it.
*/
@keyframes ed-ticker-in {
  from { transform: translateY(108%); opacity: 0; }
  45%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

.heading-h1.home.is-ticker.is-entering {
  animation: ed-ticker-in 640ms cubic-bezier(.22, .9, .24, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .heading-h1.home.is-ticker.is-entering { animation: none; }
}

/* -------------------------------------------------------------------------
 * Contact form — the "My business is a" choices
 *
 * The export laid these out as a three-column grid, which has two consequences
 * on this page. Every pill is forced to the width of a third of the row, so a
 * longer option such as "Food or organic-product brand" wraps onto three lines;
 * and because grid items stretch, the two short pills beside it grow to match,
 * leaving a row of 112px pills with a single word floating in the middle. On
 * the tall pill the 62px corner radius then cuts into the first and last line,
 * so the text reads as spilling out of its own outline.
 *
 * Laid out as chips instead: each one is as wide as its label, all of them one
 * line, all the same height. This is what the footer form already does.
 * ---------------------------------------------------------------------- */

.contact-input-wrapper .contact-form-options-wrap,
.contact-form-options-wrap:not(.footer-form) {
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.contact-form-options-wrap:not(.footer-form) .cf-checkbox-field { flex: 0 0 auto; }

/* The validation message is not one of the choices — it belongs on its own row
   underneath them, not in the next free cell beside the last pill. */
.contact-form-options-wrap:not(.footer-form) .error-message { flex: 1 0 100%; }

/* -------------------------------------------------------------------------
 * Client marquee — readable names
 *
 * The export set these at opacity .2, which is black text sitting at roughly
 * 1.4:1 against the page. That is below the 3:1 WCAG asks of large text, and it
 * is self-defeating besides: the point of the strip is to show who the clients
 * are, and at that weight the names read as a printing fault rather than a list.
 *
 * .55 keeps them clearly secondary to the headline above while landing near
 * 4:1, so they can actually be read.
 * ---------------------------------------------------------------------- */

.marquee-text { opacity: .55; }

/* -------------------------------------------------------------------------
 * Header at phone widths
 *
 * The bar holds a logo, a proposal pill and a menu button. At 375px there is
 * room for two of those. Measured on an iPhone-width viewport, the pill's box
 * was 96px wide while its label wanted 128px, so the text ran past its own
 * background on the left, under the menu button on the right, and read as
 * "quest a propo".
 *
 * The pill steps out below 768px and the same action appears at the foot of
 * the menu instead, which is where the rest of the navigation already lives.
 * ---------------------------------------------------------------------- */

.ed-nav-cta { display: none; }

@media screen and (max-width: 767px) {
  .navbar2_button-wrapper .button.is-navbar { display: none; }

  .ed-nav-cta {
    color: #fff;
    background: var(--ed-ink);
    border-radius: 62px;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
  }

  .ed-nav-cta:hover,
  .ed-nav-cta:focus-visible { background: var(--ed-accent-deep); }
}

/* At tablet widths the pill and the menu button end up flush against each
   other — measured at 753px, the gap between the two boxes was exactly zero.
   They stay distinct targets, but they read as one control. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .navbar2_button-wrapper .button.is-navbar { margin-right: .75rem; }
}

/* -------------------------------------------------------------------------
 * Word reveal on narrow screens
 *
 * These spans exist only to give the scroll animation something per word to
 * colour. They stay inline, with the real spaces left between them as text
 * nodes, so line breaking is still entirely the browser's: the point of this
 * variant is that it changes nothing about how the paragraph sets.
 * ---------------------------------------------------------------------- */

.ed-word {
  display: inline;
  /* No transition here on purpose. The reveal is scrubbed against scroll
     position and already writes a colour every frame; a transition on top
     of that adds a lag the scroll has to drag behind, and leaves the word
     stuck at its last painted colour whenever the tab is not being drawn. */
}

/* -------------------------------------------------------------------------
 * Menu labels do not break mid-label
 *
 * The reference menu was set in English, where every top-level item is one
 * short word, so nothing ever wrapped and the row had no reason to say it must
 * not. "Über uns", "À propos" and "Chi siamo" are two words each, and the
 * label broke over two lines while the items either side stayed on one —
 * which reads as a mistake rather than as a menu.
 *
 * The dropdown links inside the mega menu already had this; the row above them
 * did not.
 * ---------------------------------------------------------------------- */
.nav-link,
.nav-link.w-nav-link { white-space: nowrap; }