/* Paper hero + ink chrome. Later than invert + surfaces. */

html body:has(section#hero) {
  --bd-paper: #ffffff;
  --bd-ink: #121212;
  --bd-ink-soft: #3a3a3a;
  --bd-ink-dim: #1c1c1c;
  --bd-ink-mute: #5c5c5c;
}

/* ------------------------------------------------------------------ */
/* Hero paper only. Do not paint html / body / #main / later plates.   */
/* Single column, optically centered on the white sheet.               */
/* ------------------------------------------------------------------ */

html:has(section#hero) {
  overflow-x: clip;
}

html body section#hero.bd-1sluq08[data-bd-name="Hero"],
html body section#hero[data-bd-name="Hero"] {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  /* Vertical rhythm. One fluid token, --bd-r, runs 0 to 20px between 960px and
     1200px of viewport height; every group gap is "floor + share of --bd-r", so the
     short band (960 and under), the owner's band (961 to 1199) and the tall band
     (1200 and over) are one continuous system instead of stepped overrides. Cards
     grow 300 to 400 with the viewport (100vh - 648px is the non-card stack at the
     height where the cards reach 400). Leftover height splits 2:3 above and below
     (see ::before / ::after at the end of this file).

     --bd-client-gap is a second, later-starting token for one job only: the
     carousel-to-client separation. --bd-r cannot carry it (it is still 0 at 900 and
     only 3.3 at 1000, so any multiplier large enough to open the gap on the owner's
     screen would blow it out on a tall one). This one runs flat below 900, ramps
     1px per 10px of viewport height, and caps at 14. */
  --bd-nav-h: 88px;
  --bd-r: clamp(0px, (100vh - 960px) / 12, 20px);
  --bd-client-gap: clamp(0px, (100vh - 900px) / 10, 14px);
  --bd-card-h: clamp(300px, 100vh - 648px, 400px);
  --bd-ticker-pad-top: 16px; /* hover lift + tilt headroom inside the clipped ticker */
  --bd-ticker-pad-bottom: 32px; /* ground-shadow room inside the clipped ticker */
  /* The gutter is a flat 40px and the 1320px column is held by --bd-hero-col on
     the children that would otherwise fill the content box. It used to be
     `max(40px, (100% - 1320px) / 2)`, which put the column width out of reach of
     the ticker: a full-bleed child can only negate a gutter it can name, and at
     any width over 1400 the content box is pinned at 1320 so the gutter is not
     derivable from a percentage of it. The old ticker reached for 100vw instead,
     which includes a classic scrollbar and pushed 8px of horizontal document
     overflow onto Windows and Linux. Optically nothing moves: the content box
     stays centred on the same axis, and a capped child lands on exactly the same
     pixels as before (1425 client width: 52.5 to 1372.5, either way). */
  --bd-hero-px: 40px;
  --bd-hero-col: 1320px;
  gap: 0;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--bd-hero-px);
  padding-right: var(--bd-hero-px);
  padding-top: calc(var(--bd-nav-h) + 12px);
  padding-bottom: 0;
  height: auto !important;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  max-height: none;
  overflow: visible !important;
  overflow-x: visible !important;
  isolation: isolate;
  position: relative !important;
  mix-blend-mode: normal !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #121212 !important;
  --bd-text-color: #121212 !important;
  --bd-x-r6o4lv: #121212 !important;
  --bd-token-82710a55-a0a8-43a3-a858-ec8ef8849cc5: #121212 !important;
  --bd-token-976d8519-4529-425a-83b6-fc169b0e21bc: #444444 !important;
  --bd-link-text-color: #121212 !important;
}

html body section#hero > *:not(.bd-hero-dots):not(.bd-hero-float):not(.bd-hero-ticker) {
  position: relative;
  z-index: 2;
}

html body section#hero .bd-hero-dots {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  background: transparent;
  mix-blend-mode: difference;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 68px,
    rgba(0, 0, 0, 0.4) 110px,
    #000 168px,
    #000 calc(100% - var(--bd-dots-out-full, 280px)),
    rgba(0, 0, 0, 0.4) calc(100% - var(--bd-dots-out-mid, 220px)),
    transparent calc(100% - var(--bd-dots-out-clear, 180px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 68px,
    rgba(0, 0, 0, 0.4) 110px,
    #000 168px,
    #000 calc(100% - var(--bd-dots-out-full, 280px)),
    rgba(0, 0, 0, 0.4) calc(100% - var(--bd-dots-out-mid, 220px)),
    transparent calc(100% - var(--bd-dots-out-clear, 180px)),
    transparent 100%
  );
}

html body section#hero [data-bd-name="Heading Text"] {
  order: 1;
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  place-content: flex-start !important;
  justify-content: flex-start !important;
  justify-self: center;
  gap: 4px !important;
  width: 100% !important;
  max-width: min(74rem, 94vw);
  min-width: 0;
  min-height: 0;
  text-align: center !important;
  overflow: visible !important;
  /* Plain flow. The CTA, ticker and client margin-tops carry the rhythm; no
     negative-margin / translateY lift. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

/* Linea rating row: overlapping avatars + stars + availability */
html body section#hero #rating,
html body section#hero #rating [data-bd-name="Desktop"] {
  display: flex !important;
}

html body section#hero #rating {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: max-content !important;
  margin: 0 auto 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

