@import url("https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Italiana&family=Itim&family=Jersey+25&family=La+Belle+Aurore&family=Poppins:wght@400;500;600;700;800;900&display=swap");

/* ---------------- Bitcount (self-hosted, hero "TECH" word only) ---------------- */
@font-face {
  font-family: "Bitcount";
  src: url("fonts/bitcount-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------- Cause (self-hosted) ---------------- */
@font-face {
  font-family: "Cause";
  src: url("fonts/cause-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cause";
  src: url("fonts/cause-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
/* Guard against horizontal overflow with `clip`, not `hidden`:
   overflow-x hidden on BOTH html and body turns body into its own
   scroll container, which silently breaks every position: sticky
   descendant — including the sticky header. `clip` blocks sideways
   overflow without creating a scroll container. The plain `hidden`
   on html is kept first as a fallback for old browsers without clip. */
html { overflow-x: hidden; overflow-x: clip; }
body { margin: 0; font-family: sans-serif; overflow-x: clip; }
p { margin: 0; }

@keyframes archive-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes archive-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.top-strip {
  background-color: #eadfcb;
  height: 19px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.divider {
  background-color: #000;
  height: 2px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.top-divider {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.fill-svg {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lucidemenu {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

a.lucidemenu {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

a.lucidemenu:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.logo-vector {
  position: absolute;
  inset: 20.81% 91.58% 20.94% 0;
}

.logo-the {
  position: absolute;
  inset: 26.13% 66.2% 38.09% 14.7%;
}

.logo-mark {
  position: absolute;
  inset: 20.77% 0 20.77% 36.24%;
}

.logo-mark-inner {
  position: absolute;
  display: contents;
  inset: 20.77% 0 20.77% 14.7%;
}

.logo-group {
  position: absolute;
  display: contents;
  inset: 20.77% 0;
}

.the-archive-logo {
  height: 30px;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 108.678px;
}

.navigation-tab {
  align-content: stretch;
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.sign-up-label {
  position: absolute;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
}

.sign-up-here {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  color: #000;
  text-align: right;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Same width-reserving ghost as the nav links, tuned to the button's
   heavier active weight. */
.sign-up-here::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 800;
}

.sign-up-button {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.sign-up-button .sign-up-label {
  transition: border-color 0.2s ease;
}

.sign-up-button:hover .sign-up-here,
.sign-up-button.is-active .sign-up-here {
  color: #f35933;
}

.sign-up-button:hover .sign-up-label,
.sign-up-button.is-active .sign-up-label {
  border-color: #f35933;
}

.sign-up-button.is-active .sign-up-here {
  font-weight: 800;
}

.header {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.mobile-header-bar {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  position: relative;
  width: 100%;
  height: 100%;
}

.section-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.stacked-block {
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.mobile-header {
  background-color: #eadfcb;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.preserve-your-life-stories-and {
  line-height: .842;
  font-size: 16px;
}

.hero-word {
  line-height: 70.15%;
  font-size: 16px;
}

.word-art {
  font-family: "La Belle Aurore", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  font-size: 16px;
}

.hero-word-alt {
  line-height: 70.15%;
  font-size: 36px;
}

.word-amp {
  line-height: 70.15%;
  font-size: 10px;
}

.word-ai {
  font-family: "Bitcount", sans-serif;
  font-weight: 600;
  line-height: .942;
  font-size: 24px;
}

/* keeps "ART & TECH" together as one unit; if it can't fit on the
   current line it wraps as a whole instead of stranding "TECH" alone,
   and line-height: normal stops it overlapping the line above (the
   parent paragraph below runs line-height: 0 as a Figma-export packing
   hack, which has no vertical space to give a wrapped line) */
.word-art-tech-group {
  display: inline-block;
  white-space: nowrap;
  line-height: normal;
}

.preserve-your-life-stories-and-2 {
  word-break: break-word;
  font-family: "Itim", sans-serif;
  font-weight: 400;
  line-height: 0;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 0;
  color: #000;
  text-align: center;
  width: 310px;
}

.header-text-frame {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.cover-img {
  position: absolute;
  inset: 0;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.polaroid2 {
  height: 152.653px;
  position: relative;
  box-shadow: 0px 1.611px 1.611px 0px rgba(0,0,0,0.25);
  width: 126.472px;
}

.polaroid2-photo {
  flex: none;
  rotate: -1.76deg;
}

.polaroid2-inner {
  display: flex;
  height: 156.467px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 131.103px;
}

.polaroid2-frame {
  align-content: stretch;
  display: flex;
  height: 174px;
  align-items: flex-end;
  justify-content: center;
  margin-right: -21px;
  position: relative;
  flex-shrink: 0;
}

.polaroid1 {
  height: 168.444px;
  position: relative;
  box-shadow: 0px 1.778px 1.778px 0px rgba(0,0,0,0.25);
  width: 139.556px;
}

.polaroid1-photo {
  flex: none;
  rotate: 2.05deg;
}

.polaroid1-inner {
  display: flex;
  height: 173.322px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 145.483px;
  z-index: 1;
}

.polaroid1-frame {
  align-content: stretch;
  display: flex;
  height: 192px;
  isolation: isolate;
  align-items: flex-start;
  justify-content: center;
  margin-right: -21px;
  position: relative;
  flex-shrink: 0;
}

.polaroid3-photo {
  flex: none;
  rotate: 3.38deg;
}

.polaroid3-inner {
  display: flex;
  height: 159.84px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 135.247px;
}

.polaroid3-frame {
  align-content: stretch;
  display: flex;
  height: 174px;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.header-splash {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-bottom: -257px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.left-rotating-shape {
  position: absolute;
  left: 0;
  width: 265.92px;
  height: 265.92px;
  top: 0;
}

.left-rotating-shape-2 {
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 265.92px;
  height: 265.92px;
  animation: archive-spin 18s linear infinite;
}

.left-looping-shape-rotation {
  align-content: stretch;
  display: flex;
  height: 277px;
  align-items: center;
  justify-content: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 147.412px;
}

.right-rotating-shape {
  position: absolute;
  left: 0;
  width: 237.016px;
  height: 237.016px;
  top: 0;
}

.right-rotating-shape-2 {
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 237.016px;
  height: 237.016px;
  animation: archive-spin 22s linear infinite reverse;
}

.right-looping-shape-rotation {
  align-content: stretch;
  display: flex;
  height: 277px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 169.572px;
}

.animation-frame {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
}

.polaroid-header-text-looping-animation {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  align-items: center;
  justify-content: center;
  margin-bottom: -67.44px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.stamp-1 {
  height: 51.777px;
  position: relative;
  width: 38.171px;
}

.photo-inset-left {
  flex: none;
  rotate: -18.9deg;
}

.photo-frame-left {
  display: flex;
  height: 61.349px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 52.884px;
}

.left-overlapping-image {
  align-content: stretch;
  display: flex;
  height: 67.44px;
  align-items: flex-start;
  padding: 3.046px;
  position: relative;
  flex-shrink: 0;
}

.bowl-1 {
  height: 33.913px;
  position: relative;
  width: 50.571px;
}

.photo-inset-right {
  flex: none;
  rotate: -19.07deg;
}

.photo-frame-right {
  display: flex;
  height: 48.575px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 58.876px;
}

.right-overlapping-image {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  height: 67.44px;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
}

.photo-pair {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 20px;
  position: relative;
  width: 100%;
  height: 100%;
}

.photo-pair-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: clip;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.header-full {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: -72px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.find-out-more-label {
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: #f35933;
  inset: 0;
  pointer-events: none;
  border-radius: 37px;
}

.find-out-more {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  line-height: normal;
  position: relative;
  flex-shrink: 0;
  color: #f35933;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  font-variation-settings: "CTGR" 0, "wdth" 100, "wght" 900;
}

.button {
  background-color: #fff;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  padding-block: 6px;
  position: relative;
  border-radius: 37px;
  flex-shrink: 0;
}

.organised-by {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.impact-collidersblack-1 {
  height: 36px;
  position: relative;
  flex-shrink: 0;
  width: 108px;
}

.img-2 {
  position: absolute;
  height: 180%;
  left: -28.49%;
  max-width: none;
  top: -40%;
  width: 156.98%;
}

.partner-logo-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.trcl-logo-1 {
  height: 48px;
  position: relative;
  flex-shrink: 0;
  width: 66px;
}

.organised-by-logos {
  align-content: stretch;
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.organised-by-frame {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 182px;
}

.vertical-divider {
  background-color: #ffffffad;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  width: 1px;
}

.item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.in-support-of {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.img-3 {
  position: absolute;
  height: 223.53%;
  left: -61.86%;
  max-width: none;
  top: -61.76%;
  width: 223.71%;
}

.the-bloom-fund-1 {
  height: 44px;
  position: relative;
  flex-shrink: 0;
  width: 41px;
}

.in-support-of-frame {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 69px;
}

.organisers {
  align-content: stretch;
  display: flex;
  gap: 31px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.organiser-find-out-more-button {
  /* background-color: #f35933; */
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 51px;
  align-items: center;
  padding-bottom: 40px;
  padding-top: 70px;
  position: absolute;
  flex-shrink: 0;
  width: 100%;
  z-index: 30;
}

.organiser-find-out-more-bg {
  background-color: #f35933;
  align-content: stretch;
  position: relative;
  z-index:1;
  align-items: center;
  padding-bottom: 40px;
  padding-top: 70px;
  height: 300px;
  flex-shrink: 0;
  width: 100%;

}
.organiser-find-out-more-bg-sm {
  background-color: #f35933;
  align-content: stretch;
  position: relative;
  z-index:1;
  align-items: center;
  padding-bottom: 40px;
  padding-top: 20px;
  height: 300px;
  flex-shrink: 0;
  width: 100%;

}

.header-section {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.hero-content {
  margin-top: 36px;
  width: 100%;
}

.section-1 {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 4;
}

.walkman-image {
  height: 328.043px;
  margin-right: -70.007px;
  position: relative;
  flex-shrink: 0;
  width: 229.435px;
  z-index: 2;
}

.img-4 {
  position: absolute;
  height: 184.97%;
  left: 0;
  max-width: none;
  top: -23.26%;
  width: 100%;
}

.about-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-bottom-right-radius: 5.186px;
  border-top-right-radius: 5.186px;
}

.about-image {
  height: 204.188px;
  position: relative;
  border-bottom-right-radius: 5.186px;
  border-top-right-radius: 5.186px;
  box-shadow: 0px 2.593px 2.593px 0px rgba(0,0,0,0.25);
  flex-shrink: 0;
  width: 284.566px;
  z-index: 1;
}

.about-image-frame {
  align-content: stretch;
  display: flex;
  isolation: isolate;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
  width: 313px;
}

.about-the-event {
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  line-height: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 32px;
  text-align: center;
  width: 100%;
}

.the-archive-aims-to-help {
  line-height: normal;
  margin-bottom: 0;
}

.at-the-same-time-ai {
  line-height: normal;
}

.about-paragraph {
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  line-height: 0;
  max-width: 600px;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  width: 100%;
  white-space: normal;
}

.about-copy {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  font-style: normal;
  padding-inline: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
}

.about-full {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.svg-2 {
  display: block;
  width: 100%;
  height: 100%;
}

.point {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.what-to-expect-section {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.your-personal-archive {
  font-family: "Itim", sans-serif;
  font-weight: 400;
  position: relative;
  flex-shrink: 0;
  font-size: 32px;
  width: 100%;
  color: #fff;
  text-align: center;
  margin: 0;
}

.full-analysis-and-compilation-of {
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  position: relative;
  flex-shrink: 0;
  font-size: 14px;
  width: 100%;
  color: #fff;
  text-align: center;
  margin: 0;
}

.placeholder-outcome-1 {
  height: 210px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 343px;
}

.redeemable-with {
  word-break: break-word;
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 21.463px;
  color: #000;
  text-align: center;
  width: 100%;
}

.cp-glyph-2 {
  position: absolute;
  height: 41.35px;
  left: calc(50% - 95.81px);
  top: 50%;
  width: 41.38px;
  translate: -50% -50%;
}

.cp-glyph-3 {
  position: absolute;
  height: 16.706px;
  left: calc(50% - 88.82px);
  top: 50%;
  width: 15.793px;
  translate: -50% -50%;
}

.cp-glyph-4 {
  position: absolute;
  height: 16.742px;
  left: calc(50% - 103.73px);
  top: calc(50% - .02px);
  width: 12.826px;
  translate: -50% -50%;
}

.cp-glyph-5 {
  position: absolute;
  height: 23.007px;
  left: calc(50% + 54.84px);
  top: calc(50% + 3.07px);
  width: 18.62px;
  translate: -50% -50%;
}

.cp-glyph-6 {
  position: absolute;
  height: 16.729px;
  left: calc(50% + 74.51px);
  top: calc(50% + .03px);
  width: 17.044px;
  translate: -50% -50%;
}

.cp-glyph-7 {
  position: absolute;
  height: 16.714px;
  left: calc(50% + 30.89px);
  top: calc(50% + .01px);
  width: 15.989px;
  translate: -50% -50%;
}

.cp-glyph-8 {
  position: absolute;
  height: 16.74px;
  left: calc(50% + .03px);
  top: 50%;
  width: 18.257px;
  translate: -50% -50%;
}

.cp-glyph-9 {
  position: absolute;
  height: 16.732px;
  left: calc(50% - 40.67px);
  top: calc(50% - .01px);
  width: 18.252px;
  translate: -50% -50%;
}

.cp-glyph-10 {
  position: absolute;
  height: 16.662px;
  left: calc(50% + 108.2px);
  top: calc(50% - .02px);
  width: 14.892px;
  translate: -50% -50%;
}

.cp-glyph-11 {
  position: absolute;
  height: 16.696px;
  left: calc(50% + 91.98px);
  top: calc(50% - .01px);
  width: 14.315px;
  translate: -50% -50%;
}

.cp-glyph-12 {
  position: absolute;
  height: 16.737px;
  left: calc(50% - 59.43px);
  top: 50%;
  width: 15.857px;
  translate: -50% -50%;
}

.cp-glyph-13 {
  position: absolute;
  height: 21.358px;
  left: calc(50% - 16.61px);
  top: calc(50% - 2.16px);
  width: 10.892px;
  translate: -50% -50%;
}

.cp-glyph-14 {
  position: absolute;
  height: 22.621px;
  left: calc(50% - 26.64px);
  top: calc(50% - 2.95px);
  width: 4.287px;
  translate: -50% -50%;
}

.cp-glyph-15 {
  position: absolute;
  height: 16.729px;
  left: calc(50% + 16.33px);
  top: calc(50% - .01px);
  width: 11.866px;
  translate: -50% -50%;
}

.culturepass-logo {
  position: absolute;
  display: contents;
  left: calc(50% - .43px);
  top: 50%;
  translate: -50% -50%;
}

.sg-culture-pass {
  height: 41.35px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.culturepass {
  background-color: #efefef;
  align-content: stretch;
  filter: drop-shadow(10px 3px 7.4px rgba(0,0,0,0.25));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 16px;
  position: relative;
  width: 100%;
}

.culturepass-inner {
  flex: none;
  rotate: -1.62deg;
  width: 100%;
}

.culturepass-block {
  display: flex;
  height: 106.61px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.culturepass-header {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: -44px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.share-your-story-with-us {
  word-break: break-word;
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  line-height: normal;
  min-width: 100%;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 27.429px;
  text-align: center;
  color: #fff;
  width: min-content;
}

.button-label {
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: #f35933;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
}

.sign-up-now {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 16px;
  text-align: right;
  color: #fff;
  white-space: nowrap;
  font-variation-settings: "CTGR" 0, "wdth" 100, "wght" 600;
}

.button-2 {
  background-color: #f35933;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
  width: 158px;
}

.sign-up {
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: -428px;
  min-height: 1px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.img-8 {
  position: absolute;
  max-width: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.marquee-photo {
  position: absolute;
  background-color: #0000008c;
  inset: 0;
}

.marquee-photo-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.marquee-item {
  height: 428px;
  position: relative;
  flex-shrink: 0;
  width: 434.978px;
}

.marquee-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: max-content;
  animation: archive-marquee 24s linear infinite;
}

.looping-pictures-component {
  height: 428px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.looping-pictures {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
}

.signup-cta-body {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  height: 428px;
  isolation: isolate;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
}

.signup-cta-top {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  align-items: center;
  justify-content: center;
  margin-bottom: -12px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.lucidecalendar {
  position: relative;
  flex-shrink: 0;
  width: 23.395px;
  height: 23.395px;
}

.event-date-title {
  line-height: normal;
  margin-bottom: 0;
  font-size: 9.751px;
  font-weight: 700;
  white-space: nowrap;
}

.session-1-300pm-500pm-sgt {
  line-height: normal;
  margin-bottom: 0;
  color: #8f8f8f;
  font-size: 6.964px;
  white-space: nowrap;
}

.session-2-530pm-730pm-sgt {
  line-height: normal;
  color: #8f8f8f;
  font-size: 6.964px;
  white-space: nowrap;
}

.event-detail-text {
  word-break: break-word;
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  font-size: 0;
  color: #000;
  white-space: nowrap;
  font-variation-settings: "CTGR" 0, "wdth" 100, "wght" 400;
}

.date {
  align-content: stretch;
  display: flex;
  gap: 4.994px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.lucidemap-pin {
  position: relative;
  flex-shrink: 0;
  width: 24.419px;
  height: 24.419px;
}

.details {
  align-content: stretch;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.event-detail {
  flex: none;
  rotate: 0.32deg;
  width: 100%;
}

.event-details-list {
  display: flex;
  height: 32.417px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.details-2 {
  background-color: #efefef;
  align-content: stretch;
  filter: drop-shadow(10px 1px 7.4px rgba(0,0,0,0.25));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 24px;
  position: relative;
  width: 100%;
}

.event-details-row {
  flex: none;
  rotate: 0.15deg;
  width: 100%;
}

.event-details {
  display: flex;
  height: 81.581px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.spacing-container-final-step {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 3;
}

.share-the-love {
  word-break: break-word;
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #f35933;
  font-size: 40px;
  text-align: center;
  white-space: nowrap;
}

.share-heading {
  align-content: stretch;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.know-a-senior-whod-love {
  word-break: break-word;
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #f35933;
  font-size: 12px;
  text-align: center;
  width: 100%;
}

.share-heading-wrap {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.facebook-label {
  position: absolute;
  border-style: solid;
  border-width: 1.857px;
  border-color: #19125340;
  inset: 0;
  pointer-events: none;
  border-radius: 16.714px;
}

.icbaseline-facebook {
  position: relative;
  flex-shrink: 0;
  width: 14.857px;
  height: 14.857px;
}

.facebook {
  word-break: break-word;
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 11.143px;
  color: #fff;
  white-space: nowrap;
}

.facebook-2 {
  background-color: #0865ff;
  align-content: stretch;
  display: flex;
  gap: 3.714px;
  align-items: center;
  padding-inline: 7.429px;
  padding-block: 5.571px;
  position: relative;
  border-radius: 16.714px;
  flex-shrink: 0;
}

.share-app-label {
  position: absolute;
  border-style: solid;
  border-width: 1.857px;
  border-color: #254d0f40;
  inset: 0;
  pointer-events: none;
  border-radius: 16.714px;
}

.whatsapp {
  background-color: #25d366;
  align-content: stretch;
  display: flex;
  gap: 3.714px;
  align-items: center;
  padding-inline: 7.429px;
  padding-block: 5.571px;
  position: relative;
  border-radius: 16.714px;
  flex-shrink: 0;
}

.telegram-glyph {
  position: absolute;
  inset: 17.97% 8.91% .78% 7.34%;
}

.mingcutetelegram-fill {
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 14.857px;
  height: 14.857px;
}

.telegram {
  background-color: #28a7e8;
  align-content: stretch;
  display: flex;
  gap: 3.714px;
  align-items: center;
  padding-inline: 7.429px;
  padding-block: 5.571px;
  position: relative;
  border-radius: 16.714px;
  flex-shrink: 0;
}

.link-glyph {
  position: absolute;
  inset: 7.82% 7.82% .78% 7.83%;
}

.mingcutelink-fill {
  overflow: clip;
  position: relative;
  width: 14.857px;
  height: 14.857px;
}

.copy-link-inner {
  scale: 1 -1;
  flex: none;
  rotate: 180deg;
}

.copy-link-body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.copy-link-button {
  background-color: #768b91;
  align-content: stretch;
  display: flex;
  gap: 3.714px;
  align-items: center;
  padding-inline: 7.429px;
  padding-block: 5.571px;
  position: relative;
  border-radius: 16.714px;
  flex-shrink: 0;
}

.reach-out-at {
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-size: 12px;
}

.infoimpactcolliderscom {
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
  text-decoration-style: solid;
  text-decoration-line: underline;
}

.email-link {
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  cursor: pointer;
  text-decoration-thickness: from-font;
  text-decoration-style: solid;
  font-family: "Hammersmith One", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-size: 12px;
  text-decoration-line: underline;
}

.reach-out-atinfoimpactcolliderscomfor-general-enquiries {
  word-break: break-word;
  flex: 1 0 0;
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  line-height: 0;
  min-width: 1px;
  font-style: normal;
  position: relative;
  color: #69645b;
  font-size: 0;
}

.spacing {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.share-body {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  padding-block: 80px;
  position: relative;
  width: 100%;
  height: 100%;
}

.share-the-love-section {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.quick-links {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  position: relative;
  flex-shrink: 0;
  font-size: 14px;
  width: 100%;
}

.footer-link {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  gap: 4px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  width: 100%;
}

/* footer text links (Quick Links / Partner With Us) reuse .stacked-block's
   layout rules; scoped to the <a> tag so the unrelated .stacked-block div
   wrapping the footer logo isn't affected */
a.stacked-block {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

a.stacked-block:hover {
  color: #f35933;
}

.footer-column {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #313030;
  width: 184px;
}

.contact {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  min-width: 100%;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #313030;
  font-size: 14px;
  width: min-content;
}

.footer-contact-text {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 0;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #313030;
  font-size: 12px;
  width: 100%;
  white-space: normal;
}

.contact-us {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  text-align: right;
  color: #fff;
  white-space: nowrap;
  font-variation-settings: "CTGR" 0, "wdth" 100, "wght" 600;
}

.contact-us-button {
  background-color: #313030;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  padding-block: 8px;
  position: relative;
  border-radius: 52px;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.contact-us-button:hover {
  background-color: #4a4a4a;
}

.footer-contact {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 332px;
}

.join-our-mailing-list {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #313030;
  font-size: 12px;
  width: 100%;
}

.email {
  word-break: break-word;
  flex: 1 0 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  min-width: 1px;
  font-style: normal;
  position: relative;
  color: #828282;
  font-size: 12px;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  width: 100%;
}

.email::placeholder {
  color: #828282;
}

.email-placeholder {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  padding-block: 8px;
  position: relative;
  width: 100%;
  height: 100%;
}

.content-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.email-field-inner {
  background-color: #cdcdcd;
  flex: 1 0 0;
  height: 100%;
  min-width: 1px;
  position: relative;
}

.email-field {
  display: flex;
  flex: 1 0 0;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.subscribe {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.subscribe-label {
  background-color: #313030;
  align-content: stretch;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  position: relative;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.subscribe-label:hover {
  background-color: #4a4a4a;
}

.newsletter-form {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  position: relative;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.social-icons-row {
  position: absolute;
  border-style: solid;
  border-width: 2px;
  border-color: #00000026;
  inset: 0;
  pointer-events: none;
  border-radius: 49px;
}

.newsletter-body {
  height: 34px;
  position: relative;
  border-radius: 49px;
  flex-shrink: 0;
  width: 207px;
}

.newsletter-note {
  align-content: stretch;
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.footer-newsletter {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 245px;
}

.footer-columns {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 37px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.divider-2 {
  background-color: #31303033;
  height: 2px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.impact-collidersblack-1-2 {
  aspect-ratio: 4096 / 1369;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.footer-logo {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: 80px;
  position: relative;
  width: 100%;
  height: 100%;
}

.footer-copyright-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #6b6b6b;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.footer-copyright {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
}

.footer-columns-wrap {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding-inline: 20px;
  padding-block: 40px;
  position: relative;
  width: 100%;
  height: 100%;
}

.footer-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.footer {
  background-size: 183px 183px;
  background-position: 0 0;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
  background-image: url("images/footer-photo.png");
}

.mobile-view {
  background-color: #eadfcb;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.mobile-view-wrapper {
  width: 100%;
}

.logo-vector-lg {
  grid-column: 1;
  height: 17.474px;
  margin-left: 0;
  margin-top: .01px;
  position: relative;
  grid-row: 1;
  width: 9.146px;
}

.the-2 {
  grid-column: 1;
  height: 10.733px;
  margin-left: 0;
  margin-top: 1.61px;
  position: relative;
  grid-row: 1;
  width: 20.763px;
}

.logo-layer-c {
  grid-column: 1;
  height: 17.536px;
  margin-left: 23.41px;
  margin-top: 0;
  position: relative;
  grid-row: 1;
  width: 69.293px;
}

.logo-layer-b {
  grid-column: 1;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  display: inline-grid;
  margin-left: 15.97px;
  margin-top: 0;
  place-items: start;
  position: relative;
  grid-row: 1;
}

.logo-layer-a {
  grid-column: 1;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  display: inline-grid;
  margin-left: 0;
  margin-top: 0;
  place-items: start;
  position: relative;
  grid-row: 1;
}

.layer-1 {
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  display: inline-grid;
  line-height: 0;
  place-items: start;
  position: relative;
  flex-shrink: 0;
}

.the-archive-logo-2 {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

/* The logo and the nav row are meant to sit on top of one another as a
   single header line (that's what the original design's negative-margin
   trick was doing, fragile as it was). A single-cell grid does the same
   overlay honestly: both children share the same cell, the row sizes to
   the taller of the two automatically, and the logo's own centering
   keeps it vertically centered no matter which one ends up taller. */
/* The logo floats centered on top of the nav row rather than sharing a
   grid cell with it — a shared cell was squeezing the whole nav row down
   to the logo's own (much narrower) width, which is what was causing the
   nav links to bunch up in the middle instead of spanning the header. */
.header-nav-row.desktop-header-overlay {
  position: relative;
}

.desktop-header-overlay > .the-archive-logo-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.desktop-header-overlay > .header {
  position: relative;
}

.about {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #000;
  font-size: 13px;
  white-space: nowrap;
}

.divider-3 {
  position: relative;
  flex-shrink: 0;
  width: 4px;
  height: 4px;
}

.sponsor {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 13px;
  color: #000;
  white-space: nowrap;
}

/* Header nav links: clickable, orange on hover, bold + orange while
   their section is the one on screen (or after being clicked). The
   hidden bold ghost below reserves the width the bold weight needs, so
   nothing in the header shifts sideways when a link becomes active. */
[data-nav-link] {
  cursor: pointer;
  transition: color 0.2s ease;
}

[data-nav-link]::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
}

[data-nav-link]:hover {
  color: #f35933;
}

[data-nav-link].is-active {
  color: #f35933;
  font-weight: 700;
}

.header-nav-row {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 80px;
  position: relative;
  width: 100%;
  height: 100%;
}

.desktop-header {
  background-color: #eadfcb;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
}

.desktop-header-slot {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.preserve-your-life-stories-and-3 {
  line-height: .842;
  font-size: 36px;
}

.hero-word-lg {
  font-size: 36px;
}

.art-2 {
  font-family: "La Belle Aurore", cursive;
  font-size: 36px;
}

.word-amp-lg {
  font-size: 24px;
}

.word-ai-lg {
  font-family: "Bitcount", sans-serif;
  font-weight: 600;
  font-size: 48px;
}

.word-art-tech-group-lg {
  display: inline-block;
  white-space: nowrap;
  line-height: normal;
}

.preserve-your-life-stories-and-4 {
  word-break: break-word;
  font-family: "Itim", sans-serif;
  line-height: 0;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 0;
  color: #000;
  text-align: center;
  width: 650px;
}

.polaroid-photo-fill {
  height: 379px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
  width: 314px;
}

.polaroid2-inner-lg {
  display: flex;
  height: 388.47px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 325.498px;
}

.polaroid2-frame-2 {
  align-content: stretch;
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  margin-right: -21px;
  position: relative;
  flex-shrink: 0;
}

.polaroid1-inner-lg {
  display: flex;
  height: 389.974px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 327.337px;
  z-index: 1;
}

.polaroid1-frame-2 {
  align-content: stretch;
  display: flex;
  height: 100%;
  isolation: isolate;
  align-items: flex-start;
  justify-content: center;
  margin-right: -21px;
  position: relative;
  flex-shrink: 0;
}

.polaroid3-inner-lg {
  display: flex;
  height: 396.843px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 335.786px;
}

.polaroid3-frame-2 {
  align-content: stretch;
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.polaroid-cluster-lg {
  align-content: stretch;
  display: flex;
  height: 432px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.hero-text-lg {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-bottom: -542px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.left-rotating-shape-3 {
  position: absolute;
  left: 0;
  width: 552px;
  height: 552px;
  top: 0;
}

.loop-shape-left-art {
  overflow: clip;
  position: relative;
  width: 552px;
  height: 552px;
}

.loop-shape-left-box {
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 552px;
  height: 552px;
  animation: archive-spin 18s linear infinite;
}

.left-looping-shape-rotation-2 {
  align-content: stretch;
  display: flex;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 306px;
}

.right-rotating-shape-3 {
  position: absolute;
  left: 0;
  width: 492px;
  height: 492px;
  top: 0;
}

.loop-shape-right-art {
  overflow: clip;
  position: relative;
  width: 492px;
  height: 492px;
}

.loop-shape-right-box {
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 492px;
  height: 492px;
  animation: archive-spin 22s linear infinite reverse;
}

.right-looping-shape-rotation-2 {
  align-content: stretch;
  display: flex;
  height: 100%;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 352px;
}

.hero-shape-strip {
  align-content: stretch;
  display: flex;
  height: 575px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
}

.hero-body-lg {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  align-items: center;
  justify-content: center;
  margin-bottom: -221.44px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.collage-left-fill {
  height: 170.01px;
  position: relative;
  width: 125.336px;
}

.collage-left-frame {
  display: flex;
  height: 201.44px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 173.644px;
}

.collage-left {
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  position: relative;
  width: 100%;
  height: 100%;
}

.collage-left-wrap {
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.collage-right-fill {
  height: 111.352px;
  position: relative;
  width: 166.052px;
}

.collage-right-frame {
  display: flex;
  height: 159.497px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 193.321px;
}

.collage-right {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
}

.collage-row-lg {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 80px;
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.hero-collage-lg {
  height: 221.44px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.hero-inner-lg {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: -101px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.find-out-more-2 {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  line-height: normal;
  position: relative;
  z-index:50;
  flex-shrink: 0;
  color: #f35933;
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}

.find-out-more-lg {
  background-color: #fff;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
  width: 158px;
}

.hero-section-lg {
  margin-top: 36px;
}

.walkman-image-2 {
  height: 506px;
  margin-right: -108px;
  position: relative;
  flex-shrink: 0;
  width: 354px;
  z-index: 2;
}

.about-photo-lg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
}

.about-image-2 {
  height: 315px;
  position: relative;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
  flex-shrink: 0;
  width: 439px;
  z-index: 1;
}

.about-image-frame-2 {
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  isolation: isolate;
  align-items: center;
  justify-content: flex-start;
  min-width: 685px;
  overflow: clip;
  position: relative;
}

.about-the-event-2 {
  font-family: "Jersey 25", sans-serif;
  line-height: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 40px;
  width: 100%;
}

.about-paragraph-lg {
  font-family: "Hammersmith One", sans-serif;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  font-size: 15px;
  width: 100%;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-text {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  justify-content: center;
  min-width: 1px;
  font-style: normal;
  position: relative;
  color: #fff;
}

.about-copy-lg {
  align-content: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding-right: 80px;
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.about-full-2 {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

.your-personal-archive-2 {
  font-family: "Itim", sans-serif;
  position: relative;
  flex-shrink: 0;
  font-size: 40px;
  width: 100%;
  color: #fff;
  text-align: center;
  margin: 0;
}

.full-analysis-and-compilation-of-2 {
  font-family: "Hammersmith One", sans-serif;
  position: relative;
  flex-shrink: 0;
  font-size: 16px;
  width: 100%;
  color: #fff;
  text-align: center;
  margin: 0;
}

.placeholder-outcome-1-2 {
  height: 537.5px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 879px;
}

.final-step-what-to-expect-5 {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  height: 616px;
  isolation: isolate;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.cp-glyph-17 {
  position: absolute;
  height: 41.35px;
  left: calc(50% - 95.31px);
  top: 50%;
  width: 41.38px;
  translate: -50% -50%;
}

.cp-glyph-18 {
  position: absolute;
  height: 16.706px;
  left: calc(50% - 88.32px);
  top: 50%;
  width: 15.793px;
  translate: -50% -50%;
}

.cp-glyph-19 {
  position: absolute;
  height: 16.742px;
  left: calc(50% - 103.23px);
  top: calc(50% - .02px);
  width: 12.826px;
  translate: -50% -50%;
}

.cp-glyph-20 {
  position: absolute;
  height: 23.007px;
  left: calc(50% + 55.34px);
  top: calc(50% + 3.07px);
  width: 18.62px;
  translate: -50% -50%;
}

.cp-glyph-21 {
  position: absolute;
  height: 16.729px;
  left: calc(50% + 75.01px);
  top: calc(50% + .03px);
  width: 17.044px;
  translate: -50% -50%;
}

.cp-glyph-22 {
  position: absolute;
  height: 16.714px;
  left: calc(50% + 31.39px);
  top: calc(50% + .01px);
  width: 15.989px;
  translate: -50% -50%;
}

.cp-glyph-23 {
  position: absolute;
  height: 16.74px;
  left: calc(50% + .53px);
  top: 50%;
  width: 18.257px;
  translate: -50% -50%;
}

.cp-glyph-24 {
  position: absolute;
  height: 16.732px;
  left: calc(50% - 40.17px);
  top: calc(50% - .01px);
  width: 18.252px;
  translate: -50% -50%;
}

.cp-glyph-25 {
  position: absolute;
  height: 16.662px;
  left: calc(50% + 108.7px);
  top: calc(50% - .02px);
  width: 14.892px;
  translate: -50% -50%;
}

.cp-glyph-26 {
  position: absolute;
  height: 16.696px;
  left: calc(50% + 92.48px);
  top: calc(50% - .01px);
  width: 14.315px;
  translate: -50% -50%;
}

.cp-glyph-27 {
  position: absolute;
  height: 16.737px;
  left: calc(50% - 58.93px);
  top: 50%;
  width: 15.857px;
  translate: -50% -50%;
}

.cp-glyph-28 {
  position: absolute;
  height: 21.358px;
  left: calc(50% - 16.11px);
  top: calc(50% - 2.16px);
  width: 10.892px;
  translate: -50% -50%;
}

.cp-glyph-29 {
  position: absolute;
  height: 22.621px;
  left: calc(50% - 26.14px);
  top: calc(50% - 2.95px);
  width: 4.287px;
  translate: -50% -50%;
}

.cp-glyph-30 {
  position: absolute;
  height: 16.729px;
  left: calc(50% + 16.83px);
  top: calc(50% - .01px);
  width: 11.866px;
  translate: -50% -50%;
}

.culturepass-logo-lg {
  position: absolute;
  display: contents;
  left: calc(50% + .07px);
  top: 50%;
  translate: -50% -50%;
}

.culturepass-block-lg {
  display: flex;
  height: 132.986px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.calendar-icon-box {
  position: absolute;
  inset: -4.82% -5.35%;
}

.calendar-glyph {
  position: absolute;
  inset: 8.33% 12.5%;
}

.lucidecalendar-2 {
  aspect-ratio: 24 / 24;
  height: 37.576px;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
}

.event-date-title-2 {
  line-height: normal;
  margin-bottom: 0;
  font-size: 15.013px;
  font-weight: 700;
  white-space: nowrap;
}

.session-1-300pm-500pm-sgt-2 {
  line-height: normal;
  margin-bottom: 0;
  color: #8f8f8f;
  font-size: 8.57px;
  white-space: nowrap;
}

.session-2-530pm-730pm-sgt-2 {
  line-height: normal;
  color: #8f8f8f;
  font-size: 8.57px;
  white-space: nowrap;
}

.date-2 {
  align-content: stretch;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.lucidemap-pin-2 {
  position: relative;
  flex-shrink: 0;
  width: 37.576px;
  height: 37.576px;
}

.details-3 {
  align-content: stretch;
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.event-details-list-lg {
  display: flex;
  height: 46.601px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.details-4 {
  background-color: #efefef;
  align-content: stretch;
  filter: drop-shadow(10px 3px 7.4px rgba(0,0,0,0.25));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 24px;
  position: relative;
  width: 100%;
}

.event-details-lg {
  display: flex;
  height: 98.264px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.signup-cta-section {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
}

.page-body-lg {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 46px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
}

.share-the-love-2 {
  word-break: break-word;
  font-family: "Jersey 25", sans-serif;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #f35933;
  font-size: 40px;
  text-align: center;
  white-space: nowrap;
}

.know-a-senior-whod-love-2 {
  word-break: break-word;
  font-family: "Hammersmith One", sans-serif;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #f35933;
  font-size: 16px;
  text-align: center;
  width: 100%;
}

.facebook-label-lg {
  position: absolute;
  border-style: solid;
  border-width: 2px;
  border-color: #19125340;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
}

.facebook-3 {
  word-break: break-word;
  font-family: "Hammersmith One", sans-serif;
  line-height: normal;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.facebook-button-lg {
  background-color: #0865ff;
  align-content: stretch;
  display: flex;
  gap: 4px;
  align-items: center;
  padding-inline: 8px;
  padding-block: 6px;
  position: relative;
  border-radius: 18px;
  flex-shrink: 0;
}

.share-app-label-lg {
  position: absolute;
  border-style: solid;
  border-width: 2px;
  border-color: #254d0f40;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
}

.whatsapp-button-lg {
  background-color: #25d366;
  align-content: stretch;
  display: flex;
  gap: 4px;
  align-items: center;
  padding-inline: 8px;
  padding-block: 6px;
  position: relative;
  border-radius: 18px;
  flex-shrink: 0;
}

.telegram-glyph-lg {
  position: absolute;
  inset: 17.97% 8.92% .78% 7.33%;
}

.telegram-inner-lg {
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.telegram-button-lg {
  background-color: #28a7e8;
  align-content: stretch;
  display: flex;
  gap: 4px;
  align-items: center;
  padding-inline: 8px;
  padding-block: 6px;
  position: relative;
  border-radius: 18px;
  flex-shrink: 0;
}

.copy-glyph-lg {
  position: absolute;
  inset: 7.82% 7.82% .77%;
}

.copy-link-inner-lg {
  overflow: clip;
  position: relative;
  width: 16px;
  height: 16px;
}

.copy-link-lg {
  background-color: #768b91;
  align-content: stretch;
  display: flex;
  gap: 4px;
  align-items: center;
  padding-inline: 8px;
  padding-block: 6px;
  position: relative;
  border-radius: 18px;
  flex-shrink: 0;
}

.share-buttons-lg {
  align-content: stretch;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.reach-out-at-2 {
  font-family: "Hammersmith One", sans-serif;
  line-height: normal;
  font-size: 14px;
}

.infoimpactcolliderscom-2 {
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  cursor: pointer;
  text-decoration-thickness: from-font;
  text-decoration-style: solid;
  font-family: "Hammersmith One", sans-serif;
  line-height: normal;
  font-size: 14px;
  text-decoration-line: underline;
}

.reach-out-atinfoimpactcolliderscomfor-general-enquiries-2 {
  word-break: break-word;
  font-family: "Jersey 25", sans-serif;
  line-height: 0;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  color: #69645b;
  font-size: 0;
  width: 417px;
}

.share-the-love-section-2 {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding-block: 80px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
}

.contact-us-2 {
  word-break: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 12px;
  text-align: right;
  color: #fff;
  white-space: nowrap;
  font-variation-settings: "wght" 600;
}

.footer-columns-lg {
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.footer-2 {
  background-size: 183px 183px;
  background-position: 0 0;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding-inline: 80px;
  padding-block: 40px;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("images/footer-photo.png");
}

.desktop-view-wrapper {
  display: none;
  flex-direction: column;
  background-color: #eadfcb;
  min-height: 100vh;
  width: 100%;
}

@media (min-width: 768px) {
  .mobile-view-wrapper {
    display: none;
  }

  .desktop-view-wrapper {
    display: flex;
  }

}

/* ============================================================
   What to Expect — alternating timeline with scroll-drawn line
   ============================================================ */

.wte {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto -28px;
  padding: 64px 24px 0;
}

.wte-heading {
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  color: #f35933;
  font-size: 32px;
  text-align: center;
  margin: 0 0 24px;
}

.wte-timeline {
  position: relative;
}

.wte-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* z-index 1 threads the needle: above the Personal Archive band's
     background (a later positioned sibling at z-auto), so the white
     tail shows on the orange — but tied with the .wte-step blocks
     (also z-index 1) which come later in the DOM, so the step text and
     its gradient backing still paint over the line for readability */
  z-index: 1;
}

.wte-line-path {
  fill: none;
  stroke: #f35933;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 14 14;
}

.wte-step {
  position: relative;
  z-index: 1;
  padding: 72px 0;
}

.wte-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}

.wte-row > .wte-media {
  display: flex;
}

.wte-row > .wte-media:first-child {
  justify-content: flex-end;
}

.wte-row > .wte-media:last-child {
  justify-content: flex-start;
}

.wte-media {
  position: relative;
  width: 380px;
  height: 240px;
  flex: 0 0 auto;
}

.wte-photo {
  position: absolute;
  top: 50%;
  width: 320px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background: #eadfcb;
  z-index: 2;
}

.wte-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wte-deco {
  position: absolute;
  top: 50%;
  width: 150px;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.2));
}

.wte-media--peek-left .wte-deco {
  left: 0;
  transform: translateY(-50%) rotate(-8deg);
}

.wte-media--peek-left .wte-photo {
  left: 55px;
  transform: translateY(-50%) rotate(-3deg);
}

.wte-media--peek-right .wte-deco {
  right: 0;
  transform: translateY(-50%) rotate(8deg);
}

.wte-media--peek-right .wte-photo {
  right: 55px;
  transform: translateY(-50%) rotate(3deg);
}

.wte-deco--scratch {
  width: 135px;
}

.wte-deco--mixtape {
  width: 245px;
}

.wte-deco--payphone {
  width: 150px;
}

.wte-deco--paint-palette {
  width: 220px;
}

.wte-media--peek-left .wte-deco--mixtape {
  left: 15px;
  transform: translateY(-46%) rotate(-15deg);
}

.wte-media--peek-left:has(.wte-deco--mixtape) .wte-photo {
  left: 75px;
}

.wte-dot-col {
  display: flex;
  justify-content: center;
}

.wte-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f35933;
}

.wte-text {
  padding-top: 2px;
}

.wte-row > .wte-text:first-child {
  text-align: right;
}

.wte-row > .wte-text:last-child {
  text-align: left;
}

.wte-title {
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  color: #f35933;
  font-size: 30px;
  margin: 0 0 10px;
}

.wte-desc {
  font-family: "Hammersmith One", sans-serif;
  color: #69645b;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.wte-tail {
  height: 100px;
}

/* Reveal is only applied once JS has run (see script.js), so the section
   is fully visible for anyone without JavaScript enabled. Both pieces
   are driven by the same "wte-line-reached" class, toggled in
   updateDraw() at the exact scroll progress where the drawn line
   reaches that step's dot — and removed again on the way back up, so
   scrolling past a step and back undoes it just as it played. */
/* Both the photo and the text pop in like a speech bubble growing out
   of the dot: scale starts near zero and anchors (transform-origin)
   from whichever side actually touches the dot, so each one reads as
   "coming from" the line rather than just zooming in from its own
   center. Media and text sit on opposite sides of the dot within a
   row, so their anchors mirror each other. */
.wte-js .wte-media,
.wte-js .wte-text {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wte-row > .wte-media:first-child {
  transform-origin: right center;
}

.wte-row > .wte-media:last-child {
  transform-origin: left center;
}

.wte-row > .wte-text:first-child {
  transform-origin: right center;
}

.wte-row > .wte-text:last-child {
  transform-origin: left center;
}

.wte-js .wte-step.wte-line-reached .wte-media,
.wte-js .wte-step.wte-line-reached .wte-text {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .wte-js .wte-media,
  .wte-js .wte-text {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .wte-line {
    clip-path: none;
  }
}

@media (max-width: 767px) {
  .wte-line-path {
    stroke-width: 3;
    stroke-dasharray: 8 8;
  }

  .wte {
    padding: 40px 16px 0;
  }

  .wte-heading {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .wte-step {
    padding: 32px 0;
  }

  /* Stack media → dot → text in one centered column instead of the
     desktop's alternating side-by-side layout. `order` re-arranges the
     visual sequence without touching DOM/reading order, so items whose
     markup puts the text first (the alternating desktop rows) still show
     media on top here. */
  .wte-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    justify-items: center;
  }

  .wte-media {
    order: 1;
  }

  .wte-dot-col {
    order: 2;
  }

  .wte-text {
    order: 3;
  }

  .wte-row > .wte-media:first-child,
  .wte-row > .wte-media:last-child {
    justify-content: center;
  }

  .wte-row > .wte-text:first-child,
  .wte-row > .wte-text:last-child {
    text-align: center;
  }

  .wte-title {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .wte-desc {
    font-size: 13px;
  }

  .wte-dot {
    width: 14px;
    height: 14px;
  }

  .wte-media {
    width: 100%;
    max-width: 340px;
    height: 215px;
  }

  .wte-photo {
    width: 82%;
  }

  .wte-deco {
    width: 38%;
  }

  .wte-deco--scratch {
    width: 35%;
  }

  .wte-deco--mixtape {
    width: 62%;
  }

  .wte-deco--paint-palette {
    width: 56%;
  }

  .wte-media--peek-left .wte-photo {
    left: 16%;
  }

  .wte-media--peek-right .wte-photo {
    right: 16%;
  }

  .wte-media--peek-left .wte-deco--mixtape {
    left: 3.5%;
  }

  .wte-media--peek-left:has(.wte-deco--mixtape) .wte-photo {
    left: 26%;
    width: 70%;
  }

  /* A soft cream matte behind the title + description, fading out toward
     the edges, so the line stays hidden right behind the readable text
     but fades back into view as it continues past it — rather than being
     hard-cut by a solid box. */
  .wte-text {
    position: relative;
    background: radial-gradient(
      ellipse 80% 90% at 50% 50%,
      #eadfcb 0%,
      #eadfcb 45%,
      rgba(234, 223, 203, 0) 78%
    );
    padding: 14px 18px 22px;
  }
}

/* Orange banner wrapper for "Your Personal Archive": the old version
   relied on a separately-flowed background layer nudged into place with
   large negative margins hand-calibrated to the exact pixel height of
   the text above it. Any change to that text's rendered height threw
   the whole thing out of alignment. Giving the banner its own
   background color and letting it size around its actual content
   sidesteps that fragility entirely. */
.archive-banner {
  width: 100%;
  background-color: #f35933;
  display: flex;
  justify-content: center;
  padding: 28px 24px 40px;
}

.archive-banner-inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.archive-banner--desktop .archive-banner-inner {
  max-width: 900px;
  gap: 20px;
}

.archive-banner--desktop {
  padding: 40px 80px 56px;
}

/* Orange band for the About section: same fragility as the personal
   archive banner previously had (a separately-flowed background layer
   nudged into place with a negative margin hand-calibrated to the exact
   pixel height of the content above it) — replaced with a background
   color on a container that just sizes to its own content. The walkman
   graphic and photo are pulled up with a negative margin so they still
   bleed up over the top edge into the cream section above, the way the
   original design intended, but that overlap is now self-contained
   (based on the image's own fixed height) rather than chained to the
   text's height too. */
.about-band {
  width: 100%;
  background-color: #f35933;
  display: flex;
  justify-content: center;
  padding: 64px 24px 32px;
}

.about-band .about-image-frame {
  margin-top: -64px;
}

.about-band--desktop {
  padding: 40px 0 40px;
  position: relative;
  background-color: transparent;
}

.about-band--desktop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 415px;
  background-color: #f35933;
  z-index: 0;
}

.about-band--desktop .about-image-frame-2 {
  margin-top: 0;
}

/* Large monitors: scale the whole desktop layout up proportionally past
   its normal design width, instead of just centering it with empty
   space on either side. This is exactly what browser zoom does, just
   applied automatically. Capped at 2x so it doesn't run away on
   ultrawide/4K displays. Because zoom scales real rendering geometry
   (not a visual trick), everything downstream — the negative-margin
   overlaps, the timeline's own getBoundingClientRect() measurements —
   sees the scaled-up layout and just works, the same as if the person
   had zoomed in themselves.
   Baseline is 1920px (not the 1440px laptop design width) — scaling
   from 1440 came out noticeably too large on big monitors; 1920 keeps
   the effect more subtle. */
/* Large screens: the shapes are deliberately anchored to the true
   viewport edges (see the crop-window comments below), which is correct
   behavior, but on a wide monitor that means a big gap between them and
   the polaroid cluster, which stays a fixed, compact size in the
   middle. Scaling the shapes themselves up (window and shape together,
   same ratio, so the same slice of each shape still shows) makes them
   reach further inward without touching their edge-anchoring at all. */
/* Reveal more of each shape through a wider crop window, rather than
   making the shapes themselves bigger. The previous attempt resized the
   shapes and .hero-shape-strip's own height, which cascaded into the polaroid's
   overlap margin and, from there, into the orange section's margin
   further down the same chain — introducing the gap-above-orange
   regression. Widening just the window leaves .hero-shape-strip's height, the
   shape's own size, and every negative margin downstream of it
   completely untouched; only which slice of the existing shape is
   visible changes. */
/* What to Expect: on big monitors this section was staying at its
   laptop-tuned size while everything around it had far more room,
   making it look small and insignificant. Scale it up ~1.3x — row
   width, fonts, photo/deco sizes, the dot, and the line itself — all
   proportionally, so the offsets that position decorations relative to
   the photo still land in the same relative spot. */
@media (min-width: 1280px) {
  .wte {
    max-width: 1500px;
  }

  .wte-heading {
    font-size: 56px;
  }

  .wte-row {
    max-width: 1300px;
    column-gap: 36px;
  }

  .wte-title {
    font-size: 38px;
  }

  .wte-desc {
    font-size: 20px;
  }

  .wte-media {
    width: 612px;
    height: 388px;
  }

  .wte-photo {
    width: 512px;
  }

  .wte-deco {
    width: 238px;
  }

  .wte-deco--scratch {
    width: 219px;
  }

  .wte-deco--mixtape {
    width: 394px;
  }

  .wte-deco--payphone {
    width: 244px;
  }

  .wte-deco--paint-palette {
    width: 356px;
  }

  .wte-media--peek-left .wte-photo {
    left: 85px;
  }

  .wte-media--peek-right .wte-photo {
    right: 85px;
  }

  .wte-media--peek-left .wte-deco--mixtape {
    left: 24px;
  }

  .wte-media--peek-left:has(.wte-deco--mixtape) .wte-photo {
    left: 110px;
  }

  .wte-dot {
    width: 28px;
    height: 28px;
  }

  .wte-line-path {
    stroke-width: 8;
    stroke-dasharray: 18 18;
  }

  .wte-step {
    padding: 90px 0;
  }

  .wte-tail {
    height: 130px;
  }
}

@media (min-width: 1280px) {
  .left-looping-shape-rotation-2 {
    width: 630px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-65%);
    overflow: visible;
  }

  .right-looping-shape-rotation-2 {
    width: 685px;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-32%);
    overflow: visible;
  }

  .loop-shape-left-box,
  .loop-shape-left-art,
  .left-rotating-shape-3 {
    width: 810px;
    height: 810px;
  }

  .loop-shape-right-box,
  .loop-shape-right-art,
  .right-rotating-shape-3 {
    width: 765px;
    height: 765px;
  }

  /* .hero-shape-strip was only a flex row to spread the two windows apart; now
     that they're positioned absolutely (anchored to the true edges, so
     they always bleed off-screen the way the crop was designed to),
     it just needs to hold the space for them. */
  .hero-shape-strip {
    position: relative;
  }
}

@media (min-width: 1920px) {
  html {
    zoom: min(calc(100vw / 1920px), 2);
  }
}

/* ============================================================
   Back to top button
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #f35933;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #d94a29;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.25s ease, visibility 0.25s;
    transform: none;
  }
}

/* ============================================================
   Polaroids: load-in, then a gentle continuous float — different
   duration/direction per photo so they drift independently rather
   than moving in lockstep.
   ============================================================ */
@keyframes archive-polaroid-in-a {
  0% {
    opacity: 0;
    transform: translateY(70px) rotate(-5deg);
    animation-timing-function: ease-out;
  }
  18% {
    opacity: 1;
  }
  32% {
    transform: translateY(-26px) rotate(2deg);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: translateY(12px) rotate(-1deg);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translateY(-6px) rotate(0.5deg);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(3px) rotate(-0.2deg);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: translateY(-1px) rotate(0.1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes archive-polaroid-in-b {
  0% {
    opacity: 0;
    transform: translateY(70px) rotate(5deg);
    animation-timing-function: ease-out;
  }
  18% {
    opacity: 1;
  }
  32% {
    transform: translateY(-26px) rotate(-3.5deg);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: translateY(12px) rotate(2deg);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translateY(-6px) rotate(-1deg);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(3px) rotate(0.5deg);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: translateY(-1px) rotate(-0.2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes archive-polaroid-in-c {
  0% {
    opacity: 0;
    transform: translateY(70px) rotate(-9deg);
    animation-timing-function: ease-out;
  }
  18% {
    opacity: 1;
  }
  32% {
    transform: translateY(-26px) rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: translateY(12px) rotate(-2deg);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translateY(-6px) rotate(1deg);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(3px) rotate(-0.5deg);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: translateY(-1px) rotate(0.2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes archive-float-a {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

@keyframes archive-float-b {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(14px);
  }
}

@keyframes archive-float-c {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-13px);
  }
}

.polaroid1-inner-lg,
.polaroid1-frame {
  z-index: 2;
  animation: archive-polaroid-in-a 0.65s linear both,
    archive-float-b 3s ease-in-out 0.65s infinite;
}

.polaroid2-inner-lg,
.polaroid2-frame {
  z-index: 1;
  animation: archive-polaroid-in-b 0.65s linear 0.23s both,
    archive-float-a 2.6s ease-in-out 0.88s infinite;
}

.polaroid3-inner-lg,
.polaroid3-frame {
  z-index: 1;
  animation: archive-polaroid-in-c 0.65s linear 0.46s both,
    archive-float-c 2.8s ease-in-out 1.11s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .polaroid2-inner-lg,
  .polaroid1-inner-lg,
  .polaroid3-inner-lg,
  .polaroid1-frame,
  .polaroid2-frame,
  .polaroid3-frame {
    animation: none;
  }
}

/* ============================================================
   Mobile hamburger menu (panel is injected by script.js)
   ============================================================ */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
  z-index: 40;
}

.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #eadfcb;
  border-bottom: 2px solid #000;
  padding: 76px 24px 20px;
  display: flex;
  flex-direction: column;
  transform: translateY(-105%);
  transition: transform 0.28s ease;
  z-index: 45;
}

.mobile-menu.is-open {
  transform: translateY(0);
}

.mobile-menu-link {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000;
  padding: 14px 4px;
  cursor: pointer;
}

.mobile-menu-link:last-child {
  border-bottom: none;
}

.mobile-menu-link.is-current {
  color: #f35933;
  font-weight: 700;
}

.mobile-menu-link.is-disabled {
  color: rgba(0, 0, 0, 0.35);
  cursor: default;
}

.mobile-menu-link.is-signup {
  margin-top: 10px;
  border: 1px solid #000;
  border-radius: 6px;
  text-align: center;
  padding: 12px;
  font-weight: 600;
}

.mobile-menu-link.is-signup:active {
  color: #f35933;
  border-color: #f35933;
}

/* Hamburger sits above the panel so it can also close it */
.mobile-view-wrapper .navigation-tab .lucidemenu {
  position: relative;
  z-index: 50;
}

@media (min-width: 768px) {
  .mobile-menu,
  .mobile-menu-overlay {
    display: none;
  }
}

/* ============================================================
   Your Personal Archive — stacked-card carousel with audio
   ============================================================ */
.pa {
  position: relative;
  width: 100%;
}

/* --- orange band (title area), card deck straddles its bottom edge --- */
.pa-band {
  position: relative;
  background-color: #f35933;
  padding: 64px 24px 330px;
  text-align: center;
}


.pa-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  color: #fff;
  margin: 0 0 10px;
}

.pa-sub {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  margin: 0;
}

/* --- stage: arrows + deck pulled up into the orange --- */
.pa-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
  margin: -300px auto 0;
  padding: 0 16px;
  max-width: 1320px;
}

.pa-arrow {
  appearance: none;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.pa-arrow:hover {
  transform: scale(1.12);
}

.pa-arrow:active {
  transform: scale(0.98);
}

/* --- the deck: three cards stacked under one paperclip --- */
.pa-deck {
  position: relative;
  display: grid;
  width: min(880px, 100%);
}

.pa-clip {
  position: absolute;
  top: -54px;
  right: 58px;
  width: 54px;
  z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.pa-card {
  grid-row: 1;
  grid-column: 1;
  background: #f3e9d8;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  padding: 30px;
  /* springy settle: slight overshoot on the way into place */
  transition:
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease;
}

.pa-pos-0 {
  transform: rotate(-1.8deg);
  z-index: 3;
  position: relative;
}

.pa-pos-1 {
  transform: rotate(1.6deg) translate(20px, 16px);
  z-index: 2;
  position: relative;
  background: #b4b0aa;
}

.pa-pos-2 {
  transform: rotate(-3.6deg) translate(-22px, 24px);
  z-index: 1;
  position: relative;
  background: #cec5b4;
}

/* back sheets read as blank paper */
.pa-card-inner {
  display: flex;
  gap: 30px;
  transition: opacity 0.2s ease;
}

.pa-pos-1 .pa-card-inner,
.pa-pos-2 .pa-card-inner {
  opacity: 0;
  pointer-events: none;
}

/* card lifted up out of the stack (phase 1 of the shuffle) */
.pa-lift {
  transform: translate(10px, -46%) rotate(4.5deg) !important;
  z-index: 9 !important;
  background: #f3e9d8 !important;
  transition:
    transform 0.21s cubic-bezier(0.35, 0.6, 0.45, 1),
    background-color 0.3s ease;
}

/* the airborne card keeps its content while in flight, even though its
   position class already says it belongs at the back of the stack */
.pa-lift .pa-card-inner {
  opacity: 1;
}

.pa-no-trans {
  transition: none !important;
}

/* --- card contents --- */
.pa-portrait {
  width: 258px;
  flex-shrink: 0;
  transform: rotate(0.8deg);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.25);
  align-self: flex-start;
}

.pa-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.pa-paper {
  flex: 1;
  min-width: 0;
  background: #fdfbf5;
  border-radius: 6px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
  padding: 24px 28px 18px;
  transform: rotate(-0.5deg);
  display: flex;
  flex-direction: column;
}

.pa-name,
.pa-topic {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #1c4a66;
}

.pa-name {
  font-size: 17px;
  margin: 0 0 12px;
}

.pa-topic {
  font-size: 15px;
  margin: 0 0 12px;
}

.pa-transcript {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: #3b3b3b;
  margin: 0 0 18px;
}

.pa-stamp {
  width: 64px;
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.pa-paper-footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
}

.pa-artist {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  color: #23486b;
  white-space: nowrap;
}

/* --- audio: red button that pops out a seek-slider player --- */
.pa-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pa-audio-hint {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: #4c4c4c;
  width: 76px;
  text-align: right;
}

.pa-audio.is-open .pa-audio-hint {
  display: none;
}

.pa-audio-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: #e02b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(224, 43, 43, 0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}

.pa-audio-btn:hover {
  transform: scale(1.07);
}

/* subtle pulse while playing */
.pa-audio.is-playing .pa-audio-btn {
  animation: pa-pulse 1.6s ease-in-out infinite;
}

@keyframes pa-pulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(224, 43, 43, 0.45); }
  50% { box-shadow: 0 6px 22px rgba(224, 43, 43, 0.75); }
}

.pa-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1ebdd;
  border-radius: 999px;
  max-width: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
  transition:
    max-width 0.4s ease,
    opacity 0.3s ease,
    padding 0.4s ease;
}

.pa-audio.is-open .pa-player {
  max-width: 340px;
  opacity: 1;
  padding: 8px 14px;
}

.pa-player-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #e02b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* play/pause icon swap */
.pa-icon-pause { display: none; }
.pa-audio.is-playing .pa-icon-pause { display: block; }
.pa-audio.is-playing .pa-icon-play { display: none; }

.pa-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 5px;
  border-radius: 999px;
  background: #d9cfba;
  outline: none;
  cursor: pointer;
  accent-color: #e02b2b;
}

.pa-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e02b2b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pa-seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e02b2b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pa-time {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: #4c4c4c;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* fixed width: digits ticking over must never resize the pill */
  min-width: 74px;
  text-align: center;
  flex-shrink: 0;
}

/* --- dots --- */
.pa-dots {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 104px 0 76px;
}

.pa-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: none;
  background: #f35933;
  opacity: 0.32;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: relative;
}

/* invisible enlarged hit area for easier tapping */
.pa-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.pa-dot.is-active {
  opacity: 1;
  transform: scale(1.1);
}

/* ------------------------------------------------------------
   Personal Archive — responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pa-stage {
    gap: 0;
    padding: 0 12px;
  }

  .pa-arrow {
    position: absolute;
    top: 34%;
    z-index: 7;
  }

  .pa-arrow--prev { left: -4px; }
  .pa-arrow--next { right: -4px; }

  .pa-arrow svg {
    width: 18px;
    height: 32px;
  }
}

@media (max-width: 767px) {
  .pa-band {
    padding: 44px 20px 360px;
  }

  .pa-stage {
    margin-top: -330px;
  }

  .pa-card {
    padding: 20px;
  }

  .pa-card-inner {
    flex-direction: column;
    gap: 20px;
  }

  .pa-portrait {
    width: min(68%, 230px);
    margin: 0 auto;
  }

  .pa-paper {
    padding: 18px 18px 14px;
  }

  .pa-transcript {
    font-size: 12px;
  }

  .pa-clip {
    top: -42px;
    right: 26px;
    width: 42px;
  }

  .pa-paper-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pa-audio {
    justify-content: flex-end;
  }

  .pa-audio.is-open {
    justify-content: space-between;
  }

  .pa-player {
    flex: 1;
    min-width: 0;
  }

  .pa-audio.is-open .pa-player {
    max-width: none;
  }

  .pa-seek {
    width: auto;
    flex: 1;
    min-width: 60px;
  }

  .pa-dots {
    padding: 78px 0 56px;
  }
}

/* white half of the What-to-Expect line (below the archive band's top
   edge) — geometry and dashes come from .wte-line-path on the twin */
.wte-line-path--white {
  stroke: #fff;
}

/* ============================================================
   Pinned header on the sponsor / Pay-it-Forward pages.
   On the homepage the headers are position: sticky inside wrappers
   that span the whole page. On these pages the wrappers contain ONLY
   the header, so sticky has no scroll range to work within — pin the
   headers to the viewport instead, and pad the page content down by
   the header's height so nothing starts hidden underneath it.
   ============================================================ */
.sponsor-page .mobile-header,
.payitforward-page .mobile-header,
.newsroom-page .mobile-header,
.sponsor-page .desktop-header,
.payitforward-page .desktop-header,
.newsroom-page .desktop-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #eadfcb;
  /* the homepage gives .desktop-header height:100% (of its wrapper);
     as position:fixed that resolves against the VIEWPORT, turning the
     header into a full-screen cream sheet that hides the page once you
     scroll. Size it to its content instead. */
  height: auto;
}

/* only one header is laid out per breakpoint, but both wrappers exist —
   hide the fixed header along with its wrapper */
@media (max-width: 767px) {
  .sponsor-page .desktop-view-wrapper .desktop-header,
  .payitforward-page .desktop-view-wrapper .desktop-header,
  .newsroom-page .desktop-view-wrapper .desktop-header {
    display: none;
  }
}

@media (min-width: 768px) {
  .sponsor-page .mobile-view-wrapper .mobile-header,
  .payitforward-page .mobile-view-wrapper .mobile-header,
  .newsroom-page .mobile-view-wrapper .mobile-header {
    display: none;
  }
}

.sponsor-page .sp-main,
.payitforward-page .pf-main,
.newsroom-page .nr-main {
  padding-top: 77px; /* height of the pinned header */
  padding-bottom: 40px;
}