/* Retain the approved CTA while the hero uses the previous static image.
   The film controller/assets remain archived, not mounted on the page. */
.hero__cta .hero-capsule.btn--fill {
  min-width: 212px; gap: 12px; padding: 13px 24px; border-radius: 10px;
  background: rgba(var(--bg1-rgb), .74); border: 1px solid var(--ink3);
  color: var(--ink); font: 11px/1.5 var(--mono); letter-spacing: .045em;
  box-shadow: inset 0 1px 0 rgba(var(--ink-rgb, 235,235,235), .04);
}
.hero-capsule__dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  opacity: .8; flex: 0 0 auto;
  transition: transform 480ms var(--ease-geo), background-color 320ms ease, opacity 320ms ease, box-shadow 320ms ease;
}
.hero__cta .hero-capsule.btn--fill::after { content: '→'; right: 17px; transform: translateX(-5px); }
.hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) { transform: translateY(-1px); border-color: var(--ink); background: rgba(var(--bg1-rgb), .86); }
.hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) :is(.btn__label,.hero-capsule__dot) { transform: translateX(-4px); }
.hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) .hero-capsule__dot {
  background: var(--ok); opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 9%, transparent), 0 0 9px color-mix(in srgb, var(--ok) 18%, transparent);
}
.hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::after { transform: translateX(0); }
/* Desktop-only geometry refinement; retain the approved type and motion. */
@media (min-width: 961px) {
  .hero__cta .hero-capsule.btn--fill { min-width: 188px; min-height: 38px; padding: 9px 20px; }
  .hero__cta .cta-t { min-width: 164px; min-height: 38px; height: 38px; gap: 22px; }
  html[data-vl="ivory"] .hero__cta .hero-capsule.btn--fill {
    background: #22221f; border-color: #22221f; color: #f3efe7;
    box-shadow: inset 0 1px 0 #ffffff0c;
  }
  html[data-vl="ivory"] .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) {
    background: #30302b; border-color: #30302b; color: #fffaf1;
  }
  html[data-vl="ivory"] .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) .hero-capsule__dot { background: #99c9a7; }
}
/* Keep the action legible without positional motion in either reduced mode. */
html[data-motion="reduced"] .hero__cta .hero-capsule.btn--fill,
html[data-motion="reduced"] .hero__cta .hero-capsule.btn--fill :is(.btn__label,.hero-capsule__dot),
html[data-motion="reduced"] .hero__cta .hero-capsule.btn--fill::after { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero__cta .hero-capsule.btn--fill,
  .hero__cta .hero-capsule.btn--fill :is(.btn__label,.hero-capsule__dot),
  .hero__cta .hero-capsule.btn--fill::after { transform: none !important; }
}

/* c66: the director wants Work to lead again. A quiet filled capsule,
   unchanged type and destination; the secondary project link stays lighter. */
@media (min-width: 961px) {
  .hero__cta .hero-capsule.btn--fill,
  html[data-vl="ivory"] .hero__cta .hero-capsule.btn--fill {
    min-width: 204px; min-height: 44px; height: 44px; border-radius: 999px;
    background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg);
    box-shadow: none; transform: none; justify-content: flex-start;
    padding: 10px 50px 10px 23px;
  }
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible),
  html[data-vl="ivory"] .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) {
    background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); transform: none;
  }
  .hero__cta .hero-capsule .hero-capsule__dot { display: none; }
  .hero__cta .hero-capsule.btn--fill::before {
    content: ''; position: absolute; right: 7px; top: 7px; width: 28px; height: 28px;
    border: 1px solid currentColor; border-radius: 50%; opacity: .18;
    transform: none; pointer-events: none; transition: opacity 240ms ease;
  }
  .hero__cta .hero-capsule.btn--fill::after {
    right: 14px; top: calc(50% - 7px); font: 14px/1 var(--sans);
    opacity: .8; transform: translateX(0);
  }
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::before { opacity: .4; transform: none; }
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::after { opacity: 1; transform: translateX(2px); }
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) .btn__label { transform: none; }
  .hero__cta .hero-capsule.btn--fill:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; border-radius: 999px; }
}
html[data-motion="reduced"] .hero__cta .hero-capsule.btn--fill::before { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__cta .hero-capsule.btn--fill::before { transition: none; transform: none; }
}

/* c75: the work CTA reads as one centred label/knob group at rest.
   Only the knob travels on hover/focus; the label and outer capsule stay put. */
@media (min-width: 961px) {
  .hero__cta .hero-capsule.btn--fill,
  html[data-vl="ivory"] .hero__cta .hero-capsule.btn--fill {
    --hero-slider-inset: 27px;
    --hero-slider-travel: 8px;
    padding-left: var(--hero-slider-inset);
  }
  html[lang="en"] .hero__cta .hero-capsule.btn--fill {
    --hero-slider-inset: 38px;
    --hero-slider-travel: 8px;
  }
  .hero__cta .hero-capsule.btn--fill::before {
    right: var(--hero-slider-inset);
    transition: opacity 240ms ease, transform 560ms var(--ease-geo);
  }
  .hero__cta .hero-capsule.btn--fill::after {
    right: calc(var(--hero-slider-inset) + 7px);
    transition: opacity 240ms ease, transform 560ms var(--ease-geo);
  }
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::before,
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::after {
    transform: translateX(var(--hero-slider-travel));
  }
}
html[data-motion="reduced"] .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::before,
html[data-motion="reduced"] .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::after {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::before,
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible)::after {
    transform: none !important;
  }
}

/* c85: slide to open, not stretch. The 28px head and arrow travel together;
   a hairline wake clears before they settle. Rest geometry stays unchanged. */
@media (min-width: 961px) {
  .hero__cta .hero-capsule .hero-capsule__dot {
    display: block; position: absolute;
    right: calc(var(--hero-slider-inset) - var(--hero-slider-travel) + 14px);
    top: calc(50% - .5px);
    width: var(--hero-slider-travel); height: 1px; border-radius: 1px;
    background: currentColor; opacity: 0; pointer-events: none;
    transform: scaleX(0); transform-origin: left; transition: none;
  }
  .hero__cta .hero-capsule.btn--fill:is(:hover,:focus-visible) .hero-capsule__dot {
    background: currentColor; opacity: 0; box-shadow: none; transform: scaleX(0);
    animation: hero-slider-wake 560ms var(--ease-geo) both;
  }
}
@keyframes hero-slider-wake {
  0% { opacity: 0; transform: scaleX(0); }
  30% { opacity: .14; }
  70% { opacity: .06; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
html[data-motion="reduced"] .hero__cta .hero-capsule .hero-capsule__dot {
  display: none; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta .hero-capsule .hero-capsule__dot { display: none; animation: none !important; }
}