/* ============================================================================
   Reworked homepage hero — Sui-style gradient in JD's on-brand blue, blending
   into a white section, with a scroll-opening showreel and a logo marquee.
   Scoped under .home-hero. Aeonik (site default).
   ========================================================================== */
.home-hero {
  --hh-blue: #0025ff;
  --hh-ice: #88bbfd;
  --hh-ink: #0b0b0c;
  position: relative;
  font-family: Aeonik, sans-serif;
  background: #fff;
}
.home-hero * { box-sizing: border-box; }

/* --- scroll-aware navbar (homepage) --------------------------------------- */
.navbar-2 { transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.navbar-2 .logoimg,
.navbar-2 .standard-text,
.navbar-2 .nav-link-3,
.navbar-2 .nav-link-6 { transition: color 0.35s ease, filter 0.35s ease; }
/* over the dark hero/reel: transparent bar, white logo + text */
.navbar-2.hh-light { background-color: transparent !important; box-shadow: none !important; border-bottom: 0 !important; border: 0 !important; }
.navbar-2.hh-light .logoimg { filter: brightness(0) invert(1); }
.navbar-2.hh-light .standard-text,
.navbar-2.hh-light .standard-text .blue,
.navbar-2.hh-light .nav-link-3,
.navbar-2.hh-light .nav-link-6 { color: #fff !important; }
/* white hamburger bars to match the white text over the dark hero */
.navbar-2.hh-light .menu-bar { background-color: #fff; }

/* --- hero screen (vertically-centred heading over the interactive scene) --- */
/* desktop: a tall runway with a sticky hero, so scrolling scrubs the orbit
   → showreel transition while the hero stays in view, then releases. */
.hh-pin { position: relative; height: 200vh; }
.home-hero[data-mode='desktop'] .hh-screen {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}
.hh-screen {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* base/fallback gradient — central blue bloom, black at top, white bleeding
     into the bottom corners (matches the Figma adjustment) */
  background:
    radial-gradient(62% 50% at var(--hh-bx, 50%) var(--hh-by, 42%), rgba(10, 48, 255, 0.95) 0%, rgba(0, 37, 255, 0) 66%),
    linear-gradient(180deg, #000006 0%, #02063a 17%, #001fd6 37%, #2148ff 50%, #6f8bff 64%, #c2cfff 82%, #ffffff 97%);
}
.home-hero[data-mode='desktop'] .hh-stage__inner { justify-content: flex-start; transform: translateY(5vh); }

/* --- orbit ---------------------------------------------------------------- */
.hh-orbit {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  /* below the headline (z 3) while orbiting; JS raises it above as the reel
     detaches so the showreel passes in front of the headline */
  z-index: 2;
  pointer-events: none;
}
.hh-orbit__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(170px, 15vw, 250px);
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #04060f;
  box-shadow: 0 24px 60px -24px rgba(0, 8, 40, 0.6);
  will-change: transform, filter, opacity;
  transform: translate(-50%, -50%);
  cursor: default;
}
.hh-orbit__card img,
.hh-orbit__card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-orbit__card--reel {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  pointer-events: auto;
  cursor: pointer;
}
/* centred play button on the showreel */
.hh-reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  pointer-events: none;
  transition: background 0.25s ease;
}
.hh-reel-play svg { width: 30px; height: 30px; margin-left: 5px; }
.hh-orbit__card--reel:hover .hh-reel-play,
.hh-reel__mask:hover .hh-reel-play { background: rgba(0, 37, 255, 0.85); border-color: rgba(0, 37, 255, 0.9); }
/* mobile orbit: small centred ring above the headline */
.hh-orbit--mobile {
  position: relative;
  width: 100%;
  height: clamp(220px, 42vw, 320px);
  margin-bottom: 1rem;
}
/* live WebGL shader fills the screen (sits over the CSS-gradient fallback) */
.hh-shader { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }

.hh-stage__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  /* full width with the site's ~50px max gutters (no centered cap) */
  padding: 5rem clamp(1.25rem, 3.5vw, 50px);
  text-align: left;
  color: #fff;
}
.hh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.hh-eyebrow__dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #fff; }
.hh-title {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(2.2rem, 4.9vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: #fff;
}
.hh-title .hh-line { display: block; }
/* blur-sweep reveal — words come into focus left-to-right */
.hh-word {
  display: inline-block;
  opacity: 0;
  filter: blur(16px);
  transform: translateY(0.18em);
}
/* the reveal only fires once the loader has cleared (.hh-in added by JS) */
.home-hero.hh-in .hh-word {
  animation: hhWordIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes hhWordIn {
  to { opacity: 1; filter: blur(0); transform: none; }
}
.hh-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-start;
  opacity: 0;
}
.home-hero.hh-in .hh-actions {
  animation: hhFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.55s;
}
@keyframes hhFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hh-word, .hh-actions { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}
.hh-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, color 0.3s ease;
}
.hh-pill svg { width: 1rem; height: 1rem; }
.hh-pill:hover { transform: translateY(-2px); }
.hh-pill--solid { background: #000; color: #fff; }
.hh-pill--solid:hover { background: #111; }
.hh-pill--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.hh-pill--ghost:hover { background: rgba(255, 255, 255, 0.2); }

/* --- showreel (straddles gradient/white seam) ------------------------------ */
/* mobile screen: stacked orbit -> headline -> showreel */
.hh-screen--mobile {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  min-height: 100svh;
  padding: clamp(6rem, 16vh, 9rem) clamp(1.25rem, 3.5vw, 50px) clamp(2rem, 6vw, 4rem);
}
.hh-screen--mobile .hh-stage__inner { padding-block: 1.5rem 2rem; }

/* mobile: text on the left margin, ≤3-line headline, buttons on one line */
.home-hero[data-mode='mobile'] .hh-stage__inner {
  padding-inline: 0;
  text-align: left;
}
.home-hero[data-mode='mobile'] .hh-title {
  max-width: none;
  font-size: clamp(1.7rem, 7.4vw, 2.6rem);
  line-height: 1.05;
}
/* let the headline flow & wrap naturally on mobile (no forced 2-line break) */
.home-hero[data-mode='mobile'] .hh-title .hh-line { display: inline; }
.home-hero[data-mode='mobile'] .hh-actions {
  flex-wrap: nowrap;
  gap: 0.55rem;
}
.home-hero[data-mode='mobile'] .hh-pill {
  padding: 0.6rem 1.05rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.home-hero[data-mode='mobile'] .hh-pill svg { width: 0.85rem; height: 0.85rem; }

/* mobile showreel below the headline */
.hh-reel {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: 0.5rem;
}
.hh-reel__mask {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #04060f;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 12, 60, 0.45);
}
.hh-reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* --- in-hero brief form --------------------------------------------------- */
/* fade the hero headline + CTAs out/in with the brief form. The transition
   lives on the base elements so it plays both ways; !important beats the CTAs'
   own entrance animation (hhFadeUp, fill-mode:both) which otherwise pins them
   visible. */
.hh-title,
.hh-actions {
  transition: opacity 0.35s ease;
}
.home-hero.hh-brief-open .hh-title,
.home-hero.hh-brief-open .hh-actions {
  opacity: 0 !important;
  pointer-events: none;
}
.hh-brief {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1.5rem, 6vh, 4rem) clamp(1.25rem, 4.1vw, 50px);
  background: rgba(2, 4, 12, 0.28);
  backdrop-filter: blur(4px);
  animation: hhLbIn 0.3s ease both;
}
.hh-brief__inner { width: min(40vw, 640px); max-width: 100%; }
@media (max-width: 900px) {
  .hh-brief__inner { width: 100%; }
}
.hh-brief .brief-panel {
  max-width: none;
  width: 100%;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

/* --- showreel lightbox ---------------------------------------------------- */
.hh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(2, 4, 12, 0.88);
  backdrop-filter: blur(8px);
  animation: hhLbIn 0.3s ease both;
}
@keyframes hhLbIn { from { opacity: 0; } to { opacity: 1; } }
.hh-lightbox__inner {
  width: min(1600px, 94vw);
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
}
.hh-lightbox__video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.hh-lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.25s ease;
}
.hh-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); }
.hh-lightbox__close svg { width: 1.2rem; height: 1.2rem; }