html body section#hero #rating > .ssr-variant,
html body section#hero #rating [data-bd-name="Desktop"],
html body section#hero #rating .bd-CtzjI.bd-qbcams,
html body section#hero #rating .bd-rating-row {
  width: fit-content !important;
  max-width: max-content !important;
  align-items: center !important;
  gap: 14px !important;
  column-gap: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

html body section#hero #rating [data-bd-name="Text"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  place-content: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html body section#hero #rating [data-bd-name="Rating"] {
  align-self: flex-start !important;
  justify-content: flex-start !important;
  width: auto !important;
}

html body section#hero #rating .bd-reviews-label {
  display: block;
  align-self: flex-start;
  width: 100%;
  height: 21px;
  margin: 0;
  color: #3a3a3a;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
}

html body section#hero #rating [data-bd-name="Stars"] {
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
}

html body section#hero #rating [data-bd-name="Available"] {
  width: 100% !important;
  text-align: left !important;
  align-self: flex-start !important;
}

html body section#hero #rating [data-bd-name="Available"] .bd-text,
html body section#hero #rating [data-bd-name="Available"] p {
  display: none !important;
}

html body section#hero #rating [data-bd-name="Photos"],
html body section#hero #rating [data-bd-name="Photos"].bd-1bxxq30,
html body section#hero #rating .bd-rating-faces {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: scale(1.22);
  transform-origin: center left;
  /* scale(1.22) from the left overflows the box; keep a slim gutter only */
  margin-right: 12px !important;
}

html body section#hero #rating [data-bd-name="Avatar"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body section#hero #rating [data-bd-name="Avatar"] img,
html body section#hero #rating .bd-rating-faces img {
  object-fit: cover !important;
}

html body section#hero #rating .bd-rating-faces img[data-bd-face="01"] {
  object-position: center 42% !important;
}

html body section#hero #rating .bd-rating-faces img[data-bd-face="02"] {
  object-position: center 38% !important;
}

html body section#hero #rating .bd-rating-faces img[data-bd-face="03"] {
  object-position: center 40% !important;
}

html body section#hero #rating [data-bd-name="Text"],
html body section#hero #rating [data-bd-name="Rating"],
html body section#hero #rating [data-bd-name="Stars"],
html body section#hero #rating [data-bd-name="Rate"],
html body section#hero #rating [data-bd-name="4.9"],
html body section#hero #rating [data-bd-name="Available"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body section#hero #rating [data-bd-name="Available"] {
  display: block !important;
}

html body section#hero .bd-stat-flip {
  position: relative;
  display: block;
  overflow: hidden;
  height: 21px;
  perspective: 220px;
}

html body section#hero .bd-stat-flip__item {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: #3a3a3a;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: auto;
  transition:
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}

html body section#hero .bd-stat-flip__item.is-current {
  transform: rotateX(0deg) translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}

html body section#hero .bd-stat-flip__item.is-wait {
  transform: rotateX(75deg) translateY(10px);
  opacity: 0;
}

html body section#hero .bd-stat-flip__item.is-out {
  transform: rotateX(-75deg) translateY(-10px);
  opacity: 0;
  will-change: transform, opacity;
}

html body section#hero .bd-stat-flip__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html body section#hero [data-bd-name="Call to Action"] a.bd-outcome-cta {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
}

html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container:has(> a.bd-outcome-cta) {
  height: 44px !important;
}

html body section#hero [data-bd-name="Call to Action"] a.bd-outcome-cta::after {
  content: "\2192";
  flex: 0 0 auto;
  color: #fff;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

html body section#hero [data-bd-name="Call to Action"] a.bd-outcome-cta:focus-visible {
  outline: 3px solid #121212 !important;
  outline-offset: 4px !important;
}

/* The reel sizes to the CURRENT claim, not the widest one. boot.js measures every
   claim once and writes the current one's width onto the reel as an inline style,
   so the pill hugs each phrase and the arrow after it stays beside the words. The
   claims stack absolutely (base .bd-stat-flip__item) so only the box moves; the
   width transition below is the one from b57c18f, restored. The pill's growth used
   to drag "See pricing" sideways once a cycle - the CTA row now reserves a fixed
   slot for the pill (see [data-bd-name="Call to Action"] below) so the resize is
   absorbed on the pill's side and the secondary link never moves. */
html body section#hero .bd-stat-flip--cta {
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(100vw - 160px);
  height: 28px;
  perspective: 260px;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body section#hero .bd-stat-flip--cta .bd-stat-flip__item {
  width: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.4px;
  text-align: center;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

html body section#hero #rating .bd-BlWhy {
  background-color: #e34400 !important;
}

html body section#hero #rating [data-bd-name="Rate"] {
  background-color: #121212 !important;
  min-width: 34px;
  padding: 5px 9px !important;
  justify-content: center !important;
}

html body section#hero #rating [data-bd-name="4.9"] .bd-text,
html body section#hero #rating [data-bd-name="4.9"] p {
  color: #ffffff !important;
  --bd-text-color: #ffffff !important;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
}

html body section#hero [data-bd-name="Section Header"],
html body section#hero .bd-l61vi3,
html body section#hero [data-bd-name="Call to Action"] {
  align-items: center !important;
  place-content: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body section#hero [data-bd-name="Section Header"],
