/* MloaderDigital site. Page-level layout only.
   Every value here is a design-system token. Component styling lives in
   design-system/components/bundle.css and is not overridden.

   The scroll deck and the logo marquee are gone. Sections are now a heading
   plus a static three-up card grid. */

html { background: var(--background); }

body {
  margin: 0;
  background: var(--background);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ head */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
}
.wordmark { display: flex; align-items: center; text-decoration: none; }
.wordmark__img { display: block; height: 30px; width: auto; }
.wordmark:focus-visible { outline: 2px solid var(--Gold); outline-offset: 4px; border-radius: var(--Base-Radius); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-9) 0;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.hero__accent {
  position: absolute;
  top: 50%;
  right: -90px;
  transform: translateY(-50%);
  width: 420px;
  pointer-events: none;
  user-select: none;
}

/* ----------------------------------------------------------- scroll deck */
/* The section is taller than the window and its stage is sticky, so the
   heading pins while the track slides sideways. The page scroll is never
   taken over: momentum, keyboard and find-in-page all still work.
   Without JS or with reduced motion the track is a plain horizontal
   scroller and the section is normal height. */

.deck { position: relative; }
.deck--alt { background: var(--ink-900); }
.deck__stage { padding: var(--space-9) 0; }

.deck--pin .deck__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  box-sizing: border-box;
  padding: calc(72px + var(--space-6)) 0 var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* A floor, not a fixed height. Longer copy pushes the card taller and the
     track's align-items: stretch takes its siblings with it. */
  min-height: 300px;
  overflow: hidden;
}

/* width: 100% matters. These are flex children and .wrap sets margin: 0 auto,
   which stops a flex item stretching. */
.deck__head { flex: 0 0 auto; width: 100%; margin-bottom: var(--space-6); }
.deck__head > * { max-width: 760px; }

.deck__viewport {
  /* The track is only as tall as its cards, and sits in the middle of the
     stage. It used to stretch to the full stage height, which is why three
     short cards were 700px tall. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.deck:not(.deck--pin) .deck__viewport { overflow-x: auto; }

.deck__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  /* first card lines up with the heading, last one runs off the right edge */
  padding-left: max(var(--space-5), calc((100vw - 1200px) / 2 + var(--space-5)));
  padding-right: var(--space-5);
  will-change: transform;
}

.deck__rail {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.deck__pip {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-500);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.deck__pip--on { width: 62px; background: var(--Gold); }
.deck__pip:focus-visible { outline: 2px solid var(--Gold); outline-offset: 3px; }

/* ----------------------------------------------------------------- cards */

.card {
  flex: 0 0 auto;
  width: min(620px, 74vw);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--surface-600);
  border: 1px solid var(--hairline);
  border-radius: var(--Base-Radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}

.card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 460px;
  /* clears the accent sitting in the bottom right corner */
  padding-bottom: var(--space-7);
  /* The card gives up a 104px column to the accent so body copy ends
     before the lattice begins (accent-clusters.md). */
  padding-right: calc(104px - var(--space-8));
}
.card__eyebrow { margin: 0; color: var(--Button_Lable); text-transform: uppercase; }
.card__title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 34px;
  letter-spacing: -0.2px;
  text-wrap: balance;
}
.card__text { margin: 0; color: var(--text-muted); }

/* Accent geometry follows the design system: 150px wide, cropped past the
   corner, 40% opacity, and the copy never crosses it. right: -46px puts its
   left edge exactly at the 104px column the body reserves. */
.card__art {
  position: absolute;
  right: -46px;
  bottom: -44px;
  width: 150px;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* ----------------------------------------------------------------- close */

.close { padding: var(--space-9) 0; border-top: 1px solid var(--hairline); }
.close__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.close__inner .ds-headline__actions { justify-content: center; }
.close__contact { margin: var(--space-6) 0 0; color: var(--text-muted); }
.close__contact a { color: var(--Button_Lable); text-underline-offset: 3px; }
.close__contact a:hover { color: var(--white); }

.site-foot {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-6);
  border-top: 1px solid var(--hairline);
  color: var(--text-dim);
}
.site-foot__art {
  position: absolute;
  right: -56px;
  bottom: -60px;
  width: 190px;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}
.site-foot__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.site-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.site-foot__col--brand { max-width: 380px; gap: var(--space-4); }
.site-foot__mark { display: block; height: 26px; width: auto; }
.site-foot__line { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.site-foot__line--dim { color: var(--text-dim); font-size: 13px; }
.site-foot__head { margin: 0 0 var(--space-1); color: var(--text-dim); text-transform: uppercase; }
.site-foot__link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}
.site-foot__link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.site-foot__link:focus-visible { outline: 2px solid var(--Gold); outline-offset: 3px; border-radius: 2px; }
.site-foot__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  color: var(--text-dim);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .display-xl { font-size: 54px; line-height: 52px; }
  .display-lg { font-size: 42px; line-height: 42px; }
  .hero__accent { width: 320px; right: -130px; opacity: 0.55; }
}

@media (max-width: 680px) {
  .display-xl { font-size: 40px; line-height: 40px; letter-spacing: -0.5px; }
  .display-lg { font-size: 32px; line-height: 34px; letter-spacing: -0.4px; }
  .lead { font-size: 17px; line-height: 26px; }
  .card__title { font-size: 24px; line-height: 27px; }
  .card { width: 84vw; padding: var(--space-6); }
  /* A 104px column leaves too little room for copy at this width, so the
     accent drops to the quiet 25% strength, the one copy may cross. */
  .card__body { padding-bottom: var(--space-6); padding-right: 0; }
  .card__art { width: 140px; right: -40px; bottom: -34px; opacity: 0.25; }
  .deck--pin .deck__stage { padding-top: calc(60px + var(--space-5)); }

  .hero, .deck__stage, .close { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .hero__accent { display: none; }
  .site-head__inner { min-height: 60px; }
  .wordmark__img { height: 24px; }

  .sec__head { margin-bottom: var(--space-6); }
  .site-foot__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .site-foot__art { width: 140px; right: -40px; bottom: -44px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-head { backdrop-filter: none; }
  .deck__viewport { overflow-x: auto; }
}