/* --- white section + logo marquee ----------------------------------------- */
.hh-white {
  position: relative;
  background: #fff;
  /* logos pushed to the top; a light divider below splits them from About */
  padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid rgba(11, 11, 12, 0.1);
}
.hh-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* allow vertical page scroll; capture horizontal drag */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hh-marquee.is-dragging { cursor: grabbing; }
.hh-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 8vw, 7rem);
  width: max-content;
  user-select: none;
  will-change: transform;
}
/* consistent height (small logos scale up) with a width cap for wide wordmarks */
.hh-marquee__item {
  flex: none;
  display: grid;
  place-items: center;
}
.hh-marquee__item img {
  height: calc(clamp(26px, 2.4vw, 34px) * var(--logo-scale, 1) * 0.7);
  width: auto;
  max-width: calc(170px * var(--logo-scale, 1) * 0.7);
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(1);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.hh-marquee:hover .hh-marquee__item img { opacity: 0.8; }

/* ============================================================================
   Footer 100vh takeover — the shared footer enlarges into a full-viewport
   takeover as the user reaches the bottom of the page, sitting on top of the
   fixed nav (the section already carries the max z-index). The background is
   the hero gradient shader, flipped vertically (black anchored to the bottom).
   ========================================================================== */
/* Runway: sized so the page stops exactly when the card has receded to the
   upper half and the footer content is fully revealed below it — no extra
   scroll past that point. */
.footer-takeover-spacer {
  height: 52vh;
  width: 100%;
  pointer-events: none;
}
/* The footer is a fixed, full-viewport scene pinned BEHIND the page. The page
   content (.footer-lift) sits above it and recedes to reveal it. */
.footer-section.footer-takeover {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* the footer carries .section-7 which caps it at max-height:720px on mobile —
     override so the takeover fills the viewport */
  max-height: none;
  min-height: 560px;
  margin: 0;
  background-color: #00030a;
  z-index: 0;
}
/* The whole page as a single card that recedes (scales down, darkens, rounds)
   and scrolls away to reveal the footer scene behind it. */
.footer-lift {
  position: relative;
  z-index: 2;
  /* the page is an opaque white card — so transparent gaps never bleed through
     to the footer scene behind, and it reads as the body lifting away */
  background: #fff;
}
/* Transform is applied ONLY while lifting — keeping it `none` the rest of the
   time so descendant position:fixed overlays (brief, lightbox) aren't trapped
   in this wrapper's containing block. transform-origin is set in JS to the
   live viewport centre so the card scales in place. */
.footer-lift.is-lifting {
  transform: scale(calc(1 - var(--lift, 0) * 0.12))
    translateY(calc(var(--lift, 0) * -2vh));
  filter: brightness(calc(1 - var(--lift, 0) * 0.16));
  overflow: hidden;
  border-radius: calc(var(--lift, 0) * 28px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, calc(var(--lift, 0) * 0.55));
  will-change: transform, filter;
}
.footer-takeover .background.black {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 0;
}
/* Fill the viewport: the contact block + copyright sit low, in what was the
   vacant bottom space. Indented (6vw) to line up with the lifted white card. */
/* The contact block is vertically centred in the band between the bottom of the
   white card (~47vh) and the bottom of the page, while the copyright line stays
   pinned to the very bottom. */
.footer-takeover .footer-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 47vh;
  padding-top: 47dvh;
  padding-bottom: 0;
  padding-inline: 6vw;
  gap: clamp(1.5rem, 4vh, 3rem);
}
/* centre the contact block in the free space above the copyright */
.footer-takeover .footer-container ._12-column-grid { margin-block: auto; }
/* the copyright row carries a big 40px bottom padding — trim it so the text
   hugs the bottom of the page (no vacant space beneath) */
