/* Reusable components. Class names go in the widget's "CSS Classes" field. */

:root { --nav-h: clamp(4.5rem, 7vw, 6.25rem); }

/* Eyebrow label ------------------------------------------------------
   A Heading widget with the class "eyebrow". */

.eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.eyebrow .elementor-heading-title::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--c-champagne);
}

/* Buttons and links --------------------------------------------------
   The Button widget. Font, padding and radius come from Site Settings > Buttons.
   Colours come from the section theme (--fg, --bg), so one button works on light and dark.
   Variants: btn--solid, btn--ghost, btn--sm, btn--lg, btn--arrow, link. */

.elementor-element.elementor-widget-button .elementor-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--fg);
  background-color: transparent;
  color: var(--fg);
  white-space: nowrap;
  vertical-align: top;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.elementor-element.elementor-widget-button .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform .6s var(--ease-out);
}
.elementor-element.elementor-widget-button .elementor-button:hover,
.elementor-element.elementor-widget-button .elementor-button:focus-visible { color: var(--bg); }
.elementor-element.elementor-widget-button .elementor-button:hover::before,
.elementor-element.elementor-widget-button .elementor-button:focus-visible::before { transform: none; }

.elementor-widget-button .elementor-button-content-wrapper { align-items: center; gap: 1em; }

.elementor-widget-button.btn--ghost .elementor-button { border-color: color-mix(in srgb, var(--fg) 38%, transparent); }
.elementor-widget-button.btn--ghost .elementor-button:hover { border-color: var(--fg); }

.elementor-widget-button.btn--solid .elementor-button { background-color: var(--fg); color: var(--bg); }
.elementor-widget-button.btn--solid .elementor-button::before { background: var(--c-champagne); }
.elementor-widget-button.btn--solid .elementor-button:hover,
.elementor-widget-button.btn--solid .elementor-button:focus-visible { color: var(--c-noir); border-color: var(--c-champagne); }

.elementor-widget-button.btn--sm .elementor-button { padding: 1.05em 1.5em; }
.elementor-widget-button.btn--lg .elementor-button { padding: 1.55em 2.4em; font-size: .75rem; }

/* The widget is exactly as tall as its button. Left alone its line box is taller, and a
   button centred in a row sits too high. */
.elementor-element.elementor-widget-button { line-height: 0; }

/* Diagonal arrow after the label. Drawn in CSS so it needs no uploaded icon. */
.btn--arrow .elementor-button-content-wrapper::after {
  content: "";
  flex: none;
  width: 1.3em;
  height: 1.3em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M8.5 6H18v9.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M8.5 6H18v9.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
.btn--arrow .elementor-button:hover .elementor-button-content-wrapper::after { transform: translate(.16em, -.16em); }

/* Text link: the Button widget with the class "link". */
.elementor-widget-button.link .elementor-button {
  overflow: visible;
  padding: 0 0 .7em;
  border: 0;
  background-color: transparent;
  color: inherit;
  line-height: 1.2;
}
.elementor-widget-button.link .elementor-button:hover,
.elementor-widget-button.link .elementor-button:focus-visible { color: inherit; }
.elementor-widget-button.link .elementor-button::before { content: none; }
.elementor-widget-button.link .elementor-button::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}
.elementor-widget-button.link .elementor-button:hover::after { animation: mx-wipe .9s var(--ease-inout); }