html body section#hero .bd-l61vi3 {
  display: flex !important;
  flex-flow: column nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100%;
}

html body section#hero .bd-hero-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  text-align: center;
}

html body section#hero .bd-hero-line {
  margin: 0;
  width: auto;
  max-width: none;
  text-align: center;
  white-space: nowrap;
  /* Width-led display size that yields to a short viewport (13vh - 16px is
     101px at 900 tall, full 117.6px from 1028 tall) so a 900-tall screen keeps
     honest gaps instead of squashing them. */
  --bd-hero-font-size: clamp(3.55rem, min(8.2vw, 13vh - 16px), 7.35rem);
  font-size: calc(var(--bd-hero-font-size) * var(--bd-headline-fit, 1));
  line-height: 1.04;
  color: #121212;
}

html body section#hero .bd-hero-line-sans,
html body section#hero .bd-hero-for {
  font-family: Satoshi, "Satoshi Placeholder", system-ui, sans-serif;
  font-style: normal;
  letter-spacing: -0.04em;
  color: #121212;
}

html body section#hero .bd-hero-line-sans {
  font-weight: 700;
}

html body section#hero .bd-hero-for {
  font-weight: 400;
}

html body section#hero .bd-hero-line-serif {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #121212;
}

html body section#hero [data-bd-name="Heading Text"] h1,
html body section#hero [data-bd-name="Heading Text"] h2,
html body section#hero [data-bd-name="Heading Text"] p,
html body section#hero [data-bd-name="Heading Text"] .bd-text,
html body section#hero h1,
html body section#hero h2,
html body section#hero p,
html body section#hero .bd-text {
  color: #121212 !important;
  --bd-text-color: #121212 !important;
  --bd-x-r6o4lv: #121212 !important;
  text-align: center !important;
}

html body section#hero .bd-mfagrx {
  display: none !important;
}

/* Two tracks, not a flex line. The pill hugs the current claim, so its width changes
   once a cycle, and three things have to hold at once: the claim's words keep the arrow
   beside them, the gap to "See pricing" stays the same, and the link does not move. That
   is only possible if the pill's RIGHT edge is fixed and it grows leftward, so track one
   is a fixed slot (--bd-cta-slot) with the pill pinned to its end. The arrow and the link
   then sit still and only the pill's left edge travels. The slot cannot live on
   .bd-my6r1y-container: the shade in hero-depth.css is inset:0 of that container, so the
   container has to keep hugging the pill.
   The slot is the MEAN pill across the 29 claims (measured 179.19 to 319.19px: claim +
   24px padding + 6px gap + 13.19px arrow), not the widest, so the pair sits centred on
   the hero axis for a typical claim instead of hanging off to the right for every short
   one. Long claims overrun the track to the left - nothing is clipped, nothing shifts,
   because the track is a fixed length and the row's width never changes.
   Gap 16px, down from 22: the link keeps its own 6px left padding, so the pill's edge to
   the "S" reads at about 22px and the two hold together as one pair. */
html body section#hero [data-bd-name="Call to Action"] {
  --bd-cta-slot: 236px;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: var(--bd-cta-slot) max-content !important;
  justify-items: end !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px !important;
  /* headline -> CTA: 16 to 32px under the line box (descender to pill 16 to 32px). */
  margin-top: calc(16px + var(--bd-r) * 0.8) !important;
  will-change: auto !important;
}

html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container,
html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 44px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  will-change: auto !important;
  transform: none !important;
}

html body section#hero [data-bd-name="Call to Action"] a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 28px !important;
  border-radius: 13px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  will-change: auto !important;
  transform: none !important;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container a,
html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Orange"] {
  background-color: #e34400 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
  color: #fff !important;
  --bd-text-color: #fff !important;
}

html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container a:hover,
html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Orange"]:hover {
  background-color: #cf3d00 !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24) !important;
}

html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container a .bd-1d4f0e8,
html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container a.hover .bd-1d4f0e8,
html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container a .bd-text,
html body section#hero [data-bd-name="Call to Action"] .bd-my6r1y-container a p {
  color: #fff !important;
  --bd-text-color: #fff !important;
  --bd-x-r6o4lv: #fff !important;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  opacity: 1 !important;
  transform: none !important;
}

html body section#hero [data-bd-name="Call to Action"] a .bd-1d4f0e8,
html body section#hero [data-bd-name="Call to Action"] a.hover .bd-1d4f0e8,
html body section#hero [data-bd-name="Call to Action"] a.bd-v-1jf23un.hover .bd-1d4f0e8,
html body section#hero [data-bd-name="Call to Action"] a.bd-v-4kjshk.hover .bd-1d4f0e8 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
}

html body section#hero [data-bd-name="Call to Action"] a .bd-1g6aqoz,
html body section#hero [data-bd-name="Call to Action"] a.hover .bd-1g6aqoz {
  display: none !important;
}

html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a,
html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"] {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2px 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #121212 !important;
  --bd-text-color: #121212 !important;
  --border-color: transparent !important;
  --border-top-width: 0px !important;
  --border-right-width: 0px !important;
  --border-bottom-width: 0px !important;
  --border-left-width: 0px !important;
}

html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a:hover,
html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #121212 !important;
}

html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"] .bd-1d4f0e8::after,
html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a .bd-1d4f0e8::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: 0 50%;
  opacity: 0.4;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"]:hover .bd-1d4f0e8::after,