.footer-takeover .footer-container .copyright { padding-bottom: 18px; }
/* Height-aware sizing + tighter spacing so the block always fits below the card,
   including on short screens (no cropping). */
.footer-takeover .large-text.white.footer,
.footer-takeover .brief-email {
  font-size: clamp(1.8rem, min(3.7vw, 5.2vh), 4rem);
  line-height: 1.06;
}
/* smaller CTA buttons */
.footer-takeover .brief-start,
.footer-takeover .brief-book {
  padding: 0.68em 1.3em;
  font-size: 0.85rem;
}
/* slightly bigger buttons on larger screens */
@media (min-width: 1280px) {
  .footer-takeover .brief-start,
  .footer-takeover .brief-book {
    padding: 0.8em 1.6em;
    font-size: 0.98rem;
  }
}
.footer-takeover .brief { gap: clamp(0.5rem, 1.3vh, 0.95rem); padding-top: clamp(2.5rem, 7vh, 6rem); }
.footer-takeover .brief .image-15 { width: 46px; }
/* extra separation between the text and the CTA buttons */
.footer-takeover .brief-actions { margin-top: clamp(1rem, 3vh, 2.25rem); }
/* short desktop windows: shrink the block, use a smaller logo, and instead of
   full centring just nudge the block up a little from the bottom */
