.elementor-kit-9{--e-global-color-primary:#EC011F;--e-global-color-secondary:#FFA5FF;--e-global-color-text:#1523E2;--e-global-color-accent:#EEE4DF;--e-global-color-f5c9479:#FFD80B;--e-global-color-8f44278:#00EFBB;--e-global-color-32541dd:#FFFFFF;--e-global-color-64631b4:#FF7A3D;--e-global-color-9827a5c:#101044;--e-global-typography-primary-font-family:"tt-commons-pro";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"tt-commons-pro";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"tt-commons-pro";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"tt-commons-pro";--e-global-typography-accent-font-weight:500;--e-global-typography-4f75f2b-font-family:"tt-commons-pro";--e-global-typography-4f75f2b-font-size:33px;--e-global-typography-4f75f2b-font-weight:600;--e-global-typography-5c551cb-font-family:"Instrument Serif";--e-global-typography-5c551cb-font-style:italic;font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:var( --e-global-color-32541dd );font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 h1{font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 h2{font-family:"tt-commons-pro", Sans-serif;font-size:33px;font-weight:600;}.elementor-kit-9 h3{font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 h4{font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 h5{font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 h6{font-family:"tt-commons-pro", Sans-serif;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-family:"Outfit", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════
   STUDIOELEVEN SITE CSS  (tidied 21 Sep 2026)
   1 Site-wide · 2 Service rows · 3 What we do rows · 4 See more links
   5 Header · 6 Menu popup · 7 Approach cards · 8 Stacking cards
   ═══════════════════════════════════════════════════════════════ */


/* ══ 1. SITE-WIDE ══════════════════════════════════════════════ */

.qodef-back-to-top { display: none !important; }


/* ══ 2. SERVICE ROWS (homepage, and the base for What we do) ═══ */

.s11-service-row {
  position: relative;
  overflow: visible !important;
}

/* the big service word */
.s11-service-word {
  font-family: 'tt-commons-pro', sans-serif !important;
  font-size: clamp(72px, 11vw, 150px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  transition: color 0.3s ease !important;
}
.s11-service-row a.s11-service-word:hover { color: #ffffff !important; }

/* arrow tile */
.s11-arrow-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: transparent;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.s11-arrow-box svg {
  width: 60px;
  height: 60px;
  color: #ffffff;
  transition: color 0.3s ease, transform 0.3s ease;
}
.s11-service-row:hover .s11-arrow-box,
.s11-service-row.is-active .s11-arrow-box { background: #ec011f; }
.s11-service-row:hover .s11-arrow-box svg,
.s11-service-row.is-active .s11-arrow-box svg {
  color: #ffffff;
  transform: rotate(-45deg);
}

/* hover / scroll image */
.s11-service-images {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#s11-activate .s11-service-images { right: -20px; }   /* the Growth word is longer, so push the image right */
.s11-service-row:hover .s11-service-images,
.s11-service-row.is-active .s11-service-images {
  opacity: 1;
  transform: translateY(-50%) translateY(0px);
  pointer-events: all;
}
.s11-service-images img {
  width: 420px;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* description and pills: hidden until hover or scroll */
.s11-service-row .elementor-widget-text-editor {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.s11-service-row .elementor-widget-button .elementor-button {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.s11-service-row .elementor-widget-button:nth-child(1) .elementor-button { transition-delay: 0ms; }
.s11-service-row .elementor-widget-button:nth-child(2) .elementor-button { transition-delay: 50ms; }
.s11-service-row .elementor-widget-button:nth-child(3) .elementor-button { transition-delay: 100ms; }
.s11-service-row .elementor-widget-button:nth-child(4) .elementor-button { transition-delay: 150ms; }
.s11-service-row .elementor-widget-button:nth-child(5) .elementor-button { transition-delay: 200ms; }
.s11-service-row .elementor-widget-button:nth-child(6) .elementor-button { transition-delay: 250ms; }
.s11-service-row .elementor-widget-button:nth-child(7) .elementor-button { transition-delay: 300ms; }

/* show on hover OR when scrolled into view */
.s11-service-row:hover .elementor-widget-text-editor,
.s11-service-row.is-active .elementor-widget-text-editor {
  opacity: 1;
  transform: translateY(0);
}
.s11-service-row:hover .elementor-widget-button .elementor-button,
.s11-service-row.is-active .elementor-widget-button .elementor-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* mobile */
@media (max-width: 768px) {
  .s11-service-images { display: none !important; }

  .s11-service-row .s11-service-word {
    font-size: clamp(34px, 12.5vw, 64px) !important;
    gap: 8px !important;
  }
  .s11-service-row .s11-arrow-box { width: 32px; height: 32px; }
  .s11-service-row .s11-arrow-box svg { width: 24px; height: 24px; }

  /* description always visible; pills wait for a tap or scroll */
  .s11-service-row .elementor-widget-text-editor {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .s11-service-row .elementor-widget-button .elementor-button {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
  }
  .s11-service-row.is-tapped .elementor-widget-button .elementor-button,
  .s11-service-row.is-active .elementor-widget-button .elementor-button {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
  }
}


/* ══ 3. WHAT WE DO PAGE: detail open from the start ════════════
   Applies only inside a container with the class "se-rows-open"
   (Advanced tab → CSS Classes on the Services container) */

.se-rows-open .s11-service-images {
  opacity: 1 !important;
  transform: translateY(-50%) !important;
  pointer-events: all !important;
}
.se-rows-open .s11-service-row .elementor-widget-text-editor {
  opacity: 1 !important;
  transform: none !important;
}
.se-rows-open .s11-service-row .elementor-widget-button .elementor-button {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: all !important;
}

/* tablets: smaller image so it doesn't crowd the text */
@media (max-width: 1100px) and (min-width: 769px) {
  .se-rows-open .s11-service-images img { width: 300px; height: 200px; }
}

/* mobile: keep the small headings on the left like the text below them */
@media (max-width: 768px) {
  .se-rows-open .elementor-widget-heading .elementor-heading-title { text-align: left !important; }
}

/* Optional: arrow tile filled from the start (uncomment: Tangelo with a Fiordland arrow)
.se-rows-open .s11-arrow-box { background: #FF7A3D; }
.se-rows-open .s11-arrow-box svg { color: #011E63; }
*/


/* ══ 4. "SEE MORE" LINK ON EACH ROW ════════════════════════════
   (Base styles moved in from the Brand HTML widget's <style> block) */

.s11-row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.s11-row-head .s11-service-word { flex: 0 1 auto; }

.s11-see-more {
  margin-left: auto;
  flex-shrink: 0;
  font-family: 'tt-commons-pro', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: calc(clamp(72px, 11vw, 150px) * 0.17);   /* lifts it to the baseline of the big word */
}
.s11-see-more:hover {
  color: #FF7A3D;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* hover colour matches each service's tag colour */
#s11-brand .s11-see-more:hover    { color: #FF7A3D; }
#s11-digital .s11-see-more:hover  { color: #FFD84D; }
#s11-design .s11-see-more:hover   { color: #FDA9FC; }
#s11-activate .s11-see-more:hover { color: #4BEABC; }

/* mobile: "see more" sits under the word, lined up with the letters */
@media (max-width: 768px) {
  .s11-service-row .s11-row-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .s11-service-row .s11-see-more {
    margin-left: 0;
    padding-bottom: 0;
    padding-left: 40px;   /* arrow tile 32px + gap 8px */
    font-size: 15px;
  }
}


/* ══ 5. HEADER: layout, sticky, frosted pill on scroll, blink ══ */

.se-hdr, .se-hdr *, .se-hdr *::before, .se-hdr *::after { box-sizing: border-box; }

.se-hdr {
  --h-ink: #FFFFFF;
  --h-hover: #FFFFFF;
  --h-glass: rgba(10, 10, 20, .10);          /* frosted pill tint. Raise .10 for more solid */
  --h-glass-edge: rgba(255, 255, 255, .45);  /* light edge that sells the glass */
  --h-blur: 22px;
  --h-logo: clamp(104px, 11vw, 168px);
  --h-eye: clamp(56px, 6vw, 92px);
  position: relative;
  z-index: 50;
  width: 100%;
  font-family: 'tt-commons-pro', sans-serif;
}
.se-hdr--red {
  --h-ink: #EC011F;
  --h-hover: #011E63;
  --h-glass: rgba(255, 255, 255, .55);       /* light frost for the red header */
  --h-glass-edge: rgba(255, 255, 255, .80);
}

.se-hdr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: auto;
  max-width: 100%;
  padding: clamp(16px, 2.5vw, 36px) clamp(20px, 4vw, 56px);
  border: 1px solid transparent;             /* reserved so nothing shifts when the pill appears */
  transition: margin .3s ease, padding .3s ease, background-color .3s ease, border-color .3s ease,
              box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
.se-hdr a, .se-hdr a:hover, .se-hdr a:focus { text-decoration: none !important; box-shadow: none; }

/* logo far left, menu far right: the widget fills its container.
   Headers are covered automatically. In the menu popup, add the class se-hdr-widget to the HTML widget */
.elementor-location-header .elementor-widget-html,
.se-hdr-widget {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}
.elementor-location-header .elementor-widget-html > .elementor-widget-container,
.se-hdr-widget > .elementor-widget-container { width: 100%; }

/* logo */
.se-hdr__logo { display: block; flex: none; width: var(--h-logo); transition: transform .3s ease, width .3s ease; }
.se-hdr__logo img { display: block; width: 100%; height: auto; }
.se-hdr__logo:hover, .se-hdr__logo:focus-visible { transform: scale(1.05); }

/* menu / close button */
.se-hdr__btn { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--h-ink) !important; }
.se-hdr__btn--close { display: none; }
.se-hdr--close .se-hdr__btn--menu { display: none; }
.se-hdr--close .se-hdr__btn--close { display: inline-flex; }

/* eyes: idle blink, plus a smooth hover blink (open eye squashes shut, closed eye takes over) */
.se-hdr__eyes {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--h-eye);
  transform-origin: 50% 58%;
  transition: width .3s ease;
}
.se-hdr__btn--menu .se-hdr__eyes { animation: se-blink 5s infinite; }   /* on the wrapper, so it never fights the hover blink */
.se-hdr__btn--menu:hover .se-hdr__eyes,
.se-hdr__btn--menu:focus-visible .se-hdr__eyes { animation: none; }
@keyframes se-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  92.5% { transform: scaleY(.08); }
}

.se-hdr__eye { display: block; width: 100%; height: auto; }

/* open eye: closes quickly, opens slowly */
.se-hdr__eye:not(.se-hdr__eye--alt) {
  transform-origin: 50% 58%;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .04s linear;
}
.se-hdr__btn--menu:hover .se-hdr__eye:not(.se-hdr__eye--alt),
.se-hdr__btn--menu:focus-visible .se-hdr__eye:not(.se-hdr__eye--alt) {
  transform: scaleY(.08);
  opacity: 0;
  transition: transform .13s cubic-bezier(.55, 0, .9, .5), opacity .03s linear .1s;
}

/* closed eye: appears just as the open eye is shut */
.se-hdr__eye--alt {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .05s linear;
}
.se-hdr__btn--menu:hover .se-hdr__eye--alt,
.se-hdr__btn--menu:focus-visible .se-hdr__eye--alt {
  opacity: 1;
  transition: opacity .04s linear .1s;
}

/* "menu" / "close" label */
.se-hdr__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;                           /* 500 = lighter, 700 = bolder */
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1;
  letter-spacing: .01em;
  transition: color .2s ease;
}
.se-hdr--white .se-hdr__label { text-shadow: 0 1px 3px rgba(0, 0, 0, .22); }   /* helps the label over light sections */
.se-hdr__label svg { width: .75em; height: .75em; flex: none; transition: transform .25s ease; }
.se-hdr__btn:hover .se-hdr__label,
.se-hdr__btn:focus-visible .se-hdr__label { color: var(--h-hover); }
.se-hdr__btn:hover .se-hdr__label svg { transform: translateX(-3px); }
.se-hdr a:focus-visible { outline: 3px solid var(--h-hover); outline-offset: 6px; border-radius: 8px; }

/* sticky: stays at the top, content scrolls underneath (applies to EVERY header template) */
.elementor-location-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 999;
  transition: transform .35s ease;
}
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
html.se-hdr-hidden .elementor-location-header { transform: translateY(-140%); }   /* only used if a header has se-hdr--autohide */
html { scroll-padding-top: 110px; }   /* anchor links (like #brief) don't land under the header */

/* after scrolling (desktop AND mobile): shrink into a frosted glass pill */
html.se-scrolled .se-hdr--menu { --h-logo: clamp(64px, 6vw, 92px); --h-eye: clamp(38px, 3.8vw, 54px); }
html.se-scrolled .se-hdr--menu .se-hdr__bar {
  margin: 10px clamp(10px, 2vw, 24px);
  padding: 12px 18px 12px 30px;
  background: var(--h-glass);
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(170%);
  backdrop-filter: blur(var(--h-blur)) saturate(170%);
  border-color: var(--h-glass-edge);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* mobile: smaller at the top; the pill still appears on first scroll */
@media (max-width: 768px) {
  .se-hdr { --h-logo: 96px; --h-eye: 50px; }
  .se-hdr__bar { padding: 14px 16px; }
  .se-hdr__label { font-size: 15px; }
}

/* browsers that can't blur get a nearly solid pill, so the text stays readable */
@supports not (backdrop-filter: blur(1px)) {
  .se-hdr { --h-glass: rgba(10, 10, 20, .82); }
  .se-hdr--red { --h-glass: rgba(255, 255, 255, .92); }
}

@media (prefers-reduced-motion: reduce) {
  .se-hdr *, .elementor-location-header { animation: none !important; transition: none !important; }
}


/* ══ 6. MENU POPUP ═════════════════════════════════════════════ */

/* close button: an invisible copy of the open eye keeps the box the same size (nothing jumps),
   and it opens on hover, the reverse of the header blink */
.se-hdr__btn--close .se-hdr__eye--spacer {
  visibility: visible;
  opacity: 0;
  transform: scaleY(.08);
  transform-origin: 50% 58%;
  transition: transform .13s cubic-bezier(.55, 0, .9, .5), opacity .03s linear .1s;
}
.se-hdr__btn--close .se-hdr__eye--alt {
  opacity: 1;
  transition: opacity .04s linear .12s;
}
.se-hdr__btn--close:hover .se-hdr__eye--spacer,
.se-hdr__btn--close:focus-visible .se-hdr__eye--spacer {
  opacity: 1;
  transform: scaleY(1);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1) .03s, opacity .03s linear;
}
.se-hdr__btn--close:hover .se-hdr__eye--alt,
.se-hdr__btn--close:focus-visible .se-hdr__eye--alt {
  opacity: 0;
  transition: opacity .04s linear;
}

/* no focus box on the logo when the popup opens */
.elementor-popup-modal .se-hdr__logo:focus,
.elementor-popup-modal .se-hdr__logo:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* the menu fits on screen, no inner scrolling */
.se-menu {
  max-height: none !important;
  overflow: visible !important;
}
.se-menu .se-menu__link {
  font-size: clamp(34px, min(8.5vw, 8.6vh), 104px) !important;
}
@media (max-height: 620px) {   /* short screens: smaller words, no small labels */
  .se-menu .se-menu__link { font-size: clamp(28px, 7vh, 64px) !important; }
  .se-menu .se-menu__note { display: none; }
}

/* the floating top bar never blocks taps on the menu underneath */
.se-popup-top,
.se-popup-top .e-con,
.se-popup-top .elementor-widget-html,
.se-popup-top .se-hdr,
.se-popup-top .se-hdr__bar { pointer-events: none !important; }
.se-popup-top a,
.se-popup-top button { pointer-events: auto !important; }
.elementor-popup-modal .se-menu { position: relative; z-index: 5; }


/* ══ 7. APPROACH CARDS ═════════════════════════════════════════ */

.s11-approach-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.s11-approach-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.s11-approach-card:nth-child(1) { transition-delay: 0ms; }
.s11-approach-card:nth-child(2) { transition-delay: 150ms; }
.s11-approach-card:nth-child(3) { transition-delay: 300ms; }
.s11-approach-card:nth-child(4) { transition-delay: 450ms; }

/* hover: lift */
.s11-approach-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* arrow spin on card hover */
.s11-approach-card:hover svg { animation: arrowSpin 0.5s ease forwards; }
@keyframes arrowSpin {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(-45deg); }
}

/* the Support card (light background, dark text) */
.s11-approach-card.s11-support { color: #080844 !important; }
.s11-support h3,
.s11-support p,
.s11-support .elementor-heading-title { color: #080844 !important; }
.s11-support svg path { stroke: #080844 !important; }
.s11-support .elementor-widget-container span { background: rgba(8, 8, 68, 0.15) !important; }


/* ══ 8. STACKING CARDS ═════════════════════════════════════════
   CHECK: are these still used? The colours are the OLD ones, not the palette.
   Palette equivalents: #080844 → #011E63 · #3d18f1 → #1523E2 · #f20944 → #EC011F · #ff9de2 → #FDA9FC */

.s11-stack-wrap {
  position: relative;
  padding-bottom: 80px;
}
.s11-stack-card {
  position: sticky;
  border-radius: 20px;
  margin-bottom: 16px;
  overflow: hidden;
}
#s11-card-1 { top: 80px;  z-index: 1; background: #080844; }
#s11-card-2 { top: 96px;  z-index: 2; background: #3d18f1; }
#s11-card-3 { top: 112px; z-index: 3; background: #f20944; }
#s11-card-4 { top: 128px; z-index: 4; background: #ff9de2; }

.s11-card-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  min-height: 280px;
}
.s11-card-number {
  font-family: 'tt-commons-pro', sans-serif;
  font-size: clamp(80px, 10vw, 140px);
  font-weight: 800;
  line-height: 1;
  opacity: 0.2;
  flex-shrink: 0;
  color: #ffffff;
}
#s11-card-4 .s11-card-number { color: #080844; }

.s11-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 12px;
}
.s11-card-title {
  font-family: 'tt-commons-pro', sans-serif !important;
  font-size: clamp(48px, 6vw, 90px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 0 0 20px 0 !important;
  color: #ffffff !important;
}
#s11-card-4 .s11-card-title { color: #080844 !important; }

.s11-card-desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0;
}
#s11-card-4 .s11-card-desc { color: rgba(8, 8, 68, 0.7); }

@media (max-width: 768px) {
  .s11-card-inner {
    flex-direction: column;
    padding: 40px 32px;
    gap: 16px;
    min-height: unset;
  }
  .s11-card-number { font-size: 60px; }
  #s11-card-1 { top: 60px; }
  #s11-card-2 { top: 68px; }
  #s11-card-3 { top: 76px; }
  #s11-card-4 { top: 84px; }
}
/* menu popup: locked to the visible screen, no scrolling (iPhone Safari included) */
#elementor-popup-modal-18195,
#elementor-popup-modal-18195 .dialog-widget-content,
#elementor-popup-modal-18195 .dialog-message {
  height: 100vh !important;   /* fallback for older browsers */
  height: 100dvh !important;  /* the visible screen on modern phones */
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
#elementor-popup-modal-18195 .dialog-message { touch-action: none; }
/* ── Auto header: starts white, crossfades to red once scrolled (case study pages) ── */
.se-hdr--auto .se-hdr__color-white,
.se-hdr--auto .se-hdr__color-red {
  transition: opacity 0.3s ease;
}
html.se-scrolled .se-hdr--auto .se-hdr__color-white { opacity: 0; }
html.se-scrolled .se-hdr--auto .se-hdr__color-red   { opacity: 1; }

html.se-scrolled .se-hdr--auto {
  --h-ink: #EC011F;
  --h-hover: #011E63;
  --h-glass: rgba(255, 255, 255, .55);
  --h-glass-edge: rgba(255, 255, 255, .80);
}
/* tablet: move the service row image down, out from behind the word */
@media (max-width: 1100px) and (min-width: 769px) {
    
  .se-rows-open .s11-service-images {
    position: static;
    transform: none !important;
    display: block;
    margin: 20px 0 24px;
    right: auto;
    top: auto;
  }
  .se-rows-open .s11-service-images img {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 3/2;
  }
}
/* pill ring drawn inside the pill so it can't be clipped */
.se-menu__pill:focus-visible,
.se-menu__pill.is-active {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}
.se-menu__sub-inner {
  padding: 10px 14px 14px 14px;
}
/* work page: "all" on its own line, four services on the line below (mobile) */
@media (max-width: 768px) {
  .s11-work-filters {
    display: grid !important;
    grid-template-columns: repeat(4, auto) !important;
    justify-content: center !important;
    gap: 10px 8px !important;
  }
  .s11-work-filters > :first-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
  .s11-work-filters .s11-work-filter {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
}
/* ===== approach page: moving four steps ===== */

/* gentle float, each card slightly out of time */
@keyframes s11-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}
.s11-steps .s11-step {
  animation: s11-bob 4.8s ease-in-out infinite;
  transition: scale .45s cubic-bezier(.34,1.56,.64,1),
              box-shadow .45s ease;
}
.s11-steps .s11-step:nth-child(2) { animation-delay: -1.2s; }
.s11-steps .s11-step:nth-child(3) { animation-delay: -2.4s; }
.s11-steps .s11-step:nth-child(4) { animation-delay: -3.6s; }

/* hover: lift and shadow */
.s11-steps .s11-step:hover {
  scale: 1.04;
  box-shadow: 0 30px 60px rgba(26,26,66,.28);
  z-index: 2;
}

/* hover: number spins */
@keyframes s11-num-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
.s11-steps .s11-step:hover .s11-step__num {
  animation: s11-num-spin .6s ease;
}

/* "where you come in" line: always visible, white dotted line above */
.s11-step__more {
  border-top: 3px dotted #FFFFFF;
  padding-top: 14px;
  margin-top: 18px;
  font-weight: 700;
}

/* hover: highlighter sweep on "Where you come in:" */
.s11-step__more strong {
  font-weight: 900;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: 6px;
  background-image: linear-gradient(#1423e2, #1423e2);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s ease, color .3s ease;
}
.s11-steps .s11-step:hover .s11-step__more strong {
  background-size: 100% 100%;
  color: #FFFFFF;
}

/* switch movement off for anyone who has reduced motion turned on */
@media (prefers-reduced-motion: reduce) {
  .s11-steps .s11-step { animation: none; }
  .s11-steps .s11-step:hover .s11-step__num { animation: none; }
}
/* ===== approach page: working with us columns ===== */
.s11-point {
  border-top: 0 !important;
  padding-top: 28px;
  background-image: radial-gradient(circle, #FDA9FC 2px, transparent 2.5px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 0 0;
}
@keyframes s11-dots-march {
  to { background-position: 12px 0; }
}
.s11-point:hover {
  animation: s11-dots-march .8s linear infinite;
}
.s11-point .elementor-heading-title {
  transition: translate .35s cubic-bezier(.34,1.56,.64,1);
}
.s11-point:hover .elementor-heading-title {
  translate: 8px 0;
}

@media (prefers-reduced-motion: reduce) {
  .s11-point:hover { animation: none; }
}
/* red dot version of s11-point */
.s11-point.s11-point--red {
  background-image: radial-gradient(circle, #D33131 2px, transparent 2.5px);
}
/* ===== about page: logo marquee ===== */
.s11-marquee {
  overflow: hidden;
  width: 100%;

}
.s11-marquee__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: max-content !important;
  animation: s11-marquee 35s linear infinite;
}
.s11-marquee__track > * {
  flex: 0 0 auto !important;
  width: 200px !important;
  margin-right: 40px !important;
}
.s11-marquee__track img {
  display: block;
  width: 200px !important;
  height: auto !important;
  aspect-ratio: 388 / 254;
  object-fit: contain;
}

/* second row goes the other way */
.s11-marquee--reverse .s11-marquee__track {
  animation-direction: reverse;
}

/* pause on hover so people can read a logo */
.s11-marquee:hover .s11-marquee__track {
  animation-play-state: paused;
}

@keyframes s11-marquee {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

@media (max-width: 767px) {
  .s11-marquee__track > *,
  .s11-marquee__track img { width: 140px !important; }
  .s11-marquee__track > * { margin-right: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .s11-marquee__track { animation: none; }
}/* End custom CSS */