/* The authored object is the content. No mock application, cards, or icon map. */
#marketing-v5 #uses-freelance .marketing-inner,
#marketing-v5 #uses-more .marketing-inner {
  width: min(88vw, 1420px);
  height: 100vh; height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  gap: clamp(16px, 3vh, 32px); gap: clamp(16px, 3svh, 32px);
  padding: clamp(100px, 13vh, 142px) 0 clamp(32px, 5vh, 56px); padding: clamp(100px, 13svh, 142px) 0 clamp(32px, 5svh, 56px);
}

#marketing-v5 #uses-freelance .marketing-copy,
#marketing-v5 #uses-more .marketing-copy { order: 0; width: 100%; }

#marketing-v5 #uses-freelance .marketing-copy h2,
#marketing-v5 #uses-more .marketing-copy h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.08;
  color: var(--bb-text-primary);
  text-wrap: balance;
  transform-origin: 0 50%;
  transform: scale(calc(1 + (1 - var(--creative-heading-presence, 1)) * .008));
  opacity: var(--creative-heading-presence, 1);
  filter: blur(calc((1 - var(--creative-heading-presence, 1)) * 1.6px));
}

#marketing-v5 #uses-freelance .marketing-copy > p,
#marketing-v5 #uses-more .marketing-copy > p {
  margin: clamp(14px, 2vh, 22px) 0 0; margin: clamp(14px, 2svh, 22px) 0 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  transform: none;
  opacity: var(--creative-description-presence, 1);
  filter: blur(calc((1 - var(--creative-description-presence, 1)) * 1px));
}

#marketing-v5 #uses-freelance .proof-slot,
#marketing-v5 #uses-more .proof-slot {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  max-width: none; max-height: none; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  overflow: visible; transform: none;
}

.creative-work { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.creative-work__stage { position: relative; width: 100%; height: 100%; min-height: 0; }
.creative-work__caption { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-top: 8px; }
.creative-work__caption strong { display: block; color: var(--bb-text-primary); font-size: clamp(18px, 1.5vw, 24px); font-weight: var(--bb-weight-strong); }
.creative-work__caption span { display: block; color: var(--bb-text-secondary); margin-top: 8px; font-size: 14px; }
.creative-work__caption p { margin: 0; color: var(--bb-text-secondary); font-size: 15px; line-height: 1.6; }
.creative-work__caption p span { display: inline; margin: 0 10px; color: var(--bb-text-tertiary); }
.creative-work__anchor { position: absolute; width: 1px; height: 1px; top: 18%; left: 83%; pointer-events: none; }

.creative-capabilities { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.65fr); grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 0; column-gap: clamp(12px, 2vw, 32px); }
.creative-capabilities__choices { grid-column: 1; grid-row: 1; align-self: center; justify-self: end; display: grid; width: min(100%, 320px); gap: clamp(3px, .6vh, 7px); gap: clamp(3px, .6svh, 7px); }
.creative-capabilities__choices button { appearance: none; background: transparent; border: 1px solid transparent; border-radius: var(--bb-radius-pill); margin: 0; padding: 10px 22px; min-height: 44px; text-align: left; color: var(--bb-text-primary); font-family: var(--bb-font-family); cursor: pointer; transition: border-color var(--bb-ease-state), box-shadow var(--bb-ease-state), transform var(--bb-ease-move); }
.creative-capabilities__choices button > span { display: block; font-size: clamp(18px, 1.65vw, 26px); font-weight: var(--bb-weight-strong); line-height: 1.25; }
.creative-capabilities__choices button small { display: block; margin-top: 5px; font-size: clamp(12px, .95vw, 15px); font-weight: var(--bb-weight-body); line-height: 1.45; color: var(--bb-text-secondary); }
.creative-capabilities__choices button[aria-pressed="true"] { border-color: rgba(var(--bb-orange-rgb), var(--bb-line-strong)); }
.creative-capabilities__choices button:is(:hover, :focus-visible) { outline: none; border-color: rgba(var(--bb-orange-rgb), var(--bb-line-active)); box-shadow: var(--bb-glow-orange); transform: translateY(var(--bb-motion-up-1)); }
.creative-capabilities__choices button:active { transform: scale(var(--bb-press-scale)); }
.creative-capabilities__stage { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; position: relative; }
.creative-capabilities__caption { grid-column: 2; grid-row: 2; text-align: center; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--bb-text-secondary); }
.creative-capabilities__stage .creative-work__anchor { left: 85%; top: 14%; }
/* The projection reaches the physical right edge: the first hop enters the
   website, not an imaginary small rectangle beside the navigation. */
#marketing-v5 #uses-more .creative-capabilities__stage { width: calc(100% + 6vw); margin-right: -6vw; }

@media (min-width: 761px) {
  #marketing-v5 #uses-more .creative-capabilities {
    width: min(100%, 1000px);
    margin-inline: auto;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: clamp(32px, 3vw, 48px);
  }
  #marketing-v5 #uses-more .creative-capabilities__choices { width: 100%; }
  #marketing-v5 #uses-more .creative-capabilities__stage { width: 100%; margin-right: 0; }
}

/* Quiet focus settling, clocked by the scene rather than tied to a scrub position. */
.creative-work__caption,
.creative-capabilities__choices,
.creative-capabilities__caption {
  opacity: var(--creative-detail-presence, 1);
  filter: blur(calc((1 - var(--creative-detail-presence, 1)) * 1px));
}

@media (prefers-reduced-motion: reduce) {
  #marketing-v5 #uses-freelance,
  #marketing-v5 #uses-more {
    --creative-heading-presence: 1 !important;
    --creative-description-presence: 1 !important;
    --creative-detail-presence: 1 !important;
  }
}

@media (max-width: 760px) {
  #marketing-v5 #uses-freelance .marketing-inner,
  #marketing-v5 #uses-more .marketing-inner { width: 88vw; padding-top: max(86px, 11vh); padding-top: max(86px, 11svh); padding-bottom: 28px; gap: 16px; }
  #marketing-v5 #uses-freelance .marketing-copy h2,
  #marketing-v5 #uses-more .marketing-copy h2 { font-size: clamp(28px, 7.8vw, 40px); max-width: 18ch; }
  #marketing-v5 #uses-freelance .marketing-copy > p,
  #marketing-v5 #uses-more .marketing-copy > p { font-size: 15px; margin-top: 12px; }
  .creative-work__caption { display: block; }
  .creative-work__caption p { margin-top: 14px; font-size: 12px; }
  .creative-work__caption p span { margin-inline: 5px; }
  .creative-work__caption strong { font-size: 18px; }
  .creative-work__caption span { font-size: 12px; }
  .creative-capabilities { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; }
  .creative-capabilities__stage { grid-column: 1; grid-row: 1; }
  .creative-capabilities__choices { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 4px 6px; justify-self: stretch; }
  .creative-capabilities__choices button { padding: 7px 5px; text-align: center; }
  .creative-capabilities__choices button > span { font-size: 12.5px; line-height: 1.3; }
  .creative-capabilities__choices button small { display: none; }
  .creative-capabilities__caption { grid-column: 1; grid-row: 3; min-height: 3em; font-size: 12px; margin: 0; }
  #marketing-v5 #uses-more .creative-capabilities__stage { width: 100vw; margin-inline: -6vw; }
}