html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"]:focus-visible .bd-1d4f0e8::after,
html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a:hover .bd-1d4f0e8::after,
html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a:focus-visible .bd-1d4f0e8::after {
  transform: scaleX(1);
  opacity: 1;
  background: #e34400;
}

html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"]:focus-visible,
html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a:focus-visible {
  outline: 1px solid #121212;
  outline-offset: 4px;
}

html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a .bd-text,
html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a p {
  color: #121212 !important;
  --bd-text-color: #121212 !important;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body section#hero [data-bd-name="Call to Action"] a,
  html body section#hero [data-bd-name="Call to Action"] a[data-bd-name="Light (Only Text)"] .bd-1d4f0e8::after,
  html body section#hero [data-bd-name="Call to Action"] .bd-39mwhi-container a .bd-1d4f0e8::after {
    transition: none;
  }
}

html body [data-bd-name="Images Slideshow"],
html body [data-bd-name="Ticker Mobile"],
html body [data-bd-name="Photos"]:not(section#hero #rating [data-bd-name="Photos"]),
html body section#hero [data-bd-name="Dot BG"],
html body section#hero [data-bd-name="Dot BG"] [data-bd-background-image-wrapper],
html body section#hero [data-bd-name="White"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

html body section#hero [data-bd-name="Dot BG"] {
  background: transparent !important;
  opacity: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Nav: Linea clone chrome — logo | white chip | orange pill CTA.      */
/* ------------------------------------------------------------------ */

html body:has(section#hero) .bd-1585k3b-container {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
}

html body:has(section#hero) nav.bd-XkTZ7[data-bd-name="Desktop"],
html body:has(section#hero) nav.bd-XkTZ7.bd-cfv0ch {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ------------------------------------------------------------------------- */
/* Nav backdrop. Over the hero the bar stays bare — that clean look on the      */
/* white sheet is the approved one and nothing below touches the paper state.   */
/* Once the bar leaves the hero it passes over photographs, white service cards */
/* and the FAQ, so the field state gets a blurred, tinted band behind it.       */
/*                                                                              */
/* The blur has to sit on <nav> itself. nav runs a filling `bd-chrome-in`       */
/* animation, which makes it a backdrop root: a backdrop-filter on the          */
/* Container, or on a pseudo inside it, samples an empty backdrop and is inert   */
/* (measured — tint-only and tint+blur render byte-identical from there).        */
/* nav's own backdrop-filter samples the page, so that is where it goes.         */
/*                                                                              */
/* background-color paints behind the bar's content, so no mask is needed for    */
/* the tint; the mask only exists to feather the blur's bottom edge, and every   */
/* nav item ends by y=70 (the logo canvas is the lowest, at y 27-70) so a mask   */
/* that stays opaque to 72px never touches content. It lifts while the mobile    */
/* menu card is open, because that card is a fixed child of the same <nav>.      */
/* ------------------------------------------------------------------------- */

html body:has(section#hero) nav.bd-XkTZ7 {
  transition:
    background-color 240ms ease,
    -webkit-backdrop-filter 240ms ease,
    backdrop-filter 240ms ease;
}

html[data-bd-nav="field"] body:has(section#hero) nav.bd-XkTZ7[data-bd-name="Desktop"],
html[data-bd-nav="field"] body:has(section#hero) nav.bd-XkTZ7.bd-cfv0ch {
  background-color: rgba(9, 9, 10, 0.8) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
}

html[data-bd-nav="field"] body:has(section#hero) nav.bd-XkTZ7:not(.bd-mnav-open) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 72px,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 72px,
    rgba(0, 0, 0, 0) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  html body:has(section#hero) nav.bd-XkTZ7 {
    transition: none;
  }
}

/* The bar is 88px tall and fixed, and boot.js routes every in-page link through
   scrollIntoView({block: "start"}), which honours scroll-margin. Without this the
   nav lands on top of the first line of whichever section was asked for — the FAQ
   pill sitting on "How does work start?" was exactly that. 96px matches the value
   field.css already gives #privacy and #security. Literal, not var(--bd-nav-h):
   that token lives on section#hero and these sections are its siblings. */
#services,
#testimonial,
#pricing,
#faq {
  scroll-margin-top: 96px;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Container"],
html body:has(section#hero) nav.bd-XkTZ7 .bd-u9s9bd {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  padding: 26px 48px 18px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Nav Content Wrapper"],
html body:has(section#hero) nav.bd-XkTZ7 .bd-83h88j {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1600px !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html body:has(section#hero) nav.bd-XkTZ7 .bd-1l6u49x-container,
html body:has(section#hero) nav.bd-XkTZ7 a[data-bd-name="Logo"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Wrapper"],
html body:has(section#hero) nav.bd-XkTZ7 .bd-7pokr4 {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"],
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"].bd-1cv0w39 {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: min-content !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 3px !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  overflow: visible !important;
  opacity: 1 !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"]::before,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"]::after {
  content: none !important;
  display: none !important;
}

html body nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"] {
  background-image: none !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-name="Normal"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 6px 11px !important;
  border-radius: 5px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #121212 !important;
  --bd-link-text-color: #121212 !important;
  --bd-link-hover-text-color: #121212 !important;
  --bd-text-color: #121212 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  transition: background-color 150ms ease !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a .bd-text,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a p,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a .bd-1nd61sr {
  color: #121212 !important;
  --bd-text-color: #121212 !important;
  --bd-link-hover-text-color: #121212 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover:not(.bd-nav-active):not([data-bd-page-link-current="true"]) {
  background: rgba(18, 18, 18, 0.06) !important;
  background-image: none !important;
  color: #121212 !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"] {
  background: rgba(18, 18, 18, 0.1) !important;
  background-image: none !important;
  color: #121212 !important;
  font-weight: 600 !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active:hover,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"]:hover {
  background: rgba(18, 18, 18, 0.1) !important;
  background-image: none !important;
  color: #121212 !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover .bd-text,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover p,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover .bd-1nd61sr,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active .bd-text,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"] .bd-text,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:focus-visible .bd-text {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #121212 !important;
  font-weight: inherit !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active .bd-text,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"] .bd-text {
  font-weight: 600 !important;
}

html body:has(section#hero) nav.bd-XkTZ7 .bd-12vldcy-container {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

html body:has(section#hero) .bd-lockup {
  display: inline-flex !important;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  width: max-content;
  overflow: hidden;
  font-size: 24px !important;
  line-height: 1 !important;
}

html body:has(section#hero) .bd-lockup-black {
  font-weight: 900;
}

html body:has(section#hero) .bd-lockup-door {
  font-weight: 400;
}

html body:has(section#hero) .bd-lockup-consult {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  padding-left: 0;
  color: inherit;
}

html[data-bd-nav="paper"] .bd-lockup {
  color: #121212 !important;
}

html[data-bd-nav="paper"] nav.bd-XkTZ7 [data-bd-name="Burger"] svg,
html[data-bd-nav="paper"] nav.bd-XkTZ7 [data-bd-name="Burger Button"] svg {
  --21h8s6: #121212 !important;
  color: #121212 !important;
  fill: #121212 !important;
  stroke: #121212 !important;
}

html[data-bd-nav="paper"] .bd-nav-hairline {
  background: #121212;
  opacity: 0;
}
html[data-bd-nav="paper"] .bd-nav-hairline.is-on {
  opacity: 0.16;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Orange"],
html body:has(section#hero) nav.bd-XkTZ7 .bd-12vldcy-container a[data-bd-name="Orange"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background-color: #e34400 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  color: #fff !important;
  --bd-text-color: #fff !important;
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Orange"] .bd-text,
html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Orange"] p {
  color: #fff !important;
  --bd-text-color: #fff !important;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

html[data-bd-nav="paper"] nav.bd-XkTZ7 [data-bd-name="Orange"],
html[data-bd-nav="paper"] nav.bd-XkTZ7 [data-bd-name="Orange"] .bd-text {
  color: #fff !important;
  --bd-text-color: #fff !important;
}

html[data-bd-nav="paper"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:focus-visible,
html[data-bd-nav="paper"] nav.bd-XkTZ7 [data-bd-name="Burger Button"]:focus-visible {
  outline: 1px solid #121212;
  outline-offset: 3px;
}

html[data-bd-nav="field"] .bd-lockup {
  color: #fff !important;
}

html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a .bd-text {
  color: rgba(255, 255, 255, 0.62) !important;
  --bd-link-text-color: rgba(255, 255, 255, 0.62) !important;
  --bd-link-hover-text-color: rgba(255, 255, 255, 0.62) !important;
  --bd-text-color: rgba(255, 255, 255, 0.62) !important;
  background: transparent !important;
  background-image: none !important;
  transition: background-color 150ms ease !important;
}

html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover:not(.bd-nav-active):not([data-bd-page-link-current="true"]),
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:focus-visible:not(.bd-nav-active):not([data-bd-page-link-current="true"]) {
  color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
}

html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover .bd-text,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a:hover p,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active .bd-text,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"] .bd-text {
  background: transparent !important;
  background-image: none !important;
}

html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"] {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  background-image: none !important;
  font-weight: 600 !important;
  --bd-link-text-color: #ffffff !important;
  --bd-text-color: #ffffff !important;
}

html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a.bd-nav-active:hover,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Navmenu"] a[data-bd-page-link-current="true"]:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  background-image: none !important;
}

html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Burger"] svg,
html[data-bd-nav="field"] nav.bd-XkTZ7 [data-bd-name="Burger Button"] svg {
  --21h8s6: #fff !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

html body.bd-has-hero nav.bd-XkTZ7 [data-bd-name="Burger Button"] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Work ticker: full-bleed marquee. Card faces live in hero-float.css. */
/* Full-bleed .bd-hero-ticker is the design-mode hit target.           */
/* ------------------------------------------------------------------ */

html body section#hero .bd-hero-ticker,
html body section#hero > [data-bd-name="Work Ticker"],
html body section#hero > .bd-uva6pz-container {
  display: block !important;
  order: 2;
  flex: 0 0 auto;
  align-self: stretch;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  /* Full bleed by negating the hero's own gutter, not by reaching for 100vw.
     align-self: stretch sizes the box to the content box, and the two negative
     margins take it back out to the hero's padding box — which is the client
     width exactly, scrollbar or no scrollbar. scrollWidth === clientWidth falls
     out of the arithmetic rather than out of a clip. */
  width: auto !important;
  max-width: none !important;
  height: calc(var(--bd-card-h) + var(--bd-ticker-pad-top) + var(--bd-ticker-pad-bottom)) !important;
  max-height: calc(var(--bd-card-h) + var(--bd-ticker-pad-top) + var(--bd-ticker-pad-bottom)) !important;
  /* CTA -> cards: 4 to 16px of margin plus the 16px top pad = 20 to 32px pill-to-card. */
  margin-top: calc(4px + var(--bd-r) * 0.8) !important;
  margin-bottom: 0 !important;
  margin-left: calc(-1 * var(--bd-hero-px)) !important;
  margin-right: calc(-1 * var(--bd-hero-px)) !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  transform: none !important;
}

html body section#hero .bd-hero-ticker [data-bd-name="Work Ticker"],
html body section#hero .bd-hero-ticker .bd-uva6pz-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body section#hero [data-bd-name="Work Ticker"] section,
html body section#hero .bd-hero-ticker section {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--bd-ticker-pad-top) 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* The strip's position is a single value owned by the script: a phase in pixels, written as
   this track's transform once per frame. It used to be a CSS keyframe animation, which cannot
   be grabbed -- a drag has to read the current position, take it over, hand it back with
   momentum, and wrap seamlessly, and a keyframe clock offers no seam-free way in or out of
   that. The auto pace is unchanged, and --bd-ticker-duration still records it. Hover pausing
   moved into the same state that drives the lift and the flip, so the two cannot disagree.

   pan-y leaves vertical scrolling entirely to the browser: the strip claims the horizontal
   axis only, and no script ever touches the wheel. */
html body section#hero .bd-work-loop {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  min-width: max-content;
  will-change: transform;
  touch-action: pan-y;
}

html body section#hero .bd-work-loop.bd-work-loop--dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* Grab affordance is a mouse-and-trackpad thing -- a touch has nothing to grab, it just
   scrolls -- so the open and closed hand only apply where hover is real and the pointer is
   fine. Each card carries its own `cursor: default !important` (it is one rounded 3D object,
   not a link; see hero-float.css), so a plain `inherit` here always lost to it. Matching that
   with `!important` is the only way the hand actually reaches the ticker root, the track and
   the cards, at rest and through a drag. */
@media (hover: hover) and (pointer: fine) {
  html body section#hero .bd-hero-ticker,
  html body section#hero .bd-work-loop,
  /* .bd-hero-ticker prefixed onto the card selectors so this outweighs the card's own
     `cursor: default !important` (hero-float.css) on specificity, not just source order --
     that file loads after this one, so a plain tie would go to it. */
  html body section#hero .bd-hero-ticker .bd-work-loop .bd-work-card,
  html body section#hero .bd-hero-ticker .bd-work-loop .bd-work-card * {
    cursor: grab !important;
  }

  html body section#hero .bd-hero-ticker:has(.bd-work-loop.bd-work-loop--dragging),
  html body section#hero .bd-work-loop.bd-work-loop--dragging,
  html body section#hero .bd-hero-ticker .bd-work-loop.bd-work-loop--dragging .bd-work-card,
  html body section#hero .bd-hero-ticker .bd-work-loop.bd-work-loop--dragging .bd-work-card * {
    cursor: grabbing !important;
  }
}

html body section#hero [data-bd-name="Work Ticker"] ul,
html body section#hero .bd-hero-ticker ul {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  column-gap: 0 !important;
  width: max-content !important;
  max-width: none !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  transform: none !important;
  animation: none !important;
  will-change: auto;
}

html body section#hero [data-bd-name="Work Ticker"] li,
html body section#hero .bd-hero-ticker li {
  position: relative !important;
  list-style: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 14px 0 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body section#hero [data-bd-name="Work Ticker"] li [data-bd-name^="Work"],
html body section#hero .bd-hero-ticker li [data-bd-name^="Work"] {
  border-radius: 20px !important;
  overflow: visible !important;
  width: 320px !important;
  height: var(--bd-card-h) !important;
  pointer-events: auto !important;
}

html body section#hero [data-bd-name="Work Ticker"] img,
html body section#hero .bd-hero-ticker img {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Logo / client ticker: unhide, center, dark marks on paper           */
/* ------------------------------------------------------------------ */

html body section#hero > :has(.bd-marquee__label),
html body section#hero > :has([data-bd-name="Client"]),
html body section#hero > :has(.bd-1u3qlyp) {
  order: 3;
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

html body section#hero [data-bd-name="Client"],
html body section#hero .bd-1u3qlyp {
  display: flex !important;
  flex-flow: column !important;
  align-items: center !important;
  justify-content: center !important;
  place-content: center !important;
  width: 100% !important;
  /* The one hero child that fills the content box, so it is the one that has to
     carry the 1320px column now that the hero's gutter is flat. Centred by the
     auto margins, so it lands on the same pixels the old padding gave it. */
  max-width: var(--bd-hero-col, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  order: 3;
  flex: 0 0 auto;
  gap: 16px !important; /* label -> logos */
  padding-top: 0;
  padding-bottom: 0;
  /* Cards -> label. The client block is its own group, not a footnote to the
     carousel, so the gap is read off the card and not off the ticker box: the
     ticker's 32px shadow room plus 24px plus --bd-client-gap. The card's ground
     shadow prints 9px below the card box at rest, so this leaves the shadow 45 to
     60px clear of the label and the card box itself 54 to 69px clear. The
     16px label -> logos pairing below is untouched, so the label stays married to
     the logos and divorced from the carousel. No lift: the group sits where the
     flow puts it. */
  margin-top: calc(24px + var(--bd-client-gap)) !important;
  position: relative !important;
  top: 0 !important;
}

html body section#hero [data-bd-name="Client"] [hidden] {
  display: revert !important;
}

html body section#hero [data-bd-name="Client"] .bd-14mhqjq-container,
html body section#hero [data-bd-name="Client"] section,
html body section#hero [data-bd-name="Client"] ul {
  display: none !important;
}

