/* Original motion direction: a drawn path, staggered type and small scroll offsets.
   Content is visible by default. No loader, scroll lock or compulsory animation. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--page-progress:0}
.c-hero{isolation:isolate}
.hero-ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;transform:translate3d(0,var(--ribbon-y,0px),0)}
.hero-ribbon-path{stroke:var(--red);stroke-width:70;stroke-linecap:round;opacity:.085}
.headline-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;color:var(--red)}
.headline-line:last-child{color:var(--ink)}
.headline-line>span{display:block}
.portrait-motion-wrap{grid-column:span 3;min-width:0;min-height:0;transform:translate3d(0,var(--drift-y,0px),0)}
.portrait-motion-wrap .c-portrait{height:100%;width:100%}
.c-hero-bottom{position:relative;z-index:2}
.header:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--red);transform:scaleX(var(--page-progress));transform-origin:left;pointer-events:none}
.explore-card{isolation:isolate;overflow:hidden;border-radius:10px;transition:transform .4s var(--motion-ease),box-shadow .4s,border-color .3s,background-color .3s}
.explore-card:before{content:"01";position:absolute;z-index:-1;right:9px;top:7px;font:900 78px/1 Arial,sans-serif;letter-spacing:-.06em;color:#edf5f9;transform:translateY(8px);transition:transform .5s var(--motion-ease),color .4s}
.explore-card:nth-child(2):before{content:"02";color:#fcefed}
.explore-card:nth-child(3):before{content:"03";color:#faf5e1}
.explore-card:nth-child(4):before{content:"04";color:#fff0f3}
.explore-kicker,.explore-card h3,.explore-card p{position:relative;z-index:1}
.explore-arrow{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#fff3f0;font-size:20px;transition:transform .4s var(--motion-ease),background-color .3s,color .3s}
.c-primary,.header-entry,.compact-entry>a{transition:background-color .25s,color .25s,transform .4s var(--motion-ease)}
.c-primary>span,.header-entry>span,.compact-entry>a>span,.page-next>a>span[aria-hidden]{display:inline-block;transition:transform .4s var(--motion-ease)}
.c-person{transition:transform .45s var(--motion-ease),box-shadow .45s}
/* Move a complete card instead of enlarging the face: preserve headroom. */
.c-person:hover img{transform:none}
.work-tabs button{transition:background-color .25s,color .25s}
.work-tabs button[aria-selected=true]:after{transform-origin:left}
.motion-toggle{background:transparent;border:1px solid #d7dce0;border-radius:20px;font-size:10px;padding:8px 13px;line-height:1.4;white-space:nowrap}
.motion-toggle[aria-pressed=true]{background:#edf1f3}
.motion-toggle:disabled{cursor:default;color:#697078}
.footer-bottom{flex-wrap:wrap}

@media(prefers-reduced-motion:no-preference){
  .motion-active .headline-line>span{animation:headline-arrive .9s var(--motion-ease) both}
  .motion-active .headline-line:nth-child(2)>span{animation-delay:.13s}
  .motion-active .intro-copy>.eyebrow{animation:soft-arrive .65s var(--motion-ease) both}
  .motion-active .intro-lead{animation:soft-arrive .7s .4s var(--motion-ease) both}
  .motion-active .hero-ribbon-path{animation:draw-path 1.5s .05s var(--motion-ease) both}
  .motion-active .intro-scroll-arrow{animation:scroll-hint 1.4s 1.5s ease-in-out 2}
  .motion-active .mobile-menu:not([hidden]){animation:soft-arrive .25s var(--motion-ease) both}
  .motion-active .mobile-menu:not([hidden]) a{animation:soft-arrive .35s var(--motion-ease) both}
  .motion-active .mobile-menu a:nth-child(2){animation-delay:.035s}
  .motion-active .mobile-menu a:nth-child(3){animation-delay:.07s}
  .motion-active .mobile-menu a:nth-child(4){animation-delay:.105s}
  .motion-active .mobile-menu a:nth-child(5){animation-delay:.14s}
  .motion-active .work-panel:not([hidden])>.work-panel-copy{animation:soft-arrive .4s var(--motion-ease) both}
  .motion-active .work-panel:not([hidden])>img{animation:panel-arrive .5s var(--motion-ease) both}
  .motion-active .work-tabs button[aria-selected=true]:after{animation:tab-line .35s var(--motion-ease) both}
  .motion-active details[open]>.business-detail,.motion-active details[open]>.growth-cards,.motion-active .faq-list details[open]>p{animation:soft-arrive .3s var(--motion-ease) both}
}
@media(hover:hover) and (pointer:fine){
  .explore-card:hover{transform:translateY(-7px);box-shadow:0 13px 28px #15232d0d;border-color:#f1aaa4}
  .explore-card:hover:before{transform:translateY(0)}
  .explore-card:hover .explore-arrow{transform:rotate(45deg);background:var(--red);color:#fff}
  .c-primary:hover>span,.header-entry:hover>span,.compact-entry>a:hover>span{transform:translate(3px,-3px)}
  .page-next>a:first-child:hover>span[aria-hidden]{transform:translateX(-4px)}
  .page-next>a:last-child:hover>span[aria-hidden]{transform:translateX(4px)}
  .c-person:hover{transform:translateY(-5px);box-shadow:0 12px 24px #15232d0c}
}
.explore-card:focus-visible .explore-arrow{background:var(--red);color:white}
@keyframes headline-arrive{from{transform:translateY(108%)}to{transform:translateY(0)}}
@keyframes soft-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes draw-path{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes scroll-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes panel-arrive{from{opacity:.3;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes tab-line{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@media(max-width:800px){.hero-ribbon{opacity:.7}.hero-ribbon-path{stroke-width:52}.explore-card:before{font-size:68px}.footer-bottom{gap:14px}}
@media(max-width:540px){.explore-card:before{font-size:57px;right:6px}.explore-arrow{width:25px;height:25px;font-size:18px}.motion-toggle{font-size:9px;padding:7px 11px}}
html[data-motion="reduced"]{scroll-behavior:auto}
html[data-motion="reduced"] *,html[data-motion="reduced"] *:before,html[data-motion="reduced"] *:after{animation:none!important;transition:none!important}
html[data-motion="reduced"] .portrait-motion-wrap,html[data-motion="reduced"] .hero-ribbon,html[data-motion="reduced"] .c-person:hover,html[data-motion="reduced"] .explore-card:hover{transform:none}
@media(prefers-reduced-motion:reduce){.portrait-motion-wrap,.hero-ribbon,.c-person:hover,.explore-card:hover{transform:none}}
@media print{.motion-toggle,.hero-ribbon,.header:after{display:none!important}.portrait-motion-wrap{transform:none!important}}
