/* One About SPA region: a quiet label, editorial heading, body and features.
   Preserve the existing outer gutters and Settings gaps. */
.intro .intro-scene-stage{padding-bottom:var(--spa-space-lg,120px)}
.intro .intro-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,3vw,48px);align-items:start}
.intro .intro-statement{width:auto;max-width:none;margin:0;text-align:left}
.intro .intro-label{display:flex;align-items:center;gap:10px;margin:0;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}
.intro-label::before{content:"";flex:0 0 4px;width:4px;height:4px;background:currentColor}
.intro-copy{min-width:0;width:100%;max-width:none;justify-self:start}
.intro .intro-heading{max-width:32ch;margin:0;color:var(--ink);font-size:clamp(1.75rem,3vw,calc(2.625 * var(--spa-type-unit,1rem)));font-weight:400;line-height:1.14;letter-spacing:-.035em;overflow-wrap:break-word}
.intro .intro-description{max-width:48ch;margin:clamp(36px,4vw,64px) 0 0;padding:0;border:0;color:var(--ink);font-size:max(1rem,var(--spa-type-small,.875rem));font-weight:400;line-height:1.5;letter-spacing:0;overflow-wrap:break-word}
.intro-learn-more-wrap{margin-top:20px}
/* Editorial link is not a filled CTA: keep saved global button colours separate. */
.intro .intro-learn-more{position:relative;display:inline-block;max-width:100%;padding:12px 0;color:var(--ink);font-size:max(1rem,var(--spa-type-small,.875rem));font-weight:400;line-height:1.25;letter-spacing:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-transform:none}
.intro .intro-learn-more:hover{text-decoration-color:rgba(var(--ink-rgb),.55)}
.intro .intro-learn-more:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.intro-cards{--intro-card-gap:10px;display:flex;gap:var(--intro-card-gap);align-items:stretch;margin-top:var(--spa-space-lg,120px)}
.intro-card{flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,var(--paper));color:var(--ink);transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),background-color .25s ease,color .25s ease}
.intro-card[open]{flex-grow:1.8}
/* Reserve the expanded card's full height even when its copy is closed.
   Only width changes on disclosure; unusually long or enlarged text can scroll. */
@media(min-width:761px){
  .intro-card{height:clamp(640px,46vw,700px);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
}
/* The same palette for all three cards, including keyboard interaction. */
.intro-card:has(>summary:focus-visible){background:var(--copper);color:var(--on-accent)}
@media(hover:hover) and (pointer:fine){
  .intro-card:hover{background:var(--copper);color:var(--on-accent)}
}
.intro-card>summary{display:flex;flex-direction:column;min-height:clamp(360px,32vw,500px);padding:clamp(24px,3vw,48px);list-style:none;cursor:pointer}
.intro-card>summary::-webkit-details-marker{display:none}
.intro-card>summary::marker{content:""}
.intro-card>summary:focus-visible{outline:2px solid currentColor;outline-offset:-8px;border-radius:20px}
.intro-card h3{max-width:100%;margin:0;font-size:var(--spa-type-card,clamp(1.5rem,2vw,2rem));font-weight:400;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.intro-card-art{display:block;align-self:center;width:min(100%,220px);height:180px;margin:48px 0;opacity:.64;background:radial-gradient(circle,currentColor 1.2px,transparent 1.6px) 0 0/10px 10px;mask-image:linear-gradient(140deg,transparent,#000 30%,#000 70%,transparent);transform:skewY(-12deg)}
.intro-card-growth .intro-card-art{transform:perspective(400px) rotateY(-32deg) rotateZ(14deg);border-radius:45% 0 45% 0}
.intro-card-connections .intro-card-art{transform:skewY(14deg);mask-image:radial-gradient(ellipse,transparent 18%,#000 20%,#000 55%,transparent 72%)}
.intro-card-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;font-size:.875rem;line-height:1.5;letter-spacing:.02em}
.intro-card-toggle{position:relative;width:36px;height:36px;border:1px solid currentColor;border-radius:50%;flex:none}
.intro-card-toggle::before,.intro-card-toggle::after{content:"";position:absolute;top:50%;left:10px;right:10px;height:1px;background:currentColor}
.intro-card-toggle::after{transform:rotate(90deg);transition:transform .25s ease}
.intro-card[open] .intro-card-toggle::after{transform:rotate(0)}
.intro-card-copy{padding:0 clamp(24px,3vw,48px) 40px}
.intro-card-copy p{max-width:36ch;margin:0;font-size:var(--spa-type-body,1.125rem);line-height:1.5;letter-spacing:-.02em;overflow-wrap:anywhere}
.intro-card[open] .intro-card-copy{animation:intro-card-in .35s ease both}
@keyframes intro-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* All copy stays selectable in Settings, independently of visitor disclosure. */
.intro-cards.is-editor .intro-card{transition:none}
.intro-cards.is-editor .intro-card-copy{animation:none}
@media(max-width:760px){
  .intro .intro-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .intro-copy{max-width:none}
  .intro-cards{flex-direction:column;margin-top:64px}
  .intro-card>summary{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:24px;padding:28px}
  .intro-card h3{grid-column:1}
  .intro-card-art{display:none}
  .intro-card-foot{display:contents}
  .intro-card-foot>span:first-child{grid-row:2;font-size:.875rem}
  .intro-card-toggle{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end}
  .intro-card-copy{padding:4px 28px 36px}
}
@media(prefers-reduced-motion:reduce){.intro-card,.intro-card-toggle::after{transition:none}.intro-card[open] .intro-card-copy{animation:none}}