html body section#hero .bd-marquee__label {
  margin: 0;
  max-width: 36rem;
  padding: 0 12px;
  text-align: center;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--bd-ink-mute, #5c5c5c) !important;
  --bd-text-color: var(--bd-ink-mute, #5c5c5c) !important;
  white-space: nowrap;
}

html body section#hero .bd-marquee {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

html body section#hero .bd-marquee__track {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
  animation: none;
}

html body section#hero .bd-marquee__track.is-ready {
  animation: bd-marquee var(--bd-marquee-duration, 52s) linear infinite reverse;
}

html body section#hero .bd-marquee__set {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 48px;
  padding-inline-end: 48px;
  flex: 0 0 auto;
}

html body section#hero .bd-marquee__item {
  flex: 0 0 auto;
}

html body section#hero .bd-stack-logo {
  display: block !important;
  height: 34px;
  width: 34px;
  filter: invert(1);
  opacity: 0.88;
}

@keyframes bd-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--bd-loop-x, -50%), 0, 0); }
}

/* Leftover height splits 2:3 above and below the content (optical centre, a touch
   high). ::after also carries the logos -> hero-bottom floor (16 to 32px); ::before
   is capped so a very tall viewport pushes its air below, not under the nav. */
html body section#hero::before,
html body section#hero::after {
  content: "";
  align-self: stretch;
  min-height: 0;
  width: 100%;
  pointer-events: none;
}

