/* Decorative motion is progressive enhancement; the static page stays complete. */
.header-lockup { display:flex; align-items:center; flex:none; width:230px; }
.header-lockup .brand { display:flex; align-items:center; min-height:44px; flex:1; }
.header-wordmark { display:block; width:166px; height:auto; }
@media (min-width:761px) and (max-width:900px) {
  .header { flex-wrap:wrap; padding-top:16px; padding-bottom:20px; gap:12px; }
  .header nav { width:100%; justify-content:space-between; }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.mascot-stage {
  position: relative; height: var(--mascot-height,78px); overflow: hidden;
  contain: layout paint; isolation: isolate;
}
.mascot-companion {
  position: absolute; left: var(--mascot-inset,12px); bottom: 5px;
  width: var(--mascot-size,64px); height: var(--mascot-size,64px);
  display: block; transform-origin: 50% 85%; pointer-events: none;
}
.mascot-companion img { display:block; width:100%; height:100%; object-fit:contain; }
.mascot-touch {
  position:absolute; bottom:2px; left:var(--mascot-inset,12px);
  width:var(--mascot-mobile-size,52px); height:var(--mascot-mobile-size,52px);
  min-width:44px; min-height:44px; border:0; background:none; border-radius:8px;
  cursor:pointer; touch-action:manipulation;
}
.mascot-touch[hidden] { display:none; }
.mascot-touch:focus-visible { outline:2px solid var(--forest); outline-offset:-2px; }
.mascot-card-edge {
  height:var(--mascot-card-height,26px); position:relative; overflow:hidden;
  pointer-events:none; margin-top:5px;
}
.mascot-card-edge img {
  position:absolute; right:12px; top:0; width:var(--mascot-card-size,34px); height:var(--mascot-card-size,34px);
  object-fit:contain; transform:translateY(29px) rotate(-5deg); opacity:0;
  transition:transform var(--mascot-card-time,450ms) ease,opacity var(--mascot-card-time,450ms) ease;
}
@media (min-width:761px) and (hover:hover) and (pointer:fine) {
  .project-card:is(:hover,:focus-within) .mascot-card-edge img { transform:translateY(2px) rotate(-3deg); opacity:1; }
}
@media (max-width:760px), (hover:none), (pointer:coarse) {
  .mascot-stage { height:var(--mascot-mobile-height,64px); }
  .mascot-companion { width:var(--mascot-mobile-size,52px); height:var(--mascot-mobile-size,52px); }
  .mascot-card-edge { display:none; }
}
.mascot-tab-hidden .mascot-card-edge img { transition:none; }
/* A bounded icon slot keeps all movement clear of the wordmark and navigation. */
.header-lockup .mascot-stage { width:64px; height:64px; flex:none; }
.header-lockup .mascot-companion { left:0; bottom:0; width:100%; height:100%; transform-origin:50% 75%; }
.header-lockup .mascot-touch { inset:0; width:100%; height:100%; }
.motion-pending { opacity: 0; transform: translateY(20px); }
.motion-reveal { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.25,1); }
.text-link, .nav-cta { transition: background-color .2s, color .2s, gap .25s; }
.text-link > span, .nav-cta > span, .contact-bottom > a > span {
  display: inline-block; transition: transform .25s cubic-bezier(.2,.7,.25,1);
}
.text-link:is(:hover,:focus-visible) > span,
.nav-cta:is(:hover,:focus-visible) > span,
.contact-bottom > a:is(:hover,:focus-visible) > span { transform: translate(3px,-3px); }
.project-visual { transition: transform .35s ease, box-shadow .35s ease; }
.project-card:focus-within .project-visual { transform: translateY(-5px); box-shadow: 0 14px 25px #10362c12; }
@media (hover:hover) and (pointer:fine) {
  .project-card:hover .project-visual { transform: translateY(-5px); box-shadow: 0 14px 25px #10362c12; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-pending { opacity: 1; transform: none; }
  .mascot-companion, .project-visual,
  .text-link > span, .nav-cta > span, .contact-bottom > a > span { transform: none !important; }
  .mascot-companion { opacity:1 !important; }
  .mascot-card-edge { display:none; }
}