.about-hero .hero-ctas{flex-wrap:wrap;gap:12px}
.about-story{--about-stage-h:136px;--about-stage-top:calc(var(--about-nav-h,var(--nav-h)) + var(--dock-h) + 12px)}
.about-story-intro{max-width:68ch;margin-inline:auto;text-align:center;line-height:1.7}
.about-chapter-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:12px 4px 18px}
.about-chapter-nav a{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:12px 16px;border:1px solid #1a726d38;border-radius:999px;color:inherit;text-decoration:none;font-weight:700;min-height:44px}
.about-chapter-nav a span{font-size:.8em;opacity:.65}
.about-chapter-nav a[aria-current]{background:#1a726d;color:#fff;border-color:#1a726d}
.about-chapter-nav a:focus-visible,.about-chapter:focus-visible{outline:3px solid #1fb6ab;outline-offset:3px}
.about-story-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(24px,6vw,80px);align-items:start}
.about-story-stage{position:sticky;top:var(--about-stage-top);align-self:start;z-index:5;margin:28px 0 0;min-width:0;border-radius:36px;padding:28px;background:#e7f4ec;text-align:center;overflow:hidden;color:#153c34;box-shadow:0 8px 24px #153c3410}
/* Only the illustrated card turns. Its caption and the chapter links stay
   upright, and overlapping decoded faces keep artwork on screen throughout. */
.about-story-card{position:relative;display:grid;width:min(100%,340px);aspect-ratio:1;margin:auto;perspective:1100px;isolation:isolate;z-index:1}
.about-story-card>img{grid-area:1/1;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:22px;backface-visibility:hidden;box-shadow:0 9px 22px #153c3421;transform-origin:50% 50%}
.about-story-card.is-turning>img{will-change:transform,filter}
.about-story-card>img.is-outgoing{z-index:2;pointer-events:none}
.about-story-stage figcaption{position:relative;display:grid;gap:8px;margin:18px 0 14px;z-index:1}
.about-story-stage figcaption span{font-size:.78rem;letter-spacing:.14em;font-weight:700}
.about-story-stage figcaption b{font-size:1.15rem;line-height:1.25}
.about-scene-decoration span{position:absolute;border-radius:50%;background:#c1e4d0;width:130px;height:130px;left:-35px;top:40px;transform:rotate(-12deg)}
.about-scene-decoration span:nth-child(2){background:#ffe8a9;width:210px;height:210px;left:auto;right:-85px;top:120px}
.about-scene-decoration span:nth-child(3){background:#b7deda;width:70px;height:70px;left:35px;top:auto;bottom:60px}
.about-paw-trail{position:relative;display:flex;justify-content:center;gap:16px}
.about-paw-trail i{display:block;width:18px;height:20px;background:#153c3426;mask:var(--paw-mask) center/contain no-repeat}
.about-paw-trail i.is-current{background:#1a726d;transform:rotate(-12deg)}
.about-chapter{padding:46px 0;scroll-margin-top:calc(var(--about-nav-h,var(--nav-h)) + var(--dock-h) + 26px);border-bottom:1px solid #1a726d24}
.about-chapter:last-child{border-bottom:0;min-height:var(--about-stage-h)}
.about-chapter h3{font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.22}
.about-chapter p:not(.kicker){max-width:58ch;line-height:1.85}
.about-values .about-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}
.about-value-grid article{display:flex;flex-direction:column;align-items:center;padding:24px;border-radius:28px;background:#ffffff09;border:1px solid #ffffff20;text-align:center}
.about-value-grid img{display:block;width:144px;height:144px;object-fit:contain;margin-inline:auto}
.about-value-grid h3{font-size:1.25rem;max-width:25ch}
.about-value-grid p{max-width:34ch;line-height:1.8}
#meet-dogoos .prose{margin-inline:auto}
#meet-dogoos .hero-ctas{justify-content:center}
.about-story-stage[data-scene='1']{background:#fff0d5}
.about-story-stage[data-scene='2']{background:#e8edf9}
.about-story-stage[data-scene='3']{background:#e3f2eb}
html[data-theme='dark'] .about-chapter-nav a{border-color:#9ce3cb55}
html[data-theme='dark'] .about-chapter{border-color:#9ce3cb30}

/* Keep the story card in view on phones and short landscapes. The measured
   stage height also clears each native fragment destination. */
@media(max-width:760px),(max-height:600px){
  .about-story-layout{grid-template-columns:1fr;gap:12px}
  .about-story-stage{position:sticky;top:var(--about-stage-top);margin:0;display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:14px 18px;border-radius:24px}
  .about-story-card{grid-column:1;grid-row:1/3;width:120px}
  .about-story-card>img{border-radius:14px;box-shadow:0 4px 12px #153c3421}
  .about-story-stage figcaption{grid-column:2;grid-row:1;text-align:left;gap:4px;margin:0;align-self:end}
  .about-story-stage figcaption b{font-size:1rem}
  .about-story-stage figcaption span{font-size:.7rem}
  .about-paw-trail{grid-column:2;grid-row:2;justify-content:flex-start;gap:10px;margin-top:8px;align-self:start}
  .about-paw-trail i{width:15px;height:16px}
  .about-chapter{padding:30px 0;scroll-margin-top:calc(var(--about-stage-top) + var(--about-stage-h) + 20px)}
  .about-values .about-value-grid{grid-template-columns:1fr;gap:16px}
  .about-value-grid article{padding:24px}
  .about-value-grid img{width:120px;height:120px}
  .about-value-grid h3{margin-top:16px}
  .about-value-grid p{max-width:44ch;margin-bottom:0}
  .about-chapter-nav a{padding:10px 14px}
  .about-scene-decoration span{opacity:.45}
}
@media(max-width:440px){
  .about-chapter-nav a{flex:1 1 calc(50% - 8px);min-width:0;gap:6px;padding:10px 8px;font-size:.85rem}
}
@media(max-width:360px){
  .about-story-stage{grid-template-columns:96px minmax(0,1fr);gap:0 12px;padding:12px 14px}
  .about-story-card{width:96px}
  .about-story-stage figcaption b{font-size:.94rem}
  .about-value-grid article{padding:20px}
}
@media(max-height:500px){
  .about-story-stage{grid-template-columns:64px minmax(0,1fr);padding-block:10px}
  .about-story-card{width:64px}
  .about-paw-trail{margin-top:5px}
  .about-story-stage figcaption{gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .about-story-card>img{transform:none!important;filter:none!important}
  .about-paw-trail i.is-current{transform:none}
}