html body section#hero::before {
  order: 0;
  flex: 2 1 auto;
  max-height: 120px;
}

html body section#hero::after {
  order: 4;
  flex: 3 1 auto;
  min-height: calc(16px + var(--bd-r) * 0.8);
}

html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Orange"] .bd-1g6aqoz {
  display: none !important;
}

@media (max-width: 809.98px) {
  html body section#hero.bd-1sluq08[data-bd-name="Hero"],
  html body section#hero[data-bd-name="Hero"] {
    --bd-nav-h: 60px;
    --bd-hero-px: 24px;
    padding-left: var(--bd-hero-px);
    padding-right: var(--bd-hero-px);
    padding-top: calc(var(--bd-nav-h) + 24px);
    padding-bottom: 32px;
    gap: 0;
  }

  html body section#hero [data-bd-name="Heading Text"] {
    max-width: none;
    gap: 2px !important;
  }

  /* Phones stack the two actions, so the pill resizes on a vertical pair: one
     full-width column centres both on the same fixed axis, the 22px between them is
     vertical and constant, and the pair can never re-flow onto one line as the claim
     shortens. */
  html body section#hero [data-bd-name="Call to Action"] {
    margin-top: 20px !important;
    width: 100% !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    row-gap: 22px !important;
  }

  /* No carousel on phones: the client strip hangs 64px under the CTAs. */
  html body section#hero [data-bd-name="Client"],
  html body section#hero .bd-1u3qlyp {
    margin-top: 64px !important;
  }

  html body section#hero .bd-hero-line {
    --bd-hero-font-size: clamp(2.05rem, 8.4vw, 3.25rem);
  }

  html body section#hero [data-bd-name="Call to Action"] a.bd-outcome-cta {
    gap: 6px !important;
    max-width: calc(100vw - 48px) !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  html body section#hero .bd-stat-flip--cta {
    max-width: calc(100vw - 104px);
  }

  html body section#hero [data-bd-name="Call to Action"] a.bd-outcome-cta::after {
    font-size: 14px;
  }

  html body:has(section#hero) nav.bd-XkTZ7[data-bd-name="Desktop"],
  html body:has(section#hero) nav.bd-XkTZ7[data-bd-name="Mobile Close"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  html body:has(section#hero) nav.bd-XkTZ7 [data-bd-name="Nav Content Wrapper"],
  html body:has(section#hero) nav.bd-XkTZ7 .bd-83h88j {
    width: 100% !important;
    max-width: none !important;
    justify-content: space-between !important;
    place-content: center space-between !important;
    gap: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  html body section#hero > :has(.bd-marquee__label),
  html body section#hero > :has([data-bd-name="Client"]),
  html body section#hero > :has(.bd-1u3qlyp),
  html body section#hero [data-bd-name="Client"] {
    order: 3;
  }

  html body section#hero .bd-marquee__label {
    font-size: 13px;
    white-space: normal;
  }

  html body section#hero .bd-hero-ticker,
  html body section#hero [data-bd-name="Work Ticker"],
  html body section#hero .bd-uva6pz-container {
    display: none !important;
    order: 2;
    height: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body section#hero .bd-stat-flip--cta {
    transition: none !important;
  }

  html body section#hero [data-bd-name="Work Ticker"] ul,
  html body section#hero .bd-hero-ticker ul,
  html body section#hero .bd-work-loop,
  html body section#hero [data-bd-name="Client"] ul,
  html body section#hero [data-bd-name="Client"] [class*="ticker"],
  html body section#hero .bd-marquee,
  html body section#hero .bd-marquee__track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  html body section#hero .bd-stat-flip__item {
    transition: none !important;
  }

  html body section#hero .bd-hero-ticker {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  html body section#hero .bd-hero-ticker li[data-bd-loop-copy] {
    display: none !important;
  }

  /* Nothing to grab here: the strip is still and the host is the reader's own scroller. This
     has to outrank the hover-capable `grab` rule above on both !important and specificity,
     since a reduced-motion preference and a fine mouse pointer can both be true on the same
     desktop. */
  html body section#hero .bd-hero-ticker,
  html body section#hero .bd-work-loop,
  html body section#hero .bd-hero-ticker .bd-work-loop .bd-work-card,
  html body section#hero .bd-hero-ticker .bd-work-loop .bd-work-card * {
    cursor: auto !important;
    touch-action: auto;
  }

  html body section#hero .bd-marquee {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  html body section#hero .bd-marquee__set + .bd-marquee__set,
  html body section#hero .bd-marquee__item[aria-hidden="true"] {
    display: none !important;
  }

}

