/* A separate introduction above five priorities: 01/02/03, 04/05/empty.
   No carousel, pinned scene or duplicate animation controller. */
.spa2030-teaser{
  margin-inline:calc(var(--page-left) * -1) calc(var(--page-right) * -1);
  padding:clamp(72px,8vw,128px) var(--section-right) clamp(64px,7vw,112px) var(--page-left);
  background:var(--paper);
  color:var(--ink);
  scroll-margin-top:110px;
}
/* Match About SPA's blue label and decorative square. */
.spa2030-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 clamp(40px,4vw,64px);padding-top:4px;color:var(--copper);font-size:var(--spa-type-label,.875rem);font-weight:400;line-height:1.3;letter-spacing:.02em;text-transform:uppercase}
.spa2030-eyebrow::before{content:"";flex:0 0 4px;width:4px;height:4px;background:currentColor}
/* About SPA has a saved desktop label size of 12px. */
@media(min-width:1025px){.spa2030-eyebrow{font-size:12px}}
.spa2030-teaser-grid{display:block}
.spa2030-overview,.spa2030-priority{min-width:0}
.spa2030-overview{display:flex;flex-direction:column;align-items:flex-start;max-width:48rem;margin-bottom:clamp(56px,5vw,80px)}
.spa2030-teaser h2{margin:0 0 24px;font-weight:400;letter-spacing:-.04em;line-height:1}
.spa2030-heading-lead{display:block;margin:0 0 12px;font-size:clamp(22px,1.8vw,30px);line-height:1.2;letter-spacing:-.025em}
.spa2030-year{display:block;font-size:clamp(84px,7.8vw,150px);line-height:.9;letter-spacing:-.065em;font-variant-numeric:lining-nums}
.spa2030-teaser-copy{min-width:0}
.spa2030-teaser-copy>p{max-width:56ch;margin:0;font-size:1rem;line-height:1.5;font-weight:400;letter-spacing:0;color:rgba(var(--ink-rgb),.7)}
.spa2030-teaser-action{margin-top:24px}
.spa2030-teaser-action a{display:inline-flex;align-items:center;gap:clamp(20px,2vw,36px);max-width:100%;min-height:44px;padding:10px 0;border-bottom:1px solid currentColor;font-size:1rem;line-height:1.4;color:var(--ink);text-decoration:none;transition:color .2s}
.spa2030-teaser-action a span{flex:none;font-size:24px;transition:transform .2s}
.spa2030-teaser-action a:hover{color:var(--copper)}
.spa2030-teaser-action a:hover span{transform:translateX(4px)}
.spa2030-teaser-action a:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
/* Match the About SPA cards' 10px gap in both directions at every size. */
.spa2030-priority-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:10px;list-style:none;margin:0;padding:0}
.spa2030-priority{position:relative;box-sizing:border-box;border-radius:20px;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(480px,37vw,560px);padding:20px clamp(20px,2.2vw,36px) 24px;border:1px solid rgba(var(--ink-rgb),.2);background:transparent;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.spa2030-priority-top{display:flex;flex-direction:column;align-items:flex-start;flex:none;gap:32px;width:100%;margin-bottom:40px}
.spa2030-priority-number{display:block;flex:none;font-size:.875rem;line-height:1.4;color:rgba(var(--ink-rgb),.62);font-variant-numeric:tabular-nums;transition:color .25s}
/* Stack number, dotted geometry and copy down the left side of each taller
   card. Normal flow leaves room for enlarged text and transformed dot edges. */
.spa2030-priority-art{display:block;flex:none;min-width:0;width:clamp(160px,16vw,240px);max-width:100%;height:clamp(128px,12vw,180px);margin:8px 0 24px;pointer-events:none;opacity:.64;background:radial-gradient(circle,currentColor 1.2px,transparent 1.6px) 0 0/10px 10px;-webkit-mask-image:var(--spa2030-art-mask,linear-gradient(140deg,transparent,#000 30%,#000 70%,transparent));mask-image:var(--spa2030-art-mask,linear-gradient(140deg,transparent,#000 30%,#000 70%,transparent));transform:var(--spa2030-art-transform,skewY(-12deg))}
.spa2030-art-fold{--spa2030-art-transform:perspective(400px) rotateY(-32deg) rotateZ(14deg);border-radius:45% 0 45% 0}
.spa2030-art-ring{--spa2030-art-transform:skewY(14deg);--spa2030-art-mask:radial-gradient(ellipse,transparent 18%,#000 20%,#000 55%,transparent 72%)}
.spa2030-art-wave{--spa2030-art-transform:perspective(400px) rotateX(24deg) skewY(-14deg);border-radius:0 45% 0 45%;--spa2030-art-mask:linear-gradient(35deg,transparent,#000 28%,#000 65%,transparent)}
.spa2030-art-prism{--spa2030-art-transform:perspective(400px) rotateY(32deg) rotateZ(-14deg);--spa2030-art-mask:linear-gradient(155deg,transparent,#000 25%,#000 65%,transparent)}
.spa2030-priority-copy{margin-top:auto;max-width:34ch}
.spa2030-priority-copy h3{margin:0 0 12px;font-size:clamp(23px,1.85vw,32px);font-weight:400;line-height:1.15;letter-spacing:-.035em;overflow-wrap:break-word}
.spa2030-priority-copy p{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;color:rgba(var(--ink-rgb),.65);transition:color .25s ease}
@media(hover:hover) and (pointer:fine){
  .spa2030-priority:hover{background:var(--copper);color:var(--on-accent);border-color:var(--copper)}
  .spa2030-priority:hover :is(.spa2030-priority-number,.spa2030-priority-copy h3,.spa2030-priority-copy p){color:inherit}
}
@media(max-width:1024px){
  .spa2030-teaser{margin-inline:0;padding-inline:24px}
  .spa2030-priority-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spa2030-priority{min-height:460px}
  .spa2030-year{font-size:clamp(96px,14vw,136px)}
}
@media(max-width:650px){
  .spa2030-teaser{padding-block:64px}
  .spa2030-eyebrow{margin-bottom:40px}
  .spa2030-priority-strip{grid-template-columns:1fr}
  .spa2030-overview{margin-bottom:48px}
  .spa2030-year{font-size:clamp(96px,25vw,136px)}
  .spa2030-priority{min-height:420px;padding-left:24px}
  .spa2030-priority-top{gap:24px;margin-bottom:32px}
  .spa2030-priority-art{width:160px;height:120px;background-size:8px 8px}
  .spa2030-priority-copy{max-width:36ch}
  .spa2030-priority-copy h3{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){.spa2030-teaser-action a,.spa2030-teaser-action a span,.spa2030-priority,.spa2030-priority-number,.spa2030-priority-copy p{animation:none;transition:none}}