@media (max-height: 820px) {
  .footer-takeover .large-text.white.footer,
  .footer-takeover .brief-email { font-size: clamp(1.45rem, 4vh, 2.4rem); }
  .footer-takeover .brief { gap: 0.4rem; padding-top: clamp(1.5rem, 5vh, 3rem); }
  .footer-takeover .brief .image-15 { width: 34px; }
  .footer-takeover .footer-container ._12-column-grid {
    margin-top: auto;
    margin-bottom: 4vh;
  }
}
/* Mobile: the Webflow mobile CSS adds a 150px top margin to "Let's chat" (and
   the copyright wraps tall), which broke the stack. Reset so the contact block
   stacks tightly and stays centred in the band, with the copyright at the base.
   (grid margin-block:auto centres it; copyright is the last flex child.) */
@media (max-width: 767px) {
  .footer-takeover .large-text.white.footer { margin-top: 0; }
  .footer-takeover .brief { padding-top: clamp(2rem, 6vh, 4rem); gap: 0.6rem; }
  .footer-takeover .brief-actions { margin-top: 1.5rem; }
  /* push the contact block up off the copyright → more padding under the CTAs */
  .footer-takeover .footer-container ._12-column-grid {
    margin-bottom: clamp(2rem, 6vh, 3.5rem);
  }
  /* compact copyright: each line collapses to a single row (no forced <br>),
     small type, so it's no longer a tall cluster at the very bottom */
  .footer-takeover .copyright {
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    padding-top: 12px;
    padding-bottom: 10px;
  }
  /* collapse the forced line breaks to a small space (keeps '© All' readable) */
  .footer-takeover .copyright br { display: inline-block; width: 0.4em; content: ''; }
  .footer-takeover .copyright .text-block-12 {
    font-size: 0.56rem;
    line-height: 1.3;
  }
  .footer-takeover .copyright .back-to-top-block {
    order: 3;
    flex: 0 0 100%;
    margin-top: 0.3rem;
  }
}
/* the footer nav links aren't part of the takeover look and only stretched the
   grid; hide them and collapse the grid so the contact block drops to the
   bottom half (fully below the receded card) */
