/* Attachment points are measured on the actual sprite, including its margins. */
.tiger-rig{
  --wing-left-x:44.5%;--wing-left-y:36%;--wing-left-width:33%;--wing-left-height:25%;--wing-left-angle:-10deg;
  --wing-right-x:62.5%;--wing-right-y:35.5%;--wing-right-width:29%;--wing-right-height:23%;--wing-right-angle:13deg;
}
.rabbit-rig{
  --wing-left-x:46.5%;--wing-left-y:38%;--wing-left-width:32%;--wing-left-height:24%;--wing-left-angle:-6deg;
  --wing-right-x:60%;--wing-right-y:37.5%;--wing-right-width:28%;--wing-right-height:22%;--wing-right-angle:16deg;
}
.bear-rig{
  --wing-left-x:40.5%;--wing-left-y:39%;--wing-left-width:32%;--wing-left-height:26%;--wing-left-angle:-15deg;
  --wing-right-x:59.5%;--wing-right-y:39%;--wing-right-width:35%;--wing-right-height:28%;--wing-right-angle:5deg;
}
.animal-rig .wing-joint{
  position:absolute;display:block;z-index:1;pointer-events:none;opacity:0;
  transform-origin:0 0;transform:rotate(var(--joint-angle)) scale(var(--wing-open,0));
  will-change:transform,opacity;
}
.wing-joint--left{
  --joint-angle:var(--wing-left-angle);
  left:var(--wing-left-x);top:var(--wing-left-y);
  width:var(--wing-left-width);height:var(--wing-left-height);
}
.wing-joint--right{
  --joint-angle:var(--wing-right-angle);
  left:var(--wing-right-x);top:var(--wing-right-y);
  width:var(--wing-right-width);height:var(--wing-right-height);
}
.animal-rig .wing-joint .drawn-wing{
  position:absolute;inset:auto;left:0;top:0;width:100%;height:100%;
  opacity:1;scale:1;rotate:0deg;animation:none;
  transform-box:border-box;transform-origin:0 0;overflow:visible;
  stroke:#15293f;stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round;
  filter:url(#brush-edge);
}
.wing-joint--left .drawn-wing{transform:translate(-91.666667%,-91.666667%)}
.wing-joint--right .drawn-wing{transform:translate(-8.333333%,-91.666667%)}
.has-wings .wing-joint--left{animation:shoulder-flap-left 1.35s ease-in-out infinite}
.has-wings .wing-joint--right{animation:shoulder-flap-right 1.35s ease-in-out infinite}
@keyframes shoulder-flap-left{
  0%,100%{transform:rotate(var(--joint-angle)) scale(var(--wing-open,0))}
  50%{transform:rotate(calc(var(--joint-angle) + 5deg)) scale(var(--wing-open,0))}
}
@keyframes shoulder-flap-right{
  0%,100%{transform:rotate(var(--joint-angle)) scale(var(--wing-open,0))}
  50%{transform:rotate(calc(var(--joint-angle) - 5deg)) scale(var(--wing-open,0))}
}

/* A quiet horizontal divider, with a slow English-only message. */
.marquee{transform:none;background:#eeeee4;color:#5f6d5f;padding:8px 0;border-block:1px solid #dedfd2}
.marquee-track{gap:31px;animation-duration:65s}
.marquee span{font-size:10px;font-weight:500;letter-spacing:.18em;line-height:1.3}
.marquee svg{width:8px;height:8px;color:#a8b19b}
@media(max-width:600px){
  .marquee{padding:7px 0;transform:none}
  .marquee span{font-size:9px;letter-spacing:.15em}
  .marquee-track{gap:25px}
  .marquee svg{width:7px;height:7px}
}
.button:hover .button-icon svg{transform:none}
.plan-link:hover svg{transform:none}
.solution-tabs button[aria-selected=true]>svg{transform:none}
.flow-link{display:flex;align-items:center;justify-content:center;min-width:9px}
.flow-link:before{content:'';display:block;width:9px;height:1px;background:#9aaa9d}
.story-invitation{gap:0}
@media(prefers-reduced-motion:reduce){
  .animal-rig .wing-joint{opacity:1;animation:none;transform:rotate(var(--joint-angle)) scale(1)}
  .animal-rig .wing-joint .drawn-wing{filter:none}
}

/* Keep mobile headings on one or two full lines, without truncating text. */
@media(max-width:600px){
  .story-intro h1{font-size:clamp(53px,14.4vw,80px);line-height:1.18;white-space:normal}
  .story-title-star{width:28px;height:28px;left:2.65em;bottom:.25em}
  .story-chapter h2{font-size:clamp(22px,6.2vw,28px);line-height:1.75;letter-spacing:-.04em}
  .about-layout h2{font-size:clamp(25px,7vw,30px);line-height:1.7;letter-spacing:-.045em}
  .section-heading h2{font-size:clamp(23px,6.35vw,28px);line-height:1.7;letter-spacing:-.035em}
  .approach-content h2{font-size:clamp(24px,6.5vw,29px);line-height:1.75;letter-spacing:-.035em}
  .difference-top h2,.faq-heading h2{font-size:clamp(24px,6.5vw,28px);line-height:1.65}
  .contact-content h2{font-size:clamp(25px,6.7vw,30px);line-height:1.65}
  .contact-dialog h2{font-size:23px;line-height:1.65;letter-spacing:-.035em}
  .producer-bio h3{font-size:22px}
  .producer-bio h3>span{font-size:10px;letter-spacing:.045em}
  .hand-circle:after{top:6px;bottom:5px;left:-8%;right:-8%}
  .blue-underline:after{height:6px;bottom:7px}
}

/* Keep the opening copy in normal flow and the animals in front of their tasks. */
.story-description{margin-top:20px}
.story-invitation{margin-top:24px}
.task-note{z-index:5}
@media(max-width:600px){
  .story-description{margin-top:12px}
  .story-invitation{position:static;flex-direction:row;align-items:flex-start;margin-top:12px;text-align:left}
}

/* A centered example panel with the same amount of space on either side. */
.solutions .section-heading{flex-direction:column;align-items:center;text-align:center;gap:20px}
.solutions .section-heading>p{max-width:none;padding:0;margin:0}
.solution-explorer{grid-template-columns:minmax(0,1fr);gap:24px;width:100%;max-width:960px;margin-inline:auto}
.solution-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:0;margin:0;min-width:0}
.solution-tabs>button{width:100%;min-width:0;justify-content:center;padding:16px 0;gap:12px}
.solution-tabs button>svg{margin-left:0;flex-shrink:0}
.explorer-note,.explorer-wing{display:none}
.solution-panel{width:100%;min-width:0}
@media(max-width:600px){
  .solutions .section-heading{display:flex;gap:18px}
  .solution-explorer{gap:18px}
  .solution-tabs{gap:9px}
  .solution-tabs>button{font-size:clamp(9px,2.6vw,11px);gap:3px;padding:12px 0;min-height:46px;letter-spacing:-.04em}
  .solution-tabs button>span{display:none}
  .solution-tabs button>svg{width:11px;height:11px}
}

/* Keep the caption over the empty upper wall, above the meeting participants. */
.portal-photo{object-position:50% 55%}
.portal-wash{background:linear-gradient(180deg,#152a3c88,#152a3c55 33%,#152a3c00 56%,#faf8ef10)}
.portal-word{top:12%;bottom:auto;left:12%;color:#fffef4;text-shadow:0 2px 10px #142c3e80}
.future-landscape{object-position:50% 55%;filter:saturate(.85);opacity:.65}
@media(max-width:600px){
  .portal-word{top:12%;bottom:auto;left:10%}
  .future-landscape{object-position:52% center;opacity:.55}
}