@keyframes mx-wipe {
  0% { transform: scaleX(1); transform-origin: right; }
  45% { transform: scaleX(0); transform-origin: right; }
  46% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* Frame --------------------------------------------------------------
   Header, fullscreen menu and footer are Theme Builder templates. Their Containers
   carry the class names below and are laid out by this stylesheet; texts, links and
   menus stay editable in the panel. */

/* Brand lockup -------------------------------------------------------
   A Container with the HTML tag "a" and the class "brand", holding two Heading
   widgets: "brand__name" and "brand__sub". The monogram is a mask filled with the
   text colour, so it follows the tone of the bar and needs no uploaded file. */

.e-con.brand {
  --width: auto;
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: center;
  justify-content: start;
  justify-self: start;
  gap: .34rem .9rem;
}
.e-con.brand::after {
  content: "";
  grid-area: 1 / 1 / span 2 / 2;
  width: 2.1rem;
  aspect-ratio: 246 / 182;
  background: currentColor;
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
}
.brand > .elementor-widget-heading { grid-column: 2; }
.brand .elementor-heading-title {
  display: block;
  font-family: var(--f-sans);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.brand__name .elementor-heading-title { font-size: .8125rem; letter-spacing: .42em; }
.brand__sub .elementor-heading-title { font-size: .5rem; letter-spacing: .64em; opacity: .72; }

/* Navigation ---------------------------------------------------------
   Header template: Container "nav" > Container "nav__inner" > brand, Nav Menu
   "nav__links", Container "nav__end" (button "nav__cta" and the menu toggle).
   The bar is fixed here and driven by nav.js: Elementor's own sticky stays off. */

.e-con.nav {
  --fg: var(--c-ivory);
  --bg: var(--c-noir);
  --position: fixed;
  --z-index: 100;
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
  inset: var(--wp-admin--admin-bar--height, 0px) 0 auto 0;
  color: var(--fg);
  border-bottom: 1px solid transparent;
  transition:
    transform .7s var(--ease-out),
    background-color .5s var(--ease-out),
    color .5s var(--ease-out),
    border-color .5s var(--ease-out);
}
.e-con.nav[data-tone="light"] { --fg: var(--c-noir); --bg: var(--c-ivory); }

.e-con.nav.is-solid {
  background-color: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: color-mix(in srgb, var(--fg) 12%, transparent);
}
.e-con.nav.is-hidden { transform: translateY(-101%); }

.e-con.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  max-width: var(--maxw);
  height: var(--nav-h);
  margin-inline: auto;
  transition: height .5s var(--ease-out);
}
.nav.is-solid .e-con.nav__inner { height: 4.25rem; }

/* The Nav Menu widget, with pointer and mobile dropdown switched off in the panel.
   The underline is a background, because Elementor reserves the link's pseudo-elements. */
.elementor-widget-nav-menu.nav__links .elementor-nav-menu {
  flex-wrap: nowrap;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}
.elementor-widget-nav-menu.nav__links .elementor-nav-menu .elementor-item {
  padding: .7em 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  color: inherit;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .24em;
  text-transform: uppercase;
  transition: background-size .6s var(--ease-out);
}
.elementor-widget-nav-menu.nav__links .elementor-nav-menu .elementor-item:hover {
  background-position: 0 100%;
  background-size: 100% 1px;
}

.e-con.nav__end {
  --flex-direction: row;
  --align-items: center;
  --justify-content: flex-end;
  --row-gap: 0px;
  --column-gap: 1.25rem;
}

/* The toggle is a button in an HTML widget; its two labels are swapped here. */
.nav .nav__toggle,
.nav .nav__toggle:hover,
.nav .nav__toggle:focus {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--f-sans);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.nav__toggle [data-when="open"] { display: none; }
.menu-open .nav__toggle [data-when="open"] { display: inline; }
.menu-open .nav__toggle [data-when="closed"] { display: none; }

.nav__toggle-icon { position: relative; width: 1.75rem; height: .5rem; }
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-out);
}
.nav__toggle-icon::before { top: 0; }
.nav__toggle-icon::after { bottom: 0; }
.menu-open .nav__toggle-icon::before { transform: translateY(.22rem) rotate(18deg); }
.menu-open .nav__toggle-icon::after { transform: translateY(-.22rem) rotate(-18deg); }

