.hapo-about-timeline {
  box-sizing: border-box;
  min-width: 0;
  padding: 112px 24px 118px;
  background: #fff;
  color: #09090b;
  font-family: "Manrope", sans-serif;
}
.hapo-about-timeline *, .hapo-about-timeline *::before, .hapo-about-timeline *::after { box-sizing: border-box; }
.hapo-about-timeline--width-full { width: auto; margin-inline: calc(50% - 50vw); }
.hapo-about-timeline--width-container { width: 100%; margin-inline: 0; }
.hapo-about-timeline__inner { width: min(100%, 1440px); margin-inline: auto; }
.hapo-about-timeline__header { max-width: 1150px; margin: 0 auto 60px; text-align: center; }
.hapo-about-timeline__header h2, .hapo-about-timeline__header h3 { position: relative; margin: 0 0 25px; padding-bottom: 33px; font-size: 42px; font-weight: 800; line-height: 1.25; letter-spacing: -.035em; text-transform: uppercase; }
.hapo-about-timeline__header h2::after, .hapo-about-timeline__header h3::after { position: absolute; bottom: 0; left: 50%; width: 150px; height: 4px; background: #07c871; content: ""; transform: translateX(-50%); }
.hapo-about-timeline__header p { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.55; }
.hapo-about-timeline__header strong { color: #078757; font-weight: 700; }
.hapo-about-timeline__description-end { display: block; }
.hapo-about-timeline__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 60px; row-gap: 54px; margin: 0; padding: 0; list-style: none; }
.hapo-about-timeline .hapo-about-timeline__item { position: relative; min-width: 0; margin: 0; text-align: center; list-style: none; }
.hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::before { position: absolute; z-index: 0; top: 23px; left: 50%; width: calc(100% + 60px); height: 2px; background: #12c96d; content: ""; }
.hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::after { position: absolute; z-index: 1; top: 11px; right: -38px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 13px solid #0cbf70; content: ""; }
.hapo-about-timeline__period { position: relative; z-index: 2; display: inline-grid; place-items: center; min-width: 96px; min-height: 49px; margin: 0 0 16px; padding: 9px 24px; border-radius: 8px; background: #078757; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hapo-about-timeline__media { display: grid; place-items: center; width: 100%; aspect-ratio: 315 / 224; margin-bottom: 13px; overflow: hidden; border-radius: 10px; background: #e9f3ec; }
.hapo-about-timeline__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hapo-about-timeline__image-prompt { padding: 16px; color: #2f5a43; font-size: 14px; }
.hapo-about-timeline__item h3 { margin: 0 0 11px; color: #09090b; font-size: 18px; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.hapo-about-timeline__item-description { margin: 0; color: #222; font-size: 14px; font-weight: 500; line-height: 1.45; }
.hapo-about-timeline__empty { margin: 0; text-align: center; }

@media (max-width: 1100px) {
  .hapo-about-timeline { padding-block: 85px; }
  .hapo-about-timeline__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 34px; }
  .hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::before, .hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::after { display: none; }
  .hapo-about-timeline__description-end { display: inline; }
}

@media (max-width: 600px) {
  .hapo-about-timeline { padding: 62px 16px 70px; }
  .hapo-about-timeline__header { margin-bottom: 38px; }
  .hapo-about-timeline__header h2, .hapo-about-timeline__header h3 { margin-bottom: 20px; padding-bottom: 20px; font-size: 29px; }
  .hapo-about-timeline__header h2::after, .hapo-about-timeline__header h3::after { width: 110px; height: 3px; }
  .hapo-about-timeline__header p { font-size: 16px; line-height: 1.55; }
  .hapo-about-timeline__items { grid-template-columns: 1fr; gap: 42px; }
  .hapo-about-timeline__period { min-height: 44px; margin-bottom: 14px; font-size: 16px; }
  .hapo-about-timeline__item h3 { font-size: 17px; }
  .hapo-about-timeline__item-description { font-size: 14px; }
}

/* Motion, 2026-10-20 (trial; Builder toggle "Motion", default on).
   1) the connector draws left to right as the section enters, the year badges light up in turn,
      then a light travels along the line every 8s and the latest badge carries a soft "now" ring;
   2) hover lifts a card, zooms its photo and lights the line leading to it;
   3) faint contour lines drift behind the content, with a mint glow behind the title;
   4) milestones rise in once, staggered (JS adds .is-armed/.is-inview; without JS all is visible). */
.hapo-about-timeline--motion { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.hapo-about-timeline--motion > .hapo-about-timeline__inner { position: relative; z-index: 1; }
.hapo-about-timeline__decor { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hapo-about-timeline__halo { position: absolute; top: 40px; left: 50%; width: min(900px, 92vw); height: 300px; border-radius: 50%; background: radial-gradient(ellipse, rgb(7 200 113 / 10%) 0, rgb(7 200 113 / 3%) 45%, transparent 70%); transform: translateX(-50%); }
.hapo-about-timeline__contours { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); fill: none; stroke: rgb(0 160 85 / 13%); stroke-width: 1.2; animation: hapo-timeline-contours 34s ease-in-out infinite alternate; }
@keyframes hapo-timeline-contours { 0% { transform: translate3d(-18px, 0, 0); } 100% { transform: translate3d(18px, -14px, 0); } }

/* Connector: travelling light (layered over the green line) */
.hapo-about-timeline--motion .hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::before {
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(232 255 241 / 95%), rgb(255 255 255 / 0)) -80px 0 / 80px 100% no-repeat, #12c96d;
  transform-origin: left center; transition: transform .8s cubic-bezier(.25, .7, .3, 1), background-color .3s ease, box-shadow .3s ease;
  animation: hapo-timeline-flow 8s linear infinite;
}
.hapo-about-timeline--motion .hapo-about-timeline__item:nth-child(2)::before { animation-delay: 1.1s; }
.hapo-about-timeline--motion .hapo-about-timeline__item:nth-child(3)::before { animation-delay: 2.2s; }
@keyframes hapo-timeline-flow { 0% { background-position: -80px 0, 0 0; } 14%, 100% { background-position: calc(100% + 80px) 0, 0 0; } }
.hapo-about-timeline--motion .hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::after { transition: opacity .4s ease, transform .4s ease; }

/* "Now" ring on the latest milestone */
.hapo-about-timeline--motion .hapo-about-timeline__item:last-child .hapo-about-timeline__period::before { position: absolute; inset: -5px; border: 2px solid rgb(7 200 113 / 55%); border-radius: 11px; content: ""; pointer-events: none; animation: hapo-timeline-now 2.6s ease-out infinite; }
@keyframes hapo-timeline-now { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12, 1.35); } }

/* Hover */
.hapo-about-timeline--motion .hapo-about-timeline__item { transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .7s ease; }
.hapo-about-timeline--motion .hapo-about-timeline__media img { transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.hapo-about-timeline--motion .hapo-about-timeline__media { transition: box-shadow .45s ease; }
.hapo-about-timeline--motion .hapo-about-timeline__item h3 { transition: color .3s ease; }
.hapo-about-timeline--motion .hapo-about-timeline__period { transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .hapo-about-timeline--motion .hapo-about-timeline__item:hover { transform: translateY(-6px); }
  .hapo-about-timeline--motion .hapo-about-timeline__item:hover .hapo-about-timeline__media { box-shadow: 0 18px 36px rgb(0 90 50 / 16%); }
  .hapo-about-timeline--motion .hapo-about-timeline__item:hover .hapo-about-timeline__media img { transform: scale(1.04); }
  .hapo-about-timeline--motion .hapo-about-timeline__item:hover h3 { color: #078757; }
  .hapo-about-timeline--motion .hapo-about-timeline__item:hover .hapo-about-timeline__period { background-color: #0aa86a; box-shadow: 0 8px 20px rgb(7 135 87 / 28%); }
  .hapo-about-timeline--motion .hapo-about-timeline__item:has(+ .hapo-about-timeline__item:hover)::before { background-color: #0ee07e; box-shadow: 0 0 10px rgb(14 224 126 / 55%); }
  .hapo-about-timeline--motion .hapo-about-timeline__item:hover::before { box-shadow: none; }
}

/* One-time reveal (JS arms it; .is-inview plays it). Keyframes with backwards fill only, so
   hover transitions stay instant afterwards. */
.hapo-about-timeline.is-armed:not(.is-inview) .hapo-about-timeline__item { opacity: 0; }
.hapo-about-timeline.is-armed:not(.is-inview) .hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::before { transform: scaleX(0); }
.hapo-about-timeline.is-armed:not(.is-inview) .hapo-about-timeline__item:not(:last-child):not(:nth-child(4n))::after { opacity: 0; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item { animation: hapo-timeline-rise .7s cubic-bezier(.2, .7, .3, 1) backwards; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(2) { animation-delay: .15s; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(3) { animation-delay: .3s; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(4) { animation-delay: .45s; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(n+5) { animation-delay: .6s; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(1):not(:last-child)::before { animation: hapo-timeline-draw .8s cubic-bezier(.25, .7, .3, 1) .3s backwards, hapo-timeline-flow 8s linear 2s infinite; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(2):not(:last-child)::before { animation: hapo-timeline-draw .8s cubic-bezier(.25, .7, .3, 1) .55s backwards, hapo-timeline-flow 8s linear 3.1s infinite; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(3):not(:last-child)::before { animation: hapo-timeline-draw .8s cubic-bezier(.25, .7, .3, 1) .8s backwards, hapo-timeline-flow 8s linear 4.2s infinite; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(1):not(:last-child)::after { animation: hapo-timeline-arrow .4s ease .95s backwards; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(2):not(:last-child)::after { animation: hapo-timeline-arrow .4s ease 1.2s backwards; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(3):not(:last-child)::after { animation: hapo-timeline-arrow .4s ease 1.45s backwards; }
.hapo-about-timeline.is-inview .hapo-about-timeline__period { animation: hapo-timeline-badge .7s ease-out .1s backwards; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(2) .hapo-about-timeline__period { animation-delay: .85s; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(3) .hapo-about-timeline__period { animation-delay: 1.1s; }
.hapo-about-timeline.is-inview .hapo-about-timeline__item:nth-child(4) .hapo-about-timeline__period { animation-delay: 1.35s; }
@keyframes hapo-timeline-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hapo-timeline-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hapo-timeline-arrow { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes hapo-timeline-badge { 0% { background-color: #078757; transform: scale(1); } 45% { background-color: #10c473; transform: scale(1.07); box-shadow: 0 0 0 6px rgb(16 196 115 / 18%); } 100% { background-color: #078757; transform: scale(1); box-shadow: none; } }

@media (max-width: 600px) {
  .hapo-about-timeline__contours { inset: 0; width: 100%; height: 100%; stroke: rgb(0 160 85 / 9%); }
}
@media (prefers-reduced-motion: reduce) {
  .hapo-about-timeline--motion *, .hapo-about-timeline--motion *::before, .hapo-about-timeline--motion *::after, .hapo-about-timeline__contours { animation: none !important; transition: none !important; }
  .hapo-about-timeline--motion .hapo-about-timeline__item:last-child .hapo-about-timeline__period::before { display: none; }
}

/* Mobile, from the supplied 375px About-page design (2026-10-20): year badge in a 64px left
   column (each word on its own line), a grey dashed rail joining the badges, and the photo,
   title and description in the right column. Overrides the desktop connector and its motion. */
@media (max-width: 600px) {
  .hapo-about-timeline { padding: 30px 16px 65px; }
  .hapo-about-timeline__header { margin-bottom: 24px; }
  .hapo-about-timeline__header h2, .hapo-about-timeline__header h3 { margin-bottom: 16px; padding-bottom: 18px; font-size: 25.5px; letter-spacing: -.01em; }
  .hapo-about-timeline__header h2::after, .hapo-about-timeline__header h3::after { width: 80px; height: 4px; }
  .hapo-about-timeline__header p { font-size: 16px; line-height: 21.5px; }
  .hapo-about-timeline__description-end { display: block; }
  .hapo-about-timeline__items { gap: 13px; }
  .hapo-about-timeline .hapo-about-timeline__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .hapo-about-timeline__period { display: block; grid-column: 1; grid-row: 1 / span 3; width: 64px; min-width: 0; min-height: 37px; margin: 0; padding: 8px 6px; border-radius: 6px; background: linear-gradient(180deg, #10c97a, #07a05f); font-size: 16px; line-height: 22px; text-align: center; white-space: normal; word-spacing: 64px; }
  .hapo-about-timeline__media { grid-column: 2; margin: 0; aspect-ratio: 264 / 191; border-radius: 8px; }
  .hapo-about-timeline__item h3 { grid-column: 2; margin: 12px 0 3px; font-size: 16px; }
  .hapo-about-timeline__item-description { grid-column: 2; font-size: 15px; line-height: 18.5px; }
  .hapo-about-timeline.hapo-about-timeline.hapo-about-timeline .hapo-about-timeline__item:not(:last-child):not(:nth-child(999))::before { position: absolute; z-index: 0; top: 0; bottom: -13px; left: 31.5px; display: block; width: 1px; height: auto; background: repeating-linear-gradient(180deg, #c9c9c9 0 8px, transparent 8px 12px); box-shadow: none; transform: none; animation: none; }
  .hapo-about-timeline.hapo-about-timeline.hapo-about-timeline .hapo-about-timeline__item:not(:last-child):not(:nth-child(999))::after { display: none; }
}