/* A single scroll-directed brand moment. Static content is the default. */
.emerald-draft .recognition-story {
  --story-top: 84px;
  --story-height: max(calc(100svh - var(--story-top)), var(--story-content-height, 0px));
  --story-travel: max(100svh, 560px);
  --story-bean-clearance: clamp(44px, 6svh, 56px);
  position: relative;
  isolation: isolate;
}
.recognition-stage { position: relative; }
.recognition-symbol, .recognition-light, .recognition-scroll-cue { display: none; }
.emerald-draft .recognition-story .recognition-grid {
  min-height: 410px;
  padding-block: 76px;
  gap: clamp(32px, 5vw, 80px);
}
.emerald-draft .recognition-story h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.22;
  letter-spacing: -.04em;
}
.emerald-draft .recognition-story h2 span { color: #087f65; }
.emerald-draft .recognition-story .recognition-copy {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.65;
}
.emerald-draft .recognition-story .recognition-copy p + p { margin-top: 20px; }
.emerald-draft .recognition-story .everyday-tags { margin-top: 26px; }
.emerald-draft .recognition-story .everyday-tags span { font-size: 13px; }

/* Only enabled after geometry and motion preferences have been checked. */
.recognition-story.is-scroll-story { height: calc(var(--story-height) + var(--story-travel)); }
.is-scroll-story .recognition-stage {
  position: sticky;
  top: var(--story-top);
  height: var(--story-height);
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background: var(--paper);
}
.is-scroll-story .recognition-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  right: 48px;
  height: 1px;
  background: var(--line);
  opacity: var(--story-rule, 1);
}
.is-scroll-story .recognition-light {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--story-light, .7);
}
.is-scroll-story .recognition-light::before, .is-scroll-story .recognition-light::after {
  content: '';
  position: absolute;
  top: calc(49% - var(--story-bean-clearance));
  width: min(60vw, 780px);
  height: 90%;
  pointer-events: none;
}
.is-scroll-story .recognition-light::before {
  left: 38%;
  background: radial-gradient(ellipse, #31c99d30 0%, #83e9c612 46%, #83e9c600 72%);
  transform: translate(-50%, -50%) translate3d(var(--story-halo-left, 0px), var(--story-halo-y, 0px), 0);
}
.is-scroll-story .recognition-light::after {
  left: 62%;
  background: radial-gradient(ellipse, #b26cd62b 0%, #d4a4ec10 46%, #d4a4ec00 72%);
  transform: translate(-50%, -50%) translate3d(var(--story-halo-right, 0px), var(--story-halo-y, 0px), 0);
}
.is-scroll-story .recognition-symbol {
  display: block;
  position: absolute;
  inset: 0;
  height: min(100%, calc(100svh - var(--story-top)));
  z-index: 2;
  pointer-events: none;
  perspective: 1200px;
}
.recognition-bean {
  position: absolute;
  left: 50%;
  /* Leave breathing room above the caption, including the pointer tilt. */
  top: calc(48% - var(--story-bean-clearance));
  width: min(52vw, 640px, 76svh);
  height: auto;
  overflow: visible;
  opacity: var(--story-beans, 1);
  filter: drop-shadow(0 24px 24px #163c2714);
}
.recognition-bean-left {
  transform: translate(-50%, -50%) translate3d(var(--story-left, 0px), var(--story-lift, 0px), 0) rotateX(var(--story-tilt, 0deg)) rotateY(var(--story-turn-left, 0deg)) rotate(var(--story-rotate-left, 0deg)) scale(var(--story-scale, 1));
  transform-origin: 25% 50%;
}
.recognition-bean-right {
  transform: translate(-50%, -50%) translate3d(var(--story-right, 0px), var(--story-drop, 0px), 0) rotateX(var(--story-tilt, 0deg)) rotateY(var(--story-turn-right, 0deg)) rotate(var(--story-rotate-right, 0deg)) scale(var(--story-scale, 1));
  transform-origin: 75% 50%;
  filter: drop-shadow(0 24px 24px #52226714);
}
.recognition-bean-render, .recognition-surface-effects { visibility: hidden; }
.has-bean-renders .recognition-bean-fallback { visibility: hidden; }
.has-bean-renders .recognition-bean-render, .has-bean-renders .recognition-surface-effects { visibility: visible; }
.recognition-glint { opacity: .38; transform: translate(var(--story-glint-x, -12px), var(--story-glint-y, 0px)); }
.emerald-draft .is-scroll-story .recognition-grid {
  position: relative;
  z-index: 1;
  border: 0;
  min-height: 0;
  padding-block: 36px;
}
.is-scroll-story .recognition-grid h2 {
  opacity: var(--story-title, 0);
  transform: translate3d(0, var(--story-title-y, 28px), 0);
}
.is-scroll-story .recognition-copy > p {
  opacity: var(--story-copy, 0);
  transform: translate3d(0, var(--story-copy-y, 24px), 0);
}
.is-scroll-story .everyday-tags {
  opacity: 1;
  transform: none;
}
.is-scroll-story .everyday-tags > span { opacity: var(--tag-reveal, 0); transform: translate3d(0, var(--tag-y, 14px), 0); }
.is-scroll-story .everyday-tags > span:nth-child(1) { --tag-reveal: var(--story-tag-0, 0); --tag-y: var(--story-tag-0-y, 14px); }
.is-scroll-story .everyday-tags > span:nth-child(2) { --tag-reveal: var(--story-tag-1, 0); --tag-y: var(--story-tag-1-y, 14px); }
.is-scroll-story .everyday-tags > span:nth-child(3) { --tag-reveal: var(--story-tag-2, 0); --tag-y: var(--story-tag-2-y, 14px); }
.is-scroll-story .everyday-tags > span:nth-child(4) { --tag-reveal: var(--story-tag-3, 0); --tag-y: var(--story-tag-3-y, 14px); }
.is-scroll-story .recognition-scroll-cue {
  position: absolute;
  bottom: max(36px, 7svh);
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 17px;
  color: #626b66;
  font-size: 13px;
  letter-spacing: .015em;
  opacity: var(--story-cue, 1);
  transform: translateY(var(--story-cue-y, 0px));
  pointer-events: none;
}
.recognition-scroll-cue svg { width: 18px; height: 26px; stroke: #087f65; stroke-width: 1.25; }
.is-story-visible .recognition-bean { will-change: transform, opacity; }

@media (max-width: 800px) {
  .emerald-draft .recognition-story { --story-top: 80px; --story-travel: max(85svh, 480px); --story-bean-clearance: 24px; }
  .emerald-draft .recognition-story .recognition-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    gap: 24px;
    padding-block: 44px;
    min-height: 0;
  }
  .emerald-draft .recognition-story h2 { font-size: clamp(24px, 6.25vw, 36px); }
  .emerald-draft .recognition-story .recognition-copy { font-size: 16px; line-height: 1.6; }
  .emerald-draft .recognition-story .recognition-copy p + p { margin-top: 15px; }
  .emerald-draft .recognition-story .everyday-tags { margin-top: 22px; gap: 7px; }
  .emerald-draft .recognition-story .everyday-tags span { font-size: 12px; padding: 6px 12px; }
  .recognition-bean { width: min(88vw, 480px, 76svh); top: calc(46% - var(--story-bean-clearance)); }
  .is-scroll-story .recognition-stage::before { left: 24px; right: 24px; }
  .is-scroll-story .recognition-light::before, .is-scroll-story .recognition-light::after { width: 135vw; }
}
@media (max-width: 540px) {
  .emerald-draft .recognition-story .recognition-grid { width: calc(100% - 40px); }
  .emerald-draft .recognition-story h2 { font-size: clamp(21px, 6.15vw, 32px); }
}
@media (max-height: 619px) {
  .emerald-draft .recognition-story { --story-bean-clearance: 28px; }
  .emerald-draft .is-scroll-story .recognition-grid { padding-block: 24px; }
  .is-scroll-story .recognition-scroll-cue { bottom: 18px; gap: 8px; }
  .recognition-scroll-cue svg { height: 18px; }
}
/* Print and reduced motion never depend on scroll to expose the copy. */
@media (prefers-reduced-motion: reduce), print {
  .recognition-story.is-scroll-story { height: auto; }
  .is-scroll-story .recognition-stage { position: relative; top: auto; height: auto; overflow: visible; }
  .is-scroll-story .recognition-symbol, .is-scroll-story .recognition-light, .is-scroll-story .recognition-scroll-cue { display: none; }
  .is-scroll-story .recognition-grid h2, .is-scroll-story .recognition-copy > p, .is-scroll-story .everyday-tags, .is-scroll-story .everyday-tags > span { opacity: 1; transform: none; }
}