.footer-takeover .footer-container .footer-link-block-wrapper { display: none; }
.footer-takeover .footer-container ._12-column-grid {
  display: block;
  min-height: 0;
  height: auto;
}
.footer-takeover .footer-container .footer-text-block {
  margin-top: 0;
  margin-bottom: 0;
}
.footer-takeover .footer-container .copyright { margin-top: 0; }
.footer-shader-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.footer-shader {
  display: block;
  width: 100%;
  height: 100%;
}
/* keep the footer content above the shader and enlarge it into place as the
   takeover reveals (driven by --reveal: 0 → 1) */
.footer-takeover .footer-container {
  position: relative;
  z-index: 2;
  transform: translateY(calc((1 - var(--reveal, 0)) * 2vh))
    scale(calc(0.94 + var(--reveal, 0) * 0.06));
  transform-origin: center center;
  opacity: clamp(0, calc(var(--reveal, 0) * 1.8), 1);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .footer-takeover .footer-container { transform: none; opacity: 1; }
}

/* When the showreel lightbox is open, hide the mobile menu button so it doesn't
   clash with the lightbox close (X) button — prioritise the close. */
.hh-lightbox-open .menu-button,
.hh-lightbox-open .navbar-2 { pointer-events: none; }
.hh-lightbox-open .menu-button { opacity: 0; visibility: hidden; }
/* keep the lightbox + its close above everything, incl. the fixed nav */
.hh-lightbox { z-index: 2147483647; }
.hh-lightbox__close { z-index: 2; }

/* footer "Start a project" modal — centred (it isn't anchored to a hero) */
.footer-brief-modal { justify-content: center; }

/* ============================================================================
   Mobile menu: take over the flaky Webflow ix2 hamburger↔X with pure CSS, and
   force a solid nav background + dark marks while the menu is open (any page).
   MobileNavFix strips ix2's inline transforms and toggles .nav-open.
   ========================================================================== */
.menu-button .menu-bar {
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
.menu-button.w--open .menu-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-button.w--open .menu-bar:nth-child(2) { opacity: 0; }
.menu-button.w--open .menu-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* solid bar + readable marks while the menu is open (beats .hh-light) */
.navbar-2.nav-open {
  background-color: #fff !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
.navbar-2.nav-open .logoimg { filter: none !important; }
.navbar-2.nav-open .standard-text,
.navbar-2.nav-open .standard-text .blue,
.navbar-2.nav-open .nav-link-3,
.navbar-2.nav-open .nav-link-6 { color: #0b0b0c !important; }
.navbar-2.nav-open .menu-bar { background-color: #000 !important; }

/* Client-logo strip at the bottom of the /service (Expertise) body */
.svc-logos {
  background: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(11, 11, 12, 0.1);
}

/* ============================================================================
   Service grid placement for rows without Webflow node IDs (the eCommerce row
   we added). Mirrors the other service rows at every breakpoint: number | text
   | image on desktop, image dropping below on tablet, full-width stack on
   mobile, image on top on phones.
   ========================================================================== */
._12-column-grid .svc-cell--num { grid-area: span 1 / span 1 / span 1 / span 1; }
._12-column-grid .svc-cell--text { grid-area: 1 / 2 / 2 / 5; align-self: stretch; }
._12-column-grid .svc-cell--img { grid-area: 1 / 6 / 2 / 13; }
@media screen and (max-width: 991px) {
  ._12-column-grid .svc-cell--text { grid-column-end: 9; }
  ._12-column-grid .svc-cell--img { grid-area: 2 / 2 / 3 / 9; }
}
@media screen and (max-width: 767px) {
  ._12-column-grid .svc-cell--num,
  ._12-column-grid .svc-cell--text,
  ._12-column-grid .svc-cell--img { grid-area: span 1 / span 8 / span 1 / span 8; }
}
@media screen and (max-width: 479px) {
  ._12-column-grid .svc-cell--img { order: -9999; }
}
/* This row has no matching Webflow ix2 reveal, so the reveal mask never lifts
   (it stays as a grey overlay) and the image reads as hidden. Show it directly:
   hide the mask and reset the reveal zoom. */
.svc-cell--img .image-mask { display: none !important; }
.svc-cell--img .imagewitheffect { transform: none !important; }