@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

.pm-timeline, .pm-timeline * { box-sizing: border-box; }
.pm-timeline {
  --pm-deep: #14251a; --pm-green: #2D4D32; --pm-accent: #1C8161;
  --pm-mint: #80d6a8; --pm-paper: #eef5ef; --pm-line: rgba(189,224,200,.18);
  position: relative; isolation: isolate; overflow: clip; width: 100%;
  padding: clamp(35px,5vw,70px) clamp(20px,5vw,72px) 70px;
  color: var(--pm-paper); background: transparent;
  font-family: Manrope,Arial,sans-serif; line-height: 1.5;
}
.pm-timeline__ambient { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.pm-timeline__orb { position:absolute; width:min(420px,38vw); aspect-ratio:1; border-radius:50%; filter:blur(120px); opacity:.045; background:var(--pm-accent); }
.pm-timeline__orb--one { top:5%; left:-18%; }.pm-timeline__orb--two { top:58%; right:-20%; background:var(--pm-mint); }
.pm-timeline__header { max-width:840px; margin:0 auto clamp(95px,12vw,170px); text-align:center; }
.pm-timeline__eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--pm-mint); letter-spacing:.24em; font-size:11px; font-weight:700; }
.pm-timeline__eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
.pm-timeline__header h2 { margin:24px 0 25px; font-size:clamp(38px,6vw,76px); line-height:1.05; letter-spacing:-.045em; font-weight:500; }
.pm-timeline__header h2 em { color:var(--pm-mint); font-family:"Playfair Display",serif; font-weight:600; }
.pm-timeline__header p { max-width:660px; margin:auto; color:rgba(238,245,239,.62); font-size:clamp(15px,1.5vw,18px); }
.pm-timeline__scroll-hint { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:42px; color:rgba(238,245,239,.42); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.pm-timeline__scroll-hint i { width:1px; height:35px; background:linear-gradient(var(--pm-mint),transparent); animation:pm-pulse 2s ease-in-out infinite; }
@keyframes pm-pulse { 50% { transform:scaleY(.55); transform-origin:top; opacity:.4; } }
.pm-timeline__stage { position:relative; max-width:1180px; margin:auto; }
.pm-timeline__rail { position:absolute; z-index:0; top:28px; bottom:28px; left:50%; width:24px; height:calc(100% - 56px); transform:translateX(-50%); overflow:visible; }
.pm-timeline__rail-base,.pm-timeline__rail-progress { fill:none; vector-effect:non-scaling-stroke; stroke-width:1; }
.pm-timeline__rail-base { stroke:rgba(128,214,168,.16); stroke-dasharray:3 7; }
.pm-timeline__rail-progress { stroke:url(#pm-line-gradient); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; filter:url(#pm-line-glow); }
.pm-timeline__list { list-style:none; padding:0; margin:0; }
.pm-milestone { position:relative; display:grid; grid-template-columns:1fr 120px 1fr; align-items:center; min-height:430px; perspective:1400px; }
.pm-milestone:nth-child(odd) .pm-card { grid-column:1; }.pm-milestone:nth-child(even) .pm-card { grid-column:3; }
.pm-milestone__node { position:absolute; z-index:3; left:50%; top:50%; width:22px; height:22px; border:1px solid rgba(128,214,168,.55); border-radius:50%; transform:translate(-50%,-50%); background:#14251a; box-shadow:0 0 0 8px rgba(28,129,97,.07),0 0 30px rgba(128,214,168,.12); }
.pm-milestone__node i { position:absolute; inset:6px; border-radius:50%; background:rgba(128,214,168,.28); transition:.4s; }
.pm-milestone.is-active .pm-milestone__node { border-color:var(--pm-mint); box-shadow:0 0 0 9px rgba(28,129,97,.13),0 0 35px rgba(128,214,168,.32); }
.pm-milestone.is-active .pm-milestone__node i { background:var(--pm-mint); }
.pm-card { position:relative; overflow:hidden; width:min(100%,470px); min-height:235px; padding:27px 30px 25px; border:1px solid rgba(197,226,205,.1); border-radius:22px; outline:none; background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); box-shadow:0 28px 75px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.065); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transform-style:preserve-3d; transition:border-color .45s,box-shadow .45s,background .45s; }
.pm-milestone:nth-child(odd) .pm-card { justify-self:end; }.pm-milestone:nth-child(even) .pm-card { justify-self:start; }
.pm-card:hover,.pm-card:focus-visible,.pm-card.is-open { border-color:rgba(128,214,168,.28); background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(28,129,97,.035)); box-shadow:0 42px 100px rgba(0,0,0,.22),0 0 70px rgba(28,129,97,.045),inset 0 1px rgba(255,255,255,.09); }
.pm-card__shine { position:absolute; inset:-1px; opacity:0; pointer-events:none; border-radius:inherit; background:radial-gradient(350px circle at var(--pm-x,50%) var(--pm-y,50%),rgba(128,214,168,.16),transparent 45%); transition:opacity .3s; }
.pm-card:hover .pm-card__shine,.pm-card:focus .pm-card__shine { opacity:1; }
.pm-card__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.pm-card__index { color:rgba(128,214,168,.35); font-size:12px; font-weight:700; letter-spacing:.14em; }
.pm-card__tag { padding:5px 9px; border:1px solid rgba(128,214,168,.14); border-radius:30px; color:rgba(128,214,168,.68); font-size:8px; font-weight:700; letter-spacing:.17em; }
.pm-card__icon { position:absolute; top:64px; right:28px; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(128,214,168,.18); border-radius:14px; background:rgba(28,129,97,.09); }
.pm-card__icon svg { width:23px; fill:var(--pm-mint); opacity:.85; }
.pm-card h3 { margin:0 60px 5px 0; font-size:clamp(22px,2.2vw,29px); font-weight:600; letter-spacing:-.03em; }
.pm-card__summary { margin:0; color:rgba(238,245,239,.52); font-size:13px; }
.pm-card__detail { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .35s,margin .45s; }
.pm-card__detail > div { overflow:hidden; }.pm-card__detail p { margin:16px 0 10px; padding-top:15px; border-top:1px solid rgba(128,214,168,.12); color:rgba(238,245,239,.72); font-size:13px; line-height:1.7; }
.pm-card__detail span { color:var(--pm-mint); font-size:10px; letter-spacing:.06em; }
.pm-card:hover .pm-card__detail,.pm-card:focus .pm-card__detail,.pm-card.is-open .pm-card__detail { grid-template-rows:1fr; opacity:1; }
.pm-card__action { display:flex; align-items:center; justify-content:space-between; margin-top:19px; color:rgba(238,245,239,.42); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.pm-card__action b { font-weight:600; }.pm-card__action i { position:relative; width:22px; height:1px; background:currentColor; transition:width .3s,color .3s; }
.pm-card__action i::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid; border-right:1px solid; transform:rotate(45deg); }
.pm-card:hover .pm-card__action i,.pm-card:focus .pm-card__action i,.pm-card.is-open .pm-card__action i { width:33px; color:var(--pm-mint); }
.pm-timeline__footer { max-width:1180px; margin:85px auto 0; padding-top:30px; border-top:1px solid rgba(128,214,168,.12); display:flex; justify-content:space-between; align-items:center; color:rgba(238,245,239,.43); }
.pm-timeline__footer span { color:var(--pm-mint); font-size:10px; letter-spacing:.2em; }.pm-timeline__footer p { margin:0; font-size:13px; }.pm-timeline__footer strong { color:var(--pm-paper); font-weight:600; }
@media (max-width:767px) {
  .pm-timeline { padding:25px 18px 55px; }
  .pm-timeline__rail { left:19px; }.pm-milestone { display:block; min-height:0; padding:0 0 78px 54px; }.pm-milestone:last-child { padding-bottom:0; }
  .pm-milestone__node { left:19px; top:44px; }.pm-card,.pm-milestone:nth-child(odd) .pm-card,.pm-milestone:nth-child(even) .pm-card { width:100%; min-height:225px; padding:24px 22px; transform:none!important; }
  .pm-card__icon { top:59px; right:22px; }.pm-card h3 { font-size:23px; }.pm-timeline__footer { margin-top:75px; }
}
@media (prefers-reduced-motion:reduce) { .pm-timeline * { scroll-behavior:auto!important; animation:none!important; transition-duration:.01ms!important; } .pm-timeline__rail-progress { stroke-dashoffset:0; } }