/* The first row owns its native ink so brand color, underline and width transitions
   stay exact; the existing simulation continues to render the other hero surfaces. */
html body section#hero#hero#hero#hero .bd-hero-line-sans,
html body section#hero#hero#hero#hero .bd-hero-line-sans * {
  color: #121212 !important;
  -webkit-text-fill-color: #121212 !important;
}
html body section#hero#hero#hero#hero .bd-hero-line-sans {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.23em;
  width: max-content;
  max-width: none;
  font-size: var(--bd-topic-font-size, var(--bd-fit-heading, var(--bd-hero-font-size)));
  line-height: 1.1;
}
html body section#hero .bd-hero-topic {
  display: block;
  position: relative;
  isolation: isolate;
  flex: none;
  overflow: visible;
}
html body section#hero .bd-hero-topic__word {
  display: block;
  position: relative;
  z-index: 2;
  width: max-content;
  white-space: nowrap;
  transform-origin: left center;
}
html body section#hero#hero#hero#hero .bd-hero-topic__word {
  color: #E34400 !important;
  -webkit-text-fill-color: #E34400 !important;
  text-decoration: none;
  text-shadow: none;
}
html body section#hero .bd-primary-cta-label {
  color: #fff;
  font-family: Satoshi, "Satoshi Placeholder", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.4px;
  white-space: nowrap;
}
html body section#hero#hero .bd-hero-headline > .bd-hero-line:not(.bd-hero-line-sans) {
  font-size: calc(var(--bd-fit-heading, var(--bd-hero-font-size)) * var(--bd-headline-fit, 1));
}
@media (forced-colors: active) {
  html body section#hero#hero#hero#hero .bd-hero-line-sans,
  html body section#hero#hero#hero#hero .bd-hero-line-sans * {
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    text-decoration-color: CanvasText;
  }
}

/* Two whole live words melt through a bounded alpha-threshold surface.
   Crisp native HTML owns the settled word, and the underline remains separate. */
html body section#hero .bd-hero-topic { height: 1.1em; }
html body section#hero .bd-hero-topic__filter-defs { position:absolute; width:0; height:0; overflow:visible; pointer-events:none; }
html body section#hero .bd-hero-topic__line { position:absolute; z-index:1; inset:0; pointer-events:none; filter:url(#bd-topic-skip-ink); }
html body section#hero .bd-hero-topic__line-native { display:block; position:absolute; left:0; top:0; width:max-content; white-space:pre; line-height:1.1; }
html body section#hero .bd-hero-topic__line-gooey { display:none; position:absolute; inset:0; filter:url(#bd-topic-threshold) blur(.3px); }
html body section#hero .bd-hero-topic__gooey { display:none; position:absolute; z-index:2; inset:0; pointer-events:none; filter:url(#bd-topic-threshold) blur(.3px); }
html body section#hero .bd-hero-topic__gooey-layer { display:block; position:absolute; left:50%; top:0; width:max-content; white-space:pre; transform-origin:center; line-height:1.1; }
html body section#hero#hero#hero#hero .bd-hero-topic__gooey,
html body section#hero#hero#hero#hero .bd-hero-topic__gooey * { color:#E34400 !important; -webkit-text-fill-color:#E34400 !important; text-decoration:none; }
html body section#hero .bd-hero-topic[data-bd-gooey-render] .bd-hero-topic__gooey { display:block; }
html body section#hero .bd-hero-topic[data-bd-gooey-render] .bd-hero-topic__word { visibility:hidden; }
html body section#hero .bd-hero-topic[data-bd-gooey-render] .bd-hero-topic__line-native { display:none; }
html body section#hero .bd-hero-topic[data-bd-gooey-render] .bd-hero-topic__line-gooey { display:block; }
@media (forced-colors: active) {
  html body section#hero#hero#hero#hero .bd-hero-topic__gooey,
  html body section#hero#hero#hero#hero .bd-hero-topic__gooey * { color:CanvasText !important; -webkit-text-fill-color:CanvasText !important; }
  html body section#hero#hero#hero#hero .bd-hero-topic__word { text-shadow:none; }
}