/* massamedia home, desktop only (11 Nov 2026, Danny). Below 1200px nothing changes.
   1. Start a project is the same sticky corner button the other pages have (.mm-sticky, rules copied from
      svc-foot-v1.css with .mm-svc -> .mm-home). On Home it is there from the start, not only after the hero; the
      element is added by /_lp/heart-v1.js after hydration. The button inside the hero block is hidden on desktop.
   2. Bottom-right block: just the sentence and the two service links, no rule between them.
   Layout only: no change to React markup. */
.mm-sticky.mm-home { display: none; }
@media (min-width: 1200px) {
  .mm-sticky.mm-home { --mmr: 1rem; position: fixed; z-index: 350; top: 0; right: 0; left: auto; width: max-content; max-width: 100%; box-sizing: border-box; height: var(--header-width);
    display: flex; align-items: center; gap: calc(var(--mmr) * .6); padding-inline: calc(var(--mmr) * 3.2);
    background-color: var(--sunset-orange); color: var(--almost-black); text-decoration: none; overflow: hidden;
    font: 700 max(11px, calc(var(--mmr) * 1.6))/120% var(--font-avantt, avantt), Arial, sans-serif; text-transform: uppercase; letter-spacing: normal;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-100%);
    transition: opacity .4s var(--primary-ease), transform .4s var(--primary-ease), visibility 0s linear .4s; }
  .mm-sticky.mm-home.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .4s var(--primary-ease), transform .4s var(--primary-ease), visibility 0s; }
  .mm-sticky.mm-home::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, .14); opacity: 0; transition: opacity .6s var(--primary-ease); pointer-events: none; }
  .mm-sticky.mm-home .mm-sticky-wrap { display: grid; overflow: hidden; white-space: nowrap; flex: none; }
  .mm-sticky.mm-home .mm-sticky-t { grid-area: 1 / 1; transition: transform .6s var(--primary-ease); }
  .mm-sticky.mm-home .mm-sticky-t + .mm-sticky-t { transform: translateY(110%); }
  .mm-sticky.mm-home .mm-sticky-arr { display: grid; overflow: hidden; font-size: max(13px, calc(var(--mmr) * 2)); padding-inline: .05em; flex: none; }
  .mm-sticky.mm-home .mm-sticky-arr > span { grid-area: 1 / 1; transition: transform .6s var(--primary-ease); }
  .mm-sticky.mm-home .mm-sticky-arr > span + span { transform: translate(-100%, 50%); }
  .mm-sticky.mm-home:focus-visible { outline: 2px solid var(--almost-black); outline-offset: -4px; }

  /* hero block, bottom right: the in-hero button gives way to the sticky one */
  .mm-hero-links a.mm-hero-cta { display: none; }
  .mm-hero-links { grid-template-columns: max-content 1fr; column-gap: 36px; row-gap: 22px; width: clamp(380px, 31.6vw, 470px); }
  .mm-hero-links .mm-hero-say { grid-column: 1 / -1; width: 0; min-width: 100%; }
  .mm-hero-links a:not(.mm-hero-cta) { justify-self: start; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .mm-sticky.mm-home:hover::after { opacity: 1; }
  .mm-sticky.mm-home:hover .mm-sticky-t:first-child { transform: translateY(-110%); }
  .mm-sticky.mm-home:hover .mm-sticky-t + .mm-sticky-t { transform: none; }
  .mm-sticky.mm-home:hover .mm-sticky-arr > span:first-child { transform: translate(100%, -50%); }
  .mm-sticky.mm-home:hover .mm-sticky-arr > span + span { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mm-sticky.mm-home, .mm-sticky.mm-home.is-on { transform: none; transition: none; } .mm-sticky.mm-home .mm-sticky-t, .mm-sticky.mm-home .mm-sticky-arr > span { transition: none; } }