body.menu-open { overflow: hidden; }
body.menu-open .e-con.nav {
  --fg: var(--c-ivory);
  --bg: var(--c-noir);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Links and button leave the bar at the tablet breakpoint through the panel's
   "Hide on" switches; the grid only has to close the gap. */
@media (max-width: 1024px) {
  .e-con.nav__inner { grid-template-columns: 1fr auto; }
}

/* Fullscreen menu ----------------------------------------------------
   Header template: Container "menu" (CSS ID "menu") > Container "menu__inner" >
   Nav Menu "menu__list", Container "menu__foot". */

.e-con.menu {
  --fg: var(--c-ivory);
  --bg: var(--c-noir);
  --muted: color-mix(in srgb, var(--c-ivory) 60%, transparent);
  --line: color-mix(in srgb, var(--c-ivory) 16%, transparent);
  --position: fixed;
  --z-index: 90;
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
  inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--bg);
  color: var(--fg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .9s var(--ease-inout), visibility 0s .9s;
}
.menu-open .e-con.menu {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path .9s var(--ease-inout), visibility 0s;
}

.e-con.menu__inner {
  --justify-content: space-between;
  --row-gap: 2.5rem;
  --min-height: 100%;
  --padding-top: calc(var(--nav-h) + 1.5rem);
  --padding-bottom: 2rem;
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Items are numbered by a counter and rise one after the other. */
.elementor-widget-nav-menu.menu__list .elementor-nav-menu { counter-reset: mx-menu; }
.elementor-widget-nav-menu.menu__list .elementor-nav-menu > li {
  counter-increment: mx-menu;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.menu__list li:nth-child(2) { --i: 1; }
.menu__list li:nth-child(3) { --i: 2; }
.menu__list li:nth-child(4) { --i: 3; }
.menu__list li:nth-child(5) { --i: 4; }
.menu__list li:nth-child(6) { --i: 5; }
.menu__list li:nth-child(7) { --i: 6; }
.menu__list li:nth-child(8) { --i: 7; }

.elementor-widget-nav-menu.menu__list .elementor-nav-menu .elementor-item {
  align-items: baseline;
  gap: 1.25rem;
  padding: clamp(.8rem, 2.2vh, 1.35rem) 0;
  color: inherit;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 10.5vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  white-space: normal;
  transform: translate3d(0, 115%, 0);
  transition: transform .6s var(--ease-out), color .4s var(--ease-out);
}
.menu-open .elementor-widget-nav-menu.menu__list .elementor-nav-menu .elementor-item {
  transform: none;
  transition: transform 1s var(--ease-out) calc(.25s + var(--i, 0) * .07s), color .4s var(--ease-out);
}
.elementor-widget-nav-menu.menu__list .elementor-nav-menu .elementor-item:hover { color: var(--c-champagne); }

.elementor-widget-nav-menu.menu__list .elementor-nav-menu .elementor-item::before {
  content: counter(mx-menu, decimal-leading-zero);
  position: static;
  font-family: var(--f-sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--c-champagne);
  transform: translateY(-1.4em);
}
/* Elementor fades the pseudo-elements of an idle menu item; the number has to stay. */
.menu__list .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::before { opacity: 1; }

.e-con.menu__foot {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.menu-open .e-con.menu__foot { opacity: 1; transition: opacity .9s var(--ease-out) .6s; }

.menu__mail .elementor-heading-title { color: var(--muted); font-size: var(--t-body); line-height: 1.65; }

.e-con.menu__meta {
  --flex-direction: row;
  --flex-wrap: wrap;
  --justify-content: space-between;
  --row-gap: 1rem;
  --column-gap: 2rem;
  --padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* Link lists -----------------------------------------------------------
   Nav Menu widgets used as plain lists: "menu__social", "footer__list", "footer__legal". */

.elementor-widget-nav-menu:is(.menu__social, .footer__list, .footer__legal) .elementor-nav-menu .elementor-item {
  padding: 0;
  color: inherit;
  line-height: 1.4;
  white-space: normal;
  transition: color .4s var(--ease-out);
}
/* Elementor's clearfix would count as one more item, and add one more gap, in a flex or grid list. */
.elementor-widget-nav-menu:is(.nav__links, .menu__social, .footer__list, .footer__legal) .elementor-nav-menu::after { content: none; }
.elementor-widget-nav-menu.menu__social .elementor-nav-menu { gap: 1.5rem; }

/* Footer -------------------------------------------------------------
   Footer template: boxed Container "footer theme-dark" > Container "footer__top"
   (Container "footer__brand" and three Containers "footer__col") and Container
   "footer__bottom". */

.e-con.footer {
  --padding-top: clamp(3.5rem, 7vw, 6rem);
  --padding-bottom: 2rem;
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
  --row-gap: 0px;
  border-top: 1px solid var(--line);
}

.e-con.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem var(--grid-gap);
}
.e-con.footer__brand {
  display: grid;
  grid-column: 1 / span 5;
  gap: 1.5rem;
  align-content: start;
  justify-items: start;
  max-width: 26rem;
}
.e-con.footer__col { --row-gap: 1.25rem; grid-column: span 2; }
.e-con.footer__top > :nth-child(2) { grid-column: 7 / span 2; }

.footer__col .elementor-widget-nav-menu .elementor-nav-menu,
.footer__col .elementor-widget-icon-list .elementor-icon-list-items { display: grid; gap: .6rem; }
.footer__col .elementor-widget-nav-menu .elementor-nav-menu .elementor-item { line-height: 1.65; }
.footer__col .elementor-widget-nav-menu .elementor-nav-menu .elementor-item:hover { color: var(--c-champagne); }

.e-con.footer__bottom {
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: center;
  --justify-content: space-between;
  --row-gap: 1.25rem;
  --column-gap: 2rem;
  --margin-top: clamp(3rem, 6vw, 5rem);
  --padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.elementor-widget-nav-menu.footer__legal .elementor-nav-menu { gap: .75rem 1.75rem; }
.elementor-widget-nav-menu.footer__legal .elementor-nav-menu .elementor-item:hover { color: var(--fg); }

@media (max-width: 1024px) {
  .e-con.footer__brand { grid-column: 1 / -1; }
  .e-con.footer__col, .e-con.footer__top > :nth-child(2) { grid-column: span 4; }
}
@media (max-width: 767px) {
  .e-con.footer__col, .e-con.footer__top > :nth-child(2) { grid-column: span 6; }
}

/* Section header -----------------------------------------------------
   A Container "sec-head grid" with three widgets: Heading "eyebrow sec-head__label",
   Heading "sec-head__title", then a Text Editor or a Button "link" as "sec-head__aside". */

.e-con.sec-head { --margin-bottom: clamp(3rem, 7vw, 6.5rem); row-gap: 1.5rem; align-items: end; }
.sec-head__label { grid-column: 1 / span 2; align-self: start; }
.sec-head__label .elementor-heading-title { padding-top: 1.1em; }
.sec-head__title { grid-column: 3 / span 6; }
.sec-head__aside { grid-column: 10 / -1; padding-bottom: .5em; }
.sec-head__aside--end { justify-self: end; }

@media (max-width: 1024px) {
  .sec-head__label { grid-column: 1 / -1; }
  .sec-head__label .elementor-heading-title { padding-top: 0; }
  .sec-head__title { grid-column: 1 / -1; }
  .sec-head__aside { grid-column: 1 / span 8; padding-bottom: 0; }
  .sec-head__aside--end { justify-self: start; }
  /* Stacked under the title, a link keeps the height of the line of text it stands for. */
  .elementor-widget-button.sec-head__aside { padding-top: .48rem; }
}
@media (max-width: 767px) {
  .sec-head__aside { grid-column: 1 / -1; }
}

/* Stat ---------------------------------------------------------------
   A Container "stat" holding the label (Heading "t-label t-muted") and then the value
   (Heading "stat__value"); the order is flipped on screen. A unit goes in the value
   as <span class="stat__unit">+</span>. */

.e-con.stat {
  --flex-direction: column-reverse;
  --row-gap: .9rem;
  --padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.stat__value .elementor-heading-title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.03em;
}
.stat__unit { margin-left: .06em; font-size: .46em; vertical-align: .9em; letter-spacing: 0; color: var(--c-champagne); }

.stat:nth-child(2) { --mx-delay: .08s; }
.stat:nth-child(3) { --mx-delay: .16s; }
.stat:nth-child(4) { --mx-delay: .24s; }

/* Europe map ---------------------------------------------------------
   An HTML widget: <div class="map" data-map> with the list of cities. network-map.js
   draws the dots and places the cities. */

.map { position: relative; aspect-ratio: 70 / 73; }
/* On mobile every Container wraps, and a wrapping Container measures a widget before it
   stretches it: the map has no width of its own and would collapse to nothing. */
.elementor-widget-html:has(> .map) { width: 100%; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__land { fill: none; stroke: var(--c-ivory); stroke-width: .34; stroke-linecap: round; opacity: .58; }
.map__land--far { opacity: .14; }
.map__link {
  fill: none;
  stroke: var(--c-champagne);
  stroke-width: .11;
  opacity: .75;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s var(--ease-inout) calc(.5s + var(--i) * .09s);
}
.map.is-in .map__link { stroke-dashoffset: 0; }

.map__hubs { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.map.is-ready .map__hubs { display: block; position: absolute; inset: 0; }
.map.is-ready .map__hub { position: absolute; width: 0; height: 0; }

.map__hub::before,
.map__hub::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.map__hub::before { background: var(--c-champagne); }
.map__hub::after {
  border: 1px solid var(--c-champagne);
  animation: mx-pulse 3.6s var(--ease-out) infinite;
  animation-delay: calc(var(--i, 0) * .4s);
}
.map__hub span {
  position: absolute;
  top: -.7em;
  left: .9rem;
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.map__hub[data-label="left"] span { left: auto; right: .9rem; }

.map__hub[data-minor]::before { left: -2px; top: -2px; width: 4px; height: 4px; opacity: .7; }
.map__hub[data-minor]::after { display: none; }
.map.is-ready .map__hub[data-minor] span {
  width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
}

@keyframes mx-pulse {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(4.2); opacity: 0; }
}

@media (max-width: 767px) {
  .map__hub span { font-size: .5625rem; letter-spacing: .16em; }
  .map.is-ready .map__hub[data-wide] span {
    width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  }
}

/* Service row --------------------------------------------------------
   Container "svc-list" > Containers "svc" (attribute data-svc; the first also has
   "is-active"), each with: Heading "svc__no t-label", Container "svc__body" (Heading
   "svc__title", Text Editor "svc__text"), Container "svc__media" > Image "svc__frame media".
   The row is static so that on desktop its image hangs from the list, not from the row. */

.e-con.svc-list { --row-gap: 0px; border-bottom: 1px solid var(--line); }

.e-con.svc {
  --position: static;
  --padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
  --padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--grid-gap);
  border-top: 1px solid var(--line);
}
.svc .svc__no { color: var(--muted); transition: color .5s var(--ease-out); }
.e-con.svc__body { --row-gap: .6rem; }
.svc .svc__title { transition: transform .7s var(--ease-out); }
.svc .svc__text { color: var(--muted); }
/* On the paragraph, because Elementor resets max-width on a widget wrapper. */
.svc .svc__text p { max-width: 46ch; }
.svc.is-active .svc__no { color: var(--c-champagne); }

@media (min-width: 1025px) {
  .e-con.svc { --width: calc((100% - 11 * var(--grid-gap)) / 12 * 7 + 6 * var(--grid-gap)); cursor: default; }
  .svc.is-active .svc__title { transform: translateX(1rem); font-style: italic; }

  .e-con.svc__media {
    --position: absolute;
    --width: calc((100% - 11 * var(--grid-gap)) / 12 * 4 + 3 * var(--grid-gap));
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }
  .svc__media > .svc__frame { position: sticky; top: 16vh; aspect-ratio: 4 / 5; clip-path: inset(100% 0 0 0); }
  .svc.is-prev .svc__media > .svc__frame { z-index: 1; clip-path: inset(0); }
  .svc.is-active .svc__media > .svc__frame { z-index: 2; clip-path: inset(0); transition: clip-path .9s var(--ease-inout); }
  .svc .svc__frame.media img { scale: 1.08; }
  .svc.is-active .svc__frame.media img { scale: 1; }
}

@media (max-width: 1024px) {
  .e-con.svc { grid-template-columns: 2.75rem minmax(0, 1fr) clamp(4.75rem, 17vw, 8.5rem); align-items: center; }
  .svc .svc__no { align-self: start; padding-top: .48rem; color: var(--c-champagne); }
  .svc__media > .svc__frame { aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  .e-con.svc { grid-template-columns: 2rem minmax(0, 1fr) 4.75rem; column-gap: .9rem; }
}

/* Case study card ----------------------------------------------------
   Loop Item "Case card": a Container "case" with the HTML tag "a", linked to the post.
   Inside: Featured Image "case__media media mx-mask", Container "case__head" (brand, then
   Container "case__meta" with sector and markets), Post Title "case__title", Container
   "case__facts" > Containers "case__fact" (Heading "case__fact-label", Heading
   "case__fact-value"). A fact whose fields are empty is not shown. */

.e-con.case { --row-gap: 0px; display: block; }
.case__media { aspect-ratio: 4 / 5; }
.js .case:hover .case__media.media img { scale: 1.035; transition-delay: 0s; }

.e-con.case__head {
  --flex-direction: row;
  --flex-wrap: wrap;
  --justify-content: space-between;
  --row-gap: .5rem;
  --column-gap: 1.5rem;
  --margin-top: 1.5rem;
  --margin-bottom: .75rem;
}
.e-con.case__head > .elementor-element { --width: auto; width: auto; }
.e-con.case__meta { display: block; }
.case__meta > .elementor-widget,
.case__meta .elementor-heading-title { display: inline; }

.case__title .elementor-heading-title {
  display: inline;
  padding-bottom: .08em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .8s var(--ease-out);
}
.case:hover .case__title .elementor-heading-title { background-size: 100% 1px; }

.e-con.case__facts {
  --flex-direction: row;
  --row-gap: 0px;
  --column-gap: clamp(1.5rem, 3vw, 3rem);
  --margin-top: 1.5rem;
  --padding-top: 1.25rem;
  flex-wrap: nowrap;
  border-top: 1px solid var(--line);
}
.e-con.case__fact { --flex-direction: column-reverse; --row-gap: .35rem; --width: auto; }
.e-con.case__fact:not(:has(.elementor-heading-title)) { display: none; }
.case__fact-label .elementor-heading-title {
  color: var(--muted);
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .22em;
  text-transform: uppercase;
}
/* Low optical size keeps the Bodoni hairlines legible at this small size. */
.case__fact-value .elementor-heading-title {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 11;
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  line-height: 1.15;
}

/* Event card and rail ------------------------------------------------
   The rail is a Loop Grid with the class "rail" and the attributes data-rail, tabindex,
   role and aria-label: the widget scrolls, its loop container is the track.
   Loop Item "Event card": a Container "event mx-reveal" with the HTML tag "a". Inside:
   Featured Image "event__media media", Container "event__top t-label" (city, date),
   Container "event__body" (Heading "t-label t-accent", Post Title).
   Under the rail, a Container "rail__foot": HTML "rail__bar", HTML "rail__arrows", a link. */

.rail {
  --rail-pad: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.elementor-widget-loop-grid.rail .elementor-loop-container {
  display: flex;
  gap: var(--grid-gap);
  width: max-content;
  padding-inline: var(--rail-pad);
}
.rail .e-loop-item { flex: none; width: clamp(16.5rem, 27vw, 25rem); scroll-snap-align: start; }
.rail .e-loop-item:nth-of-type(even) { margin-top: clamp(2rem, 4vw, 4rem); }
.rail .e-loop-item:nth-of-type(2) .mx-reveal { --mx-delay: .08s; }
.rail .e-loop-item:nth-of-type(3) .mx-reveal { --mx-delay: .16s; }
.rail .e-loop-item:nth-of-type(4) .mx-reveal { --mx-delay: .24s; }
.rail .e-loop-item:nth-of-type(5) .mx-reveal { --mx-delay: .32s; }
.rail .e-loop-item:nth-of-type(6) .mx-reveal { --mx-delay: .4s; }

.e-con.event { --row-gap: 0px; display: block; color: var(--c-ivory); }
.event__media { aspect-ratio: 8 / 11; }
.event__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, .5) 0%, rgba(11, 11, 12, 0) 28%, rgba(11, 11, 12, 0) 46%, rgba(11, 11, 12, .9) 100%);
}
.event:hover .event__media.media img { scale: 1.04; }
.e-con.event__top {
  --position: absolute;
  --flex-direction: row;
  --justify-content: space-between;
  --column-gap: 1rem;
  --padding-top: 1.25rem;
  --padding-left: 1.25rem;
  --padding-right: 1.25rem;
  inset: 0 0 auto 0;
  flex-wrap: nowrap;
}
.e-con.event__body {
  --position: absolute;
  --row-gap: .6rem;
  --padding-left: 1.25rem;
  --padding-right: 1.25rem;
  --padding-bottom: 1.5rem;
  inset: auto 0 0 0;
}

.e-con.rail__foot {
  --flex-direction: row;
  --align-items: center;
  --row-gap: 1rem;
  --column-gap: clamp(1.25rem, 3vw, 3rem);
  --margin-top: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: nowrap;
}
.rail__foot > .rail__bar { flex: 1; }
.rail__progress { position: relative; height: 1px; background: var(--line); }
.rail__progress i { position: absolute; inset: 0; background: var(--c-champagne); transform: scaleX(.2); transform-origin: left; transition: transform .3s linear; }
.rail__nav { display: flex; gap: .5rem; }
.rail__nav .rail__btn,
.rail__nav .rail__btn:focus {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: inherit;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out), opacity .4s var(--ease-out);
}
.rail__btn svg { width: 1.1rem; height: 1.1rem; }
.rail__btn[data-rail-prev] svg { transform: scaleX(-1); }
.rail__nav .rail__btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rail__nav .rail__btn:disabled { opacity: .3; pointer-events: none; }

@media (max-width: 767px) {
  .rail .e-loop-item { width: 74vw; }
}

/* Principle ----------------------------------------------------------
   A Container "principle mx-reveal": Heading "t-label t-accent" (the numeral), Heading
   (the word, in italics), Text Editor "t-muted". */

.e-con.principle {
  --padding-top: 1.75rem;
  display: grid;
  gap: .9rem;
  align-content: start;
  border-top: 1px solid var(--line);
}
.principle .elementor-widget-text-editor p { max-width: 34ch; }
.principle:nth-child(2) { --mx-delay: .1s; }
.principle:nth-child(3) { --mx-delay: .2s; }

/* Person card --------------------------------------------------------
   A Container "person": Image "person__media media mx-mask", Heading "person__context
   t-label", Heading (the name). Used for creators and for the team. */

.e-con.person { --row-gap: 0px; }
.person__media { aspect-ratio: 4 / 5; }
.person .person__context { padding: 1.5rem 0 .75rem; }

/* Backdrop: hero and page header with an image ------------------------
   A full-width Container "hero" (or "page-header page-header--media") holding a Container
   "hero__media" (or "page-header__media") of Image widgets "hero__panel", then the
   content Container with the class "wrap". Film grain first, then the gradient that
   carries the type; the grain uses Elementor's own overlay layer. */

.e-con.hero,
.e-con.page-header--media {
  --justify-content: flex-end;
  --overflow: hidden;
  --row-gap: 0px;
  --background-overlay: "";
  --overlay-mix-blend-mode: overlay;
  --overlay-opacity: .1;
  isolation: isolate;
}
.e-con.hero { --min-height: 100svh; }

.e-con.hero::before,
.e-con.page-header--media::before {
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.e-con.hero::after,
.e-con.page-header--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(11, 11, 12, .62) 0%,
    rgba(11, 11, 12, .12) 24%,
    rgba(11, 11, 12, .42) 48%,
    rgba(11, 11, 12, .84) 76%,
    rgba(11, 11, 12, .96) 100%);
  pointer-events: none;
}

.e-con.hero__media,
.e-con.page-header__media {
  --position: absolute;
  --z-index: -2;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
.e-con.page-header__media { grid-template-columns: minmax(0, 1fr); }

.hero__panel { overflow: hidden; background: var(--c-anthracite); }
.hero__panel:nth-child(2) { --i: 1; }
.hero__panel:nth-child(3) { --i: 2; }
.js .hero__panel {
  clip-path: inset(100% 0 0 0);
  animation: mx-panel 1.5s var(--ease-inout) calc(.1s + var(--i, 0) * .14s) forwards;
}
.elementor-element.hero__panel img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: var(--mx-photo-filter) brightness(.86);
  animation: mx-drift 28s ease-in-out infinite alternate;
}
.elementor-element.hero__panel:nth-child(2) img { animation-direction: alternate-reverse; }

@keyframes mx-panel { to { clip-path: inset(0); } }
@keyframes mx-drift { from { transform: scale(1.03); } to { transform: scale(1.13); } }

/* Hero ---------------------------------------------------------------
   Content Container "hero__content wrap": Heading "eyebrow hero__label", Heading
   "hero__title mx-lines", Container "hero__foot" (Text Editor "hero__sub", Container
   "hero__actions", Button "hero__scroll t-label"). */

.e-con.hero__content {
  --row-gap: 0px;
  --padding-top: calc(var(--nav-h) + 3rem);
  --padding-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.hero__label { --mx-delay: .5s; padding-bottom: clamp(1.25rem, 2.2vw, 2rem); }
.hero__title { --mx-delay: .55s; }
.hero__title .elementor-heading-title { max-width: 10.6em; }

.e-con.hero__foot {
  --margin-top: clamp(1.75rem, 3.4vw, 3rem);
  --padding-top: clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 31rem) auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.hero__sub { --mx-delay: .9s; color: color-mix(in srgb, var(--c-ivory) 84%, transparent); }
.e-con.hero__actions {
  --mx-delay: 1s;
  --flex-direction: row;
  --align-items: center;
  --row-gap: 1rem;
  --column-gap: 2rem;
  flex-wrap: nowrap;
}
.hero__scroll { --mx-delay: 1.1s; justify-self: end; }
/* Elementor lets a widget shrink to nothing; the cue has to keep its column on a narrow desktop. */
.hero__foot > .hero__scroll { min-width: max-content; }

/* The "Scroll" cue: a Button widget whose line is drawn here. */
.elementor-widget-button.hero__scroll .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  overflow: visible;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: .28em;
}
.elementor-widget-button.hero__scroll .elementor-button:hover,
.elementor-widget-button.hero__scroll .elementor-button:focus-visible { color: inherit; }
.elementor-widget-button.hero__scroll .elementor-button::before { content: none; }
.elementor-widget-button.hero__scroll .elementor-button::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: linear-gradient(var(--c-ivory), var(--c-ivory)) no-repeat 0 -3rem / 100% 100% var(--line);
  animation: mx-scroll 2.6s var(--ease-inout) infinite;
}
@keyframes mx-scroll {
  0% { background-position: 0 -3rem; }
  60%, 100% { background-position: 0 3rem; }
}

@media (max-width: 1024px) {
  .e-con.hero__foot { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 767px) {
  /* One panel at a time, cross-fading. */
  .e-con.hero__media { display: block; }
  .hero .hero__panel,
  .js .hero .hero__panel {
    position: absolute;
    inset: 0;
    clip-path: none;
    opacity: 0;
    animation: mx-fade 18s linear infinite;
    animation-delay: calc(var(--i, 0) * 6s - 1.2s);
  }
  .e-con.hero__foot { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* On the narrowest phones the link drops under the button instead of being squeezed. */
  .e-con.hero__actions { --justify-content: space-between; --column-gap: 1rem; flex-wrap: wrap; }
}

@keyframes mx-fade {
  0% { opacity: 0; }
  6%, 33% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero .hero__panel:first-child, .js .hero .hero__panel:first-child { opacity: 1; animation: none; }
}

/* Page header --------------------------------------------------------
   Light: a boxed Container "section page-header grid theme-light" with Heading "eyebrow
   page-header__label", Heading "page-header__title mx-lines", Text Editor "page-header__intro".
   Dark with an image: a full-width Container "section section--bleed page-header
   page-header--media theme-dark" with the backdrop above and the same three widgets in a
   Container "page-header__content wrap grid". The fixed bar sits over the top padding. */

.e-con.page-header {
  --padding-top: calc(var(--nav-h) + var(--section));
  --padding-bottom: clamp(4rem, 8vw, 7rem);
}
.page-header__label { grid-column: 1 / span 2; align-self: start; }
.page-header__label .elementor-heading-title { padding-top: 1.9em; }
.page-header__title { grid-column: 3 / -1; }
.page-header__intro { grid-column: 3 / span 5; padding-top: clamp(2rem, 4vw, 3.5rem); }

.e-con.page-header--media { --min-height: min(88svh, 60rem); --padding-top: 0px; }
.e-con.page-header__content { --padding-top: calc(var(--nav-h) + 3rem); }

@media (max-width: 1024px) {
  .page-header__label { grid-column: 1 / -1; padding-bottom: 1.5rem; }
  .page-header__label .elementor-heading-title { padding-top: 0; }
  .page-header__title, .page-header__intro { grid-column: 1 / -1; }
}

/* Closing call to action ---------------------------------------------
   A boxed Container "section cta theme-dark": Heading "eyebrow", Heading "cta__title
   mx-lines", Container "cta__foot" (Button, Text Editor with a link "cta__mail").
   The monogram behind is the same mask as the logo. */

.e-con.cta {
  --padding-top: clamp(7rem, 16vw, 14rem);
  --padding-bottom: clamp(7rem, 16vw, 14rem);
  --overflow: hidden;
  --row-gap: 0px;
}
.e-con.cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5vw;
  width: min(62vw, 62rem);
  max-width: 100%;
  aspect-ratio: 246 / 182;
  background: var(--c-anthracite);
  opacity: .6;
  transform: translateY(-50%);
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
  pointer-events: none;
}
.cta > .e-con-inner { position: relative; z-index: 1; }
.cta__title { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cta__title .elementor-heading-title { max-width: 11.6em; }
.e-con.cta__foot {
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: center;
  --row-gap: 1.5rem;
  --column-gap: 2.5rem;
  --margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.cta__mail {
  padding-bottom: .2em;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.cta__mail:hover { border-color: var(--c-champagne); color: var(--c-champagne); }

@media (max-width: 767px) {
  .e-con.cta::after { right: -30vw; width: 120vw; opacity: .45; }
}

/* Inside the Elementor editor ----------------------------------------
   No script runs there: the bar scrolls with the page on a solid ground, and the
   menu lies open below it while the header template is the one being edited.
   The map shows its links, and a service row shows its image when pointed at. */

.elementor-editor-active .map__link { stroke-dashoffset: 0; }
.elementor-editor-active .svc:hover .svc__media > .svc__frame { z-index: 3; clip-path: inset(0); }


.elementor-editor-active .e-con.nav { --position: absolute; background-color: var(--c-noir); }
.elementor-editor-active .elementor-edit-area-active .e-con.menu {
  --position: relative;
  inset: auto;
  clip-path: none;
  visibility: visible;
}
.elementor-editor-active .elementor-edit-area-active .elementor-widget-nav-menu.menu__list .elementor-nav-menu .elementor-item { transform: none; }
.elementor-editor-active .elementor-edit-area-active .e-con.menu__foot { opacity: 1; }