/* ---- client strip: light ground, one continuous CSS loop ----
   The template drove this from JS and it stuttered and restarted. A duplicated
   track translated by exactly -50% loops seamlessly and never resets visibly. */
.la-strip { overflow: hidden; background: #FFFFFF; border-top: 1px solid #E9EDF6; border-bottom: 1px solid #E9EDF6; padding: 22px 0; }
.la-strip-track { display: flex; width: max-content; animation: la-marquee 34s linear infinite; will-change: transform; }
.la-strip-item { flex: none; padding: 0 44px; font-family: var(--brand-font-heading); font-size: 17px; font-weight: 600; color: #8A93A5; letter-spacing: -.01em; white-space: nowrap; }
@keyframes la-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .la-strip-track { animation: none; } }

/* ---- integrations ---- */
.la-int { max-width: 1180px; margin: 0 auto; }
.la-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.la-int-chip { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 10px; border: 1px solid #E4E9F5; border-radius: 12px; background: #FFFFFF; font-family: var(--brand-font-heading); font-weight: 600; font-size: 13px; line-height: 1.25; color: #2C3444; text-align: center; transition: border-color .18s ease, background-color .18s ease; }
.la-int-chip:hover { border-color: #536ee5; background: #F7F9FF; }
.la-int-more { margin-top: 22px; text-align: center; font-size: 14px; line-height: 1.65; color: #6B7280; }

/* ---- pricing ---- */
.la-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.la-price-card { display: flex; flex-direction: column; padding: 30px 26px; border: 1px solid #E4E9F5; border-radius: 16px; background: #FFFFFF; }
.la-price-card--lead { border-color: #536ee5; box-shadow: 0 18px 40px -26px rgba(83,110,229,.55); }
.la-price-name { font-family: var(--brand-font-heading); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #536ee5; }
.la-price-fig { margin: 10px 0 14px; font-family: var(--brand-font-heading); font-size: 34px; font-weight: 700; color: #232323; letter-spacing: -.02em; }
.la-price-fig span { font-size: 15px; font-weight: 500; color: #6B7280; }
.la-price-note { font-size: 14px; line-height: 1.65; color: #6B7280; margin: 0 0 18px; }
.la-price-list { list-style: none; padding: 0; margin: 0 0 24px; }
.la-price-list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; line-height: 1.55; color: #2C3444; }
.la-price-list li:before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #EEF1FD; }
.la-price-list li:after { content: ""; position: absolute; left: 4px; top: 10px; width: 5px; height: 3px; border-left: 1.6px solid #536ee5; border-bottom: 1.6px solid #536ee5; transform: rotate(-45deg); }
.la-price-cta { margin-top: auto; display: block; text-align: center; padding: 13px 18px; border-radius: 999px; border: 1px solid #232323; color: #232323; font-family: var(--brand-font-heading); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.la-price-cta:hover { background: #232323; color: #FFFFFF; }
.la-price-cta--lead { background: #536ee5; border-color: #536ee5; color: #FFFFFF; }
.la-price-cta--lead:hover { background: #1B44C8; border-color: #1B44C8; color: #FFFFFF; }

/* ---- faq ---- */
.la-faq { max-width: 800px; margin: 0 auto; }
.la-faq-item { border-bottom: 1px solid #E4E9F5; }
.la-faq-q { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; font-family: var(--brand-font-heading); font-size: 17px; font-weight: 600; color: #232323; }
.la-faq-q::-webkit-details-marker { display: none; }
.la-faq-mark { flex: none; position: relative; width: 16px; height: 16px; }
.la-faq-mark:before, .la-faq-mark:after { content: ""; position: absolute; background: #536ee5; transition: transform .2s ease, opacity .2s ease; }
.la-faq-mark:before { left: 0; top: 7px; width: 16px; height: 2px; }
.la-faq-mark:after { left: 7px; top: 0; width: 2px; height: 16px; }
.la-faq-item[open] .la-faq-mark:after { transform: scaleY(0); opacity: 0; }
.la-faq-a { padding: 0 0 24px; max-width: 68ch; font-size: 15px; line-height: 1.7; color: #6B7280; }

/* The client strip inherited a near-black band from the template section it
   replaced. Force the band itself light so client marks on white grounds do
   not fight it, and neutralise the dark parent around it. */
.la-strip { background: #FFFFFF !important; }
.la-strip-item { color: #7D8798; }
.section.brand,
.section.brand-1,
[class*="brand-section"],
.home-1-brand-right-shadow { background: #FFFFFF !important; }

/* The template painted this band near-black behind the client marks. */
.brand-wrapper, .brand-marquee-holder { background: #FFFFFF !important; }
/* Eyebrow pills: any wrapper left behind after its text was removed. */
.body-tag, .body-tag-text, .body-tag-text.white { display: none !important; }

/* Ghost containers left after their eyebrow text was removed. */
.body-tag-wrapper, [class*="tag-wrapper"]:empty, .cta-3-tag-wrapper { display: none !important; }
/* Closing CTA reads better centred now that its broken art is gone. */
.cta-3-image-wrapper { display: none !important; }
.cta-3-wrapper, .cta-3-holder { text-align: center; }

/* Pricing toggle is meaningless when nothing is billed yearly. */
/* Hide only the yearly/monthly toggle. An earlier [class*="pricing-tab"]
   selector also matched the tab PANE and collapsed the whole pricing section. */
/* Hide only the pricing yearly/monthly toggle, and force only the PRICING
   pane visible. Forcing every .w-tab-pane showed all three How It Works
   panels at once, because that class is shared by both tab systems. */
.pricing-tab-menu, .pricing-toggle, .pricing-tab-link { display: none !important; }
.section.pricing .w-tab-menu, [class*="pricing"] > .w-tab-menu { display: none !important; }
.section.pricing .w-tab-pane, [class*="pricing"] .w-tab-pane { display: block !important; }

/* Closing CTA: centred, no orphaned column. */
.cta-3-holder, .cta-3-wrapper, .cta-3-title-wrapper, .cta-3-content-wrapper { text-align: center; margin-left: auto; margin-right: auto; }
.cta-3-button-wrapper { justify-content: center; }

/* FAQ needs its own column now that the stock photo beside it is gone. */
.faq-1-image-wrapper, .faq-1-left-wrapper, .faq-help-card { display: none !important; }
.la-faq { grid-column: 1 / -1; }

/* Closing CTA: one centred column. The template put it in a two-column grid
   with a decorative image, which is why it sat hard left after the image went. */
.cta-3-grid { display: block !important; }
.cta-1-content-holder-copy, .cta-3-title-wrapper, .hero-1-text-wrapper, .hero-1-subtitle-wrapper { text-align: center; margin-left: auto; margin-right: auto; max-width: 700px; }
.la-cta-title { text-align: center; }
.hero-3-button-wrapper { justify-content: center; display: flex; }

/* ---- Our work ------------------------------------------------------------
   Its own layout. Previously this content was an image dropped into the
   template's testimonial grid, so it competed with quote cards and stat tiles
   for the same space and read as clutter. */
.la-work { max-width: 1040px; margin: 0 auto; display: grid; gap: 16px; }
.la-work-item { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start;
  padding: 26px 28px; background: #FFFFFF; border: 1px solid #E4E9F5; border-radius: 16px; }
.la-work-title { margin: 0 0 8px; font-family: var(--brand-font-heading); font-size: 20px; font-weight: 600; color: #232323; letter-spacing: -.02em; }
.la-work-body { margin: 0; font-size: 14.5px; line-height: 1.65; color: #6B7280; }
.la-work-quote { margin: 14px 0 0; padding-left: 14px; border-left: 2px solid #536ee5;
  font-size: 13.5px; line-height: 1.6; color: #4A5568; font-style: normal; }
.la-work-who { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.la-work-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid #E4E9F5; }
.la-work-face--none { background: #EEF1FD; display: block; }
.la-work-name { font-family: var(--brand-font-heading); font-size: 14px; font-weight: 600; color: #232323; }
.la-work-role { font-size: 12.5px; color: #8A93A5; }
@media (max-width: 860px) {
  .la-work-item { grid-template-columns: 1fr; gap: 18px; }
}

/* Integration chips: icon then name. */
.la-int-chip { gap: 10px; }
.la-int-icon { width: 20px; height: 20px; object-fit: contain; flex: none; }

/* Any remnant of the template's own FAQ stays down. */
.faq-card-wrapper, .faq-tab-link, .faq-1-left-wrapper, .faq-help-card,
.faq-plus-icon-wrapper-2, .faq-question, .faq-answer { display: none !important; }
/* No display overrides on our own accordion: forcing the answer visible
   defeats <details> entirely, which is what stopped the toggles working. */

/* Unnamed client gets a neutral person mark rather than a blank disc. */
.la-work-face--none { display: flex; align-items: center; justify-content: center; }
.la-work-face--none svg { width: 22px; height: 22px; }

/* Lettermark for vendors whose real icon we could not fetch. Better an honest
   initial than someone else's generic globe. */
.la-int-letter { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: #EEF1FD; color: #536ee5; font-family: var(--brand-font-heading);
  font-size: 11px; font-weight: 700; }

/* ---- client strip, hardened ---------------------------------------------
   Self-contained so Webflow's IX engine cannot drive it. The track holds two
   identical halves and translates exactly -50%, which makes the loop seamless;
   any gap or differing half width is what produces a visible jump. */
.la-strip { position: relative; overflow: hidden; background: #FFFFFF;
  border-top: 1px solid #E9EDF6; border-bottom: 1px solid #E9EDF6; padding: 24px 0; width: 100%; }
.la-strip-track { display: flex; flex-wrap: nowrap; width: max-content; gap: 0;
  animation: la-marquee 42s linear infinite; will-change: transform;
  transform: translate3d(0,0,0); backface-visibility: hidden; }
.la-strip:hover .la-strip-track { animation-play-state: paused; }
.la-strip-item { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 38px; }
.la-strip-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain;
  opacity: .58; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.la-strip-item:hover .la-strip-logo { opacity: 1; filter: grayscale(0); }
@keyframes la-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .la-strip-track { animation: none; } }

/* Fade the edges so logos enter and leave instead of being clipped hard.
   A mask instead of painted gradients: the fade reveals whatever background
   sits behind the strip, so there is no colour bleed on any surface. */
.la-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.la-strip::before, .la-strip::after { content: none; }

/* Template brand rows on the other pages, rebuilt by lab.js as the same
   seamless marquee the Home A strip uses: one duplicated track translated
   exactly -50%. No arrows, no spin, hover pauses. */
/* Hardened after the Home B breakage: the template ships its own duplicate
   logo set in the markup, static-era CSS hid half the items mid-track, and the
   template paints cream gradient overlays (.brand-*-shadow) that read as a tan
   panel on any background that is not the template's. The track is the only
   thing allowed to show, its items may never be hidden, and edge fading is the
   same mask the Home A strip uses, which cannot bleed a colour. */
.nn-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.nn-marquee > :not(.nn-marquee-track) { display: none !important; }
/* Item geometry copied from the Home A strip: template margins zeroed (they
   overlap items once the marquee owns layout), even padding does the spacing,
   and the band fills its container instead of a 520px template box. */
.nn-marquee { width: 100% !important; max-width: 100% !important; padding: 10px 0; }
.container.brand, .container.brand .brand-wrapper { width: 100% !important; max-width: 100% !important; }
.nn-marquee .nn-marquee-track { gap: 0 !important; }
.nn-marquee .nn-marquee-set { display: flex !important; flex: 0 0 auto; align-items: center; }
.nn-marquee .nn-marquee-set > * { display: flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto; margin: 0 !important; padding: 0 34px !important; position: static !important; }
.nn-marquee .nn-marquee-track img { max-height: 34px; width: auto; max-width: 160px; object-fit: contain; }
.brand-shadow, .brand-right-shadow, .brand-left-shadow,
.brand-3-top-shadow, .brand-3-bottom-shadow,
.hero-3-left-shadow, .hero-3-right-shadow,
[class*="hero-"][class*="-shadow"] { display: none !important; }
.nn-marquee.brand-marquee-holder, .nn-marquee.home-2-brand-marquee-holder,
.nn-marquee.brand-3-marquee-holder { flex-wrap: nowrap !important; }
.nn-marquee .nn-marquee-track {
  display: flex; align-items: center; flex-wrap: nowrap; width: max-content;
  animation: la-marquee 42s linear infinite; will-change: transform;
  transform: translate3d(0,0,0);
}
.nn-marquee:hover .nn-marquee-track { animation-play-state: paused; }
.nn-marquee .nn-marquee-track > * { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .nn-marquee .nn-marquee-track { animation: none; } }

/* Staff portraits: the art is drawn centered with room around the head
   (scripts/art/faces.mjs), so every frame that holds one is a circle and the
   image fills it. */
img[src*="/nn/art/bots/"] { object-fit: cover !important; object-position: center; display: block; }
*:has(> img[src*="/nn/art/bots/"]) { border-radius: 50% !important; overflow: hidden; }

/* Robot sits above its heading at a size you can actually read. */
.la-robot-block { display: flex; justify-content: center; margin: 0 0 18px; }
.la-robot { display: block; }
.la-robot svg { width: 168px; height: 168px; }

/* The one highlight that earns its place: the word the sentence turns on. */
.la-mark { background: linear-gradient(180deg, rgba(83,110,229,.18), rgba(83,110,229,.18));
  border-radius: 6px; padding: 0 .12em; }

/* Closing CTA: heading on one line, buttons centred under it. */
.la-cta-title { text-align: center; text-wrap: balance; max-width: 26ch; margin-left: auto; margin-right: auto; }
.cta-3-wrapper .hero-3-button-wrapper,
.cta-3-holder .hero-3-button-wrapper { display: flex; justify-content: center; gap: 12px; }

/* Close the dead space between the blog row and the closing CTA. */
.section.blog + .section, .blog-1-wrapper + * { margin-top: 0; }
.cta-3-wrapper { margin-top: 0; }
.section:has(> .container > .cta-3-wrapper) { padding-top: 24px; }

/* The CTA column itself was flex-start, so everything inside it hugged the
   left even though each child was internally centred. */
.cta-3-wrapper .hero-1-text-wrapper,
.cta-3-holder .hero-1-text-wrapper { justify-content: center; align-items: center; }

/* Heading needs room to stay on one line at this size. */
.la-cta-title { max-width: none; width: 100%; white-space: nowrap; }
@media (max-width: 720px) { .la-cta-title { white-space: normal; } }

/* The button row was shrink-to-fit and sat at the left edge of the column, so
   its internal justify:center centred the buttons inside a narrow box rather
   than under the heading. Stretch the row, then centre within it. */
.cta-3-wrapper .hero-3-button-wrapper,
.cta-3-holder .hero-3-button-wrapper { width: 100%; justify-content: center; align-self: center; }
.cta-3-wrapper .cta-3-title-wrapper,
.cta-3-wrapper .hero-1-text-wrapper { width: 100%; align-items: center; }

/* 372px sat between the blog row and the closing CTA: 80 below the button,
   160 between the two sections, 132 above the CTA block. Pull it to roughly
   a third of that without collapsing the sections into each other. */
.cta-3-wrapper { margin-top: -120px; }
.section:has(.cta-3-wrapper) > .container,
.section:has(.cta-3-wrapper) > .w-layout-blockcontainer { padding-top: 0; }
.section:has(.blog-1-wrapper) { padding-bottom: 0; }
.blog-1-button-wrapper, .blog-1-bottom-wrapper { margin-bottom: 0; padding-bottom: 0; }

/* The robot's parent lays its children out in a row, which is why the glyph
   kept landing beside the heading instead of above it. */
.feature-header-wrapper:has(.la-robot-block) { flex-direction: column; align-items: center; }

/* The heading is held on one line, so the card has to be wide enough for it.
   Previously the card kept the template's narrow width and the text spilled
   past its rounded edges. */
.cta-3-wrapper { max-width: 1100px; width: auto; margin-left: auto !important; margin-right: auto !important; padding-left: 48px; padding-right: 48px; }
.cta-3-wrapper .cta-3-title-wrapper,
.cta-3-wrapper .hero-1-text-wrapper,
.cta-3-wrapper .cta-1-content-holder-copy { max-width: none; }

/* ---- footer bottom line -------------------------------------------------
   The template shipped a Webflow attribution line. This is our own, matching
   the production footer: ownership, founding, a live freshness date. */
.footer-copy-right-text .copyright-dot { opacity: .45; margin: 0 2px; }
.footer-copy-right-text .copyright-link { text-decoration: underline; text-underline-offset: 2px; }

/* ---- CTA / blog collision ------------------------------------------------
   The template pulls the CTA band up with a negative margin so it overlaps a
   dark section above it. Our blog section ends in a centred "View All" button,
   so that overlap parked the CTA card on top of the button and it read as a
   stray button behind the card. Sit the CTA in its own space instead. */
.cta-3-wrapper { margin-top: 0; }
.blog-button-wrapper { margin-top: 26px; margin-bottom: 8px; }

/* ---- blog cards ----------------------------------------------------------
   The feature card stopped 82px short of the side card, which is what made the
   row look unfinished. The grid cell itself was already full height; the height
   was lost inside Webflow's collection-list chain (list wrapper, list, item),
   each of which shrink-wraps its content. Carry the height down the chain. */
.home-1-blog-main-grid { align-items: stretch; }
.home-1-blog-big-card-wrapper > .home-1-blog-collection-list-wrapper,
.home-1-blog-collection-list-wrapper > .home-1-blog-collection-list,
.home-1-blog-collection-list > .home-1-blog-collection-item,
.home-1-blog-collection-item > .home-1-blog-link-wrapper { height: 100%; }
.home-1-blog-link-wrapper > .home-1-blog-grid { height: 100%; align-content: center; }

/* ---- headline highlight, full line --------------------------------------
   Highlighting "Your time" and leaving "back." outside it split the promise in
   half. The whole clause carries the benefit, so the whole clause gets the
   mark. Inline-block so the padding actually applies on all four sides; the
   alpha is a touch lower than the inline mark because the area is far larger. */
h1.hero-title .la-mark--line,
h2 .la-mark--line,
.la-mark--line { display: inline-block; padding: .02em .24em; border-radius: 14px;
  line-height: 1.08; background: rgba(83,110,229,.16); }

/* ---- motion restored ----------------------------------------------------
   The interactions engine is re-bound (data-w-id restored from the pristine
   clone), so the freezes that lived here are gone: the GSAP letter reveal,
   the blanket [data-w-id] override, the hero freeze, and the pinned-runway
   collapse all worked only while the engine was unbound. The one deliberate
   stillness that remains is the logo rows, handled above. Reduced-motion
   users get the quiet version. */
@media (prefers-reduced-motion: reduce) {
  [data-w-id]:not(.navbar-menu-icon),
  .gsap_split_letter, .gsap_split_word, .gsap_split_line {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* "Tell us where your week goes" was space-between inside a stretched
   column, so the heading sat at the top and the copy sat at the bottom.
   Pack the copy under the heading. The card still fills its grid cell so
   the column beside a taller photo does not leave an empty runway. */
.join-us-grid {
  align-items: stretch !important;
}
.join-1-contact-wrapper,
.join-2-contact-wrapper,
.join-us-content-wrapper,
.join-us-2-content-wrapper {
  justify-content: flex-start !important;
  align-content: flex-start;
  align-self: stretch;
  height: auto;
  gap: 16px;
}
.contact-client-text,
.join-us-1-feature-card,
.join-us-1-feature-card .text-sm {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}
.contact-client-text {
  line-height: 1.25 !important;
}

/* ---- mobile: the logo wall ----------------------------------------------
   72 labelled chips at two columns is 36 rows, 2080px, 2.6 full phone screens
   of nothing but logos. A logo wall is scanned, not read, so on phones the
   labels become screen-reader-only and the icons tile densely: six columns,
   twelve rows, roughly a third of the height. The name still reaches assistive
   tech, so the icon alt stays empty and nothing is actually lost. */
@media (max-width: 700px) {
  .la-int-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
  .la-int-chip { position: relative; min-height: 44px; padding: 6px 4px; border-radius: 10px; }
  .la-int-chip span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .la-int-icon { width: 22px; height: 22px; }
  .la-int-more { margin-top: 18px; font-size: 13.5px; }
}

/* ---- mobile: "Someone has to run the robots" cards ----------------------
   Each slide was 774px on an 812px viewport, so a card never fit on screen
   even though you could swipe between them. The decorative artwork was 311px
   of that, about 40% of the card, carrying no information. Cap the art and
   tighten the stack so a whole card lands inside one screen. */
@media (max-width: 700px) {
  .tablet-feature-1-card-image-wrapper { padding: 12px; }
  .tablet-feature-1-card-image-wrapper .feature-1-image-wrapper { max-height: 132px; overflow: hidden; border-radius: 12px; }
  .tablet-feature-1-card-image-wrapper .feature-1-card-image { height: 132px; width: 100%; object-fit: cover; object-position: center; }
  .tablet-feature-1-card-wrapper .feature-1-card-grid { gap: 12px; }
  .tablet-feature-1-card-wrapper .feature-1-content-wrapper { gap: 14px; padding: 12px; }
  .tablet-feature-1-card-wrapper .feature-1-card-header-wrapper { gap: 8px; }
  .tablet-feature-1-card-wrapper .body-text { font-size: 14.5px; line-height: 1.5; }
  .tablet-feature-1-card-wrapper .feature-1-card-feature-holder { gap: 8px; }
}

/* "What you get" check marks (Home B plan cards): the template's grey disc with
   a dark double-tick read as broken. Brand tint disc, single brand-blue tick. */
.pricing-2-feature-icon-wrapper { background: #EEF1FD !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; }
.pricing-2-include-icon { color: #536ee5 !important; width: 13px !important; height: 13px !important; }
.pricing-2-include-icon svg path:first-child { display: none; }
.pricing-2-include-icon svg path { stroke-width: 1.4; }

/* Footer, restructured: social icons live under a "Follow us" heading in the
   link grid, Privacy and Terms sit in the bottom line, and Ask AI takes the
   bottom-right slot the back-to-top control used to hold. */
.la-follow { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-bottom-text-wrapper .la-askai { margin-top: 0; }
@media (max-width: 767px) { .footer-bottom-text-wrapper { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* ---- pinned runways, driven by runway.js -------------------------------
   The runway is tall on purpose: that height is the scroll distance the
   reader spends walking the cards past. The sticky child stays put while
   the holder slides. Home B's runway height comes from the template; Home C
   never had one on this page, so it is set here. */
@media (min-width: 992px) {
  .home-3-study-main-wrapper { height: 300vh; }
  .home-3-study-sticky { position: sticky !important; top: 8vh; }
}
/* The template's own interaction slides the whole runway wrapper the moment
   it scrolls into view, which is the "all four move at once" bug. The driver
   owns the movement now, so the wrapper stays put. */
.nn-runway, .nn-runway .home-2-study-wrapper, .nn-runway .feature-2-sticky-wrapper { transform: none !important; }
.nn-runway-sticky { overflow: hidden; }
.nn-runway-holder { display: flex; flex-wrap: nowrap; will-change: transform; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .feature-2-wrapper.hide-tablet, .home-3-study-main-wrapper { height: auto !important; }
  .feature-2-sticky-wrapper, .home-3-study-sticky { position: static !important; }
  .feature-2-holder, .home-3-study-collection-list { flex-direction: column; transform: none !important; }
}

/* (The hero boot-hide that lived here is gone: scripts/nn-motion.mjs and reveal.css now run one entrance system on every page.) */

/* Case study listing: the template's warm cream hero wash (Hero_Bg_02) sat behind
   the whole page. The site ground is the cool off-white everywhere else. */
.case-study-bg-wrapper { background-image: none !important; }

/* Headlines David wants on a single line at desktop widths. They sit inside
   narrow header columns, so they size to their text and centre themselves
   instead of wrapping. */
@media (min-width: 992px) {
  .nn-one-line { white-space: nowrap; width: max-content; max-width: none !important; position: relative; left: 50%; transform: translateX(